diff options
author | Julius Haertl <jus@bitgrid.net> | 2016-07-12 15:59:28 +0300 |
---|---|---|
committer | Julius Haertl <jus@bitgrid.net> | 2016-07-15 15:16:41 +0300 |
commit | 387550be88046bfe4f6098f7eaaba319b6a623b5 (patch) | |
tree | bd4b85ff32199c53ef6d876a99c3f7c74f8da779 | |
parent | ab6db739fa1ff9c8f1b0302b95fad807d6431ab5 (diff) |
Theming: Implement swapping the foreground color for bright colors
-rw-r--r-- | apps/theming/js/settings-admin.js | 33 | ||||
-rw-r--r-- | apps/theming/lib/controller/themingcontroller.php | 7 | ||||
-rw-r--r-- | apps/theming/lib/util.php | 57 | ||||
-rw-r--r-- | core/css/header.css | 3 | ||||
-rw-r--r-- | core/templates/layout.user.php | 2 |
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> |