(js,html) Use md-switch in Calendars list

pull/226/head
Francis Lachapelle 2016-11-22 09:57:39 -05:00
parent badab13cec
commit 5211e339fb
3 changed files with 27 additions and 12 deletions

1
NEWS
View File

@ -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

View File

@ -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">

View File

@ -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(',');
};
}
}