forked from deblan/side_menu
add background opacity (fix #58)
This commit is contained in:
parent
fba980416d
commit
d2a8b05772
|
@ -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,
|
||||
|
|
|
@ -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
16
src/admin.js
|
@ -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)
|
||||
})
|
||||
|
||||
|
|
|
@ -66,7 +66,27 @@ $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>
|
||||
|
||||
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue