[FEATURE] Option to disable the display of Icon-Names in the top left Menu-Bar (#194) #195
|
@ -171,6 +171,10 @@ class JsController extends Controller
|
||||||
'avatar' => $avatar,
|
'avatar' => $avatar,
|
||||||
'top-menu-apps' => $topMenuApps,
|
'top-menu-apps' => $topMenuApps,
|
||||||
'top-side-menu-apps' => $topSideMenuApps,
|
'top-side-menu-apps' => $topSideMenuApps,
|
||||||
|
'top-menu-mouse-over-hidden-label' => $this->config->getAppValueBool(
|
||||||
|
'top-menu-mouse-over-hidden-label',
|
||||||
|
'0'
|
||||||
|
),
|
||||||
'target-blank-apps' => $targetBlankApps,
|
'target-blank-apps' => $targetBlankApps,
|
||||||
'settings' => $settings,
|
'settings' => $settings,
|
||||||
'logo' => $this->themingDefaults->getLogo(),
|
'logo' => $this->themingDefaults->getLogo(),
|
||||||
|
|
|
@ -168,6 +168,10 @@ class Admin implements ISettings
|
||||||
'force' => $this->config->getAppValue('force', '0'),
|
'force' => $this->config->getAppValue('force', '0'),
|
||||||
'target-blank-apps' => $this->config->getAppValueArray('target-blank-apps', '[]'),
|
'target-blank-apps' => $this->config->getAppValueArray('target-blank-apps', '[]'),
|
||||||
'top-menu-apps' => $this->config->getAppValueArray('top-menu-apps', '[]'),
|
'top-menu-apps' => $this->config->getAppValueArray('top-menu-apps', '[]'),
|
||||||
|
'top-menu-mouse-over-hidden-label' => $this->config->getAppValue(
|
||||||
|
'top-menu-mouse-over-hidden-label',
|
||||||
|
'0'
|
||||||
|
),
|
||||||
'apps-order' => $this->config->getAppValueArray('apps-order', '[]'),
|
'apps-order' => $this->config->getAppValueArray('apps-order', '[]'),
|
||||||
'ordered-apps' => $this->appRepository->getOrderedApps(),
|
'ordered-apps' => $this->appRepository->getOrderedApps(),
|
||||||
'top-side-menu-apps' => $this->config->getAppValueArray('top-side-menu-apps', '[]'),
|
'top-side-menu-apps' => $this->config->getAppValueArray('top-side-menu-apps', '[]'),
|
||||||
|
|
|
@ -22,12 +22,16 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<nav class="app-menu show">
|
<nav class="app-menu show">
|
||||||
<ul class="app-menu-main" v-if="apps !== null">
|
<ul
|
||||||
|
class="app-menu-main"
|
||||||
|
:class="{ 'app-menu-main__hidden-label': hiddenLabels }"
|
||||||
|
v-if="apps !== null"
|
||||||
|
>
|
||||||
<li v-for="app in mainAppList()"
|
<li v-for="app in mainAppList()"
|
||||||
:key="app.id"
|
:key="app.id"
|
||||||
:data-app-id="app.id"
|
:data-app-id="app.id"
|
||||||
class="app-menu-entry"
|
class="app-menu-entry"
|
||||||
:class="{ 'app-menu-entry__active': app.active }"
|
:class="{ 'app-menu-entry__active': app.active, 'app-menu-entry__hidden-label': hiddenLabels }"
|
||||||
:style="makeStyle(app)"
|
:style="makeStyle(app)"
|
||||||
>
|
>
|
||||||
<a :href="app.href"
|
<a :href="app.href"
|
||||||
|
@ -77,6 +81,7 @@ export default {
|
||||||
appLimit: 0,
|
appLimit: 0,
|
||||||
observer: null,
|
observer: null,
|
||||||
targetBlankApps: [],
|
targetBlankApps: [],
|
||||||
|
hiddenLabels: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -96,6 +101,7 @@ export default {
|
||||||
})
|
})
|
||||||
|
|
||||||
this.targetBlankApps = window.targetBlankApps
|
this.targetBlankApps = window.targetBlankApps
|
||||||
|
this.hiddenLabels = window.topMenuAppsMouseOverHiddenLabel
|
||||||
this.observer = new ResizeObserver(this.resize)
|
this.observer = new ResizeObserver(this.resize)
|
||||||
this.observer.observe(this.$el)
|
this.observer.observe(this.$el)
|
||||||
this.resize()
|
this.resize()
|
||||||
|
@ -220,8 +226,8 @@ $header-icon-size: 20px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:not(.app-menu-entry__hidden-label):hover,
|
||||||
&:focus-within {
|
&:not(.app-menu-entry__hidden-label):focus-within {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
.app-menu-entry--label {
|
.app-menu-entry--label {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -241,7 +247,12 @@ $header-icon-size: 20px;
|
||||||
.app-menu-entry:hover,
|
.app-menu-entry:hover,
|
||||||
.app-menu-entry:focus {
|
.app-menu-entry:focus {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.app-menu-main__hidden-label):hover,
|
||||||
|
&:not(.app-menu-main__hidden-label):focus-within,
|
||||||
|
.app-menu-entry:not(.app-menu-entry__hidden-label):hover,
|
||||||
|
.app-menu-entry:not(.app-menu-entry__hidden-label):focus {
|
||||||
img {
|
img {
|
||||||
margin-top: -6px;
|
margin-top: -6px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -92,3 +92,4 @@
|
||||||
"Applications kept in the top menu": ""
|
"Applications kept in the top menu": ""
|
||||||
"Applications kept in the top menu but also shown in side menu": ""
|
"Applications kept in the top menu but also shown in side menu": ""
|
||||||
"These applications must be selected in the previous option.": ""
|
"These applications must be selected in the previous option.": ""
|
||||||
|
"Hide labels on mouse over": ""
|
||||||
|
|
|
@ -27,6 +27,7 @@ if ($_['always-displayed']) {
|
||||||
window.topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
|
window.topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
|
||||||
window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps']), "\n"; ?>
|
window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps']), "\n"; ?>
|
||||||
window.menuAppsOrder = <?php echo json_encode($_['apps-order']), "\n"; ?>
|
window.menuAppsOrder = <?php echo json_encode($_['apps-order']), "\n"; ?>
|
||||||
|
window.topMenuAppsMouseOverHiddenLabel = <?php echo json_encode($_['top-menu-mouse-over-hidden-label']), "\n"; ?>
|
||||||
|
|
||||||
<?php if ($display === 'big-menu'): ?>
|
<?php if ($display === 'big-menu'): ?>
|
||||||
sideMenu.setAttribute('data-bigmenu', '1')
|
sideMenu.setAttribute('data-bigmenu', '1')
|
||||||
|
|
|
@ -871,6 +871,20 @@ $labelAlwaysDisplayed = 'Always displayed';
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="side-menu-setting-row">
|
||||||
|
<div class="side-menu-setting-label">
|
||||||
|
<?php p($l->t('Hide labels on mouse over')); ?>
|
||||||
|
</div>
|
||||||
|
<div class="side-menu-setting-form">
|
||||||
|
<select id="side-menu-top-menu-mouse-over-hidden-label" name="top-menu-mouse-over-hidden-label" class="side-menu-setting">
|
||||||
|
<?php foreach ($choicesYesNo as $label => $value): ?>
|
||||||
|
<option value="<?php echo $value ?>" <?php if ($value === $_['top-menu-mouse-over-hidden-label']): ?>selected<?php endif; ?>>
|
||||||
|
<?php echo $l->t($label); ?>
|
||||||
|
</option>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue