add option to force light icons
This commit is contained in:
parent
4b06b633b8
commit
7864e16ef3
|
@ -54,6 +54,7 @@ class JsController extends Controller
|
||||||
$parameters = [
|
$parameters = [
|
||||||
'opener-position' => $this->config->getAppValue('side_menu', 'opener-position', 'before'),
|
'opener-position' => $this->config->getAppValue('side_menu', 'opener-position', 'before'),
|
||||||
'opener-hover' => (bool) $this->config->getAppValue('side_menu', 'opener-hover', '0'),
|
'opener-hover' => (bool) $this->config->getAppValue('side_menu', 'opener-hover', '0'),
|
||||||
|
'force-light-icon' => (bool) $this->config->getAppValue('side_menu', 'force-light-icon', '0'),
|
||||||
'hide-when-no-apps' => (bool) $this->config->getAppValue('side_menu', 'hide-when-no-apps', '0'),
|
'hide-when-no-apps' => (bool) $this->config->getAppValue('side_menu', 'hide-when-no-apps', '0'),
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -55,6 +55,7 @@ class Admin implements ISettings
|
||||||
'background-color-to' => $backgroundColorTo,
|
'background-color-to' => $backgroundColorTo,
|
||||||
'current-app-background-color' => $this->config->getAppValue('side_menu', 'current-app-background-color', '#444444'),
|
'current-app-background-color' => $this->config->getAppValue('side_menu', 'current-app-background-color', '#444444'),
|
||||||
'text-color' => $this->config->getAppValue('side_menu', 'text-color', '#FFFFFF'),
|
'text-color' => $this->config->getAppValue('side_menu', 'text-color', '#FFFFFF'),
|
||||||
|
'force-light-icon' => $this->config->getAppValue('side_menu', 'force-light-icon', '0'),
|
||||||
'cache' => $this->config->getAppValue('side_menu', 'cache', '0'),
|
'cache' => $this->config->getAppValue('side_menu', 'cache', '0'),
|
||||||
'opener' => $this->config->getAppValue('side_menu', 'opener', 'side-menu-opener'),
|
'opener' => $this->config->getAppValue('side_menu', 'opener', 'side-menu-opener'),
|
||||||
'display-logo' => $this->config->getAppValue('side_menu', 'display-logo', '1'),
|
'display-logo' => $this->config->getAppValue('side_menu', 'display-logo', '1'),
|
||||||
|
|
|
@ -41,7 +41,8 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
apps: [],
|
apps: [],
|
||||||
logo: null
|
logo: null,
|
||||||
|
forceLightIcon: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -60,6 +61,10 @@ export default {
|
||||||
.replace('id="invertMenuMain', 'id="invertSideMenu')
|
.replace('id="invertMenuMain', 'id="invertSideMenu')
|
||||||
.replace('url(#invertMenuMain', 'url(#invertSideMenu')
|
.replace('url(#invertMenuMain', 'url(#invertSideMenu')
|
||||||
|
|
||||||
|
if (this.forceLightIcon) {
|
||||||
|
svg = svg.replace(/filter="url[^"]+"/, '')
|
||||||
|
}
|
||||||
|
|
||||||
this.apps.push({
|
this.apps.push({
|
||||||
href: href,
|
href: href,
|
||||||
name: element.querySelector('span').innerHTML,
|
name: element.querySelector('span').innerHTML,
|
||||||
|
@ -90,16 +95,17 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
mounted() {
|
||||||
this.retrieveApps();
|
this.retrieveApps()
|
||||||
this.retrieveLogo();
|
this.retrieveLogo()
|
||||||
|
this.forceLightIcon = document.querySelector('#side-menu-container').getAttribute('data-forcelighticon') == 1;
|
||||||
|
|
||||||
const menu = document.querySelector('#appmenu')
|
const menu = document.querySelector('#appmenu')
|
||||||
|
|
||||||
if (menu) {
|
if (menu) {
|
||||||
const config = {attributes: true, childList: true, subtree: true};
|
const config = {attributes: true, childList: true, subtree: true}
|
||||||
const observer = new MutationObserver(this.retrieveApps);
|
const observer = new MutationObserver(this.retrieveApps)
|
||||||
observer.observe(menu, config);
|
observer.observe(menu, config)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,6 +20,7 @@ const elements = [
|
||||||
'side-menu-background-color-to',
|
'side-menu-background-color-to',
|
||||||
'side-menu-current-app-background-color',
|
'side-menu-current-app-background-color',
|
||||||
'side-menu-text-color',
|
'side-menu-text-color',
|
||||||
|
'side-menu-force-light-icon',
|
||||||
'side-menu-opener',
|
'side-menu-opener',
|
||||||
'side-menu-opener-position',
|
'side-menu-opener-position',
|
||||||
'side-menu-opener-hover',
|
'side-menu-opener-hover',
|
||||||
|
|
|
@ -5,6 +5,10 @@
|
||||||
var body = $('body')
|
var body = $('body')
|
||||||
var isTouchDevice = window.matchMedia("(pointer: coarse)").matches
|
var isTouchDevice = window.matchMedia("(pointer: coarse)").matches
|
||||||
|
|
||||||
|
<?php if ($_['force-light-icon']): ?>
|
||||||
|
sideMenuContainer.attr('data-forcelighticon', '1')
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
body.on('side-menu.apps', function(e, apps) {
|
body.on('side-menu.apps', function(e, apps) {
|
||||||
<?php if ($_['hide-when-no-apps']): ?>
|
<?php if ($_['hide-when-no-apps']): ?>
|
||||||
sideMenu = $('#side-menu')
|
sideMenu = $('#side-menu')
|
||||||
|
|
|
@ -82,6 +82,22 @@ $choicesSizes = [
|
||||||
type="color"
|
type="color"
|
||||||
value="<?php print_unescaped($_['text-color']); ?>">
|
value="<?php print_unescaped($_['text-color']); ?>">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="side-menu-opener-only" class="settings-hint">
|
||||||
|
<?php p($l->t('Force light icons')); ?>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<select id="side-menu-force-light-icon" name="force-light-icon">
|
||||||
|
<?php foreach ($choicesYesNo as $label => $value): ?>
|
||||||
|
<option value="<?php echo $value ?>" <?php if ($value === $_['force-light-icon']): ?>selected<?php endif; ?>>
|
||||||
|
<?php echo $l->t($label); ?>
|
||||||
|
</option>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
|
|
Loading…
Reference in a new issue