bfg-common 1.4.565 → 1.4.566

package/components/common/layout/theHeader/TheHeaderNew.vue

@@ -1,314 +1,320 @@
-<template>
-  <div class="the-header-content">
-    <div class="flex-content">
-      <div class="left-content">
-        <ui-tooltip
-          id="tooltip-inventory-menu-trigger"
-          test-id="tooltip-inventory-menu-trigger"
-          size="sm"
-          position="bottom"
-          position-by-tooltip="center"
-        >
-          <template #target>
-            <div
-              id="tooltip-inventory-menu-trigger"
-              class="popped tooltip inline-block"
-            >
-              <button
-                id="inventory-menu-trigger"
-                data-id="inventory-menu-toggle-button"
-                class="inventory-menu-trigger"
-                @click="emits('toggle-main-menu')"
-              >
-                <atoms-the-icon
-                  v-if="mainMenuTriggerStatus"
-                  class="menu-icon"
-                  name="menu"
-                />
-                <atoms-the-icon v-else class="menu-icon" name="close" />
-              </button>
-            </div>
-          </template>
-          <template #content>
-            <span class="header-tooltip-text">
-              <template v-if="mainMenuTriggerStatus">{{
-                localization.common.openMenu
-              }}</template>
-              <template v-else>{{ localization.common.closeMenu }}</template>
-            </span>
-          </template>
-        </ui-tooltip>
-        <nuxt-link
-          id="header-shortcuts-link"
-          data-id="header-shortcuts-link"
-          class="header-shortcuts-link"
-          to="/shortcuts"
-        >
-          <span class="title pointer"
-            >{{ props.companyName }}® {{ props.projectName }}</span
-          >
-          <span v-if="props.isBeta" class="badge-info">{{
-            props.betaText
-          }}</span>
-          <span v-else-if="props.isDev" class="badge-info">Dev</span>
-        </nuxt-link>
-      </div>
-      <div class="right-content">
-        <ui-tooltip
-          id="tooltip-global-refresh-button"
-          test-id="tooltip-global-refresh-button"
-          size="sm"
-          position="bottom"
-          position-by-tooltip="center"
-        >
-          <template #target>
-            <div
-              id="tooltip-global-refresh-button"
-              class="popped tooltip inline-block"
-            >
-              <button
-                id="global-refresh-button"
-                data-id="global-refresh-button"
-                class="global-refresh-button"
-                @click="emits('global-refresh')"
-              >
-                <atoms-the-icon
-                  v-if="!props.globalRefreshLoading"
-                  class="reset-icon"
-                  name="reset"
-                />
-                <span v-else class="reset-loader-content">
-                  <ui-loader2 width="24" height="24" />
-                </span>
-              </button>
-            </div>
-          </template>
-          <template #content>
-            <span class="header-tooltip-text">
-              {{ localization.common.refresh }}
-            </span>
-          </template>
-        </ui-tooltip>
-        <div class="divider" />
-        <div class="container-content">
-          <common-layout-the-header-theme-switch
-            :is-dark-theme="props.isDarkTheme"
-            @change-theme-mode="emits('change-theme-mode')"
-          />
-        </div>
-        <div class="divider" />
-        <div class="container-content">
-          <common-layout-the-header-help-menu
-            :project-name="props.projectName"
-          />
-        </div>
-        <div class="divider" />
-        <div class="container-content user-menu-container">
-          <common-layout-the-header-user-menu
-            :hostname="props.hostname"
-            :is-preference="isPreference"
-            :time-format="props.timeFormat"
-            :selected-language-type="props.selectedLanguageType"
-            :selected-language="props.selectedLang"
-            :new-view="props.newView"
-            :new-view-local="props.newViewLocal"
-            :project="props.project"
-            :remote-console="props.remoteConsole"
-            :vm-cluster="props.vmCluster"
-            @show-preference="emits('show-preference')"
-            @reset-preference="emits('reset-preference')"
-            @hide-preference="emits('hide-preference')"
-            @change-theme-mode="emits('change-theme-mode')"
-            @update-time-format="emits('update-time-format', $event)"
-            @update-language="emits('update-language', $event)"
-            @update-is-browser="emits('update-is-browser', $event)"
-            @update-is-new-view="emits('update-is-new-view', $event)"
-            @update-remote-console="emits('update-remote-console', $event)"
-            @update-vm-clusters="emits('update-vm-clusters', $event)"
-            @submit-preferences="emits('submit-preferences')"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  isShowMainMenu: boolean
-  companyName: string
-  isBeta: boolean
-  isDev: boolean
-  betaText: string
-  globalRefreshLoading: boolean
-  project: UI_T_Project
-  projectName: string
-  hostname: string
-  isPreference: boolean
-  selectedLanguageType: string
-  selectedLang: UI_I_Dropdown
-  remoteConsole: string
-  vmCluster: boolean
-  newView: boolean
-  newViewLocal: boolean
-  timeFormat: string
-  isDarkTheme: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'toggle-main-menu'): void
-  (event: 'global-refresh'): void
-  (event: 'show-preference'): void
-  (event: 'reset-preference'): void
-  (event: 'hide-preference'): void
-  (event: 'change-theme-mode'): void
-  (event: 'update-time-format', value: UI_T_TimeValue): void
-  (event: 'update-language', value: UI_I_Dropdown): void
-  (event: 'update-is-browser', value: string): void
-  (event: 'update-is-new-view', value: boolean): void
-  (event: 'update-remote-console', value: string): void
-  (event: 'update-vm-clusters', value: boolean): void
-  (event: 'submit-preferences'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const {$store}: any = useNuxtApp()
-
-const isMenuPined = computed(() => $store.getters['main/getIsMenuPined'])
-
-const mainMenuTriggerStatus = computed<boolean>(() => !props.isShowMainMenu || isMenuPined.value)
-</script>
-
-<style>
-:root {
-  --header-container-bg-color: #213444;
-  --header-shortcuts-link-color: #ffffff;
-  --badge-info-bg-color: #008fd6;
-}
-:root.dark-theme {
-  --header-container-bg-color: #1b2a37;
-  --header-shortcuts-link-color: #e9eaec;
-  --badge-info-bg-color: #2ba2de;
-}
-</style>
-
-<style scoped lang="scss">
-.the-header-content {
-  background-color: var(--header-container-bg-color);
-  height: 64px;
-  padding: 16px;
-
-  .flex-content {
-    display: flex;
-    justify-content: space-between;
-
-    .header-tooltip-text {
-      font-size: 12px;
-      font-weight: 500;
-      text-wrap: nowrap;
-    }
-    .left-content {
-      display: flex;
-      align-items: center;
-
-      #tooltip-inventory-menu-trigger {
-        .inventory-menu-trigger {
-          width: 24px;
-          height: 24px;
-          border: unset;
-          padding: 0;
-          outline: unset;
-          background: transparent;
-          cursor: pointer;
-          margin-right: 16px;
-
-          &:hover {
-            svg {
-              fill: #ffffff;
-            }
-          }
-          svg {
-            fill: #d3d6da;
-          }
-        }
-      }
-      :deep(#tooltip-inventory-menu-trigger-div) {
-        z-index: 9999;
-      }
-
-      .header-shortcuts-link {
-        color: var(--header-shortcuts-link-color);
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-
-        .title {
-          font-size: 16px;
-          font-weight: 300;
-        }
-        .badge-info {
-          background-color: var(--badge-info-bg-color);
-          margin-left: 16px;
-          border-radius: 8px;
-          font-size: 12px;
-          padding: 0 12px;
-          height: 24px;
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-    .right-content {
-      display: flex;
-      align-items: center;
-
-      .divider {
-        width: 1px;
-        height: 32px;
-        background-color: #394a58;
-      }
-
-      .global-refresh-button {
-        border: unset;
-        padding: 0;
-        outline: unset;
-        background: transparent;
-        cursor: pointer;
-        display: flex;
-        margin-right: 16px;
-
-        .reset-icon {
-          width: 24px;
-          height: 24px;
-          fill: #d3d6da;
-
-          &:hover {
-            fill: #ffffff;
-          }
-        }
-        .reset-loader-content {
-          width: 24px;
-          height: 24px;
-
-          .loader {
-            padding: 2px;
-          }
-        }
-      }
-      .container-content {
-        margin-left: 16px;
-        margin-right: 16px;
-      }
-      .user-menu-container {
-        margin-right: 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="the-header-content">
+    <div class="flex-content">
+      <div class="left-content">
+        <ui-tooltip
+          id="tooltip-inventory-menu-trigger"
+          test-id="tooltip-inventory-menu-trigger"
+          size="sm"
+          position="bottom"
+          position-by-tooltip="center"
+        >
+          <template #target>
+            <div
+              id="tooltip-inventory-menu-trigger"
+              class="popped tooltip inline-block"
+            >
+              <button
+                id="inventory-menu-trigger"
+                data-id="inventory-menu-toggle-button"
+                class="inventory-menu-trigger"
+                @click="emits('toggle-main-menu')"
+              >
+                <atoms-the-icon
+                  v-if="mainMenuTriggerStatus"
+                  class="menu-icon"
+                  name="menu"
+                />
+                <atoms-the-icon v-else class="menu-icon" name="close" />
+              </button>
+            </div>
+          </template>
+          <template #content>
+            <span class="header-tooltip-text">
+              <template v-if="mainMenuTriggerStatus">{{
+                localization.common.openMenu
+              }}</template>
+              <template v-else>{{ localization.common.closeMenu }}</template>
+            </span>
+          </template>
+        </ui-tooltip>
+        <nuxt-link
+          id="header-shortcuts-link"
+          data-id="header-shortcuts-link"
+          class="header-shortcuts-link"
+          to="/shortcuts"
+        >
+          <span class="title pointer"
+            >{{ props.companyName }}® {{ props.projectName }}</span
+          >
+          <span v-if="props.isBeta" class="badge-info">{{
+            props.betaText
+          }}</span>
+          <span v-else-if="props.isDev" class="badge-info">Dev</span>
+        </nuxt-link>
+      </div>
+      <div class="right-content">
+        <ui-tooltip
+          id="tooltip-global-refresh-button"
+          test-id="tooltip-global-refresh-button"
+          size="sm"
+          position="bottom"
+          position-by-tooltip="center"
+        >
+          <template #target>
+            <div
+              id="tooltip-global-refresh-button"
+              class="popped tooltip inline-block"
+            >
+              <button
+                id="global-refresh-button"
+                data-id="global-refresh-button"
+                class="global-refresh-button"
+                @click="emits('global-refresh')"
+              >
+                <atoms-the-icon
+                  v-if="!props.globalRefreshLoading"
+                  class="reset-icon"
+                  name="reset"
+                />
+                <span v-else class="reset-loader-content">
+                  <ui-loader2 width="24" height="24" />
+                </span>
+              </button>
+            </div>
+          </template>
+          <template #content>
+            <span class="header-tooltip-text">
+              {{ localization.common.refresh }}
+            </span>
+          </template>
+        </ui-tooltip>
+        <div class="divider right-global-refresh" />
+        <div class="container-content">
+          <common-layout-the-header-theme-switch
+            :is-dark-theme="props.isDarkTheme"
+            @change-theme-mode="emits('change-theme-mode')"
+          />
+        </div>
+        <div class="divider" />
+        <div class="container-content">
+          <common-layout-the-header-help-menu
+            :project-name="props.projectName"
+          />
+        </div>
+        <div class="divider" />
+        <div class="container-content user-menu-container">
+          <common-layout-the-header-user-menu
+            :hostname="props.hostname"
+            :is-preference="isPreference"
+            :time-format="props.timeFormat"
+            :selected-language-type="props.selectedLanguageType"
+            :selected-language="props.selectedLang"
+            :new-view="props.newView"
+            :new-view-local="props.newViewLocal"
+            :project="props.project"
+            :remote-console="props.remoteConsole"
+            :vm-cluster="props.vmCluster"
+            @show-preference="emits('show-preference')"
+            @reset-preference="emits('reset-preference')"
+            @hide-preference="emits('hide-preference')"
+            @change-theme-mode="emits('change-theme-mode')"
+            @update-time-format="emits('update-time-format', $event)"
+            @update-language="emits('update-language', $event)"
+            @update-is-browser="emits('update-is-browser', $event)"
+            @update-is-new-view="emits('update-is-new-view', $event)"
+            @update-remote-console="emits('update-remote-console', $event)"
+            @update-vm-clusters="emits('update-vm-clusters', $event)"
+            @submit-preferences="emits('submit-preferences')"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  isShowMainMenu: boolean
+  companyName: string
+  isBeta: boolean
+  isDev: boolean
+  betaText: string
+  globalRefreshLoading: boolean
+  project: UI_T_Project
+  projectName: string
+  hostname: string
+  isPreference: boolean
+  selectedLanguageType: string
+  selectedLang: UI_I_Dropdown
+  remoteConsole: string
+  vmCluster: boolean
+  newView: boolean
+  newViewLocal: boolean
+  timeFormat: string
+  isDarkTheme: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'toggle-main-menu'): void
+  (event: 'global-refresh'): void
+  (event: 'show-preference'): void
+  (event: 'reset-preference'): void
+  (event: 'hide-preference'): void
+  (event: 'change-theme-mode'): void
+  (event: 'update-time-format', value: UI_T_TimeValue): void
+  (event: 'update-language', value: UI_I_Dropdown): void
+  (event: 'update-is-browser', value: string): void
+  (event: 'update-is-new-view', value: boolean): void
+  (event: 'update-remote-console', value: string): void
+  (event: 'update-vm-clusters', value: boolean): void
+  (event: 'submit-preferences'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const { $store }: any = useNuxtApp()
+
+const isMenuPined = computed(() => $store.getters['main/getIsMenuPined'])
+
+const mainMenuTriggerStatus = computed<boolean>(
+  () => !props.isShowMainMenu || isMenuPined.value
+)
+</script>
+
+<style>
+:root {
+  --header-container-bg-color: #213444;
+  --header-shortcuts-link-color: #ffffff;
+  --badge-info-bg-color: #008fd6;
+}
+:root.dark-theme {
+  --header-container-bg-color: #1b2a37;
+  --header-shortcuts-link-color: #e9eaec;
+  --badge-info-bg-color: #2ba2de;
+}
+</style>
+
+<style scoped lang="scss">
+.the-header-content {
+  background-color: var(--header-container-bg-color);
+  height: 64px;
+  padding: 16px;
+
+  .flex-content {
+    display: flex;
+    justify-content: space-between;
+
+    .header-tooltip-text {
+      font-size: 12px;
+      font-weight: 500;
+      text-wrap: nowrap;
+    }
+    .left-content {
+      display: flex;
+      align-items: center;
+
+      #tooltip-inventory-menu-trigger {
+        .inventory-menu-trigger {
+          width: 24px;
+          height: 24px;
+          border: unset;
+          padding: 0;
+          outline: unset;
+          background: transparent;
+          cursor: pointer;
+          margin-right: 16px;
+
+          &:hover {
+            svg {
+              fill: #ffffff;
+            }
+          }
+          svg {
+            fill: #d3d6da;
+          }
+        }
+      }
+      :deep(#tooltip-inventory-menu-trigger-div) {
+        z-index: 9999;
+        transform: translate(13px, 0px);
+      }
+
+      .header-shortcuts-link {
+        color: var(--header-shortcuts-link-color);
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+
+        .title {
+          font-size: 16px;
+          font-weight: 300;
+        }
+        .badge-info {
+          background-color: var(--badge-info-bg-color);
+          margin-left: 16px;
+          border-radius: 8px;
+          font-size: 12px;
+          padding: 0 12px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+    .right-content {
+      display: flex;
+      align-items: center;
+
+      .divider {
+        width: 1px;
+        height: 32px;
+        background-color: #394a58;
+
+        &.right-global-refresh {
+          margin-left: 16px;
+        }
+      }
+
+      .global-refresh-button {
+        border: unset;
+        padding: 0;
+        outline: unset;
+        background: transparent;
+        cursor: pointer;
+        display: flex;
+
+        .reset-icon {
+          width: 24px;
+          height: 24px;
+          fill: #d3d6da;
+
+          &:hover {
+            fill: #ffffff;
+          }
+        }
+        .reset-loader-content {
+          width: 24px;
+          height: 24px;
+
+          .loader {
+            padding: 2px;
+          }
+        }
+      }
+      .container-content {
+        margin-left: 16px;
+        margin-right: 16px;
+      }
+      .user-menu-container {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>