(js) Improve sgColorPicker directive
- replaced sg-on-select by ng-model; - set button background (no more wrapping necessary).pull/110/head
parent
b02a4f82a0
commit
ddf97ebb13
|
@ -349,11 +349,10 @@
|
||||||
ng-repeat="item in
|
ng-repeat="item in
|
||||||
app.preferences.defaults.SOGoCalendarCategories
|
app.preferences.defaults.SOGoCalendarCategories
|
||||||
track by $index">
|
track by $index">
|
||||||
<i class="md-avatar" ng-style="{'background-color': app.preferences.defaults.SOGoCalendarCategoriesColors[item]}">
|
<sg-color-picker ng-model="app.preferences.defaults.SOGoCalendarCategoriesColors[item]"><!-- color picker--></sg-color-picker>
|
||||||
<sg-color-picker sg-on-select="app.preferences.defaults.SOGoCalendarCategoriesColors[item] = color"><!-- color picker--></sg-color-picker>
|
|
||||||
</i>
|
|
||||||
<md-input-container>
|
<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-input-container>
|
||||||
<md-button class="sg-icon-button" type="button"
|
<md-button class="sg-icon-button" type="button"
|
||||||
layout="row" layout-align="end center"
|
layout="row" layout-align="end center"
|
||||||
|
@ -641,9 +640,7 @@
|
||||||
<md-list-item flex="50"
|
<md-list-item flex="50"
|
||||||
ng-repeat="(key, value) in
|
ng-repeat="(key, value) in
|
||||||
app.preferences.defaults.SOGoMailLabelsColors">
|
app.preferences.defaults.SOGoMailLabelsColors">
|
||||||
<i class="md-avatar" ng-style="{'background-color': value[1]}">
|
<sg-color-picker ng-model="value[1]"><!-- color picker--></sg-color-picker>
|
||||||
<sg-color-picker sg-on-select="value[1] = color"><!-- color picker--></sg-color-picker>
|
|
||||||
</i>
|
|
||||||
<md-input-container>
|
<md-input-container>
|
||||||
<input type="text"
|
<input type="text"
|
||||||
label:aria-label="Label"
|
label:aria-label="Label"
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
<md-toolbar ng-class="properties.calendar.getClassName('bg')">
|
<md-toolbar ng-class="properties.calendar.getClassName('bg')">
|
||||||
<div class="md-toolbar-tools">
|
<div class="md-toolbar-tools">
|
||||||
<!-- color -->
|
<!-- 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 -->
|
<!-- name -->
|
||||||
<md-input-container>
|
<md-input-container>
|
||||||
<label><var:string label:value="Name"/></label>
|
<label><var:string label:value="Name"/></label>
|
||||||
|
|
|
@ -14,50 +14,53 @@
|
||||||
|
|
||||||
<sg-color-picker sg-on-select="properties.calendar.color = color"></sg-color-picker>
|
<sg-color-picker sg-on-select="properties.calendar.color = color"></sg-color-picker>
|
||||||
*/
|
*/
|
||||||
sgColorPicker.$inject = ['$parse'];
|
function sgColorPicker() {
|
||||||
function sgColorPicker($parse) {
|
|
||||||
return {
|
return {
|
||||||
restrict: 'E',
|
restrict: 'E',
|
||||||
|
require: 'ngModel',
|
||||||
template: [
|
template: [
|
||||||
'<md-menu>',
|
'<md-menu>',
|
||||||
' <md-button class="sg-icon-button"',
|
' <md-button class="md-icon-button"',
|
||||||
' label:aria-label="Options"',
|
' label:aria-label="Options"',
|
||||||
|
' ng-style="{ \'background-color\': sgColor }"',
|
||||||
' ng-click="$mdOpenMenu()"',
|
' ng-click="$mdOpenMenu()"',
|
||||||
' md-menu-origin="md-menu-origin">',
|
' md-menu-origin="md-menu-origin">',
|
||||||
' <md-icon>color_lens</md-icon>',
|
' <md-icon style="color: #fff">color_lens</md-icon>',
|
||||||
' </md-button>',
|
' </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-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-style="{ \'background-color\': color }"',
|
||||||
' ng-click="$sgColorPickerController.select(color)"></md-grid-tile>',
|
' ng-click="setColor(color)"></md-grid-tile>',
|
||||||
' </md-grid-list>',
|
' </md-grid-list>',
|
||||||
' </md-menu-content>',
|
' </md-menu-content>',
|
||||||
'</md-menu>'
|
'</md-menu>'
|
||||||
].join(''),
|
].join(''),
|
||||||
replace: true,
|
replace: true,
|
||||||
bindToController: true,
|
|
||||||
controller: sgColorPickerController,
|
controller: sgColorPickerController,
|
||||||
controllerAs: '$sgColorPickerController',
|
|
||||||
link: link
|
link: link
|
||||||
};
|
};
|
||||||
|
|
||||||
function link(scope, iElement, iAttr, controller) {
|
function link(scope, iElement, iAttr, ngModelController) {
|
||||||
// Associate callback to controller
|
// Expose ng-model value to scope
|
||||||
controller.doSelect = $parse(iElement.attr('sg-on-select'));
|
ngModelController.$render = function() {
|
||||||
|
scope.sgColor = ngModelController.$viewValue;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @ngInject
|
* @ngInject
|
||||||
*/
|
*/
|
||||||
sgColorPickerController.$inject = ['$scope', 'sgColors'];
|
sgColorPickerController.$inject = ['$scope', '$element', 'sgColors'];
|
||||||
function sgColorPickerController($scope, sgColors) {
|
function sgColorPickerController($scope, $element, sgColors) {
|
||||||
var vm = this;
|
var ngModelController = $element.controller('ngModel');
|
||||||
|
|
||||||
vm.colors = sgColors.selection;
|
$scope.sgColors = sgColors.selection;
|
||||||
vm.select = function(color) {
|
$scope.setColor = function(color) {
|
||||||
vm.doSelect($scope, { color: color });
|
// Update scope value and ng-model
|
||||||
|
$scope.sgColor = color;
|
||||||
|
ngModelController.$setViewValue(color);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -144,19 +144,17 @@
|
||||||
/**
|
/**
|
||||||
* @ngInject
|
* @ngInject
|
||||||
*/
|
*/
|
||||||
PropertiesDialogController.$inject = ['$timeout', '$mdDialog', 'srcCalendar'];
|
PropertiesDialogController.$inject = ['$scope', '$mdDialog', 'srcCalendar'];
|
||||||
function PropertiesDialogController($timeout, $mdDialog, srcCalendar) {
|
function PropertiesDialogController($scope, $mdDialog, srcCalendar) {
|
||||||
var vm = this;
|
var vm = this;
|
||||||
|
|
||||||
vm.calendar = new Calendar(srcCalendar.$omit());
|
vm.calendar = new Calendar(srcCalendar.$omit());
|
||||||
vm.setColor = setColor;
|
|
||||||
vm.saveProperties = saveProperties;
|
vm.saveProperties = saveProperties;
|
||||||
vm.close = close;
|
vm.close = close;
|
||||||
|
|
||||||
function setColor(color) {
|
$scope.$watch('properties.calendar.color', function() {
|
||||||
vm.calendar.color = color;
|
srcCalendar.color = vm.calendar.color;
|
||||||
srcCalendar.color = color;
|
});
|
||||||
}
|
|
||||||
|
|
||||||
function saveProperties() {
|
function saveProperties() {
|
||||||
vm.calendar.$save();
|
vm.calendar.$save();
|
||||||
|
|
Loading…
Reference in New Issue