From cbd8462333d2f7806740b71e12ea3791e5061d18 Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Tue, 15 Apr 2025 20:37:11 +0200 Subject: [PATCH] scss: set root vars depending of the theme --- lib/Controller/CssController.php | 98 ++++----- templates/css/stylesheet.php | 84 +++++--- templates/settings/personal-form.php.bk | 265 ------------------------ 3 files changed, 94 insertions(+), 353 deletions(-) delete mode 100644 templates/settings/personal-form.php.bk diff --git a/lib/Controller/CssController.php b/lib/Controller/CssController.php index aedb888..6822563 100644 --- a/lib/Controller/CssController.php +++ b/lib/Controller/CssController.php @@ -66,10 +66,6 @@ class CssController extends Controller $topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]'); $topSideMenuApps = $this->config->getAppValueArray('top-side-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', '[]'); $userTopSideMenuApps = $this->config->getUserValueArray($this->user, 'top-side-menu-apps', '[]'); @@ -81,80 +77,62 @@ class CssController extends Controller if (!empty($userTopSideMenuApps) && !$isForced) { $topSideMenuApps = $userTopSideMenuApps; } - - $isDarkThemeUserEnabled = 'dark' === $this->config->getUserValue($this->user, 'theme', '', 'accessibility'); - $isBreezeDarkUserEnabled = $this->config->getUserValue($this->user, 'theme_enabled', '', 'breezedark'); - - $isBreezeDarkUserEnabled = '1' === $isBreezeDarkUserEnabled - || ($isBreezeDarkGlobalEnabled && '' === $isBreezeDarkUserEnabled); - } else { - $isDarkThemeUserEnabled = false; - $isBreezeDarkUserEnabled = false; } - $isDarkMode = ($isAccessibilityAppEnabled && $isDarkThemeUserEnabled) - || ($isBreezeDarkAppEnabled && $isBreezeDarkUserEnabled); - $lightenPrimaryColor = $this->color->getLightenPrimaryColor(); $darkenPrimaryColor = $this->color->getDarkenPrimaryColor(); $darkenPrimaryColor2 = $this->color->getDarkenPrimaryColor2(); $textColor = $this->color->getTextColorPrimary(); - if ($isDarkMode) { - $backgroundColor = $this->config->getAppValue('dark-mode-background-color', $darkenPrimaryColor); - $backgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $darkenPrimaryColor); - $currentAppBackgroundColor = $this->config->getAppValue( - 'dark-mode-current-app-background-color', - $darkenPrimaryColor2 - ); - $loaderColor = $this->config->getAppValue('dark-mode-loader-color', $lightenPrimaryColor); - $textColor = $this->config->getAppValue('dark-mode-text-color', $textColor); - $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'); - - $opacity = $this->config->getAppValueInt('dark-mode-background-color-opacity', '100'); - $backgroundOpacity = dechex($opacity * 255 / 100); - } else { - $backgroundColor = $this->config->getAppValue('background-color', $darkenPrimaryColor); - $backgroundColorTo = $this->config->getAppValue('background-color-to', $darkenPrimaryColor); - $currentAppBackgroundColor = $this->config->getAppValue( - 'current-app-background-color', - $darkenPrimaryColor2 - ); - $loaderColor = $this->config->getAppValue('loader-color', $lightenPrimaryColor); - $textColor = $this->config->getAppValue('text-color', $textColor); - $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'); - - $opacity = $this->config->getAppValueInt('background-color-opacity', '100'); - $backgroundOpacity = dechex($opacity * 255 / 100); - } + $backgroundColor = $this->config->getAppValue('background-color', $darkenPrimaryColor); + $backgroundColorTo = $this->config->getAppValue('background-color-to', $darkenPrimaryColor); + $opacity = $this->config->getAppValueInt('background-color-opacity', '100'); + $backgroundOpacity = dechex($opacity * 255 / 100); $backgroundColor .= $backgroundOpacity; $backgroundColorTo .= $backgroundOpacity; + $darkBackgroundColor = $this->config->getAppValue('dark-mode-background-color', $darkenPrimaryColor); + $darkBackgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $darkenPrimaryColor); + $darkOpacity = $this->config->getAppValueInt('dark-mode-background-color-opacity', '100'); + $darkBackgroundOpacity = dechex($opacity * 255 / 100); + + $darkBackgroundColor .= $darkBackgroundOpacity; + $darkBackgroundColorTo .= $darkBackgroundOpacity; + return [ 'vars' => [ - 'background-color' => $backgroundColor, - 'background-color-to' => $backgroundColorTo, - 'current-app-background-color' => $currentAppBackgroundColor, - 'loader-color' => $loaderColor, - 'text-color' => $textColor, - 'opener' => $opener, - 'icon-invert-filter' => $iconInvertFilter, - 'icon-opacity' => $iconOpacity, + 'light' => [ + 'background-color' => $backgroundColor, + 'background-color-to' => $backgroundColorTo, + 'current-app-background-color' => $this->config->getAppValue( + 'current-app-background-color', + $darkenPrimaryColor2 + ), + 'loader-color' => $this->config->getAppValue('loader-color', $lightenPrimaryColor), + 'text-color' => $this->config->getAppValue('text-color', $textColor), + '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), + ], + 'dark' => [ + 'background-color' => $darkBackgroundColor, + 'background-color-to' => $darkBackgroundColorTo, + 'current-app-background-color' => $this->config->getAppValue( + 'dark-mode-current-app-background-color', + $darkenPrimaryColor2 + ), + 'loader-color' => $this->config->getAppValue('dark-mode-loader-color', $lightenPrimaryColor), + 'text-color' => $this->config->getAppValue('dark-mode-text-color', $textColor), + 'opener' => $this->config->getAppValue('dark-mode-opener', 'side-menu-opener'), + 'icon-invert-filter' => abs($this->config->getAppValueInt('dark-mode-icon-invert-filter', '0')).'%', + 'icon-opacity' => abs($this->config->getAppValueInt('dark-mode-icon-opacity', '100') / 100), + ] ], - 'display-logo' => $this->config->getAppValueBool('display-logo', '1'), 'opener-only' => $this->config->getAppValueBool('opener-only', '0'), - 'external-sites-in-top-menu' => $this->config->getAppValueBool('external-sites-in-top-menu', '0'), 'size-icon' => $this->config->getAppValue('size-icon', 'normal'), 'size-text' => $this->config->getAppValue('size-text', 'normal'), 'always-displayed' => $this->config->getAppValueBool('always-displayed', '0'), - 'big-menu' => $this->config->getAppValueBool('big-menu', '0'), - 'top-menu-apps' => $topMenuApps, - 'top-side-menu-apps' => $topSideMenuApps, ]; } } diff --git a/templates/css/stylesheet.php b/templates/css/stylesheet.php index 8cfe456..dc1f1e4 100644 --- a/templates/css/stylesheet.php +++ b/templates/css/stylesheet.php @@ -1,42 +1,70 @@ + $value) { + echo sprintf( + "--side-menu-%s: %s;\n", + $key, + 'opener' === $key + ? sprintf('url("%s")', image_path('side_menu', $value.'.svg')) + : $value + ); + } +} +?> + :root { - $value): ?> - - --side-menu-: url(''); - - --side-menu-: ; - - + } - +@media (prefers-color-scheme: light) { + :root { + + } +} + +@media (prefers-color-scheme: dark) { + +} + +body[data-theme-dark], body[data-theme-dark-highcontrast] { + +} + +body[data-theme-light], body[data-theme-light-highcontrast] { + +} + + #nextcloud { display: none; } - + - + .cm-apps { - + width: 55px; - + width: 52px; - + } .cm .cm-opener { - + margin-left: 1px; - + margin-left: 0px; - + } - + - + .cm-app-icon { display: none; } - + .cm-app-icon svg { width: 15px; height: 15px; @@ -46,7 +74,7 @@ width: 15px; height: 15px; } - + .cm-app-icon svg { width: 20px; height: 20px; @@ -56,7 +84,7 @@ width: 20px; height: 20px; } - + .cm-app-icon svg { width: 23px; height: 23px; @@ -66,23 +94,23 @@ width: 23px; height: 23px; } - + - + .cm-app-text { display: none; } - + .cm-app-text { font-size: 12px; } - + .cm-app-text { font-size: 16px; } - + - + #content { left: 53px; width: calc(100% - (var(--body-container-margin) * 2) - 62px); @@ -92,4 +120,4 @@ width: calc(100% - (var(--body-container-margin) * 2) - 60px); margin-left: 11px; } - + diff --git a/templates/settings/personal-form.php.bk b/templates/settings/personal-form.php.bk deleted file mode 100644 index 793feec..0000000 --- a/templates/settings/personal-form.php.bk +++ /dev/null @@ -1,265 +0,0 @@ -. - */ - -vendor_script('side_menu', 'html5sortable.min'); -script('side_menu', 'admin'); -style('side_menu', 'admin'); - -$choicesYesNo = [ - 'No' => '0', - 'Yes' => '1', -]; - - -$labelShowHideApps = 'Show and hide the list of applications'; -$labelReset = 'Reset to default'; -?> -
- -
-

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

- -

- t('You do not have permission to change the settings.'); ?> -

-
- -
-

- t('Use the shortcut Ctrl+o to open and to hide the side menu. Use tab to navigate.'); ?> -

- -
-
-
- t('Enable the custom menu')); ?> -
-
- -
-
-
- -
-
-
- t('Open apps in new tab')); ?> -
-
- '1', - 'Use my selection' => '2', - ]; ?> - - - -

- - 🖱️ t($labelShowHideApps)); ?> - -

- - -
-
-
-
- -
-

- t('Top menu')); ?> -

- -
-
-
- t('Applications kept in the top menu')); ?> -

- - t('If there is no selection then the global configuration is applied.')); ?> - -

-
-
-

- - 🖱️ t($labelShowHideApps)); ?> - -

- - -
-
-
- -
-
-
- t('Applications kept in the top menu but also shown in side menu')); ?> -

- - t('These applications must be selected in the previous option.')); ?>
- t('If there is no selection then the global configuration is applied.')); ?> - -

-
-
-

- - 🖱️ t($labelShowHideApps)); ?> - -

- - -
-
-
-
-
-

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

- -
-
-
- t('Customize sorting')); ?> -
-
- - 🖱️ t($labelShowHideApps)); ?> - - -
- - - - ' name="apps-order" class="side-menu-setting" id="side-menu-apps-order" data-personal> -
-
-
-
- - -
- - - - - -
- - -
- - t('You like this app and you want to support me?')); ?> - - - - - -
-
-