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

add background opacity (fix #58)

This commit is contained in:
Simon Vieille 2021-07-03 20:23:39 +02:00
parent fba980416d
commit d2a8b05772
4 changed files with 64 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/Controller/CssController.php
View File

@ -99,6 +99,8 @@ class CssController extends Controller
$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');
$backgroundOpacity = dechex($this->config->getAppValueInt('dark-mode-background-color-opacity', '100') * 255 / 100);
} else {
$backgroundColor = $this->config->getAppValue('background-color', '#333333');
$backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);
@ -108,8 +110,13 @@ class CssController extends Controller
$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');
$backgroundOpacity = dechex($this->config->getAppValueInt('background-color-opacity', '100') * 255 / 100);
}
$backgroundColor .= $backgroundOpacity;
$backgroundColorTo .= $backgroundOpacity;
return [
'vars' => [
'background-color' => $backgroundColor,

2
lib/Settings/Admin.php
View File

@ -82,6 +82,7 @@ class Admin implements ISettings
$parameters = [
'background-color' => $backgroundColor,
'background-color-to' => $backgroundColorTo,
'background-color-opacity' => $this->config->getAppValueInt('background-color-opacity', '100'),
'current-app-background-color' => $this->config->getAppValue('current-app-background-color', '#444444'),
'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'),
'icon-invert-filter' => $this->config->getAppValueInt('icon-invert-filter', '0'),
@ -89,6 +90,7 @@ class Admin implements ISettings
'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
'dark-mode-background-color' => $darkModeBackgroundColor,
'dark-mode-background-color-to' => $darkModeBackgroundColorTo,
'dark-mode-background-color-opacity' => $this->config->getAppValueInt('dark-mode-background-color-opacity', '100'),
'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'),

16
src/admin.js
View File

@ -110,6 +110,12 @@ jQuery(document).ready(() => {
var name = target.attr('name')
var value = target.val()
if ('background-color-opacity' === name) {
return $('#side-menu-background-color, #side-menu-background-color-to').trigger('change');
} else if ('dark-mode-background-color-opacity' === name) {
return $('#side-menu-dark-mode-background-color, #side-menu-dark-mode-background-color-to').trigger('change');
}
if (name === 'opener') {
var url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
@ -120,6 +126,16 @@ jQuery(document).ready(() => {
value/=100;
}
if (['dark-mode-background-color', 'dark-mode-background-color-to'].indexOf(name) > -1) {
var opacity = parseInt($('#side-menu-dark-mode-background-color-opacity').val() * 255 / 100);
value = [value, opacity.toString(16)].join('');
} else if (['background-color', 'background-color-to'].indexOf(name) > -1) {
var opacity = parseInt($('#side-menu-background-color-opacity').val() * 255 / 100);
value = [value, opacity.toString(16)].join('');
}
document.documentElement.style.setProperty('--side-menu-' + name, value)
})

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

@ -66,8 +66,28 @@ $choicesSizes = [
type="color"
class="side-menu-setting side-menu-setting-live"
value="<?php print_unescaped($_['background-color-to']); ?>">
<div>
<em>
<?php p($l->t('Transparent')); ?>
</em>
<input
type="range"
min="0" max="100"
id="side-menu-background-color-opacity"
name="background-color-opacity"
class="side-menu-setting side-menu-setting-live"
value="<?php echo $_['background-color-opacity'] ?>"
>
<em>
<?php p($l->t('Opaque')); ?>
</em>
</div>
</div>
</div>
</div>
<div class="side-menu-setting-table">
@ -216,6 +236,25 @@ $choicesSizes = [
type="color"
class="side-menu-setting"
value="<?php print_unescaped($_['dark-mode-background-color-to']); ?>">
<div>
<em>
<?php p($l->t('Transparent')); ?>
</em>
<input
type="range"
min="0" max="100"
id="side-menu-dark-mode-background-color-opacity"
name="dark-mode-background-color-opacity"
class="side-menu-setting side-menu-setting-live"
value="<?php echo $_['dark-mode-background-color-opacity'] ?>"
>
<em>
<?php p($l->t('Opaque')); ?>
</em>
</div>
</div>
</div>
</div>