[data-content-button] A way to move a button to content frame header for small screens

we place Reply button in the header when we preview a mail message
we place Send button in the header when we compose a message

skins/elastic/README.md

@@ -93,3 +93,5 @@ RULES:
     - `data-hidden-small`: Makes a menu entry/button hidden on small devices.
       Can be used for example for functionality not implemented or that has no sense
       on phones or touch devices.
+    - `data-content-button`: Makes the action button with this attribute to be copied
+      to the content frame header on small/phone screens.

skins/elastic/styles/layout.less

@@ -212,6 +212,16 @@ html.iframe body {
         max-width: none;
     }
 
+    body > #layout > div > .header,
+    body > #layout > div > .footer {
+        a.button:before {
+            font-size: 1.75rem;
+            height: @layout-touch-header-height;
+            margin: 0;
+            width: 1.4em;
+        }
+    }
+
     body > #layout > div > .header.with-search-and-toolbar {
         & > .header-title {
             margin-right: 1.5em;

skins/elastic/styles/widgets/toolbar.less

@@ -11,7 +11,6 @@
 
 /*** Toolbar widget ***/
 
-
 .toolbar {
     &.listing a,
     a {
@@ -167,6 +166,23 @@
                 font-size: 1.75rem;
             }
         }
+
+        a.button {
+            display: inline-block;
+
+            &:before {
+                &:extend(.font-icon-class);
+                float: none;
+            }
+
+            &.reply:before {
+                content: @fa-var-mail-reply;
+            }
+
+            &.send:before {
+                content: @fa-var-paper-plane;
+            }
+        }
     }
 }
 

skins/elastic/templates/compose.html

@@ -111,7 +111,7 @@
 				label="cancel" condition="env:extwin" tabindex="2" innerclass="inner" />
 			<span class="spacer"></span>
 			<roundcube:button command="send" type="link" class="button send disabled" classAct="button send"
-				label="send" title="sendmessage" tabindex="2" innerclass="inner" />
+				label="send" title="sendmessage" tabindex="2" innerclass="inner" data-content-button="true" />
 			<roundcube:button command="savedraft" type="link" class="button save draft disabled" classAct="button save draft"
 				label="save" title="savemessage" tabindex="2" innerclass="inner" />
 			<span class="spacer"></span>

skins/elastic/templates/includes/mail-menu.html

@@ -2,7 +2,7 @@
 <div id="mailtoolbar" class="toolbar" role="toolbar">
 	<roundcube:button command="reply" type="link"
 		class="button reply disabled" classAct="button reply"
-		label="reply" title="replytomessage" innerclass="inner" />
+		label="reply" title="replytomessage" innerclass="inner" data-content-button="true" />
 	<span class="dropbutton">
 		<roundcube:button command="reply-all" type="link"
 			class="button reply-all disabled" classAct="button reply-all"

skins/elastic/ui.js

@@ -48,7 +48,7 @@ function rcube_elastic_ui()
 
 
     // Public methods
-    this.register_frame_buttons = register_frame_buttons;
+    this.register_content_buttons = register_content_buttons;
     this.menu_hide = menu_hide;
     this.about_dialog = about_dialog;
     this.spellmenu = spellmenu;
@@ -84,6 +84,9 @@ function rcube_elastic_ui()
      */
     function setup()
     {
+        var content_buttons = [],
+            is_framed = rcmail.is_framed();
+
         // Initialize search forms (in list headers)
         $('.header > .searchbar').each(function() { searchbar_init(this); });
 
@@ -106,7 +109,7 @@ function rcube_elastic_ui()
         $('body').on('click', function() { if (mode == 'phone') layout.menu.addClass('hidden'); });
 
         // Set content frame title in parent window (exclude ext-windows and dialog frames)
-        if (rcmail.is_framed() && !rcmail.env.extwin && !parent.$('.ui-dialog:visible').length) {
+        if (is_framed && !rcmail.env.extwin && !parent.$('.ui-dialog:visible').length) {
             var title = $('h1.voice:first').text();
             if (title) {
                 parent.$('#layout > .content > .header > .header-title').text(title);
@@ -119,20 +122,36 @@ function rcube_elastic_ui()
             }
         }
 
+        // Move some buttons to the toolbar
+        $('a[data-content-button]').each(function() {
+            var target = $(this),
+                button = target.clone(),
+                target_id = target.attr('id'),
+                button_id = target_id + '-clone';
+
+            content_buttons.push(
+                button.attr({'onclick': '', id: button_id, title: target.text()})
+                    .on('click', function(e) { target.click(); })
+                    .text('')
+            );
+
+            // Register the button to get active state updates
+            register_cloned_button(target_id, button_id);
+        });
+
         // Move form buttons from the content frame into the frame header (on parent window)
         // TODO: Active button state
-        var form_buttons = [];
         $('.formbuttons').children(':not(.cancel)').each(function() {
             var target = $(this);
 
             // skip non-content buttons
-            if (!rcmail.is_framed() && !target.parents('.content').length) {
+            if (!is_framed && !target.parents('.content').length) {
                 return;
             }
 
             var button = target.clone();
 
-            form_buttons.push(
+            content_buttons.push(
                 button.attr({'onclick': '', disabled: false, id: button.attr('id') + '-clone', title: target.text()})
                     .data('target', target)
                     .on('click', function(e) { target.click(); })
@@ -140,14 +159,14 @@ function rcube_elastic_ui()
             );
         });
 
-        if (form_buttons.length) {
-            if (rcmail.is_framed()) {
+        if (content_buttons.length) {
+            if (is_framed) {
                 if (parent.UI) {
-                    parent.UI.register_frame_buttons(form_buttons);
+                    parent.UI.register_content_buttons(content_buttons);
                 }
             }
             else {
-                register_frame_buttons(form_buttons);
+                register_content_buttons(content_buttons);
             }
         }
 
@@ -215,7 +234,7 @@ function rcube_elastic_ui()
     /**
      * Moves form buttons into content frame toolbar (for mobile)
      */
-    function register_frame_buttons(buttons)
+    function register_content_buttons(buttons)
     {
         // we need these buttons really only in phone mode
         if (/*mode == 'phone' && */layout.content.length && buttons && buttons.length) {
@@ -238,7 +257,9 @@ function rcube_elastic_ui()
 
                 content_buttons = [];
                 $.each(buttons, function() {
-                    content_buttons.push(this.data('target'));
+                    if (this.data('target')) {
+                        content_buttons.push(this.data('target'));
+                    }
                 });
 
                 toolbar.html('').append(buttons);
@@ -247,6 +268,24 @@ function rcube_elastic_ui()
         }
     };
 
+    /**
+     * Registers cloned button
+     */
+    function register_cloned_button(old_id, new_id)
+    {
+        var i, button, command;
+
+        for (command in rcmail.buttons) {
+            for (i = 0; i < rcmail.buttons[command].length; i++) {
+                button = rcmail.buttons[command][i];
+                if (button.id == old_id) {
+                    rcmail.register_button(command, new_id, button.type, button.act, button.sel, button.over);
+                    return;
+                }
+            }
+        }
+    };
+
     /**
      * Setup environment
      */