Skip to content

Switches the default logo color depending on the primary color #10898

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MorrisJobke merged 6 commits into from
Oct 8, 2018
Merged

Switches the default logo color depending on the primary color #10898

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
92049c3
Switches the default logo color depending on the primary color
weeman1337 Aug 28, 2018
d855c38
Moves the logo files to logo
weeman1337 Aug 28, 2018
c7e81e1
Updates inverted logo handling to work like the app icons
weeman1337 Aug 28, 2018
a45ec3d
Refactors the scss svg functions
weeman1337 Aug 30, 2018
065e0c0
Fixes the logo test
weeman1337 Oct 3, 2018
044ab0c
Adapts the theming util to the new core logo image path
weeman1337 Oct 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Updates inverted logo handling to work like the app icons 
Signed-off-by: Michael Weimann <[email protected]>
  • Loading branch information
@weeman1337 @rullzer
weeman1337 authored and rullzer committed Oct 2, 2018
commit c7e81e17c86a6e6beff433238a6923f5d931c22f
26 changes: 23 additions & 3 deletions apps/theming/css/theming.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,17 @@
@return (0.2126 * $-local-red + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255;
}

$has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != '';
$invert: luma($color-primary) > 0.6;

@if ($has-custom-logo == false) {
@if ($invert) {
$image-logo: url('../../../../svg/core/logo/logo/000000?v=1');
Copy link
Member

@skjnldsv skjnldsv Aug 29, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use the scss function for that :)

Copy link
Member

@skjnldsv skjnldsv Aug 29, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

server/core/css/functions.scss

Lines 34 to 48 in 7210b11

@mixin icon-color($icon, $dir, $color, $version: 1, $core: false) {
// remove # from color
// inspect cast int to string
$index: str-index(inspect($color), '#');
@if $index {
$color: str-slice(inspect($color), 2);
}
$varName: "--icon-#{$icon}-#{$color}";
@if $core {
#{$varName}: url('#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=#{$version}');
} @else {
#{$varName}: url('#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=#{$version}');
}
background-image: var(#{$varName});
}

} @else {
$image-logo: url('../../../../svg/core/logo/logo/ffffff?v=1');
}
}

.nc-theming-main-background {
background-color: $color-primary;
}
Expand All @@ -19,7 +30,7 @@
color: $color-primary-text;
}

@if (luma($color-primary) > 0.6) {
@if ($invert) {
#appmenu:not(.inverted) svg {
filter: invert(1);
}
Expand Down Expand Up @@ -104,7 +115,8 @@
}

/* override styles for login screen in guest.css */
@if variable_exists('theming-logo-mime') and $theming-logo-mime != '' {
@if ($has-custom-logo) {
// custom logo
#theming-preview-logo,
#header .logo {
background-size: contain;
Expand All @@ -113,6 +125,14 @@
#body-login #header .logo {
margin-bottom: 22px;
}
} @else {
// default logo
@if ($invert) {
#theming-preview-logo,
#header .logo {
opacity: .6;
}
}
}

@if variable_exists('theming-background-mime') and $theming-background-mime != '' {
Expand Down Expand Up @@ -157,7 +177,7 @@ input.primary,
color: $color-primary-text;
}

@if (luma($color-primary) > 0.6) {
@if ($invert) {
#body-login #submit-wrapper .icon-confirm-white {
background-image: url('../../../core/img/actions/confirm.svg');
}
Expand Down
3 changes: 0 additions & 3 deletions apps/theming/lib/ImageManager.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,6 @@ public function getImageUrl(string $key, bool $useSvg = true): string {
}

switch ($key) {
case 'logo-blue':
// the blue logo is only available as svg
return $this->urlGenerator->getAbsoluteURL('svg/core/logo/logo/0082C9') . '?v=' . $cacheBusterCounter;
case 'logo':
case 'logoheader':
case 'favicon':
Expand Down
21 changes: 1 addition & 20 deletions apps/theming/lib/ThemingDefaults.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@

namespace OCA\Theming;


use OCP\App\AppPathNotFoundException;
use OCP\App\IAppManager;
use OCP\Files\NotFoundException;
Expand Down Expand Up @@ -275,7 +274,7 @@ public function getScssVariables() {
'theming-favicon-mime' => "'" . $this->config->getAppValue('theming', 'faviconMime') . "'"
];

$variables['image-logo'] = "url('". $this->getLogoUrl() ."')";
$variables['image-logo'] = "url('".$this->imageManager->getImageUrl('logo')."')";
$variables['image-logoheader'] = "'".$this->imageManager->getImageUrl('logoheader')."'";
$variables['image-favicon'] = "'".$this->imageManager->getImageUrl('favicon')."'";
$variables['image-login-background'] = "url('".$this->imageManager->getImageUrl('background')."')";
Expand All @@ -300,24 +299,6 @@ public function getScssVariables() {
return $variables;
}

/**
* Returns the logo url.
* If there is a custom logo, it just returns it.
* For the default logo it returns the white or blue one depending on the color luminance.
*
* @return string
*/
private function getLogoUrl() {
$logoMime = $this->config->getAppValue('theming', 'logoMime');
$primaryColor = $this->getColorPrimary();
$luminance = $this->util->calculateLuminance($primaryColor);
if ($logoMime === '' & $luminance > 0.8) {
return $this->imageManager->getImageUrl('logo-blue', true);
} else {
return $this->imageManager->getImageUrl('logo', true);
}
}

/**
* Check if the image should be replaced by the theming app
* and return the new image location then
Expand Down
67 changes: 2 additions & 65 deletions apps/theming/tests/ThemingDefaultsTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -632,80 +632,17 @@ public function testGetScssVariablesCached() {
$this->assertEquals(['foo'=>'bar'], $this->template->getScssVariables());
}

/**
* Provides test data for the get logo scss variable test.
*
* @return array
*/
public function provideTestGetImageLogoScssVariableTestData(): array {
return [
// default logo
['', '#000000', 0.0, 'logo'],
['', '#cccccc', 0.8, 'logo'],
['', '#dddddd', 0.81, 'logo-blue'],
['', '#ffffff', 1.0, 'logo-blue'],

// custom logo
['image/png', '#000000', 0.0, 'logo'],
['image/png', '#cccccc', 0.8, 'logo'],
['image/png', '#dddddd', 0.81, 'logo'],
['image/png', '#ffffff', 1.0, 'logo'],
];
}

/**
* Tests chat the logo url scss variable has the expected value
* depending on color and custom logo presence.
*
* @dataProvider provideTestGetImageLogoScssVariableTestData
* @param string $themingLogoMime The custom logo mime type
* @param string $primaryColor The primary theme color
* @param float $luminance The calculated luminance
* @param string $expected The expected requested logo
* @return void
*/
public function testGetImageLogoScssVariable(
string $themingLogoMime,
string $primaryColor,
float $luminance,
string $expected
) {
$this->config->expects($this->at(5))
->method('getAppValue')
->with('theming', 'logoMime')
->willReturn($themingLogoMime);
$this->config->expects($this->at(6))
->method('getAppValue')
->with('theming', 'color', $this->defaults->getColorPrimary())
->willReturn($primaryColor);

$this->util
->method('calculateLuminance')
->with($primaryColor)
->willReturn($luminance);

$this->imageManager->expects($this->at(0))
->method('getImageUrl')
->with($expected)
->willReturn('custom-logo?v=0');

$this->template->getScssVariables();
}

public function testGetScssVariables() {
$this->config->expects($this->at(0))->method('getAppValue')->with('theming', 'cachebuster', '0')->willReturn('0');
$this->config->expects($this->at(1))->method('getAppValue')->with('theming', 'logoMime', false)->willReturn('jpeg');
$this->config->expects($this->at(2))->method('getAppValue')->with('theming', 'backgroundMime', false)->willReturn('jpeg');
$this->config->expects($this->at(3))->method('getAppValue')->with('theming', 'logoheaderMime', false)->willReturn('jpeg');
$this->config->expects($this->at(4))->method('getAppValue')->with('theming', 'faviconMime', false)->willReturn('jpeg');

$this->config->expects($this->at(5))->method('getAppValue')->with('theming', 'logoMime', false)->willReturn('jpeg');
$this->config->expects($this->at(5))->method('getAppValue')->with('theming', 'color', null)->willReturn($this->defaults->getColorPrimary());
$this->config->expects($this->at(6))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary());

$this->config->expects($this->at(7))->method('getAppValue')->with('theming', 'color', null)->willReturn($this->defaults->getColorPrimary());
$this->config->expects($this->at(7))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary());
$this->config->expects($this->at(8))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary());
$this->config->expects($this->at(9))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary());
$this->config->expects($this->at(10))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary());

$this->util->expects($this->any())->method('invertTextColor')->with($this->defaults->getColorPrimary())->willReturn(false);
$this->util->expects($this->any())->method('elementColor')->with($this->defaults->getColorPrimary())->willReturn('#aaaaaa');
Expand Down
72 changes: 1 addition & 71 deletions core/img/logo/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.