Refactor maxWidth

owncloud · May 17, 2023 · b2c8dbe · b2c8dbe
1 parent 1b20201
commit b2c8dbe
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 62 deletions.
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -171,28 +171,10 @@ export default defineComponent({
       }
     },
 
-    /**
-     * Parent selector to watch for resize events. (e.g. page gets smaller)
-     * If set, the breadcrumb collapses if the breadcrumb is larger than the parent.
-     * Disabled if empty.
-     */
-
-    parentSelector: {
-      type: String,
+    maxWidth: {
+      type: Number,
       required: false,
-      default: ''
-    },
-
-    /**
-     * Function to calculate the max width of the breadcrumb.
-     * Defaults to 99999px.
-     */
-    calculateBreadcrumbMaxWidth: {
-      type: Function,
-      required: false,
-      default: () => {
-        return 99999
-      }
+      default: 99999
     },
     /**
      * Determines if the last breadcrumb item should have context menu actions.
@@ -224,7 +206,7 @@ export default defineComponent({
     }
 
     const reduceBreadcrumb = (offsetIndex) => {
-      const breadcrumbMaxWidth = props.calculateBreadcrumbMaxWidth()
+      const breadcrumbMaxWidth = props.maxWidth
       document.getElementById(props.id)?.style.setProperty('--max-width', `${breadcrumbMaxWidth}px`)
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
 
@@ -264,44 +246,20 @@ export default defineComponent({
       })
     }
 
-    const throttleResizeObserver = (callback, delay) => {
-      let resizeTimeout
-
-      return function (entries) {
-        if (!resizeTimeout) {
-          resizeTimeout = setTimeout(() => {
-            resizeTimeout = null
-            callback(entries)
-          }, delay)
-        }
-      }
-    }
-
-    const resizeObserver = new ResizeObserver(
-      throttleResizeObserver((entries) => {
-        renderBreadcrumb()
-      }, 10)
+    watch(
+      () => props.maxWidth,
+      () => renderBreadcrumb()
     )
-
     watch(
       () => props.items,
       () => renderBreadcrumb()
     )
     onMounted(() => {
       renderBreadcrumb()
-      if (!props.parentSelector) {
-        return
-      }
-      const parentSelector = document.querySelector(props.parentSelector)
-      resizeObserver.observe(parentSelector)
       window.addEventListener('resize', renderBreadcrumb)
     })
 
     onBeforeUnmount(() => {
-      if (!props.parentSelector) {
-        return
-      }
-      resizeObserver.disconnect()
       window.removeEventListener('resize', renderBreadcrumb)
     })
 

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -18,8 +18,7 @@
           context-menu-padding="small"
           :show-context-actions="showContextActions"
           :items="breadcrumbs"
-          parent-selector="#files-app-bar"
-          :calculate-breadcrumb-max-width="calculateBreadcrumbMaxWidth"
+          :max-width="maxWidth"
         >
           <template #contextMenu>
             <context-actions
@@ -66,7 +65,7 @@
 
 <script lang="ts">
 import last from 'lodash-es/last'
-import { computed, defineComponent, inject, PropType, Ref, unref } from 'vue'
+import { computed, defineComponent, inject, PropType, ref, Ref, unref } from 'vue'
 import { mapGetters, mapState, mapMutations } from 'vuex'
 import { Resource } from 'web-client'
 import {
@@ -96,6 +95,7 @@ import {
 import { useStore } from 'web-pkg/src'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from 'web-app-files/src/composables'
+import { EVENT_ITEM_DROPPED } from 'design-system/src/helpers'
 
 export default defineComponent({
   components: {
@@ -133,7 +133,8 @@ export default defineComponent({
       default: null
     }
   },
-  setup(props) {
+  emits: [EVENT_ITEM_DROPPED],
+  setup(props, { emit }) {
     const store = useStore()
 
     const { actions: acceptShareActions } = useFileActionsAcceptShare({ store })
@@ -147,6 +148,8 @@ export default defineComponent({
     const { actions: moveActions } = useFileActionsMove({ store })
     const { actions: restoreActions } = useFileActionsRestore({ store })
 
+    const maxWidth = ref<number>(0)
+
     const batchActions = computed(() => {
       return [
         ...unref(clearSelectionActions),
@@ -188,19 +191,11 @@ export default defineComponent({
       return props.breadcrumbs.length <= 1
     })
 
-    const calculateBreadcrumbMaxWidth = () => {
-      const leftControlsWidth = document.getElementById('files-app-bar-controls-right')?.clientWidth
-      const appBarTotalWidth =
-        document.getElementById('files-view')?.parentElement?.clientWidth - leftControlsWidth * 2
-      const breadcrumbMaxWidth = appBarTotalWidth - leftControlsWidth
-      return breadcrumbMaxWidth
-    }
-
     return {
       batchActions,
       showBreadcrumb,
       showMobileNav,
-      calculateBreadcrumbMaxWidth
+      maxWidth
     }
   },
   data: function () {
@@ -268,6 +263,10 @@ export default defineComponent({
     ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY']),
 
     onResize() {
+      const leftControlsWidth = document.getElementById('files-app-bar-controls-right')?.clientWidth
+      const appBarTotalWidth =
+        document.getElementById('files-view')?.parentElement?.clientWidth - leftControlsWidth * 2
+      this.maxWidth = appBarTotalWidth - leftControlsWidth
       this.limitedScreenSpace = this.sideBarOpen
         ? window.innerWidth <= 1280
         : window.innerWidth <= 1000