dashboard-shell-shell 1.0.114 → 1.0.115

package/components/SortableTable/paging.js

@@ -15,7 +15,8 @@ export default {
     },
 
     indexTo() {
-      return Math.min(this.totalRows, this.indexFrom + this.perPage - 1);
+      // return Math.min(this.totalRows, this.indexFrom + this.perPage - 1);
+      return Math.min(this.totalRows, this.indexFrom + Number(this.perPage) - 1);
     },
 
     totalPages() {
@@ -23,17 +24,18 @@ export default {
     },
 
     showPaging() {
-      if (!this.paging) {
-        return false;
-      }
+      // if (!this.paging) {
+      //   return false;
+      // }
 
-      const havePages = this.totalPages > 1;
+      // const havePages = this.totalPages > 1;
 
-      if (this.altLoading) {
-        return havePages;
-      }
+      // if (this.altLoading) {
+      //   return havePages;
+      // }
 
-      return !this.loading && havePages;
+      // return !this.loading && havePages;
+      return !this.loading && this.paging && this.totalPages >= 1;
     },
 
     pagingDisplay() {
@@ -61,9 +63,9 @@ export default {
   },
 
   data() {
-    const perPage = this.getPerPage();
+    // const perPage = this.getPerPage();
 
-    return { page: 1, perPage };
+    return { page: 1, perPage:10 };
   },
 
   watch: {
@@ -78,31 +80,37 @@ export default {
       }
     },
 
-    page() {
-      this.debouncedPaginationChanged();
-    },
+    // page() {
+    //   this.debouncedPaginationChanged();
+    // },
 
-    perPage() {
-      this.debouncedPaginationChanged();
-    },
+    // perPage() {
+    //   this.debouncedPaginationChanged();
+    // },
 
   },
 
   methods: {
-    getPerPage() {
-      // perPage can not change while the list is displayed
-      let out = this.rowsPerPage || 0;
+    // getPerPage() {
+    //   // perPage can not change while the list is displayed
+    //   let out = this.rowsPerPage || 0;
 
-      if ( out <= 0 ) {
-        out = parseInt(this.$store.getters['prefs/get'](ROWS_PER_PAGE), 10) || 0;
-      }
+    //   if ( out <= 0 ) {
+    //     out = parseInt(this.$store.getters['prefs/get'](ROWS_PER_PAGE), 10) || 0;
+    //   }
+
+    //   // This should ideally never happen, but the preference value could be invalid, so return something...
+    //   if ( out <= 0 ) {
+    //     out = 10;
+    //   }
+
+    //   return out;
+    // },
 
-      // This should ideally never happen, but the preference value could be invalid, so return something...
-      if ( out <= 0 ) {
-        out = 10;
-      }
 
-      return out;
+    setgetPerPage(num) {
+      this.setPage(1);
+      this.perPage = num;
     },
 
     setPage(num) {

package/components/nav/Group.vue

@@ -231,8 +231,11 @@ export default {
         </router-link>
         <h6
           v-else
+           @click="peek($event, true)"
         >
-          <span v-clean-html="group.labelDisplay || group.label" />
+        <i :class="'nav-icon icon-'+group.name.replace(/\s+/g, '').toLowerCase()" />
+        {{ group.labelDisplay || group.label }}
+          <!-- <span v-clean-html="group.labelDisplay || group.label" /> -->
         </h6>
       </slot>
       <i
@@ -342,21 +345,28 @@ export default {
       }
 
       &.active {
-        color: var(--primary-hover-text);
-        background-color: var(--primary-hover-bg);
+        color: var(--nav-hover-color);
+        background-color: var(--nav-active);
 
         h6 {
-          padding: 8px 0 8px 16px;
-          font-weight: bold;
-          color: var(--primary-hover-text);
+          /* padding: 8px 0 8px 16px;
+          font-weight: bold; */
+          color: var(--nav-hover-color);
+        }
+        I{
+          color: var(--nav-hover-color);
         }
 
-        &:hover {
+        /* &:hover {
           background-color: var(--primary-hover-bg);
-        }
+        } */
       }
       &:hover:not(.active) {
-        background-color: var(--nav-hover);
+        background-color: var(--nav-active);
+        color: var(--nav-hover-color);
+        h6{
+          color: var(--nav-hover-color);
+        }
       }
     }
   }
@@ -364,49 +374,53 @@ export default {
   .accordion {
     &.depth-0 {
       > .header {
+        /* padding: 8px 0; */
+        padding: 0px 0px 0px 20px;
+        height: 50px;
 
         &.noHover {
           cursor: default;
         }
 
         > H6 {
+          font-size: 14px;
           text-transform: none;
-          padding: 8px 0 8px 16px;
+          line-height: 50px;
+          display: flex;
+          align-items: center;
         }
 
         > I {
           position: absolute;
           right: 0;
           top: 0;
-          padding: 10px 10px 9px 7px;
+          padding: 0px 20px 0px 0px;
           user-select: none;
+          line-height: 50px;
         }
       }
 
       > .body {
         margin-left: 0;
       }
-
-      &.group-highlight {
-        background: var(--nav-active);
-      }
     }
 
     &.depth-1 {
       > .header {
-        padding-left: 20px;
         > H6 {
-          line-height: 18px;
+          font-size: 13px;
+          line-height: 16px;
           padding: 8px 0 7px 5px !important;
         }
         > I {
-          padding: 10px 7px 9px 7px !important;
+          padding: 9px 7px 8px 7px !important;
         }
       }
     }
 
     &:not(.depth-0) {
       > .header {
+        padding-left: 10px;
         > H6 {
           // Child groups that aren't linked themselves
           display: inline-block;
@@ -428,13 +442,16 @@ export default {
     padding: 0;
 
     A, A I {
-      color: var(--primary-hover-text);
+      /* color: var(--primary-hover-text); */
+      color: var(--nav-hover-color);
     }
 
     A {
-      color: var(--primary-hover-text);
-      background-color: var(--primary-hover-bg);
-      font-weight: bold;
+      background-color: var(--nav-active);
+      ::v-deep .icon {
+          /* color: var(--body-text); */
+          color: var(--nav-hover-color);
+        }
     }
   }
 
@@ -443,9 +460,6 @@ export default {
       border-left: solid 5px transparent;
       line-height: 16px;
       font-size: 14px;
-      padding-left: 24px;
-      display: flex;
-      justify-content: space-between;
     }
 
     A:focus {
@@ -459,4 +473,10 @@ export default {
       }
     }
   }
+  .nav-icon{
+    font-size: 32px;
+    margin-top: -11px;
+    color: #a8abb2;
+  }
 </style>
+

package/components/nav/Type.vue

@@ -136,7 +136,7 @@ export default {
           class="label"
           :class="{'no-icon': !type.icon}"
         />
-        <span
+        <!-- <span
           v-if="showFavorite || namespaceIcon || showCount"
           class="count"
         >
@@ -154,7 +154,7 @@ export default {
             v-if="showCount"
             data-testid="type-count"
           >{{ count }}</span>
-        </span>
+        </span> -->
       </a>
     </li>
   </router-link>
@@ -177,7 +177,6 @@ export default {
     {{ type }}?
   </li>
 </template>
-
 <style lang="scss" scoped>
   .ns-and-icon {
     margin-right: 4px;
@@ -199,6 +198,7 @@ export default {
     .label {
       align-items: center;
       grid-area: label;
+      display: flex;
       overflow: hidden;
       text-overflow: ellipsis;
 
@@ -206,13 +206,13 @@ export default {
         padding-left: 3px;
       }
 
-      :deep() .highlight {
+      ::v-deep .highlight {
         background: var(--diff-ins-bg);
         color: var(--body-text);
         padding: 2px;
       }
 
-      :deep() .icon {
+      ::v-deep .icon {
         position: relative;
         color: var(--muted);
       }
@@ -225,20 +225,24 @@ export default {
       grid-column-gap: 5px;
       font-size: 14px;
       line-height: 24px;
-      padding: 7.5px 7px 7.5px 10px;
+      /* padding: 7.5px 7px 7.5px 10px; */
+      padding: 0px 16px 0px 40px;
+      height: 50px;
       margin: 0 0 0 -3px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: var(--body-text);
-      height: 33px;
 
       &:hover {
-        background: var(--nav-hover);
+        background: var(--nav-active);
+        color: var(--nav-hover-color);
+        /* background: var(--nav-hover); */
         text-decoration: none;
 
-        :deep() .icon {
-          color: var(--body-text);
+        ::v-deep .icon {
+          /* color: var(--body-text); */
+          color: var(--nav-hover-color);
         }
       }
     }
@@ -247,44 +251,24 @@ export default {
       grid-area: favorite;
       font-size: 12px;
       position: relative;
-      vertical-align: middle;
-      margin-right: 4px;
     }
 
     .count {
+      grid-area: count;
       font-size: 12px;
+      text-align: right;
       justify-items: center;
       padding-right: 4px;
-      display: flex;
-      align-items: center;
-    }
-
-    &.nav-type.nav-link {
-      a .label {
-        display: flex;
-      }
     }
 
     &.nav-type:not(.depth-0) {
-      A {
-        padding-left: 16px;
-      }
-
-      :deep() .label I {
-        padding-right: 2px;
-      }
-    }
-
-    &.nav-type:is(.depth-1) {
       A {
         font-size: 13px;
-        padding-left: 23px;
+        padding: 5.5px 7px 5.5px 10px;
       }
-    }
 
-    &.nav-type:not(.depth-0):not(.depth-1) {
-      A {
-        padding-left: 14px;
+      ::v-deep .label I {
+        padding-right: 2px;
       }
     }
   }

package/package.json

@@ -5,7 +5,7 @@
   "license": "Apache-2.0",
   "author": "SUSE",
   "private": false,
-  "version": "1.0.00000000114",
+  "version": "1.0.00000000115",
   "engines": {
     "node": ">=20.0.0"
   },

package/public/index.html

@@ -48,11 +48,11 @@
 
         .initial-load-spinner {
             animation: initial-load-animate 1s infinite linear;
-            background-color: var(--loading-bg-color);
+            background-color: transparent;
             box-sizing: border-box;
-            border: 5px solid #008ACF;
+            border: 5px solid #1890FF;
             border-radius: 50%;
-            border-top-color: #00B2E2;
+            border-top-color: transparent;
             display: inline-block;
             height: 80px;
             margin: 0 auto;