deblan
/
side_menu
4
5
Fork 3
Code Issues Pull Requests Projects Releases 65 Wiki Activity
Browse Source

add dark mode colors

pull/61/head
Simon Vieille 7 months ago
parent
d8d6aededa
commit
9747820cb8
7 changed files with 339 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      css/admin.css
  2. 48
      lib/Controller/CssController.php
  3. 36
      lib/Service/ConfigProxy.php
  4. 15
      lib/Settings/Admin.php
  5. 1
      src/l10n/fixtures/de.yaml
  6. 1
      src/l10n/fixtures/fr.yaml
  7. 355
      templates/settings/admin-form.php

8
css/admin.css
View File

@ -111,3 +111,11 @@
display: table-cell;
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
{
$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'),

36
lib/Service/ConfigProxy.php
View File

@ -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);
}
}

15
lib/Settings/Admin.php
View File

@ -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', '[]'),

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

@ -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."

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

@ -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."

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

@ -48,117 +48,267 @@ $choicesSizes = [
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
</h2>
<div>
<label for="side-menu-background-color">
<?php p($l->t('Background color')); ?>
</label>
</div>
<div>
<input
id="side-menu-background-color"
name="background-color"
type="color"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['background-color']); ?>">
<input
id="side-menu-background-color-to"
name="background-color-to"
type="color"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['background-color-to']); ?>">
<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
id="side-menu-background-color"
name="background-color"
type="color"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['background-color']); ?>">
<input
id="side-menu-background-color-to"
name="background-color-to"
type="color"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['background-color-to']); ?>">
</div>
</div>
</div>
<div>
<label for="side-menu-current-app-background-color">
<?php p($l->t('Background color of current app')); ?>
</label>
<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
id="side-menu-current-app-background-color"
name="current-app-background-color"
type="color"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['current-app-background-color']); ?>">
</div>
</div>
</div>
<div>
<input
id="side-menu-current-app-background-color"
name="current-app-background-color"
type="color"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['current-app-background-color']); ?>">
<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
id="side-menu-text-color"
name="text-color"
type="color"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['text-color']); ?>">
</div>
</div>
</div>
<div>
<label for="side-menu-text-color">
<?php p($l->t('Text color')); ?>
</label>
<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
id="side-menu-loader-color"
name="loader-color"
type="color"
class="side-menu-setting"
value="<?php print_unescaped($_['loader-color']); ?>">
</div>
</div>
</div>
<div>
<input
id="side-menu-text-color"
name="text-color"
type="color"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['text-color']); ?>">
<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"
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>
<label for="side-menu-text-color">
<?php p($l->t('Loader')); ?>
</label>
<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 id="side-menu-opener" name="opener" class="side-menu-setting side-menu-setting-live">
<?php foreach ($choices as $label => $value): ?>
<option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
<?php echo $l->t($label); ?>
</option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<div>
<input
id="side-menu-loader-color"
name="loader-color"
type="color"
class="side-menu-setting"
value="<?php print_unescaped($_['loader-color']); ?>">
<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>
<label for="side-menu-icon-invert-filter">
<?php p($l->t('Icon')); ?>
</label>
<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>
<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 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>
<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 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>
<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-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
@ -172,21 +322,28 @@ $choicesSizes = [
];
?>
<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')); ?>
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
</div>
<div class="side-menu-setting-form">
<select id="side-menu-opener" name="opener" class="side-menu-setting side-menu-setting-live">
<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 === $_['opener']): ?>selected<?php endif; ?>>
<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">
<?php
$choices = [

Write Preview
Loading…
Cancel
Save