From 5211e339fbd7fb08de324261e34835424d6ab968 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 22 Nov 2016 09:57:39 -0500
Subject: [PATCH] (js,html) Use md-switch in Calendars list

---
 NEWS                                          |  1 +
 UI/Templates/SchedulerUI/UIxCalMainView.wox   | 23 +++++++++----------
 .../js/Common/sgFolderStylesheet.directive.js | 15 ++++++++++++
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/NEWS b/NEWS
index 9d2b5e35f..bc24495d8 100644
--- a/NEWS
+++ b/NEWS
@@ -11,6 +11,7 @@ Enhancements
  - [core] updated time zones to version 2016i
  - [eas] now also search on senders when using EAS Search ops
  - [web] allow multiple messages to be marked as seen (#3873)
+ - [web] use switches instead of checkboxes in Calendars module
 
 Bug fixes
  - [core] fixed condition in weekly recurrence calculator
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index cd287348b..140e7cec2 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -57,11 +57,11 @@
                    as-sortable="app.sortableCalendars" is-disabled="!app.sortableMode">
             <md-list-item ng-repeat="calendar in app.service.$calendars | filter:app.filter"
                           as-sortable-item="as-sortable-item">
-              <md-checkbox ng-model="calendar.active"
-                           ng-class="calendar.getClassName('checkbox')"
-                           ng-true-value="1"
-                           ng-false-value="0"
-                           label:aria-label="Enable"><!-- enable --></md-checkbox>
+              <md-switch ng-model="calendar.active"
+                         ng-class="calendar.getClassName('md-switch')"
+                         ng-true-value="1"
+                         ng-false-value="0"
+                         label:aria-label="Enable"><!-- enable --></md-switch>
               <p class="sg-item-name"
                  ng-dblclick="app.editFolder(calendar)"
                  ng-show="app.editMode != calendar.id">
@@ -162,12 +162,11 @@
                    as-sortable="app.sortableCalendars" is-disabled="!app.sortableMode">
             <md-list-item ng-repeat="calendar in app.service.$subscriptions | filter:app.filter"
                           as-sortable-item="as-sortable-item">
-              <md-checkbox ng-model="calendar.active"
-                           ng-class="calendar.getClassName('checkbox')"
+              <md-switch ng-model="calendar.active"
+                           ng-class="calendar.getClassName('md-switch')"
                            ng-true-value="1"
                            ng-false-value="0"
-                           label:aria-label="Enable"><!-- enable -->
-              </md-checkbox>
+                           label:aria-label="Enable"><!-- enable --></md-switch>
               <p class="sg-item-name"
                  ng-dblclick="app.editFolder(calendar)"
                  ng-show="app.editMode != calendar.id">
@@ -250,11 +249,11 @@
                    as-sortable="app.sortableCalendars" is-disabled="!app.sortableMode">
             <md-list-item ng-repeat="calendar in app.service.$webcalendars | filter:app.filter"
                           as-sortable-item="as-sortable-item">
-              <md-checkbox ng-model="calendar.active"
-                           ng-class="calendar.getClassName('checkbox')"
+              <md-switch ng-model="calendar.active"
+                           ng-class="calendar.getClassName('md-switch')"
                            ng-true-value="1"
                            ng-false-value="0"
-                           label:aria-label="Enable"><!-- enable --></md-checkbox>
+                           label:aria-label="Enable"><!-- enable --></md-switch>
               <p class="sg-item-name"
                  ng-dblclick="app.editFolder(calendar)"
                  ng-show="app.editMode != calendar.id">
diff --git a/UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js b/UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js
index 58968618f..fe4b95257 100644
--- a/UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js
+++ b/UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js
@@ -65,6 +65,16 @@
         '  .checkbox-folder{{ cssCtrl.ngModel.id }}.md-checked .md-icon:after {',
         '    border-color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
         '  }',
+        /* Switch color */
+        '  .md-switch-folder{{ cssCtrl.ngModel.id }}.md-checked .md-thumb {',
+        '    background-color: {{ cssCtrl.ngModel.color }} !important;',
+        '  }',
+        '  .md-switch-folder{{ cssCtrl.ngModel.id }}.md-checked .md-bar {',
+        '    background-color: {{ cssCtrl.transparent(cssCtrl.ngModel.color, "0.5") }} !important;',
+        '  }',
+        '  .md-switch-folder{{ cssCtrl.ngModel.id }} .md-bar {',
+        '    background-color: {{ cssCtrl.transparent(cssCtrl.ngModel.color, "0.3") }} !important;',
+        '  }',
         '</style>'
       ].join('')
     };
@@ -73,6 +83,11 @@
       var vm = this;
 
       vm.contrast = contrast; // defined in Common/utils.js
+      vm.transparent = function(hex, ratio) {
+        var color = hexToRgb(hex);
+
+        return ['rgba(' + color.r, color.g, color.b, ratio + ')'].join(',');
+      };
     }
   }