From d90533399d6edca2e73161642cd090d37c7ac9bf Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Wed, 1 Feb 2017 21:32:16 -0500
Subject: [PATCH] (css) Keep the fab button visible

---
 NEWS                                          |  1 +
 .../ContactsUI/UIxContactFoldersView.wox      | 50 +++++------
 .../MailerUI/UIxMailFolderTemplate.wox        | 51 ++++++------
 UI/Templates/SchedulerUI/UIxCalMainView.wox   | 47 ++++++-----
 .../scss/components/button/button.scss        | 83 +++++++++++++++++--
 UI/WebServerResources/scss/core/layout.scss   | 22 +++--
 .../scss/core/variables.scss                  | 20 ++---
 .../scss/views/SchedulerUI.scss               | 37 ++++++++-
 UI/WebServerResources/scss/views/_view.scss   | 12 ++-
 9 files changed, 217 insertions(+), 106 deletions(-)

diff --git a/NEWS b/NEWS
index 8466a96ed..ef3b7e4e3 100644
--- a/NEWS
+++ b/NEWS
@@ -9,6 +9,7 @@ Bug fixes
  - [web] ignore mouse events in scrollbars of Month view (#3990)
  - [web] fixed public URL with special characters (#3993)
  - [eas] improved EAS parameters parsing (#4003)
+ - [web] keep the fab button visible when the center list is hidden
 
 3.2.6a (2017-01-26)
 -------------------
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 6b0bad543..37d575156 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -501,33 +501,35 @@
                                   md-mode="indeterminate"
                                   md-diameter="32"><!-- progress --></md-progress-circular>
           </div>
-          <md-fab-speed-dial
-              class="md-scale md-fab-bottom-right"
-              ng-cloak="ng-cloak"
-              md-direction="up"
-              ng-show="addressbook.selectedFolder.isOwned || addressbook.selectedFolder.acls.objectCreator">
-            <md-fab-trigger>
-              <md-button class="md-fab md-accent" label:aria-label="New Contact">
-                <md-icon>add</md-icon>
-              </md-button>
-            </md-fab-trigger>
-            <md-fab-actions>
-              <md-button var:aria-label="Contact" class="md-fab md-raised md-mini"
-                         ng-click="addressbook.newComponent('card')">
-                <md-tooltip md-direction="left"><var:string label:value="Create a new address book card"/></md-tooltip>
-                <md-icon>person</md-icon>
-              </md-button>
-              <md-button var:aria-label="List" class="md-fab md-raised md-mini"
-                         ng-hide="addressbook.selectedFolder.isRemote"
-                         ng-click="addressbook.newComponent('list')">
-                <md-tooltip md-direction="left"><var:string label:value="Create a new list"/></md-tooltip>
-                <md-icon>group</md-icon>
-              </md-button>
-            </md-fab-actions>
-          </md-fab-speed-dial>
         </md-content>
       </div>
 
+      <md-fab-speed-dial
+          class="md-scale sg-fab-bottom-center"
+          ng-cloak="ng-cloak"
+          ng-class="{ 'sg-sidenav-close': leftIsClose, 'sg-center-close': centerIsClose }"
+          md-direction="up"
+          ng-show="addressbook.selectedFolder.isOwned || addressbook.selectedFolder.acls.objectCreator">
+        <md-fab-trigger>
+          <md-button class="md-fab md-accent" label:aria-label="New Contact">
+            <md-icon>add</md-icon>
+          </md-button>
+        </md-fab-trigger>
+        <md-fab-actions>
+          <md-button var:aria-label="Contact" class="md-fab md-raised md-mini"
+                     ng-click="addressbook.newComponent('card')">
+            <md-tooltip md-direction="left"><var:string label:value="Create a new address book card"/></md-tooltip>
+            <md-icon>person</md-icon>
+          </md-button>
+          <md-button var:aria-label="List" class="md-fab md-raised md-mini"
+                     ng-hide="addressbook.selectedFolder.isRemote"
+                     ng-click="addressbook.newComponent('list')">
+            <md-tooltip md-direction="left"><var:string label:value="Create a new list"/></md-tooltip>
+            <md-icon>group</md-icon>
+          </md-button>
+        </md-fab-actions>
+      </md-fab-speed-dial>
+
       <div id="detailView" class="view-detail"
            layout="column" layout-align="start center"
            ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 782cb8ab6..a4701a438 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -331,36 +331,33 @@
                               md-mode="indeterminate"
                               md-diameter="32"><!-- mailbox loading progress --></md-progress-circular>
       </div>
-      <md-button class="md-fab md-fab-bottom-right md-accent"
-                 label:aria-label="Write a new message"
-                 ng-click="mailbox.newMessage($event)">
-        <md-icon>edit</md-icon>
-      </md-button>
-      <md-fab-speed-dial
-        class="md-scale md-fab-bottom-right"
-        ng-cloak="ng-cloak"
-        md-direction="up">
-        <md-fab-trigger>
-          <md-button class="md-fab md-accent" label:aria-label="Write a new message">
-            <md-icon>edit</md-icon>
-          </md-button>
-        </md-fab-trigger>
-        <md-fab-actions>
-          <md-button class="md-fab md-raised md-mini" var:aria-label="Write a new message"
-                     ng-click="mailbox.newMessage($event)">
-            <md-tooltip md-direction="left"><var:string label:value="Write a new message"/></md-tooltip>
-            <md-icon>open_in_browser</md-icon>
-          </md-button>
-          <md-button class="md-fab md-raised md-mini" var:aria-label="Write a message in new window"
-                     ng-click="mailbox.newMessage($event, true)">
-            <md-tooltip md-direction="left"><var:string label:value="Write a message in new window"/></md-tooltip>
-            <md-icon>open_in_new</md-icon>
-          </md-button>
-        </md-fab-actions>
-      </md-fab-speed-dial>
     </md-content>
   </div>
 
+  <md-fab-speed-dial
+      class="md-scale sg-fab-bottom-center"
+      ng-cloak="ng-cloak"
+      ng-class="{ 'sg-sidenav-close': leftIsClose, 'sg-center-close': centerIsClose }"
+      md-direction="up">
+    <md-fab-trigger>
+      <md-button class="md-fab md-accent" label:aria-label="Write a new message">
+        <md-icon>edit</md-icon>
+      </md-button>
+    </md-fab-trigger>
+    <md-fab-actions>
+      <md-button class="md-fab md-raised md-mini" var:aria-label="Write a new message"
+                 ng-click="mailbox.newMessage($event)">
+        <md-tooltip md-direction="left"><var:string label:value="Write a new message"/></md-tooltip>
+        <md-icon>open_in_browser</md-icon>
+      </md-button>
+      <md-button class="md-fab md-raised md-mini" var:aria-label="Write a message in new window"
+                 ng-click="mailbox.newMessage($event, true)">
+        <md-tooltip md-direction="left"><var:string label:value="Write a message in new window"/></md-tooltip>
+        <md-icon>open_in_new</md-icon>
+      </md-button>
+    </md-fab-actions>
+  </md-fab-speed-dial>
+
   <div id="detailView" class="view-detail"
        layout="column" layout-align="start center"
        ng-class="{ 'sg-close': !mailbox.service.selectedFolder.hasSelectedMessage() }"
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index df23a5de4..5077d4e1a 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -677,29 +677,32 @@
                                   md-mode="indeterminate"
                                   md-diameter="32"><!-- mailbox loading progress --></md-progress-circular>
           </div>
-          <md-fab-speed-dial
-              class="md-scale md-fab-bottom-right"
-              ng-cloak="ng-cloak"
-              md-direction="up">
-            <md-fab-trigger>
-              <md-button class="md-fab md-accent" label:aria-label="New Event">
-                <md-icon>add</md-icon>
-              </md-button>
-            </md-fab-trigger>
-            <md-fab-actions>
-              <md-button var:aria-label="Create a new event" class="md-fab md-raised md-mini"
-                         ng-click="list.newComponent($event, 'appointment')">
-                <md-tooltip md-direction="left"><var:string label:value="Create a new event"/></md-tooltip>
-                <md-icon>event</md-icon>
-              </md-button>
-              <md-button var:aria-label="Create a new task" class="md-fab md-raised md-mini"
-                         ng-click="list.newComponent($event, 'task')">
-                <md-tooltip md-direction="left"><var:string label:value="Create a new task"/></md-tooltip>
-                <md-icon>assignment_turned_in</md-icon>
-              </md-button>
-            </md-fab-actions>
-          </md-fab-speed-dial>
         </div>
+
+        <md-fab-speed-dial
+            class="md-scale sg-fab-bottom-center"
+            ng-class="{ 'sg-sidenav-close': leftIsClose, 'sg-center-close': centerIsClose }"
+            ng-cloak="ng-cloak"
+            md-direction="up">
+          <md-fab-trigger>
+            <md-button class="md-fab md-accent" label:aria-label="New Event">
+              <md-icon>add</md-icon>
+            </md-button>
+          </md-fab-trigger>
+          <md-fab-actions>
+            <md-button var:aria-label="Create a new event" class="md-fab md-raised md-mini"
+                       ng-click="list.newComponent($event, 'appointment')">
+              <md-tooltip md-direction="left"><var:string label:value="Create a new event"/></md-tooltip>
+              <md-icon>event</md-icon>
+            </md-button>
+            <md-button var:aria-label="Create a new task" class="md-fab md-raised md-mini"
+                       ng-click="list.newComponent($event, 'task')">
+              <md-tooltip md-direction="left"><var:string label:value="Create a new task"/></md-tooltip>
+              <md-icon>assignment_turned_in</md-icon>
+            </md-button>
+          </md-fab-actions>
+        </md-fab-speed-dial>
+
         <div id="detailView" class="view-detail hide show-gt-xs"
              layout="column"
              md-colors="::{backgroundColor: 'default-background-200'}"
diff --git a/UI/WebServerResources/scss/components/button/button.scss b/UI/WebServerResources/scss/components/button/button.scss
index 43a24c289..768399e52 100644
--- a/UI/WebServerResources/scss/components/button/button.scss
+++ b/UI/WebServerResources/scss/components/button/button.scss
@@ -5,10 +5,83 @@ md-sidenav md-list .md-button {
   font-weight: normal;
 }
 
-.md-button.md-fab-overlap-bottom {
-  &.md-fab-bottom-right,
-  &.md-fab-bottom-left {
-    bottom: -(($button-fab-width + $button-fab-padding)/2);
+/**
+ * Keep main fab button visible and either at the bottom right of the list
+ * view or at the bottom left of the detail view
+ *
+ *     Three-pane view (full view):
+ *
+ *     +------+-------+--------------+
+ *     |    x |       | x            |
+ *     |      |       |              |
+ *     |      |       |              |
+ *     |      |       |              |
+ *     |      |    (*)|              |
+ *     +------+-------+--------------+
+ *
+ *     Sidenav closed:
+ *
+ *     +-------+--------------+
+ *     |=      | x            |
+ *     |       |              |
+ *     |       |              |
+ *     |       |              |
+ *     |    (*)|              |
+ *     +-------+--------------+
+ *
+ *     Detail view expanded (list view closed):
+ *
+ *     +------+--------------+
+ *     |    x | +            |
+ *     |      |              |
+ *     |      |              |
+ *     |      |              |
+ *     |      |(*)           |
+ *     +------+--------------+
+ *
+ *     Sidenav closed and detail view expanded:
+ *
+ *     +--------------+
+ *     | +            |
+ *     |              |
+ *     |              |
+ *     |              |
+ *     |(*)           |
+ *     +--------------+
+ *
+ */
+md-fab-speed-dial.sg-fab-bottom-center {
+  position: absolute;
+  bottom: ($button-fab-height - $button-fab-padding)/2;
+  left: auto;
+  right: ($button-fab-width - $button-fab-padding)/2;
+  top: auto;
+  transition: $swift-ease-out;
+  @include at(sm) {
+    right: col-width($breakpoint: sm, $nb: 10) + 2vw;
+    &.sg-center-close {
+      left: ($button-fab-width - $button-fab-padding)/2;
+      right: auto;
+    }
+  }
+  @include at(md) {
+    // sidenav is hidden, center list can be closed
+    right: col-width($breakpoint: md, $nb: 14) + 2vw;
+    &.sg-center-close {
+      left: ($button-fab-width - $button-fab-padding)/2;
+      right: auto;
+    }
+  }
+  @include from(lg) {
+    // both sidenav and center list can be closed
+    right: col-width($breakpoint: lg, $nb: 10) + 2vw;
+    &.sg-sidenav-close, &.sg-center-close {
+      right: col-width($breakpoint: lg, $nb: 14) + 2vw;
+    }
+    &.sg-sidenav-close.sg-center-close {
+      left: ($button-fab-width - $button-fab-padding)/2;
+      right: auto;
+    }
   }
 }
 
@@ -163,4 +236,4 @@ md-tab-content {
   font-weight: $sg-font-medium;
   line-height: $sg-font-size-1 * 2;
   text-transform: uppercase;
-}
\ No newline at end of file
+}
diff --git a/UI/WebServerResources/scss/core/layout.scss b/UI/WebServerResources/scss/core/layout.scss
index af5941f8e..2c014da29 100644
--- a/UI/WebServerResources/scss/core/layout.scss
+++ b/UI/WebServerResources/scss/core/layout.scss
@@ -160,14 +160,22 @@
 //@include responsive-columns('md', 'at');
 //@include responsive-columns('lg', 'from');
 
-// Utility to implement a specific one without extending
-// todo: include error handling
-
-@mixin flex-col($breakpoint, $nb, $grow: 1, $shrink: 1) {
+/**
+ * Return a column width according to a breakpoint grid
+ */
+@function col-width($breakpoint, $nb) {
    $cols: map-get($base-grid-total-columns, $breakpoint);
-   $colWidth: ((100 / $cols) * 1vw);
-     max-width: ($colWidth * $nb);
-     flex: $grow $shrink ($colWidth * $nb);
+   @return ((100 / $cols) * $nb * 1vw);
+}
+
+/**
+ * Style a column according to a breakpoint grid
+ */
+@mixin flex-col($breakpoint, $nb, $grow: 1, $shrink: 1) {
+  $cols: map-get($base-grid-total-columns, $breakpoint);
+  $colWidth: ((100 / $cols) * 1vw);
+  max-width: ($colWidth * $nb);
+  flex: $grow $shrink ($colWidth * $nb);
 }
 
 // Rows are included in padded containers, margins are used for vertical spacing
diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss
index 9eba56eeb..bd433f1d0 100644
--- a/UI/WebServerResources/scss/core/variables.scss
+++ b/UI/WebServerResources/scss/core/variables.scss
@@ -64,20 +64,20 @@ $touch-zone: $touch-zone-width;
 
 /**
  *  Breakpoint:   0                    600px       960px     1024px        1280px
- *                ├───────────────────┼─────────┼─────────┼───────────┼─────────>
- *  Slice  :                xs           ·    sm    ·    md    ·     lg      .    xl
+ *                |----------------------|----------|----------|-------------|---------->
+ *  Slice  :      .         xs           ·    sm    ·    md    ·     lg      .    xl
  *                ·                      ·          ·          ·             ·
  *                ·                      ·          ·  at(md)  ·             ·
- *                ·                      ·          ├─────────┤             ·
+ *                ·                      ·          |----------|             ·
  *                ·                      ·          ·          ·             ·
  *                ·                      ·          · from(md) ·             ·
- *                ·                      ·          ├───────────────────────────────>
- *                ·                      ·                     ·             ·
- *                ·                      ·            to(md)   ·             ·
- *                ├─────────────────────────────────────────┤           ·
- *                                       ·                                   ·
- *                                       ·         between(sm, lg)           ·
- *                                       ├───────────────────────────────┤
+ *                ·                      ·          |----------------------------------->
+ *                ·                      ·          .          ·             ·
+ *                ·                      ·          . to(md)   ·             ·
+ *                |--------------------------------------------|             ·
+ *                .                      ·          .          .             ·
+ *                .                      ·         between(sm, lg)           ·
+ *                .                      |-----------------------------------|
  */
 
 $layout-breakpoint-xs:     600px !default;
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index f5baeec13..4a4637afa 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -16,7 +16,8 @@ $quarter_height: 10px;
 [ui-view=calendars] {
 
   // Decrease width of middle column (list of events and tasks)
-  $listView-width: grid-step(4) !global;
+  //$listView-width: grid-step(4) !global;
+  $listView-width: grid-step(4);
   //$detailView-width: grid-step(10) !global;
 
   .view-list {
@@ -39,9 +40,37 @@ $quarter_height: 10px;
 
   .view-list--close {
     @include from(md) {
-      $cols: map-get($base-grid-total-columns, md);
-      $colWidth: ((100 / $cols) * -5vw);
-      margin-right: $colWidth;
+      $colWidth: col-width($breakpoint: md, $nb: 5);
+      margin-right: $colWidth * -1;
+    }
+  }
+
+  /**
+   * Redefine fab button since center column width is different.
+   * See button.scss
+   */
+  md-fab-speed-dial.sg-fab-bottom-center {
+    @include at(md) {
+      // sidenav is hidden, center list can be closed
+      right: col-width($breakpoint: md, $nb: 15) + 2vw;
+      &.sg-center-close {
+        left: ($button-fab-width - $button-fab-padding)/2;
+        right: auto;
+      }
+    }
+    @include from(lg) {
+      // both sidenav and center list can be closed
+      right: col-width($breakpoint: lg, $nb: 11) + 2vw;
+      &.sg-sidenav-close {
+        right: col-width($breakpoint: lg, $nb: 15) + 2vw;
+      }
+      &.sg-center-close {
+        right: col-width($breakpoint: lg, $nb: 14) + 2vw;
+      }
+      &.sg-sidenav-close.sg-center-close {
+        left: ($button-fab-width - $button-fab-padding)/2;
+        right: auto;
+      }
     }
   }
 
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index 312d476ca..4df3a03dc 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -45,7 +45,7 @@ body {
 // ----------------------------------------------------------------------------
 
 // Variables
-$listView-width: grid-step(6) !global;
+//$listView-width: grid-step(6) !global;
 //$detailView-width: grid-step(8) !global;
 
 [class|="view"] {
@@ -93,14 +93,12 @@ $listView-width: grid-step(6) !global;
   transform: translateX(-100%);
 
   @include at(sm) {
-    $cols: map-get($base-grid-total-columns, sm);
-    $colWidth: ((100 / $cols) * -6vw);
-    margin-right: $colWidth;
+    $colWidth: col-width($breakpoint: sm, $nb: 6);
+    margin-right: $colWidth * -1;
   }
   @include from(md) {
-    $cols: map-get($base-grid-total-columns, md);
-    $colWidth: ((100 / $cols) * -6vw);
-    margin-right: $colWidth;
+    $colWidth: col-width($breakpoint: md, $nb: 6);
+    margin-right: $colWidth * -1;
   }
 }