bfg-common 1.4.159 → 1.4.160

package/assets/localization/local_be.json

@@ -1121,6 +1121,7 @@
     "physicalNetworkAdapters": "Фізічныя сеткавыя адаптары",
     "physicalNetworkAdaptersWarning": "Папярэджанне аб фізічных сеткавых адаптарах",
     "menu": "Меню",
+    "openMenu": "Адкрыць меню",
     "pinMenu": "Замацаваць меню",
     "playbackCompression": "Сціск прайгравання",
     "plugins": "Убудовы",

package/assets/localization/local_en.json

@@ -1120,6 +1120,7 @@
     "physicalNetworkAdapters": "Physical network adapters",
     "physicalNetworkAdaptersWarning": "Physical Network Adapters Warning",
     "menu": "Menu",
+    "openMenu": "Open menu",
     "pinMenu": "Pin menu",
     "playbackCompression": "Playback Compression",
     "plugins": "Plugins",

package/assets/localization/local_hy.json

@@ -1120,6 +1120,7 @@
     "physicalNetworkAdapters": "Ֆիզիկական ցանցային ադապտերներ",
     "physicalNetworkAdaptersWarning": "Զգուշացում ֆիզիկական ցանցային ադապտերների մասին",
     "menu": "Մենու",
+    "openMenu": "Բացեք ընտրացանկը",
     "pinMenu": "Ամրացնել մենյու",
     "playbackCompression": "Նվագարկման սեղմում",
     "plugins": "Փլագիններ",

package/assets/localization/local_kk.json

@@ -1120,6 +1120,7 @@
     "physicalNetworkAdapters": "Физикалық желі адаптерлері",
     "physicalNetworkAdaptersWarning": "Физикалық Желілік адаптерлер туралы ескерту",
     "menu": "Мәзір",
+    "openMenu": "Мәзірді ашу",
     "pinMenu": "Мәзірді бекіту",
     "playbackCompression": "Ойнатуды қысу",
     "plugins": "Плагиндер",

package/assets/localization/local_ru.json

@@ -1122,6 +1122,7 @@
     "physicalNetworkAdapters": "Физические сетевые адаптеры",
     "physicalNetworkAdaptersWarning": "Предупреждение о физических сетевых адаптерах",
     "menu": "Меню",
+    "openMenu": "Открыть меню",
     "pinMenu": "Закрепить меню",
     "playbackCompression": "Сжатие воспроизведения",
     "plugins": "Плагины",

package/assets/localization/local_zh.json

@@ -1120,6 +1120,7 @@
     "physicalNetworkAdapters": "物理網絡適配器",
     "physicalNetworkAdaptersWarning": "物理网络适配器警告",
     "menu": "菜单",
+    "openMenu": "打开菜单",
     "pinMenu": "引脚菜单",
     "playbackCompression": "回放压缩",
     "plugins": "插件",

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

@@ -31,7 +31,7 @@
           </template>
           <template #content>
             <span class="header-tooltip-text">{{
-              localization.common.menu
+              localization.common.openMenu
             }}</span>
           </template>
         </ui-tooltip>
@@ -202,6 +202,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
     .header-tooltip-text {
       font-size: 12px;
       font-weight: 500;
+      text-wrap: nowrap;
     }
     .left-content {
       display: flex;

package/components/common/layout/theHeader/helpMenu/helpMenuNew/HelpMenuNew.vue

@@ -112,6 +112,20 @@ const onSelectDropdown = (value: string): void => {
   }
   onHideDropdown()
 }
+
+const hideTooltip = (): void => {
+  const hoverElement = document.querySelector(
+    '#tooltip-help-menu-dropdown-toggle-main .tooltip-container-hover'
+  )
+
+  if (!hoverElement) return
+
+  hoverElement.classList.remove('isShow')
+}
+
+watch(isShowDropdown, (newValue) => {
+  newValue && hideTooltip()
+})
 </script>
 
 <style scoped lang="scss">

package/components/common/layout/theHeader/userMenu/userMenuNew/UserMenuNew.vue

@@ -96,6 +96,20 @@ const onSelectDropdown = (value: string): void => {
   emits('select-dropdown', value)
   onHideDropdown()
 }
+
+const hideTooltip = (): void => {
+  const hoverElement = document.querySelector(
+    '#tooltip-user-menu-dropdown-toggle-main .tooltip-container-hover'
+  )
+
+  if (!hoverElement) return
+
+  hoverElement.classList.remove('isShow')
+}
+
+watch(isShowDropdown, (newValue) => {
+  newValue && hideTooltip()
+})
 </script>
 
 <style lang="scss">

package/components/common/mainNavigationPanel/MainNavigationPanelNew.vue

@@ -55,24 +55,40 @@
 
       <div class="nav-content">
         <template v-for="(item, key) in props.navigationItems" :key="key">
-          <nuxt-link
+          <ui-tooltip
             v-for="(item2, key2) in item"
-            :id="`nav-item-${key}-${key2}`"
+            :id="`tooltip-nav-${key}-${key2}`"
             :key="item2.id"
-            :data-id="item2.testId"
-            class="nav-link"
-            active-class="active"
-            :to="item2.to"
-            :title="item2.title"
-            @click="emits('hide-main-menu')"
+            :test-id="`tooltip-nav-${key}-${key2}`"
+            size="md"
+            menu
           >
-            <ui-icon-main-navigation-panel
-              :name="item2.iconName"
-              width="20px"
-              height="20px"
-            />
-            <span class="nav-text">{{ item2.title }}</span>
-          </nuxt-link>
+            <template #target>
+              <div
+                :id="`tooltip-nav-${key}-${key2}`"
+                class="popped tooltip inline-block content-toggle-tooltip"
+              >
+                <nuxt-link
+                  :id="`nav-item-${key}-${key2}`"
+                  :data-id="item2.testId"
+                  class="nav-link"
+                  active-class="active"
+                  :to="item2.to"
+                  @click="emits('hide-main-menu')"
+                >
+                  <ui-icon-main-navigation-panel
+                    :name="item2.iconName"
+                    width="20px"
+                    height="20px"
+                  />
+                  <span class="nav-text">{{ item2.title }}</span>
+                </nuxt-link>
+              </div>
+            </template>
+            <template #content>
+              {{ item2.title }}
+            </template>
+          </ui-tooltip>
           <div
             v-show="key !== props.navigationItems.length - 1"
             class="nav-divider"
@@ -153,6 +169,11 @@ const localization = computed<UI_I_Localization>(() => useLocal())
         }
       }
     }
+    &:not(.collapsed) {
+      :deep(.tooltip-container-hover) {
+        display: none;
+      }
+    }
 
     .tools {
       display: flex;
@@ -165,10 +186,10 @@ const localization = computed<UI_I_Localization>(() => useLocal())
         border-radius: 4px;
 
         &:hover {
-          background-color: var(--vertical-nav-hover-bg-color);
+          //background-color: var(--vertical-nav-hover-bg-color);
 
           .pin-unpin-label {
-            color: #008fd6;
+            color: var(--pin-unpin-label-hover-color);
           }
         }
 
@@ -198,8 +219,8 @@ const localization = computed<UI_I_Localization>(() => useLocal())
         color: var(--vertical-nav-item-color);
 
         &:hover {
-          background-color: var(--vertical-nav-hover-bg-color);
-          color: #008fd6;
+          //background-color: var(--vertical-nav-hover-bg-color);
+          color: var(--pin-unpin-label-hover-color);
         }
       }
     }
@@ -207,45 +228,54 @@ const localization = computed<UI_I_Localization>(() => useLocal())
     .nav-content {
       overflow: auto;
       padding: 0 12px 12px;
+      height: inherit;
 
-      .nav-link {
-        display: flex;
-        align-items: center;
-        padding: 10px 12px;
-        border-radius: 8px;
-        color: var(--vertical-nav-item-color);
-        font-size: 12px;
-        font-weight: 500;
-        white-space: nowrap;
-        text-decoration: none;
+      &::-webkit-scrollbar-thumb {
+        background: var(--nav-content-scrollbar-thumb-bg);
+      }
 
-        &.active {
-          background-color: var(--vertical-active-nav-bg-color);
-          color: var(--vertical-active-nav-color);
+      .content-toggle-tooltip {
+        width: 100%;
 
-          .nav-text {
+        .nav-link {
+          display: flex;
+          align-items: center;
+          padding: 10px 12px;
+          border-radius: 8px;
+          color: var(--vertical-nav-item-color);
+          font-size: 12px;
+          font-weight: 500;
+          white-space: nowrap;
+          text-decoration: none;
+
+          &.active {
+            background-color: var(--vertical-active-nav-bg-color);
             color: var(--vertical-active-nav-color);
+
+            .nav-text {
+              color: var(--vertical-active-nav-color);
+            }
           }
-        }
 
-        &:not(.active):hover {
-          background-color: var(--vertical-nav-hover-bg-color);
-        }
+          &:not(.active):hover {
+            background-color: var(--vertical-nav-hover-bg-color);
+          }
 
-        .nav-text {
-          margin-left: 12px;
-          font-size: 14px;
-          font-weight: 400;
+          .nav-text {
+            margin-left: 12px;
+            font-size: 14px;
+            font-weight: 400;
+          }
+        }
+        .nav-link + .nav-link {
+          margin-top: 4px;
         }
-      }
-      .nav-link + .nav-link {
-        margin-top: 4px;
       }
 
       .nav-divider {
         width: 100%;
         height: 1px;
-        background-color: #d3d6da;
+        background-color: var(--nav-content-divider-bg);
         margin: 12px 0;
       }
     }
@@ -260,12 +290,18 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   --vertical-nav-hover-bg-color: rgba(211, 214, 218, 0.48);
   --vertical-active-nav-bg-color: #213444;
   --vertical-active-nav-color: #ffffff;
+  --pin-unpin-label-hover-color: #008fd6;
+  --nav-content-scrollbar-thumb-bg: #9da6ad;
+  --nav-content-divider-bg: #d3d6da;
 }
 :root.is-new-view.dark-theme {
   --vertical-nav-bg-color: rgba(51, 68, 83, 0.92);
-  --vertical-nav-item-color: #ffffff;
-  --vertical-nav-hover-bg-color: #485865;
+  --vertical-nav-item-color: #e9eaec;
+  --vertical-nav-hover-bg-color: rgba(233, 234, 236, 0.12);
   --vertical-active-nav-bg-color: rgba(233, 235, 237, 0.96);
   --vertical-active-nav-color: #213444;
+  --pin-unpin-label-hover-color: #2ba2de;
+  --nav-content-scrollbar-thumb-bg: rgba(157, 166, 173, 0.32);
+  --nav-content-divider-bg: rgba(211, 214, 218, 0.12);
 }
 </style>

package/components/common/split/horizontal/HorizontalNew.vue

@@ -199,6 +199,7 @@ onUnmounted(() => {
   }
   .firstPanel {
     width: calc(50% - 1.5px);
+    background-color: var(--center-pane-container);
 
     .left-panel {
       @include flex($dir: column);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.159",
+  "version": "1.4.160",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -35,7 +35,7 @@
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
     "bfg-nuxt-3-graph": "1.0.15",
-    "bfg-uikit": "1.0.97",
+    "bfg-uikit": "1.0.100",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }