From a1aaaaa0c86c002a0a406464724b8a0236fe8406 Mon Sep 17 00:00:00 2001 From: =?utf8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 1 Apr 2022 15:19:15 +0200 Subject: [PATCH] Update and fix theming images MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/theming/css/settings-admin.scss | 14 +++- apps/theming/css/theming.scss | 28 -------- .../BeforeTemplateRenderedListener.php | 14 ---- apps/theming/lib/Themes/DefaultTheme.php | 41 ++++++++---- apps/theming/templates/settings-admin.php | 4 +- core/css/guest.css | 66 ++++++++++--------- core/css/header.scss | 2 +- core/css/icons.scss | 8 +++ core/src/components/login/LoginButton.vue | 62 +++++++++++++---- core/src/components/login/LoginForm.vue | 6 +- .../login/PasswordLessLoginForm.vue | 5 -- core/src/components/login/ResetPassword.vue | 21 ++---- core/src/components/login/UpdatePassword.vue | 23 ++----- core/src/views/Login.vue | 6 +- core/templates/layout.guest.php | 4 -- 15 files changed, 151 insertions(+), 153 deletions(-) diff --git a/apps/theming/css/settings-admin.scss b/apps/theming/css/settings-admin.scss index c4d67917506..5cec0e98199 100644 --- a/apps/theming/css/settings-admin.scss +++ b/apps/theming/css/settings-admin.scss @@ -100,7 +100,8 @@ margin-top: 10px; margin-bottom: 20px; cursor: pointer; - background-image: var(--image-login); + background-color: var(--color-primary); + background-image: var(--image-background, var(--image-background-plain, url('../../../core/img/background.svg'), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%))); #theming-preview-logo { cursor: pointer; @@ -111,7 +112,7 @@ background-position: center; background-repeat: no-repeat; background-size: contain; - background-image: var(--image-logo); + background-image: var(--image-logo, url('../../../core/img/logo/logo.svg')); } } @@ -127,6 +128,15 @@ background-repeat: no-repeat; background-size: contain; } + + #theming-preview-logoheader { + // Only using --image-logoheader to show the custom value only + background-image: var(--image-logoheader); + } + + #theming-preview-favicon { + background-image: var(--image-favicon); + } } /* transition effects for theming value changes */ diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss index 52337d2105f..a5b55a5a738 100644 --- a/apps/theming/css/theming.scss +++ b/apps/theming/css/theming.scss @@ -45,18 +45,6 @@ $invert: luma($color-primary) > 0.6; } } -.nc-theming-main-background { - background-color: $color-primary; -} - -.nc-theming-main-text { - color: $color-primary-text; -} - -.nc-theming-contrast { - color: $color-primary-text; -} - @if ($invert) { // too bright, use dark text to mix the primary $color-primary-light: mix($color-primary, $color-main-text, 10%); @@ -157,16 +145,6 @@ $invert: luma($color-primary) > 0.6; } } -@if variable_exists('theming-favicon-mime') and $theming-favicon-mime != '' { - #theming .advanced-option-favicon .image-preview { - background-image: $image-favicon; - } -} @else { - #theming .advanced-option-favicon .image-preview { - background-image: none; - } -} - input.primary { background-color: $color-primary-element; border: 1px solid $color-primary-text; @@ -305,9 +283,3 @@ input.primary { border: 1px solid #ebebeb; } } - -@if ($has-legal-links == 'true') { - footer { - height: 92px; - } -} diff --git a/apps/theming/lib/Listener/BeforeTemplateRenderedListener.php b/apps/theming/lib/Listener/BeforeTemplateRenderedListener.php index 6842a731b5f..185289f6ff8 100644 --- a/apps/theming/lib/Listener/BeforeTemplateRenderedListener.php +++ b/apps/theming/lib/Listener/BeforeTemplateRenderedListener.php @@ -58,20 +58,6 @@ class BeforeTemplateRenderedListener implements IEventListener { return $serverContainer->query(JSDataService::class); }); - // $linkToCSS = $this->urlGenerator->linkToRoute( - // 'theming.Theming.getStylesheet', - // [ - // 'v' => $this->config->getAppValue('theming', 'cachebuster', '0'), - // ] - // ); - // \OCP\Util::addHeader( - // 'link', - // [ - // 'rel' => 'stylesheet', - // 'href' => $linkToCSS, - // ] - // ); - $this->themeInjectionService->injectHeaders(); // Making sure to inject just after core diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 97650bf6292..990b011bae9 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -24,21 +24,32 @@ declare(strict_types=1); */ namespace OCA\Theming\Themes; +use OCA\Theming\ImageManager; use OCA\Theming\ThemingDefaults; use OCA\Theming\Util; use OCA\Theming\ITheme; +use OCP\IConfig; use OCP\IURLGenerator; class DefaultTheme implements ITheme { public Util $util; public ThemingDefaults $themingDefaults; public IURLGenerator $urlGenerator; + public ImageManager $imageManager; + public IConfig $config; + public string $primaryColor; - public function __construct(Util $util, ThemingDefaults $themingDefaults, IURLGenerator $urlGenerator) { + public function __construct(Util $util, + ThemingDefaults $themingDefaults, + IURLGenerator $urlGenerator, + ImageManager $imageManager, + IConfig $config) { $this->util = $util; $this->themingDefaults = $themingDefaults; $this->urlGenerator = $urlGenerator; + $this->imageManager = $imageManager; + $this->config = $config; $this->primaryColor = $this->themingDefaults->getColorPrimary(); } @@ -58,11 +69,7 @@ class DefaultTheme implements ITheme { $colorBoxShadow = $this->util->darken($colorMainBackground, 70); $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); - // Logo variables - $logoSvgPath = $this->urlGenerator->getAbsoluteURL($this->themingDefaults->getLogo()); - $backgroundSvgPath = $this->urlGenerator->getAbsoluteURL($this->themingDefaults->getBackground()); - - return [ + $variables = [ '--color-main-background' => $colorMainBackground, '--color-main-background-rgb' => $colorMainBackgroundRGB, '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)', @@ -124,11 +131,6 @@ class DefaultTheme implements ITheme { '--animation-slow' => '300ms', // Default variables -------------------------------------------- - '--image-logo' => "url('$logoSvgPath')", - '--image-login' => "url('$backgroundSvgPath')", - '--image-logoheader' => "url('$logoSvgPath')", - '--image-favicon' => "url('$logoSvgPath')", - '--border-radius' => '3px', '--border-radius-large' => '10px', // pill-style button, value is large so big buttons also have correct roundness @@ -156,5 +158,22 @@ class DefaultTheme implements ITheme { '--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'unset', '--background-invert-if-bright' => 'unset', ]; + + // Register image variables only if custom-defined + $backgroundDeleted = $this->config->getAppValue('theming', 'backgroundMime', '') === 'backgroundColor'; + foreach(['logo', 'logoheader', 'favicon', 'background'] as $image) { + if ($this->imageManager->hasImage($image)) { + // If primary as background has been request, let's not define the background image + if ($image === 'background' && $backgroundDeleted) { + $variables["--image-background-plain"] = true; + continue; + } else if ($image === 'background') { + $variables['--image-background-size'] = 'cover'; + } + $variables["--image-$image"] = "url('".$this->imageManager->getImageUrl($image)."')"; + } + } + + return $variables; } } diff --git a/apps/theming/templates/settings-admin.php b/apps/theming/templates/settings-admin.php index d38ca0fc44c..6014f0e8579 100644 --- a/apps/theming/templates/settings-admin.php +++ b/apps/theming/templates/settings-admin.php @@ -116,7 +116,7 @@ style('theming', 'settings-admin'); -
+
@@ -127,7 +127,7 @@ style('theming', 'settings-admin'); -
+
diff --git a/core/css/guest.css b/core/css/guest.css index d48713061ec..f10ac8fe15c 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -15,20 +15,19 @@ a, a *, input, input *, select, .button span, label { cursor:pointer; } ul { list-style:none; } body { - background-color: #ffffff; font-weight: normal; /* bring the default font size up to 14px */ font-size: .875em; line-height: 1.6em; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - color: #000; + color: var(--color-primary-text); text-align: center; - background-color: #0082c9; - background-image: url('../img/background.png?v=2'); - background-image: url('../img/background.png?v=2'), linear-gradient(40deg, #0082c9 0%, rgba(28,175,255,1) 100%); + background-color: var(--color-primary); + background-image: var(--image-background); + background-image: var(--image-background), linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-light) 100%); background-position: 50% 50%; background-repeat: repeat; - background-size: 275px, contain; + background-size: var(--image-background-size, 275px, contain); background-attachment: fixed; /* fix background gradient */ min-height: 100%; /* fix sticky footer */ height: auto; @@ -36,7 +35,7 @@ body { /* Various fonts settings */ #body-login a { - color: #fff; + color: var(--color-primary-text); font-weight: 600; } #body-login a:not(.button):hover, @@ -46,7 +45,7 @@ body { } #showAdvanced { - color: #fff; + color: var(--color-primary-text); } em { @@ -80,13 +79,12 @@ body { } #header .logo { - background-image: url('../img/logo/logo.svg?v=1'); + background-image: var(--image-logo); background-repeat: no-repeat; - background-size: 175px; + background-size: contain; background-position: center; - width: 256px; - min-height: 128px; - max-height: 200px; + width: 175px; + height: 130px; margin: 0 auto; position: relative; left: unset; @@ -185,7 +183,7 @@ form #datadirField legend { } .alternative-logins .button { - color: #ffffff; + color: var(--color-text-lighter); padding: 12px 20px; } @@ -263,9 +261,9 @@ select { width: auto; min-width: 25px; padding: 12px; - background-color: white; + background-color: var(--color-main-background); font-weight: bold; - color: #555; + color: var(--color-text-lighter); border: none; border-radius: 100px; /* --border-radius-pill */ cursor: pointer; @@ -280,7 +278,7 @@ input[type='password'], input[type='email'] { width: 249px; background: #fff; - color: #555; + color: var(--color-text-lighter); cursor: text; font-family: inherit; -webkit-appearance: textfield; @@ -338,9 +336,9 @@ input::-moz-focus-inner { input.primary, button.primary, a.primary { - border: 1px solid #fff; - background-color: #0082c9; - color: #fff; + border: 1px solid var(--color-primary-text); + background-color: var(--color-primary); + color: var(--color-primary-text); transition: color 100ms ease-in-out; } @@ -350,8 +348,8 @@ button.primary:not(:disabled):hover, button.primary:not(:disabled):focus, a.primary:not(:disabled):hover, a.primary:not(:disabled):focus { - color: rgba(255, 255, 255, 1); - background-image: linear-gradient(40deg, #0082c9 0%, #30b6ff 100%); + color: var(--color-primary-text); + background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-light) 100%); background-position: initial; } @@ -479,13 +477,13 @@ form fieldset legend, form fieldset .warning-info, form input[type='checkbox']+label { text-align: center; - color: #fff; + color: var(--color-primary-text); } /* overrides another !important statement that sets this to unreadable black */ form .warning input[type='checkbox']:hover+label, form .warning input[type='checkbox']:focus+label, form .warning input[type='checkbox']+label { - color: #fff !important; + color: var(--color-primary-text) !important; } .body-login-container.two-factor { @@ -559,7 +557,7 @@ form .warning input[type='checkbox']+label { display: inline-block; font-weight: normal !important; padding: 12px; - color: #fff; + color: var(--color-primary-text); cursor: pointer; text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */ } @@ -569,7 +567,7 @@ form .warning input[type='checkbox']+label { #forgot-password { padding: 11px; float: right; - color: #fff; + color: var(--color-primary-text); } /* Alternative Logins */ @@ -587,16 +585,16 @@ form .warning input[type='checkbox']+label { display: inline-block; text-align: center; box-sizing: border-box; - border: 2px solid #ffffff; - background-color: #0082c9; - color: #ffffff; + border: 2px solid var(--color-primary-text); + background-color: var(--color-primary); + color: var(--color-primary-text); border-radius: 100px; /* --border-radius-pill */ } .alternative-logins a.button:focus, .alternative-logins li a:focus { - border: 2px solid #000000; - background-image: linear-gradient(40deg, #0082c9 0%, #30b6ff 100%); + border: 2px solid var(--color-primary-hover); + background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-light) 100%); background-position: initial; } @@ -854,6 +852,7 @@ p.info { } .loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark { position: relative; + filter: var(--background-invert-if-bright) } .loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { z-index: 2; @@ -871,6 +870,9 @@ p.info { -ms-transform-origin: center; transform-origin: center; } +.primary .loading,.primary+.loading,.primary .loading-small,.primary+.loading-small,.primary .icon-loading,.primary+.icon-loading,.primary .icon-loading-dark,.primary+.icon-loading-dark,.primary .icon-loading-small,.primary+.icon-loading-small,.primary .icon-loading-small-dark,.primary+.icon-loading-small-dark { + filter: var(--primary-invert-if-bright) +} .loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { border: 2px solid rgba(150, 150, 150, 0.5); border-top-color: #646464; @@ -920,7 +922,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- /* FOOTER */ footer { - height: 70px; + min-height: 70px; margin-top: auto; } diff --git a/core/css/header.scss b/core/css/header.scss index 39e3156fb0b..a10f5937d05 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -172,7 +172,7 @@ } .logo { display: inline-flex; - background-image: var(--image-logo); + background-image: var(--image-logoheader, var(--image-logo, url('../img/logo/logo.svg'))); background-repeat: no-repeat; background-size: contain; background-position: center; diff --git a/core/css/icons.scss b/core/css/icons.scss index 1468c480046..e4da7c7c4d3 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -64,6 +64,14 @@ transform-origin: center; border: 2px solid var(--color-loading-light); border-top-color: var(--color-loading-dark); + // revert if background is too bright + filter: var(--background-invert-if-bright); + + .primary &, + .primary + & { + // revert if primary is too bright + filter: var(--primary-invert-if-bright); + } } } diff --git a/core/src/components/login/LoginButton.vue b/core/src/components/login/LoginButton.vue index f7d426e6c63..e99398ba09a 100644 --- a/core/src/components/login/LoginButton.vue +++ b/core/src/components/login/LoginButton.vue @@ -20,25 +20,33 @@ --> - diff --git a/core/src/components/login/LoginForm.vue b/core/src/components/login/LoginForm.vue index e702961d50e..9114c0a728a 100644 --- a/core/src/components/login/LoginForm.vue +++ b/core/src/components/login/LoginForm.vue @@ -89,7 +89,7 @@

- +

@@ -158,10 +158,6 @@ export default { type: Number, default: 0, }, - invertedColors: { - type: Boolean, - default: false, - }, autoCompleteAllowed: { type: Boolean, default: true, diff --git a/core/src/components/login/PasswordLessLoginForm.vue b/core/src/components/login/PasswordLessLoginForm.vue index 94e7b35fa0e..3c0013936f0 100644 --- a/core/src/components/login/PasswordLessLoginForm.vue +++ b/core/src/components/login/PasswordLessLoginForm.vue @@ -25,7 +25,6 @@ @@ -74,10 +73,6 @@ export default { type: [String, Boolean], default: false, }, - invertedColors: { - type: Boolean, - default: false, - }, autoCompleteAllowed: { type: Boolean, default: true, diff --git a/core/src/components/login/ResetPassword.vue b/core/src/components/login/ResetPassword.vue index 79589a96aca..7a499baa2f0 100644 --- a/core/src/components/login/ResetPassword.vue +++ b/core/src/components/login/ResetPassword.vue @@ -37,17 +37,7 @@

- -
+

@@ -77,11 +67,14 @@