From fec8cf26828fd194a5ee77ff92bd0e047ca6ae4e Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Tue, 12 Dec 2017 17:34:31 +0100
Subject: [PATCH] Add floating action button for main item create action on
 mobile (#107)

---
 skins/elastic/styles/layout.less           |  1 +
 skins/elastic/styles/widgets/buttons.less  | 37 ++++++++++++++++++++++
 skins/elastic/templates/addressbook.html   |  2 +-
 skins/elastic/templates/folders.html       |  2 +-
 skins/elastic/templates/identities.html    |  2 +-
 skins/elastic/templates/includes/menu.html |  4 ++-
 skins/elastic/templates/responses.html     |  2 +-
 skins/elastic/ui.js                        | 23 +++++++++++++-
 8 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less
index 778d00e90..5df34c5ff 100644
--- a/skins/elastic/styles/layout.less
+++ b/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 {
diff --git a/skins/elastic/styles/widgets/buttons.less b/skins/elastic/styles/widgets/buttons.less
index 5a5282f94..f1964beab 100644
--- a/skins/elastic/styles/widgets/buttons.less
+++ b/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 {
diff --git a/skins/elastic/templates/addressbook.html b/skins/elastic/templates/addressbook.html
index d825598f4..957c2e544 100644
--- a/skins/elastic/templates/addressbook.html
+++ b/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" />
diff --git a/skins/elastic/templates/folders.html b/skins/elastic/templates/folders.html
index bd8f3a599..9ed67118c 100644
--- a/skins/elastic/templates/folders.html
+++ b/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" />
diff --git a/skins/elastic/templates/identities.html b/skins/elastic/templates/identities.html
index b1e9b1729..6579a9ec1 100644
--- a/skins/elastic/templates/identities.html
+++ b/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"
diff --git a/skins/elastic/templates/includes/menu.html b/skins/elastic/templates/includes/menu.html
index a64566703..f5c29f049 100644
--- a/skins/elastic/templates/includes/menu.html
+++ b/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" />
diff --git a/skins/elastic/templates/responses.html b/skins/elastic/templates/responses.html
index 137dcdde1..63bf08545 100644
--- a/skins/elastic/templates/responses.html
+++ b/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" />
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index 95ce14d55..6c12daea0 100644
--- a/skins/elastic/ui.js
+++ b/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() {