Merge pull request '[FEATURE] Option to disable the display of Icon-Names in the top left Menu-Bar (#194)' (#195) from feature/issue194 into develop

Reviewed-on: #195

lib/Controller/JsController.php

@@ -171,6 +171,10 @@ class JsController extends Controller
             'avatar' => $avatar,
             'top-menu-apps' => $topMenuApps,
             '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,
             'settings' => $settings,
             'logo' => $this->themingDefaults->getLogo(),

lib/Settings/Admin.php

@@ -168,6 +168,10 @@ class Admin implements ISettings
             'force' => $this->config->getAppValue('force', '0'),
             'target-blank-apps' => $this->config->getAppValueArray('target-blank-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', '[]'),
             'ordered-apps' => $this->appRepository->getOrderedApps(),
             'top-side-menu-apps' => $this->config->getAppValueArray('top-side-menu-apps', '[]'),

src/AppMenu.vue

@@ -22,12 +22,16 @@
 
 <template>
   <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()"
         :key="app.id"
         :data-app-id="app.id"
         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)"
         >
         <a :href="app.href"
@@ -77,6 +81,7 @@ export default {
       appLimit: 0,
       observer: null,
       targetBlankApps: [],
+      hiddenLabels: true
     }
   },
   mounted() {
@@ -96,6 +101,7 @@ export default {
     })
 
     this.targetBlankApps = window.targetBlankApps
+    this.hiddenLabels = window.topMenuAppsMouseOverHiddenLabel
     this.observer = new ResizeObserver(this.resize)
     this.observer.observe(this.$el)
     this.resize()
@@ -220,8 +226,8 @@ $header-icon-size: 20px;
       overflow: hidden;
     }
 
-    &:hover,
-    &:focus-within {
+    &:not(.app-menu-entry__hidden-label):hover,
+    &:not(.app-menu-entry__hidden-label):focus-within {
       opacity: 1;
       .app-menu-entry--label {
         opacity: 1;
@@ -241,7 +247,12 @@ $header-icon-size: 20px;
   .app-menu-entry:hover,
   .app-menu-entry:focus {
     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 {
       margin-top: -6px;
     }

src/l10n/fixtures/tpl/base.yaml

@@ -92,3 +92,4 @@
 "Applications kept in the top menu": ""
 "Applications kept in the top menu but also shown in side menu": ""
 "These applications must be selected in the previous option.": ""
+"Hide labels on mouse over": ""

templates/js/script.php

@@ -27,6 +27,7 @@ if ($_['always-displayed']) {
   window.topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
   window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps']), "\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'): ?>
     sideMenu.setAttribute('data-bigmenu', '1')

templates/settings/admin-form.php

@@ -871,6 +871,20 @@ $labelAlwaysDisplayed = 'Always displayed';
                     </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>