Theming: Implement swapping the foreground color for bright colors

5 files changed, 101 insertions, 1 deletions

diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js
index bd4b4b34ed1..172c6bd31ca 100644
--- a/apps/theming/js/settings-admin.js
+++ b/apps/theming/js/settings-admin.js
@@ -31,11 +31,44 @@ function setThemingValue(setting, value) {
 	preview(setting, value);
 }
 
+function calculateLuminance(rgb) {
+	var hexValue = rgb.replace(/[^0-9A-Fa-f]/,'');
+	var r,g,b;
+	if(hexValue.length === 3) {
+		hexValue = hexValue[0] + hexValue[0] + hexValue[1] + hexValue[1] + hexValue[2] + hexValue[2];
+	}
+	if(hexValue.length !== 6) {
+		return 0;
+	}
+	r = parseInt(hexValue.substring(0,2), 16);
+	g = parseInt(hexValue.substring(2,4), 16);
+	b = parseInt(hexValue.substring(4,6), 16);
+	return (0.299*r + 0.587*g + 0.114*b)/255;
+}
+
 function preview(setting, value) {
 	if (setting === 'color') {
 		var headerClass = document.getElementById('header');
+		var expandDisplayNameClass = document.getElementById('expandDisplayName');
+		var headerAppName = headerClass.getElementsByClassName('header-appname')[0];
+		var textColor, icon;
+
+		if (calculateLuminance(value) > 0.5) {
+			textColor = "#000000";
+			icon = 'caret-dark';
+		} else {
+			textColor = "#ffffff";
+			icon = 'caret';
+		}
+
 		headerClass.style.background = value;
 		headerClass.style.backgroundImage = '../img/logo-icon.svg';
+		expandDisplayNameClass.style.color = textColor;
+		headerAppName.style.color = textColor;
+
+		$(headerClass).find('.icon-caret').each(function() {
+			$(this).css('background-image','url(/core/img/actions/'+icon+'.svg)');
+		});
 	}
 	if (setting === 'logoMime') {
 		console.log(setting);
diff --git a/apps/theming/lib/controller/themingcontroller.php b/apps/theming/lib/controller/themingcontroller.php
index a9ac36ca786..6eec5aafefa 100644
--- a/apps/theming/lib/controller/themingcontroller.php
+++ b/apps/theming/lib/controller/themingcontroller.php
@@ -30,6 +30,7 @@ use OCP\Files\IRootFolder;
 use OCP\IConfig;
 use OCP\IL10N;
 use OCP\IRequest;
+use OCA\Theming\Util;
 
 /**
  * Class ThemingController
@@ -231,6 +232,12 @@ class ThemingController extends Controller {
 				background-image: url(\'./loginbackground?v='.$cacheBusterValue.'\');
 			}';
 		}
+		if(Util::invertTextColor($color)) {
+			$responseCss .= '#header .header-appname, #expandDisplayName { color: #000000; } ';
+			$responseCss .= '#header .icon-caret { background-image: url(/core/img/actions/caret-dark.svg); } ';
+			$responseCss .= '.searchbox input[type="search"] { background: transparent url(\'../../../core/img/actions/search.svg\') no-repeat 6px center; color: #000; }';
+			$responseCss .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }';
+		}
 
 		\OC_Response::setExpiresHeader(gmdate('D, d M Y H:i:s', time() + (60*60*24*45)) . ' GMT');
 		\OC_Response::enableCaching();
diff --git a/apps/theming/lib/util.php b/apps/theming/lib/util.php
new file mode 100644
index 00000000000..8ff5ae89b14
--- /dev/null
+++ b/apps/theming/lib/util.php
@@ -0,0 +1,57 @@
+<?php
+/**
+ * @copyright Copyright (c) 2016 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/>.
+ *
+ */
+
+namespace OCA\Theming;
+
+class Util {
+
+	/**
+	 * @param string $color rgb color value
+	 * @return bool
+	 */
+	public static function invertTextColor($color) {
+		$l = self::calculateLuminance($color);
+		if($l>0.5) {
+			return true;
+		} else {
+			return false;
+		}
+	}
+
+	/**
+	 * @param string $color rgb color value
+	 * @return float
+	 */
+	public static function calculateLuminance($color) {
+		$hex = preg_replace("/[^0-9A-Fa-f]/", '', $color);
+		if (strlen($hex) === 3) {
+			$hex = $hex{0} . $hex{0} . $hex{1} . $hex{1} . $hex{2} . $hex{2};
+		}
+		if (strlen($hex) !== 6) {
+			return 0;
+		}
+		$r = hexdec(substr($hex, 0, 2));
+		$g = hexdec(substr($hex, 2, 2));
+		$b = hexdec(substr($hex, 4, 2));
+		return (0.299 * $r + 0.587 * $g + 0.114 * $b)/255;
+	}
+
+}
diff --git a/core/css/header.css b/core/css/header.css
index f80db22f0cd..91c6639deec 100644
--- a/core/css/header.css
+++ b/core/css/header.css
@@ -324,6 +324,9 @@
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	opacity: 1;
 }
+#expand .icon-caret {
+	margin-top: 0;
+}
 #expanddiv {
 	position: absolute;
 	right: 10px;
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 4a6937c6ea0..b3b492ecac4 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -73,7 +73,7 @@
 					</div>
 					<?php endif; ?>
 					<span id="expandDisplayName"><?php  p(trim($_['user_displayname']) != '' ? $_['user_displayname'] : $_['user_uid']) ?></span>
-					<img alt="" src="<?php print_unescaped(image_path('', 'actions/caret.svg')); ?>">
+					<div class="icon-caret"></div>
 				</div>
 				<div id="expanddiv">
 				<ul>