Merge pull request 'develop' (#504) from develop into master

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

CHANGELOG.md

@@ -1,15 +1,5 @@
 ## [Unreleased]
 
-## 6.0.1
-
-### Added
-
-- feat(standard-menu): add unified-search-input size handling
-
-### Fixed
-
-- fix(ui): only apply always-displayed display css rules when the menu is displayed
-
 ## 6.0.0
 
 ### 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.0.0</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.fr/">Simon Vieille</author>
     <namespace>SideMenu</namespace>

lib/Controller/AdminSettingController.php

@@ -97,7 +97,6 @@ class AdminSettingController extends Controller
             'use-avatar',
             'add-logo-link',
             'show-settings',
-            'show-search-form',
             'loader-enabled',
             'always-displayed',
             'enabled',
@@ -138,7 +137,6 @@ 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',
@@ -208,17 +206,7 @@ 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,7 +135,6 @@ 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,4 +109,3 @@
 'Customize': 'Přizpůsobit'
 'Custom': 'Custom'
 'Close': 'Zavřít'
-'Show the search form': 'Show the search form'

src/l10n/fixtures/de.yaml

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

src/l10n/fixtures/es.yaml

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

src/l10n/fixtures/fr.yaml

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

src/l10n/fixtures/gl.yaml

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

src/l10n/fixtures/nl.yaml

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

src/l10n/fixtures/pt_BR.yaml

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

src/l10n/fixtures/ru.yaml

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

src/l10n/fixtures/sk.yaml

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

src/l10n/fixtures/sv.yaml

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

src/l10n/fixtures/tpl/base.yaml

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

src/l10n/fixtures/zh_CN.yaml

@@ -109,4 +109,3 @@
 '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-if="showSearchForm" v-model="search" />
+      <AppSearch v-model="search" />
       <OpenerButton
         v-if="!openerHover"
         @click="$emit('close')"
@@ -102,7 +102,6 @@ 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
@@ -121,7 +120,6 @@ 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="showSearchForm"
+        v-if="open"
         v-model="search"
       />
       <OpenerButton
@@ -103,7 +103,6 @@ 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')
@@ -152,7 +151,6 @@ 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

@@ -62,9 +62,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </li>
     </ul>
     <NcActions
-      class="cm-standardmenu-app-menu-more"
+      class="cm-standardmenu-app-menu-more app-menu-more"
       :aria-label="t('core', 'More apps')"
-      :forceMenu="true"
     >
       <NcActionLink
         v-for="app in popoverAppList"
@@ -133,27 +132,19 @@ const setApps = (value) => {
 const appLimit = () => {
   const headerStart = document.querySelector('#header .header-start')
   const headerEnd = document.querySelector('#header .header-end')
-  const unifiedSearch = document.querySelector('#header .unified-search-input')
   const body = document.querySelector('body')
 
-  let totalWidth = body.offsetWidth
+  let size = (headerEnd ? headerEnd.offsetWidth : 0) + 70
-  let otherElementsWidth = headerEnd ? headerEnd.offsetWidth : 0
-
-  if (unifiedSearch && headerEnd.offsetWidth < unifiedSearch.offsetWidth) {
-    otherElementsWidth += unifiedSearch.offsetWidth
-  }
-
-  let maxWidth = body.offsetWidth - otherElementsWidth
 
   if (headerStart) {
     Array.from(headerStart.children).forEach((child) => {
       if (child.id !== 'app-menu-container') {
-        maxWidth -= child.offsetWidth
+        size += child.offsetWidth
       }
     })
   }
 
-  return Math.max(0, Math.floor(maxWidth / 60))
+  return Math.max(0, Math.floor((body.offsetWidth - size) / 70))
 }
 
 const makeStyle = (app) => {
@@ -165,9 +156,13 @@ const makeStyle = (app) => {
 }
 
 const computeLists = () => {
-  const limit = appLimit()
+  mainAppList.value = appList.value.slice(0, appLimit())
-  mainAppList.value = appList.value.slice(0, limit)
+  popoverAppList.value = appList.value.slice(appLimit()).sort((a, b) => a.order - b.order)
-  popoverAppList.value = appList.value.slice(limit).sort((a, b) => a.order - b.order)
+}
+
+const reComputeLists = (delay) => {
+    window.clearTimeout(resizeTimeout)
+    resizeTimeout = window.setTimeout(computeLists, delay || 100)
 }
 
 onMounted(async () => {
@@ -182,7 +177,7 @@ onMounted(async () => {
 
   setApps(await navStore.getCoreApps())
 
-  window.setInterval(computeLists, 100)
+  window.addEventListener('resize', reComputeLists)
 })
 </script>
 

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-if="showSearchForm" v-model="search" />
+      <AppSearch v-model="search" />
       <OpenerButton
         v-if="!openerHover"
         @click="$emit('close')"
@@ -107,7 +107,6 @@ 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
@@ -126,7 +125,6 @@ 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

@@ -80,15 +80,6 @@ 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"

src/scss/menu.scss

@@ -363,16 +363,6 @@
     right: 0 !important;
     margin-left: 0 !important;
   }
-
-  #content {
-    left: 53px;
-    width: calc(100% - (var(--body-container-margin) * 2) - 62px);
-  }
-
-  #content-vue {
-    width: calc(100% - (var(--body-container-margin) * 2) - 60px);
-    margin-left: 11px;
-  }
 }
 
 @media screen and (max-width: 1024px) {
@@ -395,16 +385,6 @@
       padding: 10px 0;
     }
   }
-
-  #header {
-    .unified-search-input {
-      width: 80px !important;
-
-      .unified-search-input__label {
-        display: none;
-      }
-    }
-  }
 }
 
 @media screen and (min-width: 1024px) {
@@ -490,7 +470,7 @@ $header-icon-size: 20px;
         color: var(--color-primary-text);
         text-align: center;
         left: 50%;
-        top: 55%;
+        top: 45%;
         display: block;
         min-width: 100%;
         transform: translateX(-50%);
@@ -562,28 +542,24 @@ $header-icon-size: 20px;
     }
   }
 
-  &-app-menu-more {
+  .app-menu-more .button-vue--vue-tertiary {
-    padding-top: 9px !important;
+    opacity: 0.7;
+    margin: 8px 3px 3px 3px;
+    filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
 
-    .button-vue--vue-tertiary {
+    &:not([aria-expanded='true']) {
-      opacity: 0.7;
+      color: var(--color-main-text);
-      margin: 8px 3px 3px 3px;
-      filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
 
-      &:not([aria-expanded='true']) {
+      &:hover {
-        color: var(--color-main-text);
-
-        &:hover {
-          opacity: 1;
-          background-color: transparent !important;
-        }
-      }
-
-      &:focus-visible {
         opacity: 1;
-        outline: none !important;
+        background-color: transparent !important;
       }
     }
+
+    &:focus-visible {
+      opacity: 1;
+      outline: none !important;
+    }
   }
 
   &-app-menu-popover-entry {
@@ -623,9 +599,3 @@ $header-icon-size: 20px;
     display: none;
   }
 }
-
-#header {
-  .unified-search-input:not(.unified-search-input--mobile) {
-    position: unset !important;
-  }
-}

templates/css/stylesheet.php

@@ -117,3 +117,15 @@ body[data-theme-light], body[data-theme-light-highcontrast] {
     font-size: 16px;
   }
 <?php } ?>
+
+<?php if ($_['always-displayed']) { ?>
+  #content {
+    left: 53px;
+    width: calc(100% - (var(--body-container-margin) * 2) - 62px);
+  }
+
+  #content-vue {
+    width: calc(100% - (var(--body-container-margin) * 2) - 60px);
+    margin-left: 11px;
+  }
+<?php } ?>

webpack.config.js

@@ -7,7 +7,6 @@ const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 
 const appName = 'side_menu'
-const appVersion = '6.x'
 const buildMode = process.env.NODE_ENV
 const isDev = buildMode === 'development'
 
@@ -81,7 +80,6 @@ module.exports = {
 
     new webpack.DefinePlugin({
       appName: JSON.stringify(appName),
-      appVersion: JSON.stringify(appVersion),
     }),
   ],