Updates inverted logo handling to work like the app icons
Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
This commit is contained in:
parent
d855c38e07
commit
c7e81e17c8
|
@ -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');
|
||||
} @else {
|
||||
$image-logo: url('../../../../svg/core/logo/logo/ffffff?v=1');
|
||||
}
|
||||
}
|
||||
|
||||
.nc-theming-main-background {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
@ -19,7 +30,7 @@
|
|||
color: $color-primary-text;
|
||||
}
|
||||
|
||||
@if (luma($color-primary) > 0.6) {
|
||||
@if ($invert) {
|
||||
#appmenu:not(.inverted) svg {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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 != '' {
|
||||
|
@ -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');
|
||||
}
|
||||
|
|
|
@ -80,9 +80,6 @@ class ImageManager {
|
|||
}
|
||||
|
||||
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':
|
||||
|
|
|
@ -33,7 +33,6 @@
|
|||
|
||||
namespace OCA\Theming;
|
||||
|
||||
|
||||
use OCP\App\AppPathNotFoundException;
|
||||
use OCP\App\IAppManager;
|
||||
use OCP\Files\NotFoundException;
|
||||
|
@ -275,7 +274,7 @@ class ThemingDefaults extends \OC_Defaults {
|
|||
'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')."')";
|
||||
|
@ -300,24 +299,6 @@ class ThemingDefaults extends \OC_Defaults {
|
|||
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
|
||||
|
|
|
@ -632,66 +632,6 @@ class ThemingDefaultsTest extends TestCase {
|
|||
$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');
|
||||
|
@ -699,13 +639,10 @@ class ThemingDefaultsTest extends TestCase {
|
|||
$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');
|
||||
|
|
|
@ -1,71 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
height="128"
|
||||
width="256"
|
||||
viewBox="0 0 256 128"
|
||||
id="svg10"
|
||||
sodipodi:docname="logo.svg"
|
||||
inkscape:version="0.92.3 (2405546, 2018-03-11)">
|
||||
<metadata
|
||||
id="metadata16">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs14" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1053"
|
||||
id="namedview12"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.4296875"
|
||||
inkscape:cx="128"
|
||||
inkscape:cy="91.978142"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="27"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg10" />
|
||||
<g
|
||||
stroke="#fff"
|
||||
stroke-width="22"
|
||||
fill="none"
|
||||
id="g8">
|
||||
<circle
|
||||
cy="64"
|
||||
cx="40"
|
||||
r="26"
|
||||
id="circle2" />
|
||||
<circle
|
||||
cy="64"
|
||||
cx="216"
|
||||
r="26"
|
||||
id="circle4" />
|
||||
<circle
|
||||
cy="64"
|
||||
cx="128"
|
||||
r="46"
|
||||
id="circle6" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg width="256" height="128" version="1.1" viewBox="0 0 256 128" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#fff" stroke-width="22"><circle cx="40" cy="64" r="26"/><circle cx="216" cy="64" r="26"/><circle cx="128" cy="64" r="46"/></g></svg>
|
||||
|
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 257 B |
Loading…
Reference in New Issue