diff options
| -rw-r--r-- | apps/theming/css/theming.scss | 24 | ||||
| -rw-r--r-- | apps/theming/lib/Util.php | 35 | ||||
| -rw-r--r-- | apps/theming/tests/UtilTest.php | 20 |
3 files changed, 61 insertions, 18 deletions
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss index 4474c232d94..cabcd5a2e0e 100644 --- a/apps/theming/css/theming.scss +++ b/apps/theming/css/theming.scss @@ -1,3 +1,12 @@ +/** Calculate luma as it is also used in OCA\Theming\Util::calculateLuma */ +@function luma($c) { + $-local-red: red(rgba($c, 1.0)); + $-local-green: green(rgba($c, 1.0)); + $-local-blue: blue(rgba($c, 1.0)); + + @return (0.2126 * $-local-red + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255; +} + .nc-theming-main-background { background-color: $color-primary; } @@ -10,7 +19,11 @@ color: $color-primary-text; } -@if (lightness($color-primary) > 55) { +@if (luma($color-primary) > 0.6) { + #appmenu img, + #appmenu image { + filter: invert(1); + } .searchbox input[type="search"] { background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center; } @@ -53,6 +66,11 @@ background-color: nc-darken($color-primary-element, 30%) !important; } } +} @else { + #appmenu img, + #appmenu image { + filter: none; + } } /* Colorized svg images */ @@ -90,8 +108,8 @@ input.primary, color: $color-primary-text; } -@if (lightness($color-primary) > 50) { - #body-login #submit-icon.icon-confirm-white { +@if (luma($color-primary) > 0.6) { + #body-login #submit-wrapper .icon-confirm-white { background-image: url('../../../core/img/actions/confirm.svg'); } } diff --git a/apps/theming/lib/Util.php b/apps/theming/lib/Util.php index 194b5eeb0d0..6a1aa672108 100644 --- a/apps/theming/lib/Util.php +++ b/apps/theming/lib/Util.php @@ -63,8 +63,8 @@ class Util { * @return bool */ public function invertTextColor($color) { - $l = $this->calculateLuminance($color); - if($l>0.55) { + $l = $this->calculateLuma($color); + if($l>0.6) { return true; } else { return false; @@ -90,6 +90,26 @@ class Util { * @return float */ public function calculateLuminance($color) { + list($red, $green, $blue) = $this->hexToRGB($color); + $compiler = new Compiler(); + $hsl = $compiler->toHSL($red, $green, $blue); + return $hsl[3]/100; + } + + /** + * @param string $color rgb color value + * @return float + */ + public function calculateLuma($color) { + list($red, $green, $blue) = $this->hexToRGB($color); + return (0.2126 * $red + 0.7152 * $green + 0.0722 * $blue) / 255; + } + + /** + * @param string $color rgb color value + * @return int[] + */ + public function hexToRGB($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}; @@ -97,12 +117,11 @@ class Util { if (strlen($hex) !== 6) { return 0; } - $red = hexdec(substr($hex, 0, 2)); - $green = hexdec(substr($hex, 2, 2)); - $blue = hexdec(substr($hex, 4, 2)); - $compiler = new Compiler(); - $hsl = $compiler->toHSL($red, $green, $blue); - return $hsl[3]/100; + return [ + hexdec(substr($hex, 0, 2)), + hexdec(substr($hex, 2, 2)), + hexdec(substr($hex, 4, 2)) + ]; } /** diff --git a/apps/theming/tests/UtilTest.php b/apps/theming/tests/UtilTest.php index 94e4c9cbcc8..1ad77be72d5 100644 --- a/apps/theming/tests/UtilTest.php +++ b/apps/theming/tests/UtilTest.php @@ -53,14 +53,20 @@ class UtilTest extends TestCase { $this->util = new Util($this->config, $this->appManager, $this->appData); } - public function testInvertTextColorLight() { - $invert = $this->util->invertTextColor('#ffffff'); - $this->assertEquals(true, $invert); + public function dataInvertTextColor() { + return [ + ['#ffffff', true], + ['#000000', false], + ['#0082C9', false], + ['#ffff00', true], + ]; } - - public function testInvertTextColorDark() { - $invert = $this->util->invertTextColor('#000000'); - $this->assertEquals(false, $invert); + /** + * @dataProvider dataInvertTextColor + */ + public function testInvertTextColor($color, $expected) { + $invert = $this->util->invertTextColor($color); + $this->assertEquals($expected, $invert); } public function testCalculateLuminanceLight() { |