diff --git a/css/calendarlist.css b/css/calendarlist.css index e58a72c59..a7035d852 100644 --- a/css/calendarlist.css +++ b/css/calendarlist.css @@ -191,12 +191,17 @@ align-items: center; } .colorpicker .colorpicker-list li { - height: 26px; - width: 26px !important; + height: 24px; + width: 24px !important; } .colorpicker .colorpicker-list li.selected { border: 1px solid #333; } +.colorpicker .colorpicker-list li.randomcolour { + background-image: url('../img/random.svg'); + background-repeat: no-repeat; + background-position: center center; +} /*scroll issues */ #scrollable { diff --git a/img/random.svg b/img/random.svg new file mode 100644 index 000000000..5c44f70e8 --- /dev/null +++ b/img/random.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/js/app/directives/colorpickerDirective.js b/js/app/directives/colorpickerDirective.js index 16e3af5c8..ec4f00242 100644 --- a/js/app/directives/colorpickerDirective.js +++ b/js/app/directives/colorpickerDirective.js @@ -14,24 +14,30 @@ * * This library is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU AFFERO GENERAL PUBLIC LICENSE for more details. * * You should have received a copy of the GNU Affero General Public * License along with this library. If not, see . * */ - + /* https://github.com/kayellpeee/hsl_rgb_converter * expected hue range: [0, 360) * expected saturation range: [0, 1] * expected lightness range: [0, 1] */ var hslToRgb = function(hue, saturation, lightness) { + 'use strict'; // based on algorithm from http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB - if (hue == undefined) { + if(Array.isArray(hue)) { + [hue, saturation, lightness] = hue; + } + if (hue === undefined) { return [0, 0, 0]; } + saturation /= 100; + lightness /= 100; var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation; var huePrime = hue / 60; @@ -77,6 +83,25 @@ var hslToRgb = function(hue, saturation, lightness) { }; +/* + * Convert rgb array to hex string + */ +var rgbToHex = function(r, g, b) { + 'use strict'; + if(Array.isArray(r)) { + [r, g, b] = r; + } + return '#' + parseInt(r, 10).toString(16) + parseInt(g, 10).toString(16) + parseInt(b, 10).toString(16); +}; + + +/* + * Generate a random colour with the core generator + */ +var randColour = function() { + 'use strict'; + return rgbToHex(hslToRgb(Math.random().toString().toHsl())); +}; /** * Directive: Colorpicker @@ -100,13 +125,11 @@ app.directive('colorpicker', function() { var hsl = ""; var hslcolour = ""; // 0 40 80 120 160 200 240 280 320 - listofcolours = ["15", "9", "4", "b", "6", "11", "e", "f", "57"]; + listofcolours = ["15", "9", "4", "b", "6", "11", "74", "f", "57"]; listofcolours.forEach(function(hash, index) { hsl = hash.toHsl(); - hslcolour = hslToRgb(Math.round(hsl[0]/40)*40, hsl[1]/100, hsl[2]/100); - listofcolours[index] = '#' + parseInt(hslcolour[0], 10).toString(16)+ - parseInt(hslcolour[1], 10).toString(16)+ - parseInt(hslcolour[2], 10).toString(16) + hslcolour = hslToRgb(hsl); + listofcolours[index] = rgbToHex(hslcolour); }); } return { @@ -119,6 +142,12 @@ app.directive('colorpicker', function() { link: function(scope, element, attr) { scope.colors = scope.customizedColors || listofcolours; scope.selected = scope.selected || scope.colors[0]; + scope.random = "#000000"; + + scope.randomizeColour = function() { + scope.random = randColour(); + scope.pick(scope.random); + }; scope.pick = function(color) { scope.selected = color; diff --git a/js/public/app.js b/js/public/app.js index e1acf4446..3e78c8ca4 100644 --- a/js/public/app.js +++ b/js/public/app.js @@ -1557,41 +1557,139 @@ app.controller('VAlarmController', ["$scope", function($scope) { }; }]); +/* https://github.com/kayellpeee/hsl_rgb_converter + * expected hue range: [0, 360) + * expected saturation range: [0, 1] + * expected lightness range: [0, 1] + */ +var hslToRgb = function(hue, saturation, lightness) { + 'use strict'; + // based on algorithm from http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB + if(Array.isArray(hue)) { + [hue, saturation, lightness] = hue; + } + if (hue === undefined) { + return [0, 0, 0]; + } + saturation /= 100; + lightness /= 100; + + var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation; + var huePrime = hue / 60; + var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1)); + + huePrime = Math.floor(huePrime); + var red; + var green; + var blue; + + if (huePrime === 0) { + red = chroma; + green = secondComponent; + blue = 0; + } else if (huePrime === 1) { + red = secondComponent; + green = chroma; + blue = 0; + } else if (huePrime === 2) { + red = 0; + green = chroma; + blue = secondComponent; + } else if (huePrime === 3) { + red = 0; + green = secondComponent; + blue = chroma; + } else if (huePrime === 4) { + red = secondComponent; + green = 0; + blue = chroma; + } else if (huePrime === 5) { + red = chroma; + green = 0; + blue = secondComponent; + } + + var lightnessAdjustment = lightness - (chroma / 2); + red += lightnessAdjustment; + green += lightnessAdjustment; + blue += lightnessAdjustment; + + return [Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255)]; + +}; + +/* + * Convert rgb array to hex string + */ +var rgbToHex = function(r, g, b) { + 'use strict'; + if(Array.isArray(r)) { + [r, g, b] = r; + } + return '#' + parseInt(r, 10).toString(16) + parseInt(g, 10).toString(16) + parseInt(b, 10).toString(16); +}; + + +/* + * Generate a random colour with the core generator + */ +var randColour = function() { + 'use strict'; + return rgbToHex(hslToRgb(Math.random().toString().toHsl())); +}; + /** -* Directive: Colorpicker -* Description: Colorpicker for the Calendar app. -*/ + * Directive: Colorpicker + * Description: Colorpicker for the Calendar app. + */ app.directive('colorpicker', function() { - 'use strict'; - var listofcolours = [ - '#31CC7C', - '#317CCC', - '#FF7A66', - '#F1DB50', - '#7C31CC', - '#CC317C', - '#3A3B3D', - '#CACBCD' - ]; - return { - scope: { - selected: '=', - customizedColors: '=colors' - }, - restrict: 'AE', - templateUrl: OC.filePath('calendar','templates', 'colorpicker.html'), - link: function (scope, element, attr) { - scope.colors = scope.customizedColors || listofcolours; - scope.selected = scope.selected || scope.colors[0]; - - scope.pick = function (color) { - scope.selected = color; - }; - - } - }; + 'use strict'; + var listofcolours = [ + '#31CC7C', + '#317CCC', + '#FF7A66', + '#F1DB50', + '#7C31CC', + '#CC317C', + '#3A3B3D', + '#CACBCD' + ]; + if (typeof String.prototype.toHsl === 'function') { + var hsl = ""; + var hslcolour = ""; + // 0 40 80 120 160 200 240 280 320 + listofcolours = ["15", "9", "4", "b", "6", "11", "74", "f", "57"]; + listofcolours.forEach(function(hash, index) { + hsl = hash.toHsl(); + hslcolour = hslToRgb(hsl); + listofcolours[index] = rgbToHex(hslcolour); + }); + } + return { + scope: { + selected: '=', + customizedColors: '=colors' + }, + restrict: 'AE', + templateUrl: OC.filePath('calendar', 'templates', 'colorpicker.html'), + link: function(scope, element, attr) { + scope.colors = scope.customizedColors || listofcolours; + scope.selected = scope.selected || scope.colors[0]; + scope.random = "#000000"; + + scope.randomizeColour = function() { + scope.random = randColour(); + scope.pick(scope.random); + }; + + scope.pick = function(color) { + scope.selected = color; + }; + + } + }; }); diff --git a/templates/colorpicker.html b/templates/colorpicker.html index 11880db94..7f95e9fe7 100644 --- a/templates/colorpicker.html +++ b/templates/colorpicker.html @@ -1,7 +1,9 @@