From: John Molakvoæ Date: Wed, 20 Apr 2022 07:55:41 +0000 (+0200) Subject: Font fixes and design update for theme picker X-Git-Tag: v25.0.0beta1~535^2~8 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=493b20605f9819a03a23cf0da456f89634307152;p=nextcloud-server.git Font fixes and design update for theme picker Signed-off-by: John Molakvoæ --- diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue index 4cc0d50346a..ef12d511fb9 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue @@ -161,6 +161,8 @@ export default { &__header { height: 70px; border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; + background-color: var(--color-primary); + background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%); span { bottom: 0; diff --git a/apps/theming/appinfo/routes.php b/apps/theming/appinfo/routes.php index c9a99a409ef..fa8dde90786 100644 --- a/apps/theming/appinfo/routes.php +++ b/apps/theming/appinfo/routes.php @@ -45,7 +45,7 @@ return [ 'verb' => 'POST' ], [ - 'name' => 'Theming#getThemeVariables', + 'name' => 'Theming#getThemeStylesheet', 'url' => '/theme/{themeId}.css', 'verb' => 'GET', ], diff --git a/apps/theming/fonts/OpenDyslexic-Bold.otf b/apps/theming/fonts/OpenDyslexic-Bold.otf new file mode 100644 index 00000000000..4c492e2fcc2 Binary files /dev/null and b/apps/theming/fonts/OpenDyslexic-Bold.otf differ diff --git a/apps/theming/fonts/OpenDyslexic-Bold.ttf b/apps/theming/fonts/OpenDyslexic-Bold.ttf new file mode 100644 index 00000000000..7c97eb4329b Binary files /dev/null and b/apps/theming/fonts/OpenDyslexic-Bold.ttf differ diff --git a/apps/theming/fonts/OpenDyslexic-Bold.woff b/apps/theming/fonts/OpenDyslexic-Bold.woff new file mode 100644 index 00000000000..755476f6b4a Binary files /dev/null and b/apps/theming/fonts/OpenDyslexic-Bold.woff differ diff --git a/apps/theming/fonts/OpenDyslexic-Regular.otf b/apps/theming/fonts/OpenDyslexic-Regular.otf new file mode 100644 index 00000000000..1226d2ab281 Binary files /dev/null and b/apps/theming/fonts/OpenDyslexic-Regular.otf differ diff --git a/apps/theming/fonts/OpenDyslexic-Regular.ttf b/apps/theming/fonts/OpenDyslexic-Regular.ttf new file mode 100644 index 00000000000..e7849348cdb Binary files /dev/null and b/apps/theming/fonts/OpenDyslexic-Regular.ttf differ diff --git a/apps/theming/fonts/OpenDyslexic-Regular.woff b/apps/theming/fonts/OpenDyslexic-Regular.woff new file mode 100644 index 00000000000..fdf9e37dd43 Binary files /dev/null and b/apps/theming/fonts/OpenDyslexic-Regular.woff differ diff --git a/apps/theming/img/dark-highcontrast.jpg b/apps/theming/img/dark-highcontrast.jpg new file mode 100644 index 00000000000..5fce8ef0851 Binary files /dev/null and b/apps/theming/img/dark-highcontrast.jpg differ diff --git a/apps/theming/img/highcontrast.jpg b/apps/theming/img/highcontrast.jpg index 8c55a7358b9..e9087e898ee 100644 Binary files a/apps/theming/img/highcontrast.jpg and b/apps/theming/img/highcontrast.jpg differ diff --git a/apps/theming/img/opendyslexic.jpg b/apps/theming/img/opendyslexic.jpg index db8e60f3658..f56ea33e6c4 100644 Binary files a/apps/theming/img/opendyslexic.jpg and b/apps/theming/img/opendyslexic.jpg differ diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php index 1cd269f9bff..ff30e27f721 100644 --- a/apps/theming/lib/Controller/ThemingController.php +++ b/apps/theming/lib/Controller/ThemingController.php @@ -55,6 +55,7 @@ use OCP\IL10N; use OCP\IRequest; use OCP\ITempManager; use OCP\IURLGenerator; +use ScssPhp\ScssPhp\Compiler; /** * Class ThemingController @@ -309,13 +310,14 @@ class ThemingController extends Controller { * * @return FileDisplayResponse|NotFoundResponse */ - public function getThemeVariables(string $themeId, bool $plain = false) { + public function getThemeStylesheet(string $themeId, bool $plain = false, bool $withCustomCss = false) { $themes = $this->themesService->getThemes(); if (!in_array($themeId, array_keys($themes))) { return new NotFoundResponse(); } $theme = $themes[$themeId]; + $customCss = $theme->getCustomCss(); // Generate variables $variables = ''; @@ -325,10 +327,12 @@ class ThemingController extends Controller { // If plain is set, the browser decides of the css priority if ($plain) { - $css = ":root { $variables }"; + $css = ":root { $variables } " . $customCss; } else { // If not set, we'll rely on the body class - $css = "body[data-theme-$themeId] { $variables }"; + $compiler = new Compiler(); + $compiledCss = $compiler->compileString("body[data-theme-$themeId] { $variables $customCss }"); + $css = $compiledCss->getCss();; } try { diff --git a/apps/theming/lib/ITheme.php b/apps/theming/lib/ITheme.php index 20508fac4e8..a5c9cdf26a6 100644 --- a/apps/theming/lib/ITheme.php +++ b/apps/theming/lib/ITheme.php @@ -86,4 +86,14 @@ interface ITheme { * @since 25.0.0 */ public function getCSSVariables(): array; + + /** + * Return the custom css necessary for that app + * ⚠️ Warning, should be used slightly. + * Theoretically, editing the variables should be enough. + * + * @return string + * @since 25.0.0 + */ + public function getCustomCss(): string; } diff --git a/apps/theming/lib/Service/ThemeInjectionService.php b/apps/theming/lib/Service/ThemeInjectionService.php index e00839c21c5..81edc19bc4b 100644 --- a/apps/theming/lib/Service/ThemeInjectionService.php +++ b/apps/theming/lib/Service/ThemeInjectionService.php @@ -75,7 +75,7 @@ class ThemeInjectionService { * @param string $media media query to use in the element */ private function addThemeHeader(string $themeId, bool $plain = true, string $media = null) { - $linkToCSS = $this->urlGenerator->linkToRoute('theming.Theming.getThemeVariables', [ + $linkToCSS = $this->urlGenerator->linkToRoute('theming.Theming.getThemeStylesheet', [ 'themeId' => $themeId, 'plain' => $plain, ]); diff --git a/apps/theming/lib/Themes/DarkHighContrastTheme.php b/apps/theming/lib/Themes/DarkHighContrastTheme.php index 8d0b134c75f..62b7d4f6358 100644 --- a/apps/theming/lib/Themes/DarkHighContrastTheme.php +++ b/apps/theming/lib/Themes/DarkHighContrastTheme.php @@ -26,7 +26,7 @@ namespace OCA\Theming\Themes; use OCA\Theming\ITheme; -class DarkHighContrastTheme extends HighContrastTheme implements ITheme { +class DarkHighContrastTheme extends DarkTheme implements ITheme { public function getId(): string { return 'dark-highcontrast'; @@ -48,12 +48,51 @@ class DarkHighContrastTheme extends HighContrastTheme implements ITheme { return $this->l->t('Similar to the high contrast mode, but with dark colours.'); } + /** + * Try to keep this consistent with HighContrastTheme + */ public function getCSSVariables(): array { $variables = parent::getCSSVariables(); + $colorMainText = '#ffffff'; + $colorMainBackground = '#000000'; + $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorMainText)); - // FIXME … - $variables = $variables; + $variables['--color-main-background'] = $colorMainBackground; + $variables['--color-main-text'] = $colorMainText; + + $variables['--color-background-dark'] = $this->util->lighten($colorMainBackground, 30); + $variables['--color-background-darker'] = $this->util->lighten($colorMainBackground, 30); + + $variables['--color-placeholder-light'] = $this->util->lighten($colorMainBackground, 30); + $variables['--color-placeholder-dark'] = $this->util->lighten($colorMainBackground, 45); + + $variables['--color-text-maxcontrast'] = $colorMainText; + $variables['--color-text-light'] = $colorMainText; + $variables['--color-text-lighter'] = $colorMainText; + + // used for the icon loading animation + $variables['--color-loading-light'] = '#000000'; + $variables['--color-loading-dark'] = '#dddddd'; + + + $variables['--color-box-shadow-rgb'] = $colorBoxShadowRGB; + $variables['--color-box-shadow'] = $colorBoxShadowRGB; + + + $variables['--color-border'] = $this->util->lighten($colorMainBackground, 50); + $variables['--color-border-dark'] = $this->util->lighten($colorMainBackground, 50); return $variables; } + + public function getCustomCss(): string { + return " + [class^='icon-'], [class*=' icon-'], + .action, + #appmenu li a, + .menutoggle { + opacity: 1 !important; + } + "; + } } diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 3b194a36546..7561bb16ecd 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -35,7 +35,6 @@ use OCP\IURLGenerator; class DefaultTheme implements ITheme { public Util $util; public ThemingDefaults $themingDefaults; - public IURLGenerator $urlGenerator; public ImageManager $imageManager; public IConfig $config; public IL10N $l; @@ -196,4 +195,8 @@ class DefaultTheme implements ITheme { return $variables; } + + public function getCustomCss(): string { + return ''; + } } diff --git a/apps/theming/lib/Themes/DyslexiaFont.php b/apps/theming/lib/Themes/DyslexiaFont.php index 460147b9fa3..50284d33b9d 100644 --- a/apps/theming/lib/Themes/DyslexiaFont.php +++ b/apps/theming/lib/Themes/DyslexiaFont.php @@ -58,18 +58,27 @@ class DyslexiaFont extends DefaultTheme implements ITheme { return $variables; } -} -// @font-face { -// font-family: 'OpenDyslexic'; -// font-style: normal; -// font-weight: 400; -// src: url('../fonts/OpenDyslexic-Regular.woff') format('woff'); -// } + public function getCustomCss(): string { + return " + @font-face { + font-family: 'OpenDyslexic'; + font-style: normal; + font-weight: 400; + src: url('../fonts/OpenDyslexic-Regular.woff') format('woff'), + url('../fonts/OpenDyslexic-Regular.otf') format('opentype'), + url('../fonts/OpenDyslexic-Regular.ttf') format('truetype'); + } + + @font-face { + font-family: 'OpenDyslexic'; + font-style: normal; + font-weight: 700; + src: url('../fonts/OpenDyslexic-Bold.woff') format('woff'), + url('../fonts/OpenDyslexic-Bold.otf') format('opentype'), + url('../fonts/OpenDyslexic-Bold.ttf') format('truetype'); + } + "; + } +} -// @font-face { -// font-family: 'OpenDyslexic'; -// font-style: normal; -// font-weight: 700; -// src: url('../fonts/OpenDyslexic-Bold.woff') format('woff'); -// } diff --git a/apps/theming/lib/Themes/HighContrastTheme.php b/apps/theming/lib/Themes/HighContrastTheme.php index 67276e4ef00..77239f2076c 100644 --- a/apps/theming/lib/Themes/HighContrastTheme.php +++ b/apps/theming/lib/Themes/HighContrastTheme.php @@ -50,10 +50,42 @@ class HighContrastTheme extends DefaultTheme implements ITheme { public function getCSSVariables(): array { $variables = parent::getCSSVariables(); + $colorMainText = '#000000'; + $colorMainBackground = '#ffffff'; - // FIXME … - $variables = $variables; + $variables['--color-main-background'] = $colorMainBackground; + $variables['--color-main-text'] = $colorMainText; + + $variables['--color-background-dark'] = $this->util->darken($colorMainBackground, 30); + $variables['--color-background-darker'] = $this->util->darken($colorMainBackground, 30); + + $variables['--color-placeholder-light'] = $this->util->darken($colorMainBackground, 30); + $variables['--color-placeholder-dark'] = $this->util->darken($colorMainBackground, 45); + + $variables['--color-text-maxcontrast'] = 'var(--color-main-text)'; + $variables['--color-text-light'] = 'var(--color-main-text)'; + $variables['--color-text-lighter'] = 'var(--color-main-text)'; + + // used for the icon loading animation + $variables['--color-loading-light'] = '#dddddd'; + $variables['--color-loading-dark'] = '#000000'; + + $variables['--color-box-shadow'] = 'var(--color-main-text)'; + + $variables['--color-border'] = $this->util->darken($colorMainBackground, 50); + $variables['--color-border-dark'] = $this->util->darken($colorMainBackground, 50); return $variables; } + + public function getCustomCss(): string { + return " + [class^='icon-'], [class*=' icon-'], + .action, + #appmenu li a, + .menutoggle { + opacity: 1 !important; + } + "; + } } diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue index 78115021412..1fd6cb20866 100644 --- a/apps/theming/src/UserThemes.vue +++ b/apps/theming/src/UserThemes.vue @@ -1,5 +1,5 @@