bfg-common 1.5.203 → 1.5.205

package/components/common/browse/blocks/lib/models/types.ts

@@ -1 +1 @@
-export type UI_T_BlocksWidth = [number, number, number]
+export type UI_T_BlocksWidth = [number, number, number]

package/components/common/browse/lib/models/interfaces.ts

@@ -1,5 +1,5 @@
-export interface UI_I_FileInfo {
-  type: string
-  title: string
-  value: string | number
-}
+export interface UI_I_FileInfo {
+  type: string
+  title: string
+  value: string | number
+}

package/components/common/context/recursion/RecursionNew.vue

@@ -12,6 +12,7 @@
         { disabled: item.disabled || isLoading },
         { 'show-children': item.isShowItems },
         { 'has-divider': item.hasBorderTop },
+        { 'has-shortcut': item.shortcut },
       ]"
       @mouseenter="emits('toggle-items', [item, true, $event])"
       @mouseleave="emits('toggle-items', [item, false, $event])"
@@ -23,7 +24,16 @@
         @mousedown="emits('select-item', item)"
       >
         <span :class="['context-icon', item.iconClassName]" />
-        <span class="menu-item-text text-ellipsis">{{ item.name }}</span>
+        <span
+          :class="[
+            'menu-item-text text-ellipsis',
+            {
+              'with-children': item.items.length,
+            },
+          ]"
+        >
+          {{ item.name }}
+        </span>
         <ui-icon v-if="item.items.length" name="arrow" class="arrow-icon" />
         <span v-if="item.shortcut" class="shortcut">{{ item.shortcut }}</span>
       </span>
@@ -68,6 +78,7 @@ const emits = defineEmits<{
   --context-menu-text-disabled-color: #bdc3c7;
   --context-menu-text-hover-color: #182531;
   --context-menu-border-color: #e9ebed;
+  --context-menu-icon-opacity: 0.4;
 
   /*rtl*/
   --context-menu-wrap-transform: none;
@@ -79,9 +90,10 @@ const emits = defineEmits<{
   --context-menu-bg-color: #334453;
   --context-menu-item-bg-hover-color: rgba(233, 235, 237, 0.06);
   --context-menu-text-color: #e9eaec;
-  --context-menu-text-disabled-color: #bdc3c7b8;
+  --context-menu-text-disabled-color: #bdc3c770;
   --context-menu-text-hover-color: #ffffff;
   --context-menu-border-color: rgba(233, 235, 237, 0.12);
+  --context-menu-icon-opacity: 0.32;
 }
 
 :root.is-new-view[dir='rtl'] {
@@ -94,9 +106,9 @@ const emits = defineEmits<{
 <style scoped lang="scss">
 .context-wrap {
   //width: auto;
-  //max-width: 400px;
-  //min-width: 212px;
-  width: 212px;
+  max-width: 400px;
+  min-width: 192px;
+  //width: 212px;
   background: var(--context-menu-bg-color);
   border-radius: 8px;
   user-select: none;
@@ -104,8 +116,9 @@ const emits = defineEmits<{
   max-height: 100vh;
   box-shadow: var(--box-shadow);
   padding: 8px;
+
   //overflow-x: hidden;
-  //overflow-y: auto;
+  overflow-y: auto;
 
   .context-loader {
     position: absolute;
@@ -120,6 +133,10 @@ const emits = defineEmits<{
     cursor: pointer;
     border-radius: 4px;
 
+    &-text.with-children {
+      margin-right: 16px;
+    }
+
     &.show-children::after {
       content: '';
       position: absolute;
@@ -169,6 +186,12 @@ const emits = defineEmits<{
       }
     }
 
+    &.has-shortcut {
+      .context-link {
+        padding: 6px 8px 6px 8px;
+      }
+    }
+
     .context-link {
       position: relative;
       overflow: hidden;
@@ -178,7 +201,7 @@ const emits = defineEmits<{
       align-items: center;
       user-select: none;
       border-radius: 4px;
-      padding: 6px 18px 8px 6px;
+      padding: 6px 24px 6px 8px;
 
       .menu-item-text {
         flex: 1 1 0;
@@ -197,7 +220,7 @@ const emits = defineEmits<{
         position: absolute;
         top: 50%;
         margin-top: -8px;
-        right: 4px;
+        right: 8px;
         display: inline-block;
         width: 16px;
         height: 16px;
@@ -216,7 +239,7 @@ const emits = defineEmits<{
       user-select: none;
       cursor: default;
       .context-icon {
-        opacity: 0.4;
+        opacity: var(--context-menu-icon-opacity);
       }
       .shortcut {
         color: var(--context-menu-text-disabled-color);

package/components/common/diagramMain/adapter/AdapterItems.vue

@@ -1,61 +1,61 @@
-<template>
-  <g data-title="adapter-items-group">
-    <template v-if="props.adaptersWithPositions.toggle">
-      <template
-        v-for="(adapter, key) in props.adaptersWithPositions.adapters"
-        :key="adapter.id"
-      >
-        <common-diagram-main-adapter-item
-          :adapter="adapter"
-          :selected-port="props.selectedPort"
-          :selected-adapter="props.selectedAdapter"
-          :networks-count="props.networksCount"
-          :is-dark-mode="props.isDarkMode"
-          :networks-with-positions="props.networksWithPositions"
-          @select-adapter="onSelectAdapter"
-          @show-modal="onShowModal"
-        />
-      </template>
-    </template>
-  </g>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_AdaptersWithPositions,
-  UI_I_ModalsInitialData,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_NetworksWithPositions,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  adaptersWithPositions: UI_I_AdaptersWithPositions
-  networksWithPositions: UI_I_NetworksWithPositions[]
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  networksCount: number
-  isDarkMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-adapter', adapterId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const onSelectAdapter = (adapterId: string): void => {
-  emits('select-adapter', adapterId)
-}
-const onShowModal = (
-  value: string,
-  properties?: UI_I_ModalsInitialData
-): void => {
-  emits('show-modal', value, properties)
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <g data-title="adapter-items-group">
+    <template v-if="props.adaptersWithPositions.toggle">
+      <template
+        v-for="(adapter, key) in props.adaptersWithPositions.adapters"
+        :key="adapter.id"
+      >
+        <common-diagram-main-adapter-item
+          :adapter="adapter"
+          :selected-port="props.selectedPort"
+          :selected-adapter="props.selectedAdapter"
+          :networks-count="props.networksCount"
+          :is-dark-mode="props.isDarkMode"
+          :networks-with-positions="props.networksWithPositions"
+          @select-adapter="onSelectAdapter"
+          @show-modal="onShowModal"
+        />
+      </template>
+    </template>
+  </g>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_AdaptersWithPositions,
+  UI_I_ModalsInitialData,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_NetworksWithPositions,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  adaptersWithPositions: UI_I_AdaptersWithPositions
+  networksWithPositions: UI_I_NetworksWithPositions[]
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  networksCount: number
+  isDarkMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-adapter', adapterId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const onSelectAdapter = (adapterId: string): void => {
+  emits('select-adapter', adapterId)
+}
+const onShowModal = (
+  value: string,
+  properties?: UI_I_ModalsInitialData
+): void => {
+  emits('show-modal', value, properties)
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/diagramMain/lib/config/initial.ts

@@ -1,50 +1,50 @@
-import type {
-  UI_I_AdapterStatus,
-  UI_I_MainRectHeights,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_SwitchLine,
-  UI_I_NetworkPositionsConst,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-export const managePhysicalAdapterStatusInitial: UI_I_AdapterStatus = {
-  active: [],
-  standby: [],
-  unused: [],
-}
-
-export const mainRectHeightsInitial: UI_I_MainRectHeights = {
-  networksHeight: 0,
-  adaptersHeight: 0,
-}
-
-export const switchLineInitial: UI_I_SwitchLine = {
-  y1: 0,
-  y2: 0,
-  ay: 0,
-}
-
-export const selectedPortInitial: UI_I_SelectedPort = {
-  networkId: '-1',
-  portId: '-1',
-  activeAdapters: [],
-}
-
-export const selectedAdapterInitial: UI_I_SelectedAdapter = {
-  adapterId: '-1',
-  connectedPorts: [],
-}
-
-export const selectedSwitchLineYInitial: UI_I_SwitchLine = {
-  y1: 0,
-  y2: 0,
-}
-
-export const NETWORK_POSITIONS: UI_I_NetworkPositionsConst = {
-  EMPTY_PORTS_PADDING_BOTTOM: 7.5,
-  FROM_VLAN_ID_TO_GROUP_NAME: 22,
-  VMS_AND_PORTS_HEIGHT: 22,
-  V_CENTER_HEIGHT: 32,
-  BETWEEN_VMS_AND_PORTS: 7.5,
-  BETWEEN_V_CENTERS: 12.5,
-} as const
+import type {
+  UI_I_AdapterStatus,
+  UI_I_MainRectHeights,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_SwitchLine,
+  UI_I_NetworkPositionsConst,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+export const managePhysicalAdapterStatusInitial: UI_I_AdapterStatus = {
+  active: [],
+  standby: [],
+  unused: [],
+}
+
+export const mainRectHeightsInitial: UI_I_MainRectHeights = {
+  networksHeight: 0,
+  adaptersHeight: 0,
+}
+
+export const switchLineInitial: UI_I_SwitchLine = {
+  y1: 0,
+  y2: 0,
+  ay: 0,
+}
+
+export const selectedPortInitial: UI_I_SelectedPort = {
+  networkId: '-1',
+  portId: '-1',
+  activeAdapters: [],
+}
+
+export const selectedAdapterInitial: UI_I_SelectedAdapter = {
+  adapterId: '-1',
+  connectedPorts: [],
+}
+
+export const selectedSwitchLineYInitial: UI_I_SwitchLine = {
+  y1: 0,
+  y2: 0,
+}
+
+export const NETWORK_POSITIONS: UI_I_NetworkPositionsConst = {
+  EMPTY_PORTS_PADDING_BOTTOM: 7.5,
+  FROM_VLAN_ID_TO_GROUP_NAME: 22,
+  VMS_AND_PORTS_HEIGHT: 22,
+  V_CENTER_HEIGHT: 32,
+  BETWEEN_VMS_AND_PORTS: 7.5,
+  BETWEEN_V_CENTERS: 12.5,
+} as const

package/components/common/diagramMain/lib/models/types.ts

@@ -1,21 +1,21 @@
-import type {
-  UI_I_Adapter,
-  UI_I_AdapterWithError,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-export type UI_T_AdapterStatusNames = 'active' | 'standby' | 'unused'
-export type UI_T_PropertiesFieldName = 'vlanId' | 'networkLabel'
-export type UI_T_TrafficShapingFieldName = 'average' | 'peak' | 'burstSize'
-export type UI_T_PortPropertiesFieldName = 'mtu'
-
-export type UI_T_LoadBalancingMode =
-  | 'inherit'
-  | 'active-backup'
-  | 'balance-slb'
-  | 'balance-tcp'
-export type UI_T_IYN = 'inherit' | 'yes' | 'no'
-export type UI_T_Carier = 'inherit' | 'carier' | 'beakon'
-
-export type UI_T_Adapters = (UI_I_Adapter | UI_I_AdapterWithError) & {
-  adapterPosition: number
-}
+import type {
+  UI_I_Adapter,
+  UI_I_AdapterWithError,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+export type UI_T_AdapterStatusNames = 'active' | 'standby' | 'unused'
+export type UI_T_PropertiesFieldName = 'vlanId' | 'networkLabel'
+export type UI_T_TrafficShapingFieldName = 'average' | 'peak' | 'burstSize'
+export type UI_T_PortPropertiesFieldName = 'mtu'
+
+export type UI_T_LoadBalancingMode =
+  | 'inherit'
+  | 'active-backup'
+  | 'balance-slb'
+  | 'balance-tcp'
+export type UI_T_IYN = 'inherit' | 'yes' | 'no'
+export type UI_T_Carier = 'inherit' | 'carier' | 'beakon'
+
+export type UI_T_Adapters = (UI_I_Adapter | UI_I_AdapterWithError) & {
+  adapterPosition: number
+}