bfg-common 1.4.587 → 1.4.589

package/components/common/layout/theHeader/helpMenu/aboutNew/AboutNew.vue

@@ -1,103 +1,103 @@
-<template>
-  <ui-modal
-    test-id="about-modal"
-    width="720px"
-    :title="props.title"
-    :subtitle="props.subtitle"
-    class="about-modal"
-    @hide="onHideModal"
-  >
-    <template #content>
-      <ui-modal-block-standard>
-        <div class="about-modal__text">
-          <p>{{ aboutHeadingText }}</p>
-
-          <p>{{ localization.layout.aboutSubtitle }}</p>
-        </div>
-
-        <div class="about-modal__description">
-          {{ props.aboutDescOne }}
-
-          (<a
-            id="about-description-link"
-            data-id="about-description-link"
-            :href="url"
-            target="_blank"
-            class="about-modal__description-link"
-          >
-            {{ props.url }} </a
-          >)
-
-          {{ props.aboutDescSecond }}
-        </div>
-      </ui-modal-block-standard>
-    </template>
-    <template #footerContent><span /></template>
-    <template #footerLeftContent><span /></template>
-  </ui-modal>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  title: string
-  subtitle: string
-  aboutHeadingText: string
-  aboutDescOne: string
-  aboutDescSecond: string
-  isBetaVersion: boolean
-  isDev: boolean
-  projectName: string
-  url: string
-}>()
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onHideModal = (): void => {
-  emits('hide')
-}
-</script>
-
-<style>
-:root {
-  --about-text-color: #4d5d69;
-}
-:root.dark-theme {
-  --about-text-color: #9da6ad;
-}
-</style>
-
-<style lang="scss" scoped>
-.about-modal {
-  &__text {
-    color: var(--about-text-color);
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 15.73px;
-
-    p:last-child {
-      margin: 16px 0;
-    }
-  }
-  &__description {
-    color: var(--about-text-color);
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 15.73px;
-
-    &-link {
-      color: #0786d2;
-      &:hover {
-        color: #0081c1;
-      }
-    }
-  }
-}
-:deep(.title-wrapper__subtitle) {
-  max-width: 400px;
-}
-</style>
+<template>
+  <ui-modal
+    test-id="about-modal"
+    width="720px"
+    :title="props.title"
+    :subtitle="props.subtitle"
+    class="about-modal"
+    @hide="onHideModal"
+  >
+    <template #content>
+      <ui-modal-block-standard>
+        <div class="about-modal__text">
+          <p>{{ aboutHeadingText }}</p>
+
+          <p>{{ localization.layout.aboutSubtitle }}</p>
+        </div>
+
+        <div class="about-modal__description">
+          {{ props.aboutDescOne }}
+
+          (<a
+            id="about-description-link"
+            data-id="about-description-link"
+            :href="url"
+            target="_blank"
+            class="about-modal__description-link"
+          >
+            {{ props.url }} </a
+          >)
+
+          {{ props.aboutDescSecond }}
+        </div>
+      </ui-modal-block-standard>
+    </template>
+    <template #footerContent><span /></template>
+    <template #footerLeftContent><span /></template>
+  </ui-modal>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  title: string
+  subtitle: string
+  aboutHeadingText: string
+  aboutDescOne: string
+  aboutDescSecond: string
+  isBetaVersion: boolean
+  isDev: boolean
+  projectName: string
+  url: string
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onHideModal = (): void => {
+  emits('hide')
+}
+</script>
+
+<style>
+:root {
+  --about-text-color: #4d5d69;
+}
+:root.dark-theme {
+  --about-text-color: #9da6ad;
+}
+</style>
+
+<style lang="scss" scoped>
+.about-modal {
+  &__text {
+    color: var(--about-text-color);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 15.73px;
+
+    p:last-child {
+      margin: 16px 0;
+    }
+  }
+  &__description {
+    color: var(--about-text-color);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 15.73px;
+
+    &-link {
+      color: #0786d2;
+      &:hover {
+        color: #0081c1;
+      }
+    }
+  }
+}
+:deep(.title-wrapper__subtitle) {
+  max-width: 400px;
+}
+</style>

package/components/common/mainNavigationPanel/MainNavigationPanel.vue

@@ -1,152 +1,152 @@
-<template>
-  <common-main-navigation-panel-new
-    v-if="props.isNewView"
-    v-model:main-menu-hovered="mainMenuHovered"
-    v-model:menu-pined="menuPined"
-    :main-menu-status="props.mainMenuStatus"
-    :navigation-items="props.navigationItems"
-    :parent-status="props.parentStatus"
-    :disabled-pin="props.disabledPin"
-    :menu-collapsed="menuCollapsed"
-    :show-menu="showMenu"
-    @toggle="emits('toggle', $event)"
-    @collapse-menu="collapseMenu"
-    @change-menu-pin="changeMenuPin"
-    @hide-main-menu="hideMainMenu"
-  />
-  <common-main-navigation-panel-old
-    v-else
-    v-model:main-menu-hovered="mainMenuHovered"
-    v-model:menu-pined="menuPined"
-    :main-menu-status="props.mainMenuStatus"
-    :navigation-items="props.navigationItems"
-    :parent-status="props.parentStatus"
-    :disabled-pin="props.disabledPin"
-    :menu-collapsed="menuCollapsed"
-    :show-menu="showMenu"
-    @toggle="emits('toggle', $event)"
-    @collapse-menu="collapseMenu"
-    @change-menu-pin="changeMenuPin"
-    @hide-main-menu="hideMainMenu"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_NavigationItem } from '~/components/common/mainNavigationPanel/lib/models/interfaces'
-import type { UI_T_ParentStatus } from '~/components/common/mainNavigationPanel/lib/models/types'
-
-const props = withDefaults(
-  defineProps<{
-    mainMenuStatus: boolean
-    navigationItems: UI_I_NavigationItem[][]
-    parentStatus: UI_T_ParentStatus
-    disabledPin: boolean
-    isNewView?: boolean
-  }>(),
-  {
-    isNewView: false,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'toggle', value: boolean): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const route = useRoute()
-
-const showMenu = computed<boolean>(
-  () => props.mainMenuStatus || menuPined.value
-)
-
-const menuPined = ref<boolean>(false)
-const changeMenuPin = (): void => {
-  useLocalStorage('menuPined', menuPined.value)
-}
-const setMenuPined = (): void => {
-  menuPined.value = props.disabledPin ? false : useLocalStorage('menuPined')
-}
-watch(
-  () => props.disabledPin,
-  () => {
-    setMenuPined()
-  },
-  { immediate: true }
-)
-
-const menuCollapsed = ref<boolean>(false)
-const collapseMenu = (): void => {
-  menuCollapsed.value = !menuCollapsed.value
-  useLocalStorage('menuCollapsed', menuCollapsed.value)
-}
-
-const mainMenuHovered = ref<boolean>(false)
-
-const clickWindow = (event: Event): void => {
-  const target = event.target as any
-  if (
-    menuPined.value ||
-    mainMenuHovered.value ||
-    target.className.baseVal?.includes('menu-icon') ||
-    target.className.baseVal?.includes('clr-i-outline')
-  ) {
-    return
-  }
-
-  emits('toggle', false)
-}
-
-const mountedReady = ref<boolean>(false)
-onMounted(() => {
-  mountedReady.value = true
-  window.addEventListener('click', clickWindow)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('click', clickWindow)
-})
-
-watch(
-  [mountedReady, (): any => route.fullPath, (): any => props.parentStatus],
-  ([newValue1, newValue2, newValue3]: [
-    boolean,
-    any,
-    UI_T_ParentStatus
-  ]): void => {
-    if (newValue3 === 1) return
-
-    const name = location.pathname.split('/')[1]
-
-    if (!newValue1 || name === 'auth') return
-
-    setSidebarOptions()
-    useLocalStorage('navigationHistoryRoute', newValue2)
-  },
-  { immediate: true, deep: true }
-)
-
-const setSidebarOptions = (): void => {
-  setMenuPined()
-  menuCollapsed.value = useLocalStorage('menuCollapsed')
-
-  if (menuPined.value) {
-    emits('toggle', true)
-  }
-}
-
-const hideMainMenu = (): void => {
-  if (menuPined.value) return
-  emits('toggle', false)
-}
-
-watch(
-  menuPined,
-  (newValue) => {
-    $store.dispatch('main/A_MENU_PINED', newValue)
-  },
-  { immediate: true }
-)
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-main-navigation-panel-new
+    v-if="props.isNewView"
+    v-model:main-menu-hovered="mainMenuHovered"
+    v-model:menu-pined="menuPined"
+    :main-menu-status="props.mainMenuStatus"
+    :navigation-items="props.navigationItems"
+    :parent-status="props.parentStatus"
+    :disabled-pin="props.disabledPin"
+    :menu-collapsed="menuCollapsed"
+    :show-menu="showMenu"
+    @toggle="emits('toggle', $event)"
+    @collapse-menu="collapseMenu"
+    @change-menu-pin="changeMenuPin"
+    @hide-main-menu="hideMainMenu"
+  />
+  <common-main-navigation-panel-old
+    v-else
+    v-model:main-menu-hovered="mainMenuHovered"
+    v-model:menu-pined="menuPined"
+    :main-menu-status="props.mainMenuStatus"
+    :navigation-items="props.navigationItems"
+    :parent-status="props.parentStatus"
+    :disabled-pin="props.disabledPin"
+    :menu-collapsed="menuCollapsed"
+    :show-menu="showMenu"
+    @toggle="emits('toggle', $event)"
+    @collapse-menu="collapseMenu"
+    @change-menu-pin="changeMenuPin"
+    @hide-main-menu="hideMainMenu"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_NavigationItem } from '~/components/common/mainNavigationPanel/lib/models/interfaces'
+import type { UI_T_ParentStatus } from '~/components/common/mainNavigationPanel/lib/models/types'
+
+const props = withDefaults(
+  defineProps<{
+    mainMenuStatus: boolean
+    navigationItems: UI_I_NavigationItem[][]
+    parentStatus: UI_T_ParentStatus
+    disabledPin: boolean
+    isNewView?: boolean
+  }>(),
+  {
+    isNewView: false,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const route = useRoute()
+
+const showMenu = computed<boolean>(
+  () => props.mainMenuStatus || menuPined.value
+)
+
+const menuPined = ref<boolean>(false)
+const changeMenuPin = (): void => {
+  useLocalStorage('menuPined', menuPined.value)
+}
+const setMenuPined = (): void => {
+  menuPined.value = props.disabledPin ? false : useLocalStorage('menuPined')
+}
+watch(
+  () => props.disabledPin,
+  () => {
+    setMenuPined()
+  },
+  { immediate: true }
+)
+
+const menuCollapsed = ref<boolean>(false)
+const collapseMenu = (): void => {
+  menuCollapsed.value = !menuCollapsed.value
+  useLocalStorage('menuCollapsed', menuCollapsed.value)
+}
+
+const mainMenuHovered = ref<boolean>(false)
+
+const clickWindow = (event: Event): void => {
+  const target = event.target as any
+  if (
+    menuPined.value ||
+    mainMenuHovered.value ||
+    target.className.baseVal?.includes('menu-icon') ||
+    target.className.baseVal?.includes('clr-i-outline')
+  ) {
+    return
+  }
+
+  emits('toggle', false)
+}
+
+const mountedReady = ref<boolean>(false)
+onMounted(() => {
+  mountedReady.value = true
+  window.addEventListener('click', clickWindow)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('click', clickWindow)
+})
+
+watch(
+  [mountedReady, (): any => route.fullPath, (): any => props.parentStatus],
+  ([newValue1, newValue2, newValue3]: [
+    boolean,
+    any,
+    UI_T_ParentStatus
+  ]): void => {
+    if (newValue3 === 1) return
+
+    const name = location.pathname.split('/')[1]
+
+    if (!newValue1 || name === 'auth') return
+
+    setSidebarOptions()
+    useLocalStorage('navigationHistoryRoute', newValue2)
+  },
+  { immediate: true, deep: true }
+)
+
+const setSidebarOptions = (): void => {
+  setMenuPined()
+  menuCollapsed.value = useLocalStorage('menuCollapsed')
+
+  if (menuPined.value) {
+    emits('toggle', true)
+  }
+}
+
+const hideMainMenu = (): void => {
+  if (menuPined.value) return
+  emits('toggle', false)
+}
+
+watch(
+  menuPined,
+  (newValue) => {
+    $store.dispatch('main/A_MENU_PINED', newValue)
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/pages/home/headline/HeadlineNew.vue

@@ -6,11 +6,19 @@
       v-if="isProjectSphere"
       v-model="selectedZoneModel"
       :items="selectItems"
+      :disabled="!selectItems.length"
       width="165px"
       select-width="100%"
       size="sm"
       test-id="home-zone-select"
-    />
+    >
+      <template v-if="!selectItems.length" #toggleContent>
+        <div class="default-toggle-content">
+          <span class="default-icon vsphere-icon-vcenter"></span>
+          <span class="text">{{ localization.common.default }}</span>
+        </div>
+      </template>
+    </ui-select>
   </div>
 </template>
 
@@ -44,5 +52,20 @@ const selectItems = computed<UI_I_Dropdown[]>(() => {
     line-height: 26.63px;
     margin-bottom: 19px;
   }
+
+  .default-toggle-content {
+    display: flex;
+    align-items: center;
+    grid-gap: 8px;
+
+    .default-icon {
+      width: 20px;
+      height: 20px;
+    }
+    .text {
+      font-size: 13px;
+      font-weight: 400;
+    }
+  }
 }
 </style>

package/components/common/pages/home/resource/ResourceNew.vue

@@ -53,6 +53,11 @@ const resourceMeter = computed<UI_I_ResourceBlock[]>(() =>
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-column-gap: 12px;
+
+    @media (max-width: 1440px) {
+      grid-template-columns: 1fr;
+      grid-row-gap: 12px;
+    }
   }
 }
 </style>

package/components/common/pages/home/widgets/WidgetsNew.vue

@@ -70,5 +70,10 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-column-gap: 12px;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+    grid-row-gap: 12px;
+  }
 }
 </style>

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

@@ -30,6 +30,15 @@ const emits = defineEmits<{
 
 const navigate = computed<string>(() => '/' + props.item.navigateTo)
 </script>
+
+<style>
+:root {
+  --shortcut-item-hover-bg: #e9ebed33;
+}
+:root.dark-theme {
+  --shortcut-item-hover-bg: #e9ebed08;
+}
+</style>
 <style lang="scss" scoped>
 @import 'assets/scss/common/mixins';
 .category-block-item {
@@ -55,7 +64,7 @@ const navigate = computed<string>(() => '/' + props.item.navigateTo)
   }
 
   &:hover {
-    background: #e9ebed33;
+    background: var(--shortcut-item-hover-bg);
     cursor: pointer;
     .unit {
       &-icon {