fix(standardmenu): fix icons shift upwards when resizing

Reviewed-on: https://gitnet.fr/deblan/side_menu/pulls/521

CHANGELOG.md

@@ -1,5 +1,26 @@
 ## [Unreleased]
 
+## 6.2.0
+
+### Added
+
+- feat(app): add compatibility with Nextcloud 35
+
+### Fixed
+
+- fix #510 #417: [Bug] Styling of the icon labels and overflow icon is not correct
+
+## 6.1.0
+
+### Added
+
+- feat: add search toggle option (fix #509)
+
+### Fixed
+
+- fix #510: [Bug] Styling of the icon labels and overflow icon is not correct
+- fix #462: [Bug] Burger menu in settings is hidden with "Always displayed" on mobile device
+
 ## 6.0.1
 
 ### Added

appinfo/info.xml

@@ -30,7 +30,7 @@ Notice
 Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**.
 In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/).
 ]]></description>
-    <version>6.0.1</version>
+    <version>6.2.0</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.fr/">Simon Vieille</author>
     <namespace>SideMenu</namespace>
@@ -53,7 +53,7 @@ In case of downtime, you can download **Custom Menu** from [here](https://kim.de
     <screenshot><![CDATA[https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_default_menu.png]]></screenshot>
     <dependencies>
         <php min-version="8.1" max-version="8.5" />
-        <nextcloud min-version="34" max-version="34"/>
+        <nextcloud min-version="34" max-version="35"/>
     </dependencies>
     <settings>
         <admin>OCA\SideMenu\Settings\Admin</admin>

lib/Controller/AdminSettingController.php

@@ -97,6 +97,7 @@ class AdminSettingController extends Controller
             'use-avatar',
             'add-logo-link',
             'show-settings',
+            'show-search-form',
             'loader-enabled',
             'always-displayed',
             'enabled',
@@ -137,6 +138,7 @@ class AdminSettingController extends Controller
             'use-avatar' => '0',
             'add-logo-link' => '1',
             'show-settings' => '0',
+            'show-search-form' => '1',
             'loader-enabled' => '1',
             'always-displayed' => '0',
             'enabled' => '1',
@@ -206,7 +208,17 @@ class AdminSettingController extends Controller
         }
 
         foreach ($defaults as $key => $default) {
-            if (!array_key_exists($key, $config)) {
+            if (array_key_exists($key, $config)) {
+                continue;
+            }
+
+            if (in_array($key, $booleans)) {
+                $config[$key] = $default === '1';
+            } elseif (in_array($key, $arrays)) {
+                $config[$key] = json_decode($default);
+            } elseif (in_array($key, $integers)) {
+                $config[$key] = (int) $default;
+            } else {
                 $config[$key] = $default;
             }
         }

lib/Controller/JsController.php

@@ -135,6 +135,7 @@ class JsController extends Controller
             'force-light-icon' => $this->config->getAppValueBool('force-light-icon', '0'),
             'display-logo' => $this->config->getAppValueBool('display-logo', '1'),
             'use-avatar' => $this->config->getAppValueBool('use-avatar', '0'),
+            'show-search-form' => $this->config->getAppValueBool('show-search-form', '1'),
             'hide-when-no-apps' => $this->config->getAppValueBool('hide-when-no-apps', '0'),
             'loader-enabled' => $this->config->getAppValueBool('loader-enabled', '1'),
             'always-displayed' => $this->config->getAppValueBool('always-displayed', '0'),

src/l10n/fixtures/cs.yaml

@@ -109,3 +109,4 @@
 'Customize': 'Přizpůsobit'
 'Custom': 'Custom'
 'Close': 'Zavřít'
+'Show the search form': 'Show the search form'

src/l10n/fixtures/de.yaml

@@ -109,3 +109,4 @@
 'Customize': 'Customize'
 'Custom': 'Custom'
 'Close': 'Close'
+'Show the search form': 'Show the search form'

src/l10n/fixtures/es.yaml

@@ -109,3 +109,4 @@
 'Customize': 'Personalizar'
 'Custom': 'Custom'
 'Close': 'Cerrar'
+'Show the search form': 'Show the search form'

src/l10n/fixtures/fr.yaml

@@ -128,3 +128,4 @@
 'Customize': 'Personnaliser'
 'Custom': 'Personnalisé'
 'Close': 'Fermer'
+'Show the search form': 'Afficher le formulaire de recherche'

src/l10n/fixtures/gl.yaml

@@ -109,3 +109,4 @@
 'Customize': 'Personalizar'
 'Custom': 'Personalizado'
 'Close': 'Pechar'
+'Show the search form': 'Show the search form'

src/l10n/fixtures/nl.yaml

@@ -109,3 +109,4 @@
 'Customize': 'Customize'
 'Custom': 'Custom'
 'Close': 'Close'
+'Show the search form': 'Show the search form'

src/l10n/fixtures/pt_BR.yaml

@@ -107,3 +107,4 @@
 'Customize': 'Customize'
 'Custom': 'Custom'
 'Close': 'Close'
+'Show the search form': 'Show the search form'

src/l10n/fixtures/ru.yaml

@@ -109,3 +109,4 @@
 'Customize': 'Приспособить'
 'Custom': 'Custom'
 'Close': 'Закрыть'
+'Show the search form': 'Show the search form'

src/l10n/fixtures/sk.yaml

@@ -107,3 +107,4 @@
 'Customize': 'Customize'
 'Custom': 'Custom'
 'Close': 'Close'
+'Show the search form': 'Show the search form'

src/l10n/fixtures/sv.yaml

@@ -109,3 +109,4 @@
 'Customize': 'Anpassa'
 'Custom': 'Anpassad'
 'Close': 'Stäng'
+'Show the search form': 'Show the search form'

src/l10n/fixtures/tpl/base.yaml

@@ -109,3 +109,4 @@
 'Customize': 'Customize'
 'Custom': 'Custom'
 'Close': 'Close'
+'Show the search form': 'Show the search form'

src/l10n/fixtures/zh_CN.yaml

@@ -109,3 +109,4 @@
 'Customize': '自定义'
 'Custom': '自定义'
 'Close': '关闭'
+'Show the search form': 'Show the search form'

src/menus/SideMenuWithCategories.vue

@@ -27,7 +27,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         :label="settings.name"
         :avatar="settings.avatar"
       />
-      <AppSearch v-model="search" />
+      <AppSearch v-if="showSearchForm" v-model="search" />
       <OpenerButton
         v-if="!openerHover"
         @click="$emit('close')"
@@ -102,6 +102,7 @@ const activeApp = ref(null)
 const targetBlankApps = ref([])
 const settings = ref(null)
 const search = ref('')
+const showSearchForm = ref(true)
 const openerHover = ref(false)
 const menu = useTemplateRef('menu')
 const isTouchDevice = window.matchMedia('(pointer: coarse)').matches
@@ -120,6 +121,7 @@ onMounted(async () => {
 
   targetBlankApps.value = config['target-blank-apps']
   settings.value = config['settings']
+  showSearchForm.value = config['show-search-form']
   openerHover.value = config['opener-hover'] && !isTouchDevice
 
   items.value = await navStore.getCategories()

src/menus/SimpleSideMenu.vue

@@ -30,7 +30,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         :avatar="settings.avatar"
       />
       <AppSearch
-        v-if="open"
+        v-if="showSearchForm && open"
         v-model="search"
       />
       <OpenerButton
@@ -103,6 +103,7 @@ const openerHover = ref(false)
 const alwaysDisplayed = ref(false)
 const displayLogo = ref(false)
 const useAvatarAsLogo = ref(false)
+const showSearchForm = ref(true)
 const search = ref('')
 const apps = ref([])
 const menu = useTemplateRef('menu')
@@ -151,6 +152,7 @@ onMounted(async () => {
   alwaysDisplayed.value = config['always-displayed']
   targetBlankApps.value = config['target-blank-apps']
   forceLightIcon.value = config['force-light-icon']
+  showSearchForm.value = config['show-search-form']
 
   avatar.value = config['avatar']
   logo.value = config['logo']

src/menus/StandardMenu.vue

@@ -153,7 +153,7 @@ const appLimit = () => {
     })
   }
 
-  return Math.max(0, Math.floor(maxWidth / 60))
+  return Math.max(0, Math.floor(maxWidth / 60) - 1)
 }
 
 const makeStyle = (app) => {

src/menus/TopWideMenu.vue

@@ -31,7 +31,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         :label="settings.name"
         :avatar="settings.avatar"
       />
-      <AppSearch v-model="search" />
+      <AppSearch v-if="showSearchForm" v-model="search" />
       <OpenerButton
         v-if="!openerHover"
         @click="$emit('close')"
@@ -107,6 +107,7 @@ const activeApp = ref(null)
 const targetBlankApps = ref([])
 const settings = ref(null)
 const search = ref('')
+const showSearchForm = ref(true)
 const openerHover = ref(false)
 const menu = useTemplateRef('menu')
 const isTouchDevice = window.matchMedia('(pointer: coarse)').matches
@@ -125,6 +126,7 @@ onMounted(async () => {
 
   targetBlankApps.value = config['target-blank-apps']
   settings.value = config['settings']
+  showSearchForm.value = config['show-search-form']
   openerHover.value = config['opener-hover'] && !isTouchDevice
 
   items.value = await navStore.getCategories()

src/pages/AdminSettings.vue

@@ -29,6 +29,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       />
     </NcAppNavigation>
     <NcAppContent class="cm-settings cm-settings--nav">
+      <button @click="toggleNav" class="cm-settings-nav-toggle">{{ trans('Toggle menu') }}</button>
+
       <SettingsSection :hidden="section !== 'panel'">
         <SectionTitle label="Panel" />
 
@@ -80,6 +82,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormYesNo v-model="config['show-settings']" />
           </SettingValue>
         </SettingItem>
+        <SettingItem :disabled="config['always-displayed']">
+          <SettingLabel
+            label="Show the search form"
+            :middle="true"
+          />
+          <SettingValue>
+            <FormYesNo v-model="config['show-search-form']" />
+          </SettingValue>
+        </SettingItem>
         <SettingItem>
           <SettingLabel
             label="Icons"
@@ -619,6 +630,10 @@ const filterConfig = (value) => {
   return result
 }
 
+const toggleNav = () => {
+  document.querySelector('.cm-settings-nav .app-navigation-toggle-wrapper > button').click()
+}
+
 onMounted(async () => {
   config.value = await configStore.getAppConfig()
 

src/scss/admin.scss

@@ -15,14 +15,25 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-.cm-settings {
-  &--nav {
-    padding-top: 30px;
-  }
+.cm-settings-nav {
+    padding-top: 30px !important;
+}
 
+.cm-settings-nav-toggle {
+  margin-top: 40px !important;
+  margin-left: 15px !important;
+}
+
+.cm-settings-nav .app-navigation-toggle-wrapper > button {
+  display: none;
+}
+
+.cm-settings {
   &-nav {
+    max-width: 50vw !important;
+
     .app-navigation__content {
-      padding: 20px;
+      padding: 20px 10px 20px 10px;
     }
 
     .app-navigation-entry-icon {

src/scss/menu.scss

@@ -287,14 +287,6 @@
   }
 }
 
-.cm-standardmenu {
-  visibility: hidden;
-
-  &.show {
-    visibility: visible;
-  }
-}
-
 .cm-always-displayed {
   body {
     width: calc(100% - 50px) !important;
@@ -426,11 +418,25 @@
 $header-icon-size: 20px;
 
 .cm-standardmenu {
+  visibility: hidden;
   width: 100%;
   display: flex;
   flex-shrink: 1;
   flex-wrap: wrap;
 
+  &.show {
+    visibility: visible;
+  }
+
+  svg {
+    color: var(--color-background-plain-text) !important;
+  }
+
+  .app-menu-entry--label {
+    color: var(--color-background-plain-text) !important;
+    filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright)) !important;
+  }
+
   .app-menu-main {
     display: flex;
     flex-wrap: nowrap;
@@ -490,7 +496,7 @@ $header-icon-size: 20px;
         color: var(--color-primary-text);
         text-align: center;
         left: 50%;
-        top: 45%;
+        top: 55%;
         display: block;
         min-width: 100%;
         transform: translateX(-50%);
@@ -562,23 +568,27 @@ $header-icon-size: 20px;
     }
   }
 
-  .app-menu-more .button-vue--vue-tertiary {
-    opacity: 0.7;
-    margin: 8px 3px 3px 3px;
-    filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
+  &-app-menu-more {
+    padding-top: 9px !important;
 
-    &:not([aria-expanded='true']) {
-      color: var(--color-main-text);
+    .button-vue--vue-tertiary {
+      opacity: 0.7;
+      margin: 8px 3px 3px 3px;
+      filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
 
-      &:hover {
-        opacity: 1;
-        background-color: transparent !important;
+      &:not([aria-expanded='true']) {
+        color: var(--color-main-text);
+
+        &:hover {
+          opacity: 1;
+          background-color: transparent !important;
+        }
       }
-    }
 
-    &:focus-visible {
-      opacity: 1;
-      outline: none !important;
+      &:focus-visible {
+        opacity: 1;
+        outline: none !important;
+      }
     }
   }