parent
8f005b90f5
commit
8678949c87
1
NEWS
1
NEWS
|
@ -7,6 +7,7 @@ New features
|
||||||
Enhancements
|
Enhancements
|
||||||
- [core] now possible to {un}subscribe to folders using sogo-tool
|
- [core] now possible to {un}subscribe to folders using sogo-tool
|
||||||
- [web] AngularJS optimizations in Mail module
|
- [web] AngularJS optimizations in Mail module
|
||||||
|
- [web] AngularJS optimization of color picker
|
||||||
- [web] improve display of tasks status
|
- [web] improve display of tasks status
|
||||||
|
|
||||||
Bug fixes
|
Bug fixes
|
||||||
|
|
|
@ -7,71 +7,127 @@
|
||||||
/*
|
/*
|
||||||
* sgColorPicker - Color picker widget
|
* sgColorPicker - Color picker widget
|
||||||
* @restrict element
|
* @restrict element
|
||||||
* @param {function} sgOnSelect - the function to call when clicking on a color.
|
|
||||||
* One variable is available: color.
|
|
||||||
* @ngInject
|
* @ngInject
|
||||||
* @example:
|
* @example:
|
||||||
|
|
||||||
<sg-color-picker sg-on-select="properties.calendar.color = color"></sg-color-picker>
|
<sg-color-picker ng-model="properties.calendar.color"></sg-color-picker>
|
||||||
*/
|
*/
|
||||||
function sgColorPicker() {
|
function sgColorPicker() {
|
||||||
return {
|
return {
|
||||||
restrict: 'E',
|
restrict: 'E',
|
||||||
require: 'ngModel',
|
require: 'ngModel',
|
||||||
template: [
|
template: [
|
||||||
'<md-menu>',
|
|
||||||
' <md-button class="md-icon-button"',
|
' <md-button class="md-icon-button"',
|
||||||
' label:aria-label="Options"',
|
' label:aria-label="Options"',
|
||||||
' ng-style="{ \'background-color\': sgColor }"',
|
' ng-click="$ctrl.showPicker($event)">',
|
||||||
' ng-click="$mdOpenMenu()"',
|
' <md-icon>format_color_fill</md-icon>',
|
||||||
' md-menu-origin="md-menu-origin">',
|
' </md-button>'
|
||||||
' <md-icon ng-style="{ color: sgIconColor }">color_lens</md-icon>',
|
|
||||||
' </md-button>',
|
|
||||||
' <md-menu-content width="3">',
|
|
||||||
' <md-content class="md-padding">',
|
|
||||||
' <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 ::sgColors track by $index"',
|
|
||||||
' ng-style="::{ \'background-color\': color }"',
|
|
||||||
' ng-class="::{ selected: color == sgColor }"',
|
|
||||||
' ng-click="setColor($event, color)"><md-icon ng-style="::{ color: color }">check_box</md-icon></md-grid-tile>',
|
|
||||||
' </md-grid-list>',
|
|
||||||
' </md-content>',
|
|
||||||
' </md-menu-content>',
|
|
||||||
'</md-menu>'
|
|
||||||
].join(''),
|
].join(''),
|
||||||
replace: true,
|
|
||||||
controller: sgColorPickerController,
|
controller: sgColorPickerController,
|
||||||
link: link
|
controllerAs: '$ctrl'
|
||||||
};
|
};
|
||||||
|
|
||||||
function link(scope, iElement, iAttr, ngModelController) {
|
|
||||||
// Expose ng-model value to scope
|
|
||||||
ngModelController.$render = function() {
|
|
||||||
scope.sgColor = ngModelController.$viewValue;
|
|
||||||
scope.sgIconColor = contrast(ngModelController.$viewValue);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @ngInject
|
* @ngInject
|
||||||
*/
|
*/
|
||||||
sgColorPickerController.$inject = ['$scope', '$element', 'sgColors'];
|
sgColorPickerController.$inject = ['$scope', '$element', '$mdPanel', 'sgColors'];
|
||||||
function sgColorPickerController($scope, $element, sgColors) {
|
function sgColorPickerController($scope, $element, $mdPanel, sgColors) {
|
||||||
var ngModelController = $element.controller('ngModel');
|
var $ctrl, ngModelController, color;
|
||||||
|
|
||||||
$scope.sgColors = sgColors.selection;
|
this.$onInit = function() {
|
||||||
$scope.setColor = function(event, color) {
|
$ctrl = this;
|
||||||
if (event) {
|
ngModelController = $element.controller('ngModel');
|
||||||
_.forEach(event.currentTarget.parentElement.children, function(tile) {
|
};
|
||||||
tile.classList.remove('selected');
|
|
||||||
});
|
this.$postLink = function() {
|
||||||
event.currentTarget.classList.add('selected');
|
this.buttonIcon = $element.find('md-icon');
|
||||||
|
ngModelController.$render = function() {
|
||||||
|
updateColor(ngModelController.$viewValue);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function updateColor(newColor) {
|
||||||
|
color = newColor;
|
||||||
|
$ctrl.buttonIcon.css('color', color);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showPicker = function($event) {
|
||||||
|
var panelPosition = $mdPanel.newPanelPosition()
|
||||||
|
.relativeTo($ctrl.buttonIcon)
|
||||||
|
.addPanelPosition(
|
||||||
|
$mdPanel.xPosition.ALIGN_START,
|
||||||
|
$mdPanel.yPosition.ALIGN_TOPS
|
||||||
|
);
|
||||||
|
|
||||||
|
var panelAnimation = $mdPanel.newPanelAnimation()
|
||||||
|
.openFrom($ctrl.buttonIcon)
|
||||||
|
.duration(100)
|
||||||
|
.withAnimation($mdPanel.animation.FADE);
|
||||||
|
|
||||||
|
// Build grid with 7 colors per row
|
||||||
|
var columns = [];
|
||||||
|
var column = '';
|
||||||
|
for (var i = 0; i < sgColors.selection.length; i++) {
|
||||||
|
var currentColor = sgColors.selection[i];
|
||||||
|
var currentContrastColor = contrast(currentColor);
|
||||||
|
var selected = (currentColor == color);
|
||||||
|
if (i % 7 === 0) {
|
||||||
|
if (column.length) columns.push(column);
|
||||||
|
column = '';
|
||||||
|
}
|
||||||
|
column += '<span ';
|
||||||
|
if (selected)
|
||||||
|
column += 'class="selected" ';
|
||||||
|
column += 'style="background-color: ' + currentColor + '" ng-click="$menuCtrl.setColor($event, \'' + currentColor + '\')">';
|
||||||
|
if (selected)
|
||||||
|
column += '<md-icon class="icon-check" style="color: ' + currentContrastColor + '"></md-icon>';
|
||||||
|
column += '</span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
var config = {
|
||||||
|
attachTo: angular.element(document.body),
|
||||||
|
bindToController: true,
|
||||||
|
controller: MenuController,
|
||||||
|
controllerAs: '$menuCtrl',
|
||||||
|
position: panelPosition,
|
||||||
|
animation: panelAnimation,
|
||||||
|
targetEvent: $event,
|
||||||
|
template: [
|
||||||
|
'<div class="sg-color-picker-panel" md-whiteframe="3">',
|
||||||
|
' <div>' + columns.join('</div><div>') + '</div>',
|
||||||
|
'</div>'
|
||||||
|
].join(''),
|
||||||
|
trapFocus: true,
|
||||||
|
clickOutsideToClose: true,
|
||||||
|
escapeToClose: true,
|
||||||
|
focusOnOpen: true
|
||||||
|
};
|
||||||
|
|
||||||
|
$mdPanel.open(config)
|
||||||
|
.then(function(panelRef) {
|
||||||
|
// Automatically close panel when clicking inside of it
|
||||||
|
panelRef.panelEl.one('click', function() {
|
||||||
|
panelRef.close();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
MenuController.$inject = ['mdPanelRef', '$state', '$mdDialog', 'User'];
|
||||||
|
function MenuController(mdPanelRef, $state, $mdDialog, User) {
|
||||||
|
var $menuCtrl = this;
|
||||||
|
|
||||||
|
this.setColor = function(event, color) {
|
||||||
|
if (event) {
|
||||||
|
_.forEach(event.currentTarget.parentElement.children, function(tile) {
|
||||||
|
tile.classList.remove('selected');
|
||||||
|
});
|
||||||
|
event.currentTarget.classList.add('selected');
|
||||||
|
}
|
||||||
|
// Update scope value and ng-model
|
||||||
|
updateColor(color);
|
||||||
|
ngModelController.$setViewValue(color);
|
||||||
|
};
|
||||||
}
|
}
|
||||||
// Update scope value and ng-model
|
|
||||||
$scope.sgColor = color;
|
|
||||||
$scope.sgIconColor = contrast(color);
|
|
||||||
ngModelController.$setViewValue(color);
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,30 @@
|
||||||
|
/// colorpicker.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||||
|
|
||||||
|
$colorpicker-size: 25px;
|
||||||
|
|
||||||
|
.sg-color-picker-panel {
|
||||||
|
|
||||||
|
div {
|
||||||
|
line-height: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
height: $colorpicker-size;
|
||||||
|
transition: transform .2s;
|
||||||
|
width: $colorpicker-size;
|
||||||
|
z-index: $z-index-menu;
|
||||||
|
|
||||||
|
&:not(.selected):hover {
|
||||||
|
outline: 0;
|
||||||
|
transform: scale(1.3, 1.3);
|
||||||
|
z-index: $z-index-menu + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
md-icon {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -65,6 +65,7 @@
|
||||||
|
|
||||||
// Inverse components
|
// Inverse components
|
||||||
@import 'components/avatarImage/avatarImage';
|
@import 'components/avatarImage/avatarImage';
|
||||||
|
@import 'components/colorpicker/colorpicker';
|
||||||
@import 'components/draggable-droppable/draggable';
|
@import 'components/draggable-droppable/draggable';
|
||||||
@import 'components/draggable-droppable/droppable';
|
@import 'components/draggable-droppable/droppable';
|
||||||
@import 'components/hotkeys/hotkeys';
|
@import 'components/hotkeys/hotkeys';
|
||||||
|
|
Loading…
Reference in New Issue