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')).'%';
|
$iconInvertFilter = abs($this->config->getAppValueInt('dark-mode-icon-invert-filter', '0')).'%';
|
||||||
$iconOpacity = abs($this->config->getAppValueInt('dark-mode-icon-opacity', '100') / 100);
|
$iconOpacity = abs($this->config->getAppValueInt('dark-mode-icon-opacity', '100') / 100);
|
||||||
$opener = $this->config->getAppValue('dark-mode-opener', 'side-menu-opener');
|
$opener = $this->config->getAppValue('dark-mode-opener', 'side-menu-opener');
|
||||||
|
|
||||||
|
$backgroundOpacity = dechex($this->config->getAppValueInt('dark-mode-background-color-opacity', '100') * 255 / 100);
|
||||||
} else {
|
} else {
|
||||||
$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);
|
||||||
|
@ -108,8 +110,13 @@ class CssController extends Controller
|
||||||
$iconInvertFilter = abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%';
|
$iconInvertFilter = abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%';
|
||||||
$iconOpacity = abs($this->config->getAppValueInt('icon-opacity', '100') / 100);
|
$iconOpacity = abs($this->config->getAppValueInt('icon-opacity', '100') / 100);
|
||||||
$opener = $this->config->getAppValue('opener', 'side-menu-opener');
|
$opener = $this->config->getAppValue('opener', 'side-menu-opener');
|
||||||
|
|
||||||
|
$backgroundOpacity = dechex($this->config->getAppValueInt('background-color-opacity', '100') * 255 / 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$backgroundColor .= $backgroundOpacity;
|
||||||
|
$backgroundColorTo .= $backgroundOpacity;
|
||||||
|
|
||||||
return [
|
return [
|
||||||
'vars' => [
|
'vars' => [
|
||||||
'background-color' => $backgroundColor,
|
'background-color' => $backgroundColor,
|
||||||
|
|
|
@ -82,6 +82,7 @@ class Admin implements ISettings
|
||||||
$parameters = [
|
$parameters = [
|
||||||
'background-color' => $backgroundColor,
|
'background-color' => $backgroundColor,
|
||||||
'background-color-to' => $backgroundColorTo,
|
'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'),
|
'current-app-background-color' => $this->config->getAppValue('current-app-background-color', '#444444'),
|
||||||
'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'),
|
||||||
|
@ -89,6 +90,7 @@ class Admin implements ISettings
|
||||||
'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
|
'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
|
||||||
'dark-mode-background-color' => $darkModeBackgroundColor,
|
'dark-mode-background-color' => $darkModeBackgroundColor,
|
||||||
'dark-mode-background-color-to' => $darkModeBackgroundColorTo,
|
'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-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-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-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 name = target.attr('name')
|
||||||
var value = target.val()
|
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') {
|
if (name === 'opener') {
|
||||||
var url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
|
var url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
|
||||||
|
|
||||||
|
@ -120,6 +126,16 @@ jQuery(document).ready(() => {
|
||||||
value/=100;
|
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)
|
document.documentElement.style.setProperty('--side-menu-' + name, value)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -66,8 +66,28 @@ $choicesSizes = [
|
||||||
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>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="side-menu-setting-table">
|
<div class="side-menu-setting-table">
|
||||||
|
@ -216,6 +236,25 @@ $choicesSizes = [
|
||||||
type="color"
|
type="color"
|
||||||
class="side-menu-setting"
|
class="side-menu-setting"
|
||||||
value="<?php print_unescaped($_['dark-mode-background-color-to']); ?>">
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue