Email invoice layout

lib/ui/app/invoice/invoice_email_view.dart

@@ -9,6 +9,7 @@ import 'package:invoiceninja_flutter/ui/app/loading_indicator.dart';
 import 'package:invoiceninja_flutter/ui/app/edit_scaffold.dart';
 import 'package:invoiceninja_flutter/ui/settings/templates_and_reminders.dart';
 import 'package:invoiceninja_flutter/utils/localization.dart';
+import 'package:invoiceninja_flutter/utils/platforms.dart';
 import 'package:invoiceninja_flutter/utils/templates.dart';
 
 class InvoiceEmailView extends StatefulWidget {
@@ -118,19 +119,12 @@ class _InvoiceEmailViewState extends State<InvoiceEmailView>
         });
   }
 
-  Widget _buildPreview(BuildContext context) {
+  Widget _buildTemplateDropdown(BuildContext context) {
     final localization = AppLocalization.of(context);
 
-    return Column(
+    return Padding(
-      mainAxisSize: MainAxisSize.max,
+      padding: const EdgeInsets.symmetric(horizontal: 16),
-      children: <Widget>[
+      child: DropdownButtonHideUnderline(
-        Container(
-          color: Theme.of(context).backgroundColor,
-          child: Padding(
-            padding: const EdgeInsets.all(16.0),
-            child: Row(
-              children: <Widget>[
-                DropdownButtonHideUnderline(
         child: DropdownButton<EmailTemplate>(
           value: selectedTemplate,
           onChanged: (template) {
@@ -173,21 +167,18 @@ class _InvoiceEmailViewState extends State<InvoiceEmailView>
           ],
         ),
       ),
-                Expanded(
+    );
-                  child: Container(),
+  }
-                ),
+
-              ],
+  Widget _buildPreview(BuildContext context) {
-            ),
+    if (widget.viewModel.isLoading) {
-          ),
+      return LoadingIndicator();
-        ),
+    }
-        Expanded(
+
-          child: EmailPreview(
+    return EmailPreview(
       isLoading: _isLoading,
       subject: _subjectPreview,
       body: _bodyPreview,
-          ),
-        ),
-      ],
     );
   }
 
@@ -247,7 +238,9 @@ class _InvoiceEmailViewState extends State<InvoiceEmailView>
         title: localization.sendEmail,
         onCancelPressed: (context) =>
             viewEntity(context: context, entity: invoice),
-        appBarBottom: TabBar(
+        appBarBottom: isDesktop(context)
+            ? null
+            : TabBar(
                 controller: _controller,
                 tabs: [
                   Tab(text: localization.preview),
@@ -260,12 +253,34 @@ class _InvoiceEmailViewState extends State<InvoiceEmailView>
           viewModel.onSendPressed(context, selectedTemplate,
               _subjectController.text, _bodyController.text);
         },
-        body: viewModel.isLoading
+        body: isDesktop(context)
-            ? LoadingIndicator()
+            ? Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        _buildTemplateDropdown(context),
+                        _buildEdit(context),
+                      ],
+                    ),
+                  ),
+                  Expanded(
+                    child: _buildPreview(context),
+                  ),
+                ],
+              )
             : TabBarView(
                 controller: _controller,
                 children: [
-                  _buildPreview(context),
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      _buildTemplateDropdown(context),
+                      Expanded(child: _buildPreview(context)),
+                    ],
+                  ),
                   _buildEdit(context),
                   //_buildHistory(context),
                 ],

lib/ui/app/main_screen.dart

@@ -55,13 +55,18 @@ class MainScreen extends StatelessWidget {
       Widget screen = BlankScreen();
 
       bool isFullScreen = false;
+      bool isEdit = false;
+      bool isEmail = false;
+
       if (prefState.isDesktop) {
+        isEdit = subRoute == '/edit';
+        isEmail = subRoute == '/email';
         if ([
               InvoiceScreen.route,
               QuoteScreen.route,
               CreditScreen.route,
             ].contains(mainRoute) &&
-            subRoute == '/edit') {
+            (isEdit || isEmail)) {
           isFullScreen = true;
         }
       }
@@ -73,13 +78,13 @@ class MainScreen extends StatelessWidget {
       if (isFullScreen) {
         switch (mainRoute) {
           case InvoiceScreen.route:
-            screen = InvoiceEditScreen();
+            screen = isEmail ? InvoiceEmailScreen() : InvoiceEditScreen();
             break;
           case QuoteScreen.route:
-            screen = QuoteEditScreen();
+            screen = isEmail ? QuoteEmailScreen() : QuoteEditScreen();
             break;
           case CreditScreen.route:
-            screen = CreditEditScreen();
+            screen = isEmail ? CreditEmailScreen() : CreditEditScreen();
             break;
           default:
             switch (uiState.currentRoute) {

lib/ui/invoice/invoice_email_vm.dart

@@ -23,7 +23,7 @@ class InvoiceEmailScreen extends StatelessWidget {
       onInit: (Store<AppState> store) {
         final state = store.state;
         final invoiceId = state.uiState.invoiceUIState.selectedId;
-        final invoice = state.invoiceState.map[invoiceId];
+        final invoice = state.invoiceState.get(invoiceId);
         final client = state.clientState.get(invoice.clientId);
         if (client.areActivitiesStale) {
           store.dispatch(LoadClient(clientId: client.id));
@@ -32,7 +32,7 @@ class InvoiceEmailScreen extends StatelessWidget {
       converter: (Store<AppState> store) {
         final state = store.state;
         final invoiceId = state.uiState.invoiceUIState.selectedId;
-        final invoice = state.invoiceState.map[invoiceId];
+        final invoice = state.invoiceState.get(invoiceId);
         return EmailInvoiceVM.fromStore(store, invoice);
       },
       builder: (context, vm) {