From 9747820cb8fc2960414b83c306f6ff570d712476 Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Sat, 27 Feb 2021 14:21:55 +0100 Subject: [PATCH] add dark mode colors --- css/admin.css | 8 + lib/Controller/CssController.php | 48 +++- lib/Service/ConfigProxy.php | 36 +-- lib/Settings/Admin.php | 15 +- src/l10n/fixtures/de.yaml | 1 + src/l10n/fixtures/fr.yaml | 1 + templates/settings/admin-form.php | 367 +++++++++++++++++++++--------- 7 files changed, 345 insertions(+), 131 deletions(-) diff --git a/css/admin.css b/css/admin.css index 8c54856..41d9ec1 100644 --- a/css/admin.css +++ b/css/admin.css @@ -111,3 +111,11 @@ display: table-cell; width: 300px; } + +.side-menu-setting-label-short { + width: 300px; +} + +.side-menu-setting-form-long { + width: 400px; +} diff --git a/lib/Controller/CssController.php b/lib/Controller/CssController.php index d793087..79b9570 100644 --- a/lib/Controller/CssController.php +++ b/lib/Controller/CssController.php @@ -65,29 +65,61 @@ class CssController extends Controller protected function getConfig(): array { - $backgroundColor = $this->config->getAppValue('background-color', '#333333'); - $backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor); $isForced = $this->config->getAppValueBool('force', '0'); $topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]'); + $isAccessibilityAppEnabled = $this->config->getAppValueBool('enabled', '0', 'accessibility'); + $isBreezeDarkAppEnabled = $this->config->getAppValueBool('enabled', '0', 'breezedark'); + $isBreezeDarkGlobalEnabled = $this->config->getAppValueBool('theme_enabled', '0', 'breezedark'); + if ($this->user) { $userTopMenuApps = $this->config->getUserValueArray($this->user, 'top-menu-apps', '[]'); if (!empty($userTopMenuApps) && !$isForced) { $topMenuApps = $userTopMenuApps; } + + $isDarkThemeUserEnabled = $this->config->getUserValue($this->user, 'theme', '', 'accessibility') === 'dark'; + $isBreezeDarkUserEnabled = $this->config->getUserValue($this->user, 'theme_enabled', '', 'breezedark'); + + $isBreezeDarkUserEnabled = $isBreezeDarkUserEnabled === '1' || ($isBreezeDarkGlobalEnabled && $isBreezeDarkUserEnabled === ''); + } else { + $isDarkThemeUserEnabled = false; + $isBreezeDarkUserEnabled = false; + } + + $isDarkMode = ($isAccessibilityAppEnabled && $isDarkThemeUserEnabled) || ($isBreezeDarkAppEnabled && $isBreezeDarkUserEnabled); + + if ($isDarkMode) { + $backgroundColor = $this->config->getAppValue('dark-mode-background-color', '#333333'); + $backgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $backgroundColor); + $currentAppBackgroundColor = $this->config->getAppValue('dark-mode-current-app-background-color', '#444444'); + $loaderColor = $this->config->getAppValue('dark-mode-loader-color', '#cccccc'); + $textColor = $this->config->getAppValue('dark-mode-text-color', '#FFFFFF'); + $iconInvertFilter = abs($this->config->getAppValueInt('dark-mode-icon-invert-filter', '0')).'%'; + $iconOpacity = abs($this->config->getAppValueInt('dark-mode-icon-opacity', '100') / 100); + $opener = $this->config->getAppValue('dark-mode-opener', 'side-menu-opener'); + } else { + $backgroundColor = $this->config->getAppValue('background-color', '#333333'); + $backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor); + $currentAppBackgroundColor = $this->config->getAppValue('current-app-background-color', '#444444'); + $loaderColor = $this->config->getAppValue('loader-color', '#0e75ac'); + $textColor = $this->config->getAppValue('text-color', '#FFFFFF'); + $iconInvertFilter = abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%'; + $iconOpacity = abs($this->config->getAppValueInt('icon-opacity', '100') / 100); + $opener = $this->config->getAppValue('opener', 'side-menu-opener'); } return [ 'vars' => [ 'background-color' => $backgroundColor, 'background-color-to' => $backgroundColorTo, - 'current-app-background-color' => $this->config->getAppValue('current-app-background-color', '#444444'), - 'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'), - 'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'), - 'opener' => $this->config->getAppValue('opener', 'side-menu-opener'), - 'icon-invert-filter' => abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%', - 'icon-opacity' => abs($this->config->getAppValueInt('icon-opacity', '100') / 100), + 'current-app-background-color' => $currentAppBackgroundColor, + 'loader-color' => $loaderColor, + 'text-color' => $textColor, + 'opener' => $opener, + 'icon-invert-filter' => $iconInvertFilter, + 'icon-opacity' => $iconOpacity, ], 'display-logo' => $this->config->getAppValueBool('display-logo', '1'), 'opener-only' => $this->config->getAppValueBool('opener-only', '0'), diff --git a/lib/Service/ConfigProxy.php b/lib/Service/ConfigProxy.php index 9b94d31..d162dfd 100644 --- a/lib/Service/ConfigProxy.php +++ b/lib/Service/ConfigProxy.php @@ -23,43 +23,47 @@ class ConfigProxy $this->config = $config; } - public function getAppValue(string $name, string $default): string + public function getAppValue(string $name, string $default, $appId = null): string { - return (string) $this->config->getAppValue(Application::APP_ID, $name, $default); + return (string) $this->config->getAppValue($appId ?? Application::APP_ID, $name, $default); } - public function getUserValue(User $user, string $name, string $default): string + public function getUserValue(User $user, string $name, string $default, $appId = null): string { - return (string) $this->config->getUserValue($user->getUid(), Application::APP_ID, $name, $default); + return (string) $this->config->getUserValue($user->getUid(), $appId ?? Application::APP_ID, $name, $default); } - public function getAppValueBool(string $name, string $default): bool + public function getAppValueBool(string $name, string $default, $appId = null): bool { - return (bool) $this->getAppValue($name, $default); + return (bool) $this->getAppValue($name, $default, $appId); } - public function getAppValueArray(string $name, string $default): array + public function getAppValueArray(string $name, string $default, $appId = null): array { - return (array) json_decode($this->getAppValue($name, $default), true); + return (array) json_decode($this->getAppValue($name, $default, $appId), true); } - public function getAppValueInt(string $name, string $default): int + public function getAppValueInt(string $name, string $default, $appId = null): int { - return (int) $this->getAppValue($name, $default); + return (int) $this->getAppValue($name, $default, $appId); } - public function getUserValueBool(User $user, string $name, string $default): bool + public function getUserValueBool(User $user, string $name, string $default, $appId = null): bool { - return (bool) $this->getUserValue($user, $name, $default); + return (bool) str_replace( + ['yes', 'no'], + ['1', '0'], + $this->getUserValue($user, $name, $default, $appId) + ); } - public function getUserValueArray(User $user, string $name, string $default): array + public function getUserValueArray(User $user, string $name, string $default, $appId = null): array { - return (array) json_decode($this->getUserValue($user, $name, $default), true); + return (array) json_decode($this->getUserValue($user, $name, $default, $appId), true); } - public function getUserValueInt(User $user, string $name, string $default): int + public function getUserValueInt(User $user, string $name, string $default, $appId = null): int { - return (int) $this->getUserValue($user, $name, $default); + return (int) $this->getUserValue($user, $name, $default, $appId); } } diff --git a/lib/Settings/Admin.php b/lib/Settings/Admin.php index 9b0a1ab..cf357a1 100644 --- a/lib/Settings/Admin.php +++ b/lib/Settings/Admin.php @@ -76,6 +76,9 @@ class Admin implements ISettings $backgroundColor = $this->config->getAppValue('background-color', '#333333'); $backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor); + $darkModeBackgroundColor = $this->config->getAppValue('dark-mode-background-color', '#333333'); + $darkModeBackgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $darkModeBackgroundColor); + $parameters = [ 'background-color' => $backgroundColor, 'background-color-to' => $backgroundColorTo, @@ -83,10 +86,18 @@ class Admin implements ISettings 'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'), 'icon-invert-filter' => $this->config->getAppValueInt('icon-invert-filter', '0'), 'icon-opacity' => $this->config->getAppValueInt('icon-opacity', '100'), - 'loader-enabled' => $this->config->getAppValue('loader-enabled', '1'), 'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'), - 'cache' => $this->config->getAppValue('cache', '0'), + 'dark-mode-background-color' => $darkModeBackgroundColor, + 'dark-mode-background-color-to' => $darkModeBackgroundColorTo, + 'dark-mode-current-app-background-color' => $this->config->getAppValue('dark-mode-current-app-background-color', '#444444'), + 'dark-mode-loader-color' => $this->config->getAppValue('dark-mode-loader-color', '#cccccc'), + 'dark-mode-icon-invert-filter' => $this->config->getAppValueInt('dark-mode-icon-invert-filter', '0'), + 'dark-mode-icon-opacity' => $this->config->getAppValueInt('dark-mode-icon-opacity', '100'), + 'dark-mode-text-color' => $this->config->getAppValue('dark-mode-text-color', '#FFFFFF'), + 'dark-mode-opener' => $this->config->getAppValue('dark-mode-opener', 'side-menu-opener'), 'opener' => $this->config->getAppValue('opener', 'side-menu-opener'), + 'loader-enabled' => $this->config->getAppValue('loader-enabled', '1'), + 'cache' => $this->config->getAppValue('cache', '0'), 'always-displayed' => $this->config->getAppValue('always-displayed', '0'), 'big-menu' => $this->config->getAppValue('big-menu', '0'), 'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'), diff --git a/src/l10n/fixtures/de.yaml b/src/l10n/fixtures/de.yaml index 6fca236..91542d6 100644 --- a/src/l10n/fixtures/de.yaml +++ b/src/l10n/fixtures/de.yaml @@ -74,3 +74,4 @@ "Name": "Name" "Customed": "Kundenspezifisch" "Show and hide the list of categories": "Liste der Kategorien ein- und ausblenden" +"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Diese Parameter werden verwendet, wenn Dark Theme oder Breeze Dark Theme aktiviert sind." diff --git a/src/l10n/fixtures/fr.yaml b/src/l10n/fixtures/fr.yaml index 0c5c20a..ec50237 100644 --- a/src/l10n/fixtures/fr.yaml +++ b/src/l10n/fixtures/fr.yaml @@ -74,3 +74,4 @@ "Name": "Nom" "Customed": "Personnalisé" "Show and hide the list of categories": "Afficher et masquer la liste des catégories" +"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Ces paramètres sont utilisés lorsque le thème sombre ou le thème Breeze Dark sont activés." diff --git a/templates/settings/admin-form.php b/templates/settings/admin-form.php index 4ef405e..435cbbf 100644 --- a/templates/settings/admin-form.php +++ b/templates/settings/admin-form.php @@ -48,118 +48,123 @@ $choicesSizes = [ t('Live preview')); ?> -
- -
-
- - +
+
+
+ t('Background color')); ?> +
+
+ + +
+
-
- -
-
- +
+
+
+ t('Background color of current app')); ?> +
+
+ +
+
-
- -
-
- +
+
+
+ t('Text color')); ?> +
+
+ +
+
-
- -
-
- +
+
+
+ t('Loader')); ?> +
+
+ +
+
-
- +
+
+
+ t('Icon')); ?> +
+
+
+ + t('Same color')); ?> + + + + + + t('Opposite color')); ?> + +
+ +
+ + t('Transparent')); ?> + + + + + + t('Opaque')); ?> + +
+
+
-
- - t('Same color')); ?> - - - - - - t('Opposite color')); ?> - -
- -
- - t('Transparent')); ?> - - - - - - t('Opaque')); ?> - -
-
- -
-

- t('Opener')); ?> -

-
-
+
t('Icon')); ?> - t('Live preview')); ?>
-
+
+
+

+ t('Dark mode colors')); ?> +

+ +

+ t('This parameters are used when Dark theme or Breeze Dark Theme are enabled.')); ?> +

+ +
+
+
+ t('Background color')); ?> +
+
+ + +
+
+
+ +
+
+
+ t('Background color of current app')); ?> +
+
+ +
+
+
+ +
+
+
+ t('Text color')); ?> +
+
+ +
+
+
+ +
+
+
+ t('Loader')); ?> +
+
+ +
+
+
+ +
+
+
+ t('Icon')); ?> +
+
+
+ + t('Same color')); ?> + + + + + + t('Opposite color')); ?> + +
+ +
+ + t('Transparent')); ?> + + + + + + t('Opaque')); ?> + +
+
+
+
+ +
+ 'side-menu-opener', + 'Default (dark)' => 'side-menu-opener-dark', + 'Hamburger' => 'side-menu-opener-hamburger', + 'Hamburger (dark)' => 'side-menu-opener-hamburger-dark', + 'Hamburger 2' => 'side-menu-opener-hamburger-2', + 'Hamburger 2 (dark)' => 'side-menu-opener-hamburger-2-dark', + ]; + ?> +
+
+ t('Icon')); ?> +
+
+ +
+
+
+
+ +
+

+ t('Opener')); ?> +

+ +