Merge pull request 'bugfix/top-menu-popover' (#506) from bugfix/top-menu-popover into develop

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

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+### 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

src/menus/StandardMenu.vue

@@ -62,8 +62,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </li>
     </ul>
     <NcActions
-      class="cm-standardmenu-app-menu-more app-menu-more"
+      class="cm-standardmenu-app-menu-more"
       :aria-label="t('core', 'More apps')"
+      :forceMenu="true"
     >
       <NcActionLink
         v-for="app in popoverAppList"
@@ -132,19 +133,27 @@ 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 size = (headerEnd ? headerEnd.offsetWidth : 0) + 70
+  let totalWidth = body.offsetWidth
+  let otherElementsWidth = headerEnd ? headerEnd.offsetWidth : 0
+
+  if (unifiedSearch && headerEnd.offsetWidth < unifiedSearch.offsetWidth) {
+    otherElementsWidth = totalWidth - unifiedSearch.getBoundingClientRect().left
+  }
+
+  let maxWidth = totalWidth - otherElementsWidth
 
   if (headerStart) {
     Array.from(headerStart.children).forEach((child) => {
       if (child.id !== 'app-menu-container') {
-        size += child.offsetWidth
+        maxWidth -= child.offsetWidth
       }
     })
   }
 
-  return Math.max(0, Math.floor((body.offsetWidth - size) / 70))
+  return Math.max(0, Math.floor(maxWidth / 70))
 }
 
 const makeStyle = (app) => {
@@ -161,8 +170,9 @@ const computeLists = () => {
 }
 
 const reComputeLists = (delay) => {
-    window.clearTimeout(resizeTimeout)
-    resizeTimeout = window.setTimeout(computeLists, delay || 100)
+  window.clearTimeout(resizeTimeout)
+  resizeTimeout = window.setTimeout(computeLists, delay || 100)
+  document.querySelector('html').classList.toggle('cm-standardmenu-popover', popoverAppList.value.length > 0)
 }
 
 onMounted(async () => {
@@ -177,6 +187,7 @@ onMounted(async () => {
 
   setApps(await navStore.getCoreApps())
 
+  reComputeLists(500)
   window.addEventListener('resize', reComputeLists)
 })
 </script>

src/scss/menu.scss

@@ -395,6 +395,16 @@
       padding: 10px 0;
     }
   }
+
+  #header {
+    .unified-search-input {
+      width: 80px !important;
+
+      .unified-search-input__label {
+        display: none;
+      }
+    }
+  }
 }
 
 @media screen and (min-width: 1024px) {
@@ -609,3 +619,11 @@ $header-icon-size: 20px;
     display: none;
   }
 }
+
+.cm-standardmenu-popover {
+  #header {
+    .unified-search-input:not(.unified-search-input--mobile) {
+      position: unset !important;
+    }
+  }
+}