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
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 all commits
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
33 changes: 27 additions & 6 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(icon-color-path('logo', 'logo', #000000, 1, true));
} @else {
$image-logo: url(icon-color-path('logo', 'logo', #ffffff, 1, true));
}
}

.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 @@ -98,19 +109,29 @@
background-image: url(./img/core/filetypes/folder-drag-accept.svg?v=#{$theming-cachebuster}) !important;
}

#theming-preview-logo,
#header .logo {
background-image: $image-logo;
}

/* 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-image: $image-logo;
background-size: contain;
}

#body-login #header .logo {
margin-bottom: 22px;
}
} @else {
#theming-preview-logo {
background-image: $image-logo;
// default logo
@if ($invert) {
#theming-preview-logo,
#header .logo {
opacity: .6;
}
}
}

Expand Down Expand Up @@ -156,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
2 changes: 1 addition & 1 deletion apps/theming/lib/ImageManager.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ public function getImageUrl(string $key, bool $useSvg = true): string {
case 'logo':
case 'logoheader':
case 'favicon':
return $this->urlGenerator->imagePath('core', 'logo.png') . '?v=' . $cacheBusterCounter;
return $this->urlGenerator->imagePath('core', 'logo/logo.png') . '?v=' . $cacheBusterCounter;
case 'background':
return $this->urlGenerator->imagePath('core', 'background.png') . '?v=' . $cacheBusterCounter;
}
Expand Down
5 changes: 2 additions & 3 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 @@ -217,9 +216,9 @@ public function getLogo($useSvg = true): string {

if(!$logo || !$logoExists) {
if($useSvg) {
$logo = $this->urlGenerator->imagePath('core', 'logo.svg');
$logo = $this->urlGenerator->imagePath('core', 'logo/logo.svg');
} else {
$logo = $this->urlGenerator->imagePath('core', 'logo.png');
$logo = $this->urlGenerator->imagePath('core', 'logo/logo.png');
}
return $logo . '?v=' . $cacheBusterCounter;
}
Expand Down
4 changes: 2 additions & 2 deletions apps/theming/lib/Util.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ public function getAppIcon($app) {
}
} catch (NotFoundException $e) {}
}
return \OC::$SERVERROOT . '/core/img/logo.svg';
return \OC::$SERVERROOT . '/core/img/logo/logo.svg';
}

/**
Expand Down Expand Up @@ -223,7 +223,7 @@ public function colorizeSvg($svg, $color) {

/**
* Check if a custom theme is set in the server configuration
*
*
* @return bool
*/
public function isAlreadyThemed() {
Expand Down
6 changes: 3 additions & 3 deletions apps/theming/tests/ImageManagerTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,9 +144,9 @@ public function testGetImageUrlDefault() {
->willReturnOnConsecutiveCalls(0, false);
$this->urlGenerator->expects($this->once())
->method('imagePath')
->with('core', 'logo.png')
->willReturn('logo.png');
$this->assertEquals('logo.png?v=0', $this->imageManager->getImageUrl('logo'));
->with('core', 'logo/logo.png')
->willReturn('logo/logo.png');
$this->assertEquals('logo/logo.png?v=0', $this->imageManager->getImageUrl('logo'));
}

public function testGetImageUrlAbsolute() {
Expand Down
4 changes: 2 additions & 2 deletions apps/theming/tests/ThemingDefaultsTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -593,11 +593,11 @@ private function getLogoHelper($withName, $useSvg) {
}

public function testGetLogoDefaultWithSvg() {
$this->getLogoHelper('logo.svg', true);
$this->getLogoHelper('logo/logo.svg', true);
}

public function testGetLogoDefaultWithoutSvg() {
$this->getLogoHelper('logo.png', false);
$this->getLogoHelper('logo/logo.png', false);
}

public function testGetLogoCustom() {
Expand Down
6 changes: 3 additions & 3 deletions apps/theming/tests/UtilTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ public function testInvertTextColorInvalid() {
$invert = $this->util->invertTextColor('aaabbbcccddd123');
$this->assertEquals(false, $invert);
}

public function testInvertTextColorEmpty() {
$invert = $this->util->invertTextColor('');
$this->assertEquals(false, $invert);
Expand Down Expand Up @@ -139,7 +139,7 @@ public function testGetAppIcon($app, $expected) {
public function dataGetAppIcon() {
return [
['user_ldap', \OC_App::getAppPath('user_ldap') . '/img/app.svg'],
['noapplikethis', \OC::$SERVERROOT . '/core/img/logo.svg'],
['noapplikethis', \OC::$SERVERROOT . '/core/img/logo/logo.svg'],
['comments', \OC_App::getAppPath('comments') . '/img/comments.svg'],
];
}
Expand Down Expand Up @@ -174,7 +174,7 @@ public function testGetAppImage($app, $image, $expected) {

public function dataGetAppImage() {
return [
['core', 'logo.svg', \OC::$SERVERROOT . '/core/img/logo.svg'],
['core', 'logo/logo.svg', \OC::$SERVERROOT . '/core/img/logo/logo.svg'],
['files', 'external', \OC::$SERVERROOT . '/apps/files/img/external.svg'],
['files', 'external.svg', \OC::$SERVERROOT . '/apps/files/img/external.svg'],
['noapplikethis', 'foobar.svg', false],
Expand Down
2 changes: 1 addition & 1 deletion core/Controller/LoginController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ public function showLoginForm(string $user = null, string $redirect_url = null):
Util::addHeader('meta', ['property' => 'og:site_name', 'content' => Util::sanitizeHTML($this->defaults->getName())]);
Util::addHeader('meta', ['property' => 'og:url', 'content' => $this->urlGenerator->getAbsoluteURL('/')]);
Util::addHeader('meta', ['property' => 'og:type', 'content' => 'website']);
Util::addHeader('meta', ['property' => 'og:image', 'content' => $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('core','favicon-touch.png'))]);
Util::addHeader('meta', ['property' => 'og:image', 'content' => $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('core', 'favicon-touch.png'))]);

return new TemplateResponse(
$this->appName, 'login', $parameters, 'guest'
Expand Down
5 changes: 1 addition & 4 deletions core/Controller/SvgController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
use OCP\AppFramework\Http\DataDisplayResponse;
use OCP\AppFramework\Http\NotFoundResponse;
use OCP\AppFramework\Utility\ITimeFactory;
use OCP\Files\NotFoundException;
use OCP\App\IAppManager;
use OCP\IRequest;

Expand Down Expand Up @@ -91,15 +90,14 @@ public function getSvgFromApp(string $app, string $fileName, string $color = 'ff

$appRootPath = $this->appManager->getAppPath($app);
$appPath = substr($appRootPath, strlen($this->serverRoot));

if (!$appPath) {
return new NotFoundResponse();
}
$path = $this->serverRoot . $appPath ."/img/$fileName.svg";
return $this->getSvg($path, $color, $fileName);
}


/**
* Generate svg from filename with the requested color
*
Expand All @@ -120,7 +118,6 @@ private function getSvg(string $path, string $color, string $fileName) {

// add fill (fill is not present on black elements)
$fillRe = '/<((circle|rect|path)((?!fill)[a-z0-9 =".\-#():;])+)\/>/mi';

$svg = preg_replace($fillRe, '<$1 fill="#' . $color . '"/>', $svg);

// replace any fill or stroke colors
Expand Down
52 changes: 38 additions & 14 deletions core/css/functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,31 +19,55 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/


/**
* Removes the "#" from a color.
*
* @param string $color The color
* @return string The color without #
*/
@function remove-hash-from-color($color) {
$index: str-index(inspect($color), '#');
@if $index {
$color: str-slice(inspect($color), 2);
}
@return $color;
}

/**
* Calculates the URL to the svg under the SVG API.
*
* @param string $icon the icon filename
* @param string $dir the icon folder within /core/img if $core or app name
* @param string $color the desired color in hexadecimal
* @param int [$version] the version of the file
* @param bool [$core] search icon in core
* @return string The URL to the svg.
*/
@function icon-color-path($icon, $dir, $color, $version: 1, $core: false) {
$color: remove-hash-from-color($color);
@if $core {
@return '#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=#{$version}';
} @else {
@return '#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=#{$version}';
}
}

/**
* SVG COLOR API
*
*
* @param string $icon the icon filename
* @param string $dir the icon folder within /core/img if $core or app name
* @param string $color the desired color in hexadecimal
* @param int $version the version of the file
* @param bool [$core] search icon in core
*
* @returns string the url to the svg api endpoint
* @returns A background image with the url to the set to the requested icon.
*/
@mixin icon-color($icon, $dir, $color, $version: 1, $core: false) {
Copy link
Member Author

Choose a reason for hiding this comment

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

I took this apart, because it didn't do what the comment said...

Copy link
Member

Choose a reason for hiding this comment

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

Thx!

// remove # from color
// inspect cast int to string
$index: str-index(inspect($color), '#');
@if $index {
$color: str-slice(inspect($color), 2);
}
$color: remove-hash-from-color($color);
$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}');
}
#{$varName}: url(icon-color-path($icon, $dir, $color, $version, $core));
background-image: var(#{$varName});
}

Expand Down
2 changes: 1 addition & 1 deletion core/css/guest.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ body {
}

#header .logo {
background-image: url('../img/logo.svg?v=1');
background-image: url('../img/logo/logo.svg?v=1');
background-repeat: no-repeat;
background-size: 175px;
background-position: center;
Expand Down
1 change: 0 additions & 1 deletion core/img/logo.svg
View file
Open in desktop

This file was deleted.

0 core/img/logo-icon-175px.png → core/img/logo/logo-icon-175px.png
View file
Open in desktop
File renamed without changes
0 core/img/logo-mail.png → core/img/logo/logo-mail.png
View file
Open in desktop
File renamed without changes
0 core/img/logo.png → core/img/logo/logo.png
View file
Open in desktop
File renamed without changes
1 change: 1 addition & 0 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.
4 changes: 2 additions & 2 deletions lib/private/legacy/defaults.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,9 +315,9 @@ public function getLogo($useSvg = true) {
}

if($useSvg) {
$logo = \OC::$server->getURLGenerator()->imagePath('core', 'logo.svg');
$logo = \OC::$server->getURLGenerator()->imagePath('core', 'logo/logo.svg');
} else {
$logo = \OC::$server->getURLGenerator()->imagePath('core', 'logo.png');
$logo = \OC::$server->getURLGenerator()->imagePath('core', 'logo/logo.png');
}
return $logo . '?v=' . hash('sha1', implode('.', \OCP\Util::getVersion()));
}
Expand Down
Loading