Invert icons on bright background

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

img/details.svg

@@ -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>

js/filters/iconWhiteFilter.js

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

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

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

templates/part.board.mainView.php

@@ -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('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-white"></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"></i></a>
+			<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>