Add floating action button for main item create action on mobile (#107)

skins/elastic/styles/layout.less

@@ -245,6 +245,7 @@ html.iframe {
 }
 
 @media screen and (min-width: (@screen-width-small + 1px)) {
+    .floating-action-buttons,
     body > #layout > .content > .header > .header-title,
     body > #layout > div > .header > .buttons,
     body > #layout > div > .header > a.toolbar-menu-button {

skins/elastic/styles/widgets/buttons.less

@@ -124,6 +124,43 @@ html.touch {
     }
 }
 
+@floating-action-button-size: 4rem;
+
+.floating-action-buttons {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    .footer:not(:empty) + & {
+        bottom: @layout-touch-header-height;
+    }
+
+    a.button {
+        display: block;
+        float: left;
+        width: @floating-action-button-size;
+        height: @floating-action-button-size;
+        border-radius: 50%;
+        background: @color-taskmenu-background;
+        color: white;
+        opacity: .95;
+        box-shadow: 0 0 5px 5px @color-popover-shadow;
+        margin: 0 1rem 1rem 0;
+
+        &:before {
+            &:extend(.font-icon-class);
+            content: @fa-var-plus;
+            width: @floating-action-button-size;
+            height: @floating-action-button-size;
+            line-height: @floating-action-button-size;
+        }
+
+        .inner {
+            display: none;
+        }
+    }
+}
+
 /*** Bootstrap button style overrides ***/
 
 .btn-secondary {

skins/elastic/templates/addressbook.html

@@ -50,7 +50,7 @@
 		<div id="addressbooktoolbar" class="toolbar">
 			<roundcube:button command="add" type="link"
 				class="button create disabled" classAct="button create"
-				label="create" title="newcontact" innerclass="inner" />
+				label="create" title="newcontact" innerclass="inner" data-fab="true" />
 			<roundcube:button command="print" type="link" data-hidden="small"
 				class="button print disabled" classAct="button print"
 				label="print" title="printcontact" innerclass="inner" />

skins/elastic/templates/folders.html

@@ -38,7 +38,7 @@
 		<div id="folderstoolbar" class="toolbar">
 			<roundcube:button command="create-folder" type="link"
 				class="button create disabled" classAct="button create"
-				label="create" title="createfolder" innerClass="inner" />
+				label="create" title="createfolder" innerClass="inner" data-fab="true" />
 			<roundcube:button command="delete-folder" type="link"
 				class="button delete disabled" classAct="button delete"
 				label="delete" title="delete" innerclass="inner" />

skins/elastic/templates/identities.html

@@ -30,7 +30,7 @@
 			<roundcube:button command="add" type="link"
 				label="create" title="newidentity" innerClass="inner" 
 				class="button create disabled" classAct="button create"
-				condition="config:identities_level:0<2" />
+				condition="config:identities_level:0<2" data-fab="true" />
 			<roundcube:button command="delete" type="link"
 				label="delete" title="delete" innerClass="inner"
 				class="button delete disabled" classAct="button delete"

skins/elastic/templates/includes/menu.html

@@ -3,7 +3,9 @@
 	<div id="taskmenu" role="navigation" aria-labelledby="aria-label-tasknav">
 		<div class="menu-header"><a class="button icon cancel"><roundcube:label name="close" /></a></div>
 		<span class="action-buttons">
-			<roundcube:button command="compose" type="link" class="button compose" label="compose" title="writenewmessage" innerclass="inner" />
+			<roundcube:button command="compose" type="link" class="button compose"
+				label="compose" title="writenewmessage" innerclass="inner"
+				data-fab="true" data-fab-task="mail" data-fab-action="none" />
 		</span>
 		<roundcube:button command="mail" label="mail" type="link" class="button mail"
 			classSel="button mail selected" innerClass="inner" />

skins/elastic/templates/responses.html

@@ -29,7 +29,7 @@
 		<div id="responsestoolbar" class="toolbar">
 			<roundcube:button command="add" type="link"
 				label="create" title="newresponse" innerClass="inner"
-				class="button create disabled" classAct="button create" />
+				class="button create disabled" classAct="button create" data-fab="true" />
 			<roundcube:button command="delete" type="link"
 				label="delete" title="delete" innerClass="inner"
 				class="button delete disabled" classAct="button delete" />

skins/elastic/ui.js

@@ -329,7 +329,7 @@ function rcube_elastic_ui()
     /**
      * Create a button clone for use in toolbar
      */
-    function create_cloned_button(target, is_ext)
+    function create_cloned_button(target)
     {
         var button = $('<a>'),
             target_id = target.attr('id'),
@@ -457,6 +457,27 @@ function rcube_elastic_ui()
             });
         }
 
+        // Create floating action button(s)
+        if (layout.list.length && is_mobile()) {
+            var fabuttons = [];
+
+            $('[data-fab]').each(function() {
+                var button = $(this),
+                    task = button.data('fab-task') || '*',
+                    action = button.data('fab-action') || '*';
+
+                if ((task == '*' || task == rcmail.task)
+                    && (action == '*' || action == rcmail.env.action || (action == 'none' && !rcmail.env.action))
+                ) {
+                    fabuttons.push(create_cloned_button(button));
+                }
+            });
+
+            if (fabuttons.length) {
+                $('<div class="floating-action-buttons">').append(fabuttons).appendTo(layout.list);
+            }
+        }
+
         // Add menu link for each attachment
         if (rcmail.env.action != 'print') {
             $('#attachment-list > li').each(function() {