Elastic: Add "status bar" for mobile in mail composer

CHANGELOG

@@ -17,6 +17,7 @@ CHANGELOG Roundcube Webmail
 - Elastic: Support new-line char as a separator for pasted recipients (#6460)
 - Elastic: Improved UX of search dialogs (#6416)
 - Elastic: Fix unwanted thread expanding when selecting a collapsed thread in non-mobile mode (#6445)
+- Elastic: Add "status bar" for mobile in mail composer
 - Log errors caused by low pcre.backtrack_limit when sending a mail message (#6433)
 - Fix incorrect IMAP SASL GSSAPI negotiation (#6308)
 - Fix so unicode in local part of the email address is also supported in recipient inputs (#6490)

plugins/enigma/enigma.js

@@ -60,12 +60,20 @@ window.rcmail && rcmail.addEventListener('init', function(evt) {
             });
 
             $('a.button.enigma').prop('tabindex', $('#messagetoolbar > a:first').prop('tabindex'));
-        }
 
-        $.each(['encrypt', 'sign'], function() {
-            if (rcmail.env['enigma_force_' + this])
-                $('[name="_enigma_' + this + '"]').prop('checked', true);
-        });
+            $.each(['encrypt', 'sign'], function() {
+                var opt = this, input = $('#enigma' + opt + 'opt');
+
+                if (rcmail.env['enigma_force_' + opt]) {
+                    input.prop('checked', true);
+                }
+
+                // Compose status bar in Elastic
+                if (window.UI && UI.compose_status) {
+                    input.on('change', function() { UI.compose_status(opt, this.checked); }).trigger('change');
+                }
+            });
+        }
 
         if (rcmail.env.enigma_password_request) {
             rcmail.enigma_password_request(rcmail.env.enigma_password_request);

skins/elastic/styles/widgets/buttons.less

@@ -138,6 +138,12 @@ button.btn {
     &.insert.recipient:before {
         content: @fa-var-user-plus;
     }
+    &.encrypt:before {
+        content: @fa-var-lock;
+    }
+    &.sign:before {
+        content: @fa-var-signature;
+    }
 }
 
 a.btn,

skins/elastic/styles/widgets/mail.less

@@ -312,3 +312,14 @@
 #compose-attachments {
     margin: .5rem .5rem 0 .5rem;
 }
+
+#composestatusbar {
+    position: absolute;
+    height: 2.5rem;
+    padding-top: .25rem;
+    opacity: .3;
+
+    @media screen and (min-width: (@screen-width-small + 1px)) {
+        display: none;
+    }
+}

skins/elastic/templates/compose.html

@@ -214,6 +214,7 @@
 		<div id="composebodycontainer">
 			<label for="composebody" class="voice"><roundcube:label name="arialabelmessagebody" /></label>
 			<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" class="form-control" tabindex="1" />
+			<div id="composestatusbar"></div>
 		</div>
 		</form>
 		<div class="formbuttons">

skins/elastic/ui.js

@@ -65,6 +65,7 @@ function rcube_elastic_ui()
     this.searchmenu = searchmenu;
     this.headersmenu = headersmenu;
     this.header_reset = header_reset;
+    this.compose_status = compose_status;
     this.attachmentmenu = attachmentmenu;
     this.mailtomenu = mailtomenu;
     this.recipient_selector = recipient_selector;
@@ -686,6 +687,16 @@ function rcube_elastic_ui()
                     mailtomenu_append(this);
                 });
             }
+
+            // Update compose status bar on attachments list update
+            if (window.MutationObserver) {
+                var observer, list = $('#attachment-list'),
+                    status_callback = function() { compose_status('attach', list.children().length > 0); };
+
+                observer = new MutationObserver(status_callback);
+                observer.observe(list[0], {childList: true});
+                status_callback();
+            }
         }
         else if (rcmail.task == 'settings') {
             rcmail.addEventListener('identity-encryption-show', function(p) {
@@ -2706,6 +2717,23 @@ function rcube_elastic_ui()
         });
     };
 
+    /**
+     * Add/remove item to/from compose options status bar
+     */
+    function compose_status(id, status)
+    {
+        var bar = $('#composestatusbar'), ico = bar.find('a.button.icon.' + id);
+
+        if (!status) {
+            ico.remove();
+        }
+        else if (!ico.length) {
+            $('<a>').attr('class', 'button icon ' + id)
+                .on('click', function() { show_sidebar(); })
+                .appendTo(bar);
+        }
+    };
+
     /**
      * Attachment menu
      */