new commits

learningequality · Jan 5, 2025 · bd5a670 · bd5a670
1 parent 2a07ab4
commit bd5a670
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 34 deletions.
diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
@@ -6,8 +6,8 @@
       :items="preparedCrumbs"
     >
       <!-- Render individual breadcrumb items -->
-      <template #item="{ item }">
-        <li >
+      <template #item="{ item,index }">
+        <li>
           <KRouterLink
             v-if="item.link"
             :text="item.text"
@@ -18,14 +18,21 @@
             <template #default="{ text }">
               <span
                 class="breadcrumbs-crumb-text"
+                :style="{ maxWidth: index === items.length - 1 ? lastBreadcrumbMaxWidth : 'none' }"
+                dir="auto"
                 :title="text"
               >{{ text }}</span>
             </template>
           </KRouterLink>
-          <span v-else
-                :title="item.text"
+          <span
+            v-else
+            class="breadcrumbs-crumb-text"
+            :style="{ maxWidth: index === items.length - 1 ? lastBreadcrumbMaxWidth : 'none' }"
+            dir="auto"
+            :title="item.text"
           >{{ item.text }}</span>
         </li>
+
       </template>
 
       <template #divider>
@@ -84,6 +91,8 @@
 
 <script>
 
+  const DEFAULT_LAST_BREADCRUMB_MAX_WIDTH = 300;
+  const DROPDOWN_BTN_WIDTH = 55;
   export default {
     props: {
       items: {
@@ -95,10 +104,13 @@
         default: false,
       },
     },
-   
+    data() {
+      return {
+        lastBreadcrumbMaxWidth: `${DEFAULT_LAST_BREADCRUMB_MAX_WIDTH}px`,
+      };
+    },
 
     computed: {
-     
       preparedCrumbs() {
         const crumbs = [...this.items];
         if (!this.showSingleItem && crumbs.length <= 1) {
@@ -108,15 +120,31 @@
         return crumbs.flatMap((item, index) => (index > 0 ? [{ type: 'divider' }, item] : [item]));
       },
     },
-   
+    mounted() {
+      this.updateLastBreadcrumbWidth();
+      this.$watch('items', () => {
+        this.updateLastBreadcrumbWidth();
+      });
+    },
+    methods: {
+      updateLastBreadcrumbWidth() {
+        this.$nextTick(() => {
+          const lastBreadcrumb = this.$refs.lastBreadcrumb;
+          if (lastBreadcrumb) {
+            const lastBreadcrumbWidth = lastBreadcrumb.getBoundingClientRect().width;
+            const availableWidth = this.$el.offsetWidth - DROPDOWN_BTN_WIDTH; 
+            this.lastBreadcrumbMaxWidth = `${Math.min(lastBreadcrumbWidth, availableWidth)}px`;
+          }
+        });
+      }
+    }
   };
 
 </script>
 
 
 <style scoped lang="scss">
 
-  @import './styles/definitions';
   $crumb-max-width: 300px;
 
   .breadcrumbs {
@@ -135,8 +163,6 @@
     width: 100%;
     max-width: $crumb-max-width;
     overflow: hidden;
-    font-weight: bold;
-    text-decoration: none;
     text-overflow: ellipsis;
     white-space: nowrap;
     vertical-align: bottom;

diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue
@@ -248,37 +248,19 @@
         }
 
         const { list } = this.$refs;
-
         if (this.overflowDirection === 'start') {
-          // Handle reversed direction
-          const [lastOverflowedIdx] = overflowItemsIdx.slice(-1); // Last item in overflow for 'start'
-          const firstVisibleIdx = lastOverflowedIdx + 1; // First visible item after overflow
-
-          // Move a divider from the start of the visible list to overflow, if necessary
-          if (this.isDivider(this.items[firstVisibleIdx])) {
-            overflowItemsIdx.push(firstVisibleIdx);
-            const dividerNode = list.children[firstVisibleIdx];
-            dividerNode.style.visibility = 'hidden';
-            dividerNode.style.position = 'absolute';
-            return itemsSizes[firstVisibleIdx].width;
-          }
-
-          // Ensure no divider remains as the last item in overflow
-          if (this.isDivider(this.items[lastOverflowedIdx])) {
-            overflowItemsIdx.pop();
+          const [firstOverflowedIdx] = overflowItemsIdx;
+          const OverflowedIdx = list.children.length - 1 - firstOverflowedIdx;
+          if (this.isDivider(this.items[OverflowedIdx])) {
+            overflowItemsIdx.shift();
           }
         } else {
-          // Original 'end' direction logic
           const [firstOverflowedIdx] = overflowItemsIdx;
-
-          // Remove divider at the start of the overflow list
           if (this.isDivider(this.items[firstOverflowedIdx])) {
             overflowItemsIdx.shift();
           }
 
           const lastVisibleIdx = firstOverflowedIdx - 1;
-
-          // Remove divider at the end of the visible list
           if (this.isDivider(this.items[lastVisibleIdx])) {
             const dividerNode = list.children[lastVisibleIdx];
             dividerNode.style.visibility = 'hidden';
@@ -323,13 +305,14 @@
   .list {
     position: relative;
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
-    overflow: visible;
+    overflow: hidden;
   }
 
   .list > * {
     flex-shrink: 0;
+    min-width: 0;
     visibility: hidden;
   }