ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Invert icons on bright background

Browse Source
This commit is contained in:
Julius Haertl
2016-10-15 00:26:49 +02:00
parent c37f9384c3
commit 2ab7fd63ea
6 changed files with 122 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
css/style.css
View File

@@ -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');
}

1
img/details.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path color="#000" fill="none" d="M-62.897-32.993h163.31v97.986h-163.31z"/><path style="block-progression:tb;text-transform:none;text-indent:0" d="M2 3v3h3V3H2zm4 1v1h8V4H6zM2 7v3h3V7H2zm4 1v1h8V8H6zm-4 3v3h3v-3H2zm1 1h1v1H3v-1zm3 0v1h8v-1H6z" color="#000" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 351 B

65
js/filters/iconWhiteFilter.js Normal file
View File

@@ -0,0 +1,65 @@
/*
* @copyright Copyright (c) 2016 Julius Härtl <jus@bitgrid.net>
*
* @author Julius Härtl <jus@bitgrid.net>
*
* @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 <http://www.gnu.org/licenses/>.
*
*/
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 "";
}
}
});

2
js/filters/textColorFilter.js
View File

@@ -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";
}
}

46
js/public/app.js
View File

@@ -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";
}
}

8
templates/part.board.mainView.php
View File

@@ -9,9 +9,9 @@
<h1>
{{ boardservice.data[id].title }}
<div id="board-actions">
<div class="board-action-button" ng-if="filter!='archive'"><a ng-click="switchFilter('archive')" style="opacity:0.5;"><i class="icon icon-archive-white"></i></a></div>
<div class="board-action-button" ng-if="filter=='archive'"><a ng-click="switchFilter('')"><i class="icon icon-archive-white"></i></a></div>
<div class="board-action-button"><a ui-sref="board.detail({ id: id })"><i class="icon icon-details"></i></a>
<div class="board-action-button" ng-if="filter!='archive'"><a ng-click="switchFilter('archive')" style="opacity:0.5;"><i class="icon icon-archive{{ boardservice.getCurrent().color | iconWhiteFilter }}"></i></a></div>
<div class="board-action-button" ng-if="filter=='archive'"><a ng-click="switchFilter('')"><i class="icon icon-archive{{ boardservice.getCurrent().color | iconWhiteFilter }}"></i></a></div>
<div class="board-action-button"><a ui-sref="board.detail({ id: id })"><i class="icon icon-details{{ boardservice.getCurrent().color | iconWhiteFilter }}"></i></a>
</div>
</div>
</h1>
@@ -107,7 +107,7 @@
</h3>
</form>
<div ng-if="!s.status.addCard" ng-click="s.status.addCard=!s.status.addCard">
<i class="icon icon-add"></i>
<i class="icon icon-add{{ boardservice.getCurrent().color | iconWhiteFilter }}"></i>
</div>
</div>
</div>