(js) Improve sgColorPicker directive
- replaced sg-on-select by ng-model; - set button background (no more wrapping necessary).pull/110/head
Francis Lachapelle
parent
b02a4f82a0
commit
ddf97ebb13
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in New Issue