From 2ab7fd63ea1e8f4667c92daebdf1afa7ff265b48 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Sat, 15 Oct 2016 00:26:49 +0200 Subject: [PATCH] Invert icons on bright background --- css/style.css | 7 +++- img/details.svg | 1 + js/filters/iconWhiteFilter.js | 65 +++++++++++++++++++++++++++++++ js/filters/textColorFilter.js | 2 +- js/public/app.js | 46 +++++++++++++++++++++- templates/part.board.mainView.php | 8 ++-- 6 files changed, 122 insertions(+), 7 deletions(-) create mode 100644 img/details.svg create mode 100644 js/filters/iconWhiteFilter.js diff --git a/css/style.css b/css/style.css index 4a40b00c1..5c8615cfa 100644 --- a/css/style.css +++ b/css/style.css @@ -858,7 +858,9 @@ button:hover { .icon-group { background-image: url('../../../settings/img/users.svg'); } - +.icon-add-white { + background-image: url('../img/add-white.svg'); +} .icon-archive { background-image: url('../img/archive.svg'); } @@ -866,5 +868,8 @@ button:hover { background-image: url('../img/archive-white.svg'); } .icon-details { + background-image: url('../img/details.svg'); +} +.icon-details-white { background-image: url('../img/details-white.svg'); } diff --git a/img/details.svg b/img/details.svg new file mode 100644 index 000000000..ddea2db55 --- /dev/null +++ b/img/details.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/js/filters/iconWhiteFilter.js b/js/filters/iconWhiteFilter.js new file mode 100644 index 000000000..8fe0e294b --- /dev/null +++ b/js/filters/iconWhiteFilter.js @@ -0,0 +1,65 @@ +/* + * @copyright Copyright (c) 2016 Julius Härtl + * + * @author Julius Härtl + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program 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 + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +app.filter('iconWhiteFilter', function() { + return function (hex) { + // RGB2HLS by Garry Tan + // http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c + var result = /^([A-Fa-f\d]{2})([A-Fa-f\d]{2})([A-Fa-f\d]{2})$/i.exec(hex); + var color = result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null; + if(result !== null) { + r = color.r/255; + g = color.g/255; + b = color.b/255; + var max = Math.max(r, g, b), min = Math.min(r, g, b); + var h, s, l = (max + min) / 2; + + if(max == min){ + h = s = 0; // achromatic + }else{ + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch(max){ + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + h /= 6; + } + // TODO: Maybe just darken/lighten the color + if(l<0.5) { + return "-white"; + } else { + return ""; + } + //var rgba = "rgba(" + color.r + "," + color.g + "," + color.b + ",0.7)"; + //return rgba; + } else { + return ""; + } + + } +}); diff --git a/js/filters/textColorFilter.js b/js/filters/textColorFilter.js index 9a370e038..c73d298dd 100644 --- a/js/filters/textColorFilter.js +++ b/js/filters/textColorFilter.js @@ -58,7 +58,7 @@ app.filter('textColorFilter', function() { //var rgba = "rgba(" + color.r + "," + color.g + "," + color.b + ",0.7)"; //return rgba; } else { - return "#aa0000"; + return "#000000"; } } diff --git a/js/public/app.js b/js/public/app.js index a0072ad77..44e2613b0 100644 --- a/js/public/app.js +++ b/js/public/app.js @@ -500,6 +500,50 @@ app.filter('cardSearchFilter', function() { return arrayResult; }; }); +app.filter('iconWhiteFilter', function() { + return function (hex) { + // RGB2HLS by Garry Tan + // http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c + var result = /^([A-Fa-f\d]{2})([A-Fa-f\d]{2})([A-Fa-f\d]{2})$/i.exec(hex); + var color = result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null; + if(result !== null) { + r = color.r/255; + g = color.g/255; + b = color.b/255; + var max = Math.max(r, g, b), min = Math.min(r, g, b); + var h, s, l = (max + min) / 2; + + if(max == min){ + h = s = 0; // achromatic + }else{ + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch(max){ + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + h /= 6; + } + // TODO: Maybe just darken/lighten the color + if(l<0.5) { + return "-white"; + } else { + return ""; + } + //var rgba = "rgba(" + color.r + "," + color.g + "," + color.b + ",0.7)"; + //return rgba; + } else { + return ""; + } + + } +}); + app.filter('lightenColorFilter', function() { return function (hex) { var result = /^([A-Fa-f\d]{2})([A-Fa-f\d]{2})([A-Fa-f\d]{2})$/i.exec(hex); @@ -570,7 +614,7 @@ app.filter('textColorFilter', function() { //var rgba = "rgba(" + color.r + "," + color.g + "," + color.b + ",0.7)"; //return rgba; } else { - return "#aa0000"; + return "#000000"; } } diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php index 76f33fef1..e1cbda96e 100644 --- a/templates/part.board.mainView.php +++ b/templates/part.board.mainView.php @@ -9,9 +9,9 @@

{{ boardservice.data[id].title }}
-
-
-
+
+
+

@@ -107,7 +107,7 @@
- +