deblan/side_menu
deblan
/
side_menu
3
6
Fork 5
Code Issues 6 Pull Requests 11 Projects Releases 119 Wiki Activity

add dark mode colors

This commit is contained in:
Simon Vieille 2021-02-27 14:21:55 +01:00
parent d8d6aededa
commit 9747820cb8
7 changed files with 345 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/admin.css
View File

@ -111,3 +111,11 @@
display: table-cell; display: table-cell;
width: 300px; width: 300px;
} }
.side-menu-setting-label-short {
width: 300px;
}
.side-menu-setting-form-long {
width: 400px;
}

48
lib/Controller/CssController.php
View File

@ -65,29 +65,61 @@ class CssController extends Controller
protected function getConfig(): array 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'); $isForced = $this->config->getAppValueBool('force', '0');
$topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]'); $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) { if ($this->user) {
$userTopMenuApps = $this->config->getUserValueArray($this->user, 'top-menu-apps', '[]'); $userTopMenuApps = $this->config->getUserValueArray($this->user, 'top-menu-apps', '[]');
if (!empty($userTopMenuApps) && !$isForced) { if (!empty($userTopMenuApps) && !$isForced) {
$topMenuApps = $userTopMenuApps; $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 [ return [
'vars' => [ 'vars' => [
'background-color' => $backgroundColor, 'background-color' => $backgroundColor,
'background-color-to' => $backgroundColorTo, 'background-color-to' => $backgroundColorTo,
'current-app-background-color' => $this->config->getAppValue('current-app-background-color', '#444444'), 'current-app-background-color' => $currentAppBackgroundColor,
'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'), 'loader-color' => $loaderColor,
'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'), 'text-color' => $textColor,
'opener' => $this->config->getAppValue('opener', 'side-menu-opener'), 'opener' => $opener,
'icon-invert-filter' => abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%', 'icon-invert-filter' => $iconInvertFilter,
'icon-opacity' => abs($this->config->getAppValueInt('icon-opacity', '100') / 100), 'icon-opacity' => $iconOpacity,
], ],
'display-logo' => $this->config->getAppValueBool('display-logo', '1'), 'display-logo' => $this->config->getAppValueBool('display-logo', '1'),
'opener-only' => $this->config->getAppValueBool('opener-only', '0'), 'opener-only' => $this->config->getAppValueBool('opener-only', '0'),

36
lib/Service/ConfigProxy.php
View File

@ -23,43 +23,47 @@ class ConfigProxy
$this->config = $config; $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);
} }
} }

15
lib/Settings/Admin.php
View File

@ -76,6 +76,9 @@ class Admin implements ISettings
$backgroundColor = $this->config->getAppValue('background-color', '#333333'); $backgroundColor = $this->config->getAppValue('background-color', '#333333');
$backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor); $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 = [ $parameters = [
'background-color' => $backgroundColor, 'background-color' => $backgroundColor,
'background-color-to' => $backgroundColorTo, 'background-color-to' => $backgroundColorTo,
@ -83,10 +86,18 @@ class Admin implements ISettings
'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'), 'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'),
'icon-invert-filter' => $this->config->getAppValueInt('icon-invert-filter', '0'), 'icon-invert-filter' => $this->config->getAppValueInt('icon-invert-filter', '0'),
'icon-opacity' => $this->config->getAppValueInt('icon-opacity', '100'), 'icon-opacity' => $this->config->getAppValueInt('icon-opacity', '100'),
'loader-enabled' => $this->config->getAppValue('loader-enabled', '1'),
'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'), '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'), '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'), 'always-displayed' => $this->config->getAppValue('always-displayed', '0'),
'big-menu' => $this->config->getAppValue('big-menu', '0'), 'big-menu' => $this->config->getAppValue('big-menu', '0'),
'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'), 'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'),

1
src/l10n/fixtures/de.yaml
View File

@ -74,3 +74,4 @@
"Name": "Name" "Name": "Name"
"Customed": "Kundenspezifisch" "Customed": "Kundenspezifisch"
"Show and hide the list of categories": "Liste der Kategorien ein- und ausblenden" "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."

1
src/l10n/fixtures/fr.yaml
View File

@ -74,3 +74,4 @@
"Name": "Nom" "Name": "Nom"
"Customed": "Personnalisé" "Customed": "Personnalisé"
"Show and hide the list of categories": "Afficher et masquer la liste des catégories" "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."

367
templates/settings/admin-form.php
View File

@ -48,118 +48,123 @@ $choicesSizes = [
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small> <small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
</h2> </h2>
<div> <div class="side-menu-setting-table">
<label for="side-menu-background-color"> <div class="side-menu-setting-row">
<?php p($l->t('Background color')); ?> <div class="side-menu-setting-label side-menu-setting-label-short">
</label> <?php p($l->t('Background color')); ?>
</div> </div>
<div> <div class="side-menu-setting-form side-menu-setting-form-long">
<input <input
id="side-menu-background-color" id="side-menu-background-color"
name="background-color" name="background-color"
type="color" type="color"
class="side-menu-setting side-menu-setting-live" class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['background-color']); ?>"> value="<?php print_unescaped($_['background-color']); ?>">
<input <input
id="side-menu-background-color-to" id="side-menu-background-color-to"
name="background-color-to" name="background-color-to"
type="color" type="color"
class="side-menu-setting side-menu-setting-live" class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['background-color-to']); ?>"> value="<?php print_unescaped($_['background-color-to']); ?>">
</div>
</div>
</div> </div>
<div> <div class="side-menu-setting-table">
<label for="side-menu-current-app-background-color"> <div class="side-menu-setting-row">
<?php p($l->t('Background color of current app')); ?> <div class="side-menu-setting-label side-menu-setting-label-short">
</label> <?php p($l->t('Background color of current app')); ?>
</div> </div>
<div> <div class="side-menu-setting-form side-menu-setting-form-long">
<input <input
id="side-menu-current-app-background-color" id="side-menu-current-app-background-color"
name="current-app-background-color" name="current-app-background-color"
type="color" type="color"
class="side-menu-setting side-menu-setting-live" class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['current-app-background-color']); ?>"> value="<?php print_unescaped($_['current-app-background-color']); ?>">
</div>
</div>
</div> </div>
<div> <div class="side-menu-setting-table">
<label for="side-menu-text-color"> <div class="side-menu-setting-row">
<?php p($l->t('Text color')); ?> <div class="side-menu-setting-label side-menu-setting-label-short">
</label> <?php p($l->t('Text color')); ?>
</div> </div>
<div> <div class="side-menu-setting-form side-menu-setting-form-long">
<input <input
id="side-menu-text-color" id="side-menu-text-color"
name="text-color" name="text-color"
type="color" type="color"
class="side-menu-setting side-menu-setting-live" class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['text-color']); ?>"> value="<?php print_unescaped($_['text-color']); ?>">
</div>
</div>
</div> </div>
<div> <div class="side-menu-setting-table">
<label for="side-menu-text-color"> <div class="side-menu-setting-row">
<?php p($l->t('Loader')); ?> <div class="side-menu-setting-label side-menu-setting-label-short">
</label> <?php p($l->t('Loader')); ?>
</div> </div>
<div> <div class="side-menu-setting-form side-menu-setting-form-long">
<input <input
id="side-menu-loader-color" id="side-menu-loader-color"
name="loader-color" name="loader-color"
type="color" type="color"
class="side-menu-setting" class="side-menu-setting"
value="<?php print_unescaped($_['loader-color']); ?>"> value="<?php print_unescaped($_['loader-color']); ?>">
</div>
</div>
</div> </div>
<div> <div class="side-menu-setting-table">
<label for="side-menu-icon-invert-filter"> <div class="side-menu-setting-row">
<?php p($l->t('Icon')); ?> <div class="side-menu-setting-label side-menu-setting-label-short">
</label> <?php p($l->t('Icon')); ?>
</div>
<div class="side-menu-setting-form side-menu-setting-form-long">
<div>
<em>
<?php p($l->t('Same color')); ?>
</em>
<input
type="range"
min="0" max="100"
id="side-menu-icon-invert-filter"
name="icon-invert-filter"
class="side-menu-setting side-menu-setting-live"
value="<?php echo $_['icon-invert-filter'] ?>"
>
<em>
<?php p($l->t('Opposite color')); ?>
</em>
</div>
<div>
<em>
<?php p($l->t('Transparent')); ?>
</em>
<input
type="range"
min="0" max="100"
id="side-menu-icon-opacity"
name="icon-opacity"
class="side-menu-setting side-menu-setting-live"
value="<?php echo $_['icon-opacity'] ?>"
>
<em>
<?php p($l->t('Opaque')); ?>
</em>
</div>
</div>
</div>
</div> </div>
<div>
<em>
<?php p($l->t('Same color')); ?>
</em>
<input
type="range"
min="0" max="100"
id="side-menu-icon-invert-filter"
name="icon-invert-filter"
class="side-menu-setting side-menu-setting-live"
value="<?php echo $_['icon-invert-filter'] ?>"
>
<em>
<?php p($l->t('Opposite color')); ?>
</em>
</div>
<div>
<em>
<?php p($l->t('Transparent')); ?>
</em>
<input
type="range"
min="0" max="100"
id="side-menu-icon-opacity"
name="icon-opacity"
class="side-menu-setting side-menu-setting-live"
value="<?php echo $_['icon-opacity'] ?>"
>
<em>
<?php p($l->t('Opaque')); ?>
</em>
</div>
</div>
<div class="section">
<h2>
<?php p($l->t('Opener')); ?>
</h2>
<div class="side-menu-setting-table"> <div class="side-menu-setting-table">
<?php <?php
$choices = [ $choices = [
@ -172,11 +177,10 @@ $choicesSizes = [
]; ];
?> ?>
<div class="side-menu-setting-row"> <div class="side-menu-setting-row">
<div class="side-menu-setting-label"> <div class="side-menu-setting-label side-menu-setting-label-short">
<?php p($l->t('Icon')); ?> <?php p($l->t('Icon')); ?>
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
</div> </div>
<div class="side-menu-setting-form"> <div class="side-menu-setting-form side-menu-setting-form-long">
<select id="side-menu-opener" name="opener" class="side-menu-setting side-menu-setting-live"> <select id="side-menu-opener" name="opener" class="side-menu-setting side-menu-setting-live">
<?php foreach ($choices as $label => $value): ?> <?php foreach ($choices as $label => $value): ?>
<option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>> <option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
@ -186,7 +190,160 @@ $choicesSizes = [
</select> </select>
</div> </div>
</div> </div>
</div>
<h2>
<?php p($l->t('Dark mode colors')); ?>
</h2>
<p>
<?php p($l->t('This parameters are used when Dark theme or Breeze Dark Theme are enabled.')); ?>
</p>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label side-menu-setting-label-short">
<?php p($l->t('Background color')); ?>
</div>
<div class="side-menu-setting-form side-menu-setting-form-long">
<input
name="dark-mode-background-color"
type="color"
class="side-menu-setting"
value="<?php print_unescaped($_['dark-mode-background-color']); ?>">
<input
name="dark-mode-background-color-to"
type="color"
class="side-menu-setting"
value="<?php print_unescaped($_['dark-mode-background-color-to']); ?>">
</div>
</div>
</div>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label side-menu-setting-label-short">
<?php p($l->t('Background color of current app')); ?>
</div>
<div class="side-menu-setting-form side-menu-setting-form-long">
<input
name="dark-mode-current-app-background-color"
type="color"
class="side-menu-setting"
value="<?php print_unescaped($_['dark-mode-current-app-background-color']); ?>">
</div>
</div>
</div>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label side-menu-setting-label-short">
<?php p($l->t('Text color')); ?>
</div>
<div class="side-menu-setting-form side-menu-setting-form-long">
<input
name="dark-mode-text-color"
type="color"
class="side-menu-setting"
value="<?php print_unescaped($_['dark-mode-text-color']); ?>">
</div>
</div>
</div>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label side-menu-setting-label-short">
<?php p($l->t('Loader')); ?>
</div>
<div class="side-menu-setting-form side-menu-setting-form-long">
<input
name="dark-mode-loader-color"
type="color"
class="side-menu-setting"
value="<?php print_unescaped($_['dark-mode-loader-color']); ?>">
</div>
</div>
</div>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row">
<div class="side-menu-setting-label side-menu-setting-label-short">
<?php p($l->t('Icon')); ?>
</div>
<div class="side-menu-setting-form side-menu-setting-form-long">
<div>
<em>
<?php p($l->t('Same color')); ?>
</em>
<input
type="range"
min="0" max="100"
name="dark-mode-icon-invert-filter"
class="side-menu-setting"
value="<?php echo $_['dark-mode-icon-invert-filter'] ?>"
>
<em>
<?php p($l->t('Opposite color')); ?>
</em>
</div>
<div>
<em>
<?php p($l->t('Transparent')); ?>
</em>
<input
type="range"
min="0" max="100"
name="dark-mode-icon-opacity"
class="side-menu-setting"
value="<?php echo $_['dark-mode-icon-opacity'] ?>"
>
<em>
<?php p($l->t('Opaque')); ?>
</em>
</div>
</div>
</div>
</div>
<div class="side-menu-setting-table">
<?php
$choices = [
'Default' => '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',
];
?>
<div class="side-menu-setting-row">
<div class="side-menu-setting-label side-menu-setting-label-short">
<?php p($l->t('Icon')); ?>
</div>
<div class="side-menu-setting-form side-menu-setting-form-long">
<select name="dark-opener" class="side-menu-setting">
<?php foreach ($choices as $label => $value): ?>
<option value="<?php echo $value ?>" <?php if ($value === $_['dark-mode-opener']): ?>selected<?php endif; ?>>
<?php echo $l->t($label); ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
<div class="section">
<h2>
<?php p($l->t('Opener')); ?>
</h2>
<div class="side-menu-setting-table">
<div class="side-menu-setting-row"> <div class="side-menu-setting-row">
<?php <?php
$choices = [ $choices = [