From ddf97ebb13929e4ac5c129efe23854df63c54839 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 15 Oct 2015 15:10:37 -0400
Subject: [PATCH] (js) Improve sgColorPicker directive

- replaced sg-on-select by ng-model;
- set button background (no more wrapping necessary).
---
 UI/Templates/PreferencesUI/UIxPreferences.wox | 11 ++----
 .../SchedulerUI/UIxCalendarProperties.wox     |  2 +-
 .../js/Common/sgColorPicker.directive.js      | 39 ++++++++++---------
 .../js/Scheduler/CalendarsController.js       | 12 +++---
 4 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 97fb98888..cc7eda33e 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -349,11 +349,10 @@
                               ng-repeat="item in
                                          app.preferences.defaults.SOGoCalendarCategories
                                          track by $index">
-                  <i class="md-avatar" ng-style="{'background-color': app.preferences.defaults.SOGoCalendarCategoriesColors[item]}">
-                    <sg-color-picker sg-on-select="app.preferences.defaults.SOGoCalendarCategoriesColors[item] = color"><!-- color picker--></sg-color-picker>
-                  </i>
+                  <sg-color-picker ng-model="app.preferences.defaults.SOGoCalendarCategoriesColors[item]"><!-- color picker--></sg-color-picker>
                   <md-input-container>
-	            <input type="text" label:aria-label="Calendar Category" ng-model="app.preferences.defaults.SOGoCalendarCategories[$index]"/>
+	            <input type="text" label:aria-label="Calendar Category"
+                           ng-model="app.preferences.defaults.SOGoCalendarCategories[$index]"/>
                   </md-input-container>
                   <md-button class="sg-icon-button" type="button"
                              layout="row" layout-align="end center"
@@ -641,9 +640,7 @@
               <md-list-item flex="50"
                             ng-repeat="(key, value) in
                                        app.preferences.defaults.SOGoMailLabelsColors">
-                <i class="md-avatar" ng-style="{'background-color': value[1]}">
-                  <sg-color-picker sg-on-select="value[1] = color"><!-- color picker--></sg-color-picker>
-                </i>
+                <sg-color-picker ng-model="value[1]"><!-- color picker--></sg-color-picker>
                 <md-input-container>
 	          <input type="text"
                          label:aria-label="Label"
diff --git a/UI/Templates/SchedulerUI/UIxCalendarProperties.wox b/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
index cac18cb0b..bfcd079a5 100644
--- a/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
+++ b/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
@@ -11,7 +11,7 @@
     <md-toolbar ng-class="properties.calendar.getClassName('bg')">
       <div class="md-toolbar-tools">
         <!-- color -->
-        <sg-color-picker sg-on-select="properties.setColor(color)"><!-- color picker --></sg-color-picker>
+        <sg-color-picker ng-model="properties.calendar.color"><!-- color picker --></sg-color-picker>
         <!-- name -->
         <md-input-container>
           <label><var:string label:value="Name"/></label>
diff --git a/UI/WebServerResources/js/Common/sgColorPicker.directive.js b/UI/WebServerResources/js/Common/sgColorPicker.directive.js
index acac31c2b..4bbe79640 100644
--- a/UI/WebServerResources/js/Common/sgColorPicker.directive.js
+++ b/UI/WebServerResources/js/Common/sgColorPicker.directive.js
@@ -14,50 +14,53 @@
 
      <sg-color-picker sg-on-select="properties.calendar.color = color"></sg-color-picker>
   */
-  sgColorPicker.$inject = ['$parse'];
-  function sgColorPicker($parse) {
+  function sgColorPicker() {
     return {
       restrict: 'E',
+      require: 'ngModel',
       template: [
         '<md-menu>',
-        '  <md-button class="sg-icon-button"',
+        '  <md-button class="md-icon-button"',
         '             label:aria-label="Options"',
+        '             ng-style="{ \'background-color\': sgColor }"',
         '             ng-click="$mdOpenMenu()"',
         '             md-menu-origin="md-menu-origin">',
-        '    <md-icon>color_lens</md-icon>',
+        '    <md-icon style="color: #fff">color_lens</md-icon>',
         '  </md-button>',
-        '  <md-menu-content class="md-padding" width="3">',
+        '  <md-menu-content class="md-padding" width="3" style="min-height: 200px">',
         '    <md-grid-list class="sg-color-picker" md-cols="7" md-row-height="1:1" md-gutter="0.5em">',
-        '      <md-grid-tile ng-repeat="color in $sgColorPickerController.colors"',
+        '      <md-grid-tile ng-repeat="color in ::sgColors track by $index"',
         '                    ng-style="{ \'background-color\': color }"',
-        '                    ng-click="$sgColorPickerController.select(color)"></md-grid-tile>',
+        '                    ng-click="setColor(color)"></md-grid-tile>',
         '    </md-grid-list>',
         '  </md-menu-content>',
         '</md-menu>'
       ].join(''),
       replace: true,
-      bindToController: true,
       controller: sgColorPickerController,
-      controllerAs: '$sgColorPickerController',
       link: link
     };
 
-    function link(scope, iElement, iAttr, controller) {
-      // Associate callback to controller
-      controller.doSelect = $parse(iElement.attr('sg-on-select'));
+    function link(scope, iElement, iAttr, ngModelController) {
+      // Expose ng-model value to scope
+      ngModelController.$render = function() {
+        scope.sgColor = ngModelController.$viewValue;
+      };
     }
   }
   
   /**
    * @ngInject
    */
-  sgColorPickerController.$inject = ['$scope', 'sgColors'];
-  function sgColorPickerController($scope, sgColors) {
-    var vm = this;
+  sgColorPickerController.$inject = ['$scope', '$element', 'sgColors'];
+  function sgColorPickerController($scope, $element, sgColors) {
+    var ngModelController = $element.controller('ngModel');
 
-    vm.colors = sgColors.selection;
-    vm.select = function(color) {
-      vm.doSelect($scope, { color: color });
+    $scope.sgColors = sgColors.selection;
+    $scope.setColor = function(color) {
+      // Update scope value and ng-model
+      $scope.sgColor = color;
+      ngModelController.$setViewValue(color);
     };
   }
 
diff --git a/UI/WebServerResources/js/Scheduler/CalendarsController.js b/UI/WebServerResources/js/Scheduler/CalendarsController.js
index 035632ee2..6f83b282c 100644
--- a/UI/WebServerResources/js/Scheduler/CalendarsController.js
+++ b/UI/WebServerResources/js/Scheduler/CalendarsController.js
@@ -144,19 +144,17 @@
       /**
        * @ngInject
        */
-      PropertiesDialogController.$inject = ['$timeout', '$mdDialog', 'srcCalendar'];
-      function PropertiesDialogController($timeout, $mdDialog, srcCalendar) {
+      PropertiesDialogController.$inject = ['$scope', '$mdDialog', 'srcCalendar'];
+      function PropertiesDialogController($scope, $mdDialog, srcCalendar) {
         var vm = this;
 
         vm.calendar = new Calendar(srcCalendar.$omit());
-        vm.setColor = setColor;
         vm.saveProperties = saveProperties;
         vm.close = close;
 
-        function setColor(color) {
-          vm.calendar.color = color;
-          srcCalendar.color = color;
-        }
+        $scope.$watch('properties.calendar.color', function() {
+          srcCalendar.color = vm.calendar.color;
+        });
 
         function saveProperties() {
           vm.calendar.$save();