From ff4e50d904d5d921563032956d3c238fb332c4e5 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 10 Jun 2016 15:05:35 -0400
Subject: [PATCH] (js) Use a speed dial for card/list creation

---
 NEWS                                          |  1 +
 .../ContactsUI/UIxContactFoldersView.wox      | 29 +++++++++++---
 .../js/Contacts/AddressBookController.js      | 38 +------------------
 3 files changed, 26 insertions(+), 42 deletions(-)

diff --git a/NEWS b/NEWS
index 13b069475..1fea92406 100644
--- a/NEWS
+++ b/NEWS
@@ -3,6 +3,7 @@
 
 Enhancements
  - [web] always display name of month in week view (#3724)
+ - [web] use a speed dial (instead of a dialog) for card/list creation
 
 Bug fixes
  - [web] fixed generic avatar in lists (#3719)
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 7be07cb84..eb3f8c440 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -436,12 +436,29 @@
                                   md-mode="indeterminate"
                                   md-diameter="32"><!-- progress --></md-progress-circular>
           </div>
-          <md-button class="md-fab md-fab-bottom-right md-accent"
-                     label:aria-label="New Contact"
-                     ng-show="addressbook.selectedFolder.isOwned || addressbook.selectedFolder.acls.objectCreator"
-                     ng-click="addressbook.newComponent($event)">
-            <md-icon>add</md-icon>
-          </md-button>
+          <md-fab-speed-dial
+             class="md-fling md-fab-bottom-right"
+             md-direction="up" md-open="false"
+             ng-cloak="ng-cloak"
+             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-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>
 
diff --git a/UI/WebServerResources/js/Contacts/AddressBookController.js b/UI/WebServerResources/js/Contacts/AddressBookController.js
index 67cae8e21..206ef3949 100644
--- a/UI/WebServerResources/js/Contacts/AddressBookController.js
+++ b/UI/WebServerResources/js/Contacts/AddressBookController.js
@@ -40,42 +40,8 @@
       $event.stopPropagation();
     }
 
-    function newComponent(ev) {
-      $mdDialog.show({
-        parent: angular.element(document.body),
-        targetEvent: ev,
-        clickOutsideToClose: true,
-        escapeToClose: true,
-        template: [
-          '<md-dialog aria-label="' + l('Create component') + '">',
-          '  <md-dialog-content>',
-          '    <div layout="column">',
-          '      <md-button ng-click="create(\'card\')">',
-          '        ' + l('Contact'),
-          '      </md-button>',
-          '      <md-button ng-click="create(\'list\')">',
-          '        ' + l('List'),
-          '      </md-button>',
-          '    </div>',
-          '  </md-dialog-content>',
-          '</md-dialog>'
-        ].join(''),
-        locals: {
-          addressbookId: vm.selectedFolder.id
-        },
-        controller: ComponentDialogController
-      });
-      
-      /**
-       * @ngInject
-       */
-      ComponentDialogController.$inject = ['scope', '$mdDialog', '$state', 'addressbookId'];
-      function ComponentDialogController(scope, $mdDialog, $state, addressbookId) {
-        scope.create = function(type) {
-          $mdDialog.hide();
-          $state.go('app.addressbook.new', { addressbookId: addressbookId, contactType: type });
-        };
-      }
+    function newComponent(type) {
+      $state.go('app.addressbook.new', { contactType: type });
     }
 
     function unselectCards() {