bfg-common 1.4.513 → 1.4.515

package/components/common/pages/shortcuts/Shortcuts.vue

@@ -3,7 +3,7 @@
     <h1>{{ localization.mainNavigation.shortcuts }}</h1>
     <template v-for="item in props.shortcutsItems">
       <div class="shortcut-category">
-        <common-shortcuts-category
+        <common-pages-shortcuts-category
           :title="item.title"
           :block-items="item.blockItems"
         />

package/components/common/pages/shortcuts/block/Block.vue

@@ -0,0 +1,25 @@
+<template>
+  <common-pages-shortcuts-block-new
+    v-if="isNewView"
+    :item="props.item"
+    :test-id="props.testId"
+  />
+  <common-pages-shortcuts-block-old
+    v-else
+    :item="props.item"
+    :test-id="props.testId"
+  />
+</template>
+<script setup lang="ts">
+import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
+
+const props = defineProps<{
+  item: UI_I_BlockItem
+  testId?: string
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+<style lang="scss" scoped></style>

package/components/common/pages/shortcuts/block/BlockNew.vue

@@ -0,0 +1,100 @@
+<template>
+  <ui-widget class="category-block-item">
+    <nuxt-link
+      class="unit"
+      :to="navigate"
+      :title="props.item.navigateTo"
+      :data-id="props.testId"
+      @click="changeLastNavigation"
+      @contextmenu="changeLastNavigation"
+    >
+      <span
+        v-if="props.item.iconClassName"
+        :class="['unit-icon', props.item.iconClassName]"
+      />
+      <span v-else-if="props.item.iconName" class="icon-2">
+        <atoms-the-icon2 :name="props.item.iconName" width="34" height="34" />
+      </span>
+      <div class="unit-text" :title="props.item.text">
+        {{ props.item.text }}
+      </div>
+    </nuxt-link>
+  </ui-widget>
+</template>
+<script setup lang="ts">
+import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
+
+const props = defineProps<{
+  item: UI_I_BlockItem
+  testId?: string
+}>()
+
+const navigate = computed<string>(() => '/' + props.item.navigateTo)
+
+const changeLastNavigation = (): void => {
+  if (!props.item.nav) return
+
+  const lastSelectedInventory = 'lastSelectedInventoryTreeIdStorageKey'
+  useLocalStorage(lastSelectedInventory, props.item.nav)
+}
+</script>
+<style lang="scss" scoped>
+.category-block-item {
+  max-width: 176px;
+}
+
+.unit {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 95px;
+  margin: 21px 10px;
+  text-decoration-line: none;
+  &-icon {
+    margin: 0px 10px 15px 10px;
+    min-width: 34px;
+    min-height: 34px;
+    display: inline-block;
+    color: var(--global-font-color3);
+
+    &.icon-lifecycle-manager,
+    &.icon-cloud-provider-services {
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+    &.icon-lifecycle-manager {
+      background-image: url('assets/img/icons/icon-life-m-light.svg');
+      html.dark-theme & {
+        background-image: url('assets/img/icons/icon-life-m-dark.svg');
+        color: var(--global-font-color3);
+      }
+    }
+    &.icon-cloud-provider-services {
+      background-image: url('assets/img/icons/icon-cps.png');
+      html.dark-theme & {
+        background-image: url('assets/img/icons/icon-cps-dark-mode.png');
+      }
+    }
+    &.icon-vm-customizationManager-32x,
+    &.icon-storage-profile-32x,
+    &.icon-Host_Policy-32x,
+    &.icon-certificate-32x {
+      width: 34px;
+      height: 34px;
+    }
+  }
+  .icon-2 {
+    margin: 0 10px 15px 10px;
+    color: var(--global-font-color3);
+  }
+  &-text {
+    color: var(--global-font-color3);
+    font-size: 13px;
+    line-height: 13px;
+    font-weight: 400;
+    padding-bottom: 2px;
+    text-align: center;
+  }
+}
+</style>

package/components/common/pages/shortcuts/category/CategoryNew.vue

@@ -3,7 +3,7 @@
     <span class="category__headline">
       {{ props.title }}
     </span>
-    <div class="category-block">
+    <div class="category__block">
       <common-pages-shortcuts-block
         v-for="(item, key) in props.blockItems"
         :key="key"
@@ -23,6 +23,7 @@ const props = defineProps<{
 }>()
 </script>
 <style lang="scss" scoped>
+@import 'assets/scss/common/mixins';
 .category {
   &__headline {
     color: #9da6ad;
@@ -30,12 +31,11 @@ const props = defineProps<{
     font-weight: 400;
     line-height: 19.36px;
   }
-  &-block {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    border-top: 1px solid var(--global-border-color);
-    margin-top: -4px;
+  &__block {
+    @include flex($dir: row, $just: flex-start, $w: wrap);
+    gap: 12px;
+    border-bottom: 1px solid var(--horizontal-line);
+    padding: 16px 0 24px;
   }
 }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.513",
+  "version": "1.4.515",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",

package/components/common/pages/shortcuts/Category.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="category">
-    <span class="category-text" :title="props.title">
-      {{ props.title }}
-    </span>
-    <div class="category-block">
-      <common-shortcuts-block
-        v-for="(item, key) in props.blockItems"
-        :key="key"
-        :item="item"
-        :test-id="item.testId"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
-
-const props = defineProps<{
-  title: string
-  blockItems: UI_I_BlockItem[]
-}>()
-</script>
-<style lang="scss" scoped>
-.category {
-  &-text {
-    color: var(--light-white-100);
-    font-size: 18px;
-    line-height: 21px;
-    font-weight: 400;
-  }
-  &-block {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    border-top: 1px solid var(--global-border-color);
-    margin-top: -4px;
-  }
-}
-</style>