bfg-common 1.2.96 → 1.2.97

package/components/atoms/DiagramIcon.vue

@@ -269,6 +269,28 @@
       </g>
     </svg>
   </template>
+  <template v-else-if="props.name === 'adapter-item-icon-dark'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      x="136.7"
+      y="121"
+      viewBox="-1 -1 18 18"
+      xml:space="preserve"
+      width="18"
+      height="18"
+    >
+      <g transform="translate(54 236)">
+        <g>
+          <path fill="#6d7884" d="M-45.5-221.5v-2h-8v-9h15v11z" />
+          <path
+            fill="#e9ecef"
+            d="M-39-232v10h-6v-2h-8v-8h14zm1-1h-16v10h8v2h8v-12z"
+          />
+        </g>
+      </g>
+    </svg>
+  </template>
   <template v-else-if="props.name === 'vsphere-icon-device'">
     <svg
       xmlns="http://www.w3.org/2000/svg"

package/components/common/diagramMain/Diagram.vue

@@ -25,6 +25,7 @@
         :selected-adapter="props.selectedAdapter"
         :selected-network="props.selectedNetwork"
         :is-visible-line="hasActiveAdapter"
+        :is-dark-mode="props.isDarkMode"
         @toggle-adapters="onToggleAdapters"
         @select-adapter="onSelectAdapter"
         @show-modal="onShowModal"
@@ -85,13 +86,18 @@ const props = defineProps<{
   selectedAdapter: UI_I_SelectedAdapter
   selectedNetwork: string
   selectedSwitchLineY: UI_I_SwitchLine
+  isDarkMode: boolean
 }>()
 
 const emits = defineEmits<{
   (event: 'click-diagram', ev: MouseEvent): void
   (event: 'toggle-adapters'): void
   (event: 'select-adapter', adapterId: string): void
-  (event: 'show-modal', value: string, properties?: UI_I_ModalsInitialData): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
   (
     event: 'toggle-ports',
     id: string,
@@ -112,9 +118,9 @@ const preserveAspectRatio = computed<string | undefined>(() =>
 
 const svgHeight = computed<number>(
   () =>
-      UI_E_PositionsY.DIAGRAM_TOP +
+    UI_E_PositionsY.DIAGRAM_TOP +
     props.mainRectHeight +
-      UI_E_PositionsY.DIAGRAM_BOTTOM
+    UI_E_PositionsY.DIAGRAM_BOTTOM
 )
 
 const viewBox = computed<string>(() =>

package/components/common/diagramMain/DiagramMain.vue

@@ -24,6 +24,7 @@
         :selected-adapter="selectedAdapter"
         :selected-network="selectedNetwork"
         :selected-switch-line-y="selectedSwitchLineY"
+        :is-dark-mode="props.isDarkMode"
         @click-diagram="onClickDiagram"
         @toggle-adapters="onToggleAdapters"
         @select-adapter="onSelectAdapter"
@@ -296,6 +297,7 @@ const props = withDefaults(
     adapters?: UI_I_SwitchAdapters
     freeAdapters?: UI_I_Adapter[]
     networksList?: UI_I_NetworkFull[]
+    isDarkMode: boolean
   }>(),
   {
     diagramData: null,
@@ -561,8 +563,8 @@ const onShowModal = (
 }
 const onRemoveNetwork = (label: string) => {
   isShowRemoveModalLoader.value = true
-    const id = props.networksList.find(network => network.title === label)!.id
-    emits('remove-network', { id, hideModalCB: onHideNetworkRemoveModal })
+  const id = props.networksList.find((network) => network.title === label)!.id
+  emits('remove-network', { id, hideModalCB: onHideNetworkRemoveModal })
 }
 const onRemoveSwitch = (id: string) => {
   isShowRemoveModalLoader.value = true

package/components/common/diagramMain/Highlights.vue

@@ -71,7 +71,7 @@ const props = withDefaults(
     d: '',
     hide: true,
     strokeWidth: 2,
-    dataTitle: ''
+    dataTitle: '',
   }
 )
 
@@ -81,6 +81,28 @@ const isLine = computed<boolean>(() => props.type.includes('line'))
 </script>
 
 <style scoped lang="scss">
+:root.dark-theme {
+  .selection-stroke {
+    stroke: #0f6082;
+    fill: #0f6082;
+  }
+  .selection-line {
+    stroke: #fdd006;
+  }
+
+  .highlight {
+    fill: #7f6509;
+
+    &-stroke {
+      stroke: #7f6509;
+    }
+    &-hide {
+      stroke-opacity: 0;
+      fill: transparent;
+    }
+  }
+}
+
 .selection-stroke {
   stroke: #0079b8;
   fill: #f3f6fa;

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

@@ -31,6 +31,7 @@
       :selected-port="props.selectedPort"
       :selected-adapter="props.selectedAdapter"
       :networks-count="props.networksCount"
+      :is-dark-mode="props.isDarkMode"
       @select-adapter="onSelectAdapter"
       @show-modal="onShowModal"
     />
@@ -53,6 +54,7 @@ const props = defineProps<{
   selectedNetwork: string
   isVisibleLine: boolean
   networksCount: number
+  isDarkMode: boolean
 }>()
 
 const isOpenedAdapterBlockAndNoSelectedNetwork = computed<boolean>(
@@ -90,7 +92,11 @@ const isHighlightedClosedAdapterBlock = computed<boolean>(
 const emits = defineEmits<{
   (event: 'toggle-adapters', networkId: string, portId: string): void
   (event: 'select-adapter', adapterId: string): void
-  (event: 'show-modal', value: string, properties?: UI_I_ModalsInitialData): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
 }>()
 
 const onToggleAdapters = (networkId: string, portId: string): void => {
@@ -99,7 +105,10 @@ const onToggleAdapters = (networkId: string, portId: string): void => {
 const onSelectAdapter = (adapterId: string): void => {
   emits('select-adapter', adapterId)
 }
-const onShowModal = (value: string, properties?: UI_I_ModalsInitialData): void => {
+const onShowModal = (
+  value: string,
+  properties?: UI_I_ModalsInitialData
+): void => {
   emits('show-modal', value, properties)
 }
 </script>

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

@@ -24,6 +24,7 @@
       :id="`adapter-${props.adapter.id}`"
       data-title="adapter-name"
       cursor="pointer"
+      class="adapter-name"
       @click="onSelectAdapter(props.adapter.id)"
     >
       <text
@@ -58,7 +59,6 @@
       :y2="adapterLinePosition"
       :hide="!isVisibleAdapterLine"
     />
-
     <foreignObject
       data-title="adapter-item-icon"
       width="18"
@@ -67,7 +67,11 @@
       :y="adapterIconPosition"
     >
       <div>
-        <atoms-diagram-icon name="adapter-item-icon" />
+        <atoms-diagram-icon
+          v-if="props.isDarkMode"
+          name="adapter-item-icon-dark"
+        />
+        <atoms-diagram-icon v-else name="adapter-item-icon" />
       </div>
     </foreignObject>
 
@@ -136,6 +140,7 @@ const props = defineProps<{
   selectedPort: UI_I_SelectedPort
   selectedAdapter: UI_I_SelectedAdapter
   networksCount: number
+  isDarkMode: boolean
 }>()
 
 const emits = defineEmits<{
@@ -208,6 +213,13 @@ const onShowModal = (
 
 <style scoped lang="scss">
 @import '~/assets/scss/common/mixins.scss';
+
+:root.dark-theme {
+  .adapter-name {
+    fill: #c1cdd4;
+  }
+}
+
 .diagram {
   &__values {
     @include text($fs: 12px, $fw: 400);
@@ -227,4 +239,8 @@ const onShowModal = (
     }
   }
 }
+
+.adapter-name {
+  fill: #565656;
+}
 </style>

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

@@ -11,6 +11,7 @@
           :selected-port="props.selectedPort"
           :selected-adapter="props.selectedAdapter"
           :networks-count="props.networksCount"
+          :is-dark-mode="props.isDarkMode"
           @select-adapter="onSelectAdapter"
           @show-modal="onShowModal"
         />
@@ -32,6 +33,7 @@ const props = defineProps<{
   selectedPort: UI_I_SelectedPort
   selectedAdapter: UI_I_SelectedAdapter
   networksCount: number
+  isDarkMode: boolean
 }>()
 
 const emits = defineEmits<{

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

@@ -42,6 +42,7 @@
       font-weight="400"
       x="462"
       y="53"
+      class="no-physical-adapters"
     >
       {{ localization.noPhysicalNetworkAdapters }}
     </text>
@@ -75,6 +76,16 @@ const onToggleAdapters = (networkId: string, portId: string): void => {
 
 <style scoped lang="scss">
 @import '~/assets/scss/common/mixins.scss';
+
+:root.dark-theme {
+  .diagram__heading {
+    fill: #c1cdd4;
+  }
+  .no-physical-adapters {
+    fill: #c1cdd4;
+  }
+}
+
 .virtual-switch__arrow-icon {
   width: 16px;
   height: 16px;
@@ -93,4 +104,7 @@ const onToggleAdapters = (networkId: string, portId: string): void => {
   letter-spacing: normal;
   line-height: 1.2rem;
 }
+.no-physical-adapters {
+  fill: #565656;
+}
 </style>

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

@@ -40,6 +40,12 @@ const props = defineProps<{
 </script>
 
 <style scoped lang="scss">
+:root.dark-theme {
+  .connection-line {
+    stroke: #adbbc4;
+  }
+}
+
 .connection-line {
   stroke: #888;
 }

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

@@ -30,6 +30,13 @@ const rectBottomPosition = computed<number>(
 </script>
 
 <style scoped lang="scss">
+:root.dark-theme {
+  .panel {
+    fill: #1b2a32;
+    stroke: #adbbc4;
+  }
+}
+
 .panel {
   fill: #fff;
   stroke: #888;

package/components/common/diagramMain/network/Block.vue

@@ -42,6 +42,13 @@ const props = defineProps<{
 </script>
 
 <style scoped lang="scss">
+:root.dark-theme {
+  .panel {
+    fill: #1b2a32;
+    stroke: #adbbc4;
+  }
+}
+
 .panel {
   fill: #fff;
   stroke: #888;

package/components/common/diagramMain/network/Contents.vue

@@ -57,6 +57,7 @@
       font-weight="400"
       x="26"
       :y="props.network.vlanPosition"
+      class="vlan-id"
     >
       {{ localization.vlanId }}: {{ props.network.vlanId }}
     </text>
@@ -103,6 +104,7 @@
       font-weight="400"
       x="42"
       :y="props.network.portsPosition"
+      class="port-group-header"
     >
       {{ props.network.networkPortsName }} ({{ props.network.portsCount }})
     </text>
@@ -201,6 +203,15 @@ const onTogglePorts = (
 
 <style scoped lang="scss">
 @import '@/assets/scss/common/mixins.scss';
+
+:root.dark-theme {
+  .diagram__heading,
+  .vlan-id,
+  .port-group-header {
+    fill: #c1cdd4;
+  }
+}
+
 .diagram {
   &__heading {
     @include text($fs: 14px, $fw: 500);

package/components/common/diagramMain/network/Lines.vue

@@ -53,6 +53,12 @@ const props = defineProps<{
 </script>
 
 <style scoped lang="scss">
+:root.dark-theme {
+  .connection-line {
+    stroke: #adbbc4;
+  }
+}
+
 .connection-line {
   stroke: #888;
 }

package/components/common/diagramMain/network/Network.vue

@@ -89,7 +89,11 @@ const networkRectBottomPosition = computed<number>(
 const emits = defineEmits<{
   (event: 'select-port', networkId: string, portId: string): void
   (event: 'select-network', networkId: string): void
-  (event: 'show-modal', value: string, properties?: UI_I_ModalsInitialData): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
   (
     event: 'toggle-ports',
     id: string,
@@ -98,7 +102,10 @@ const emits = defineEmits<{
   ): void
 }>()
 
-const onShowModal = (value: string, properties?: UI_I_ModalsInitialData): void => {
+const onShowModal = (
+  value: string,
+  properties?: UI_I_ModalsInitialData
+): void => {
   emits('show-modal', value, properties)
 }
 const onSelectPort = (networkId: string, portId: string): void => {

package/components/common/diagramMain/network/NoNetwork.vue

@@ -36,6 +36,12 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
 <style scoped lang="scss">
 @import '~/assets/scss/common/mixins.scss';
+:root.dark-theme {
+  .diagram__heading {
+    fill: #c1cdd4;
+  }
+}
+
 .diagram {
   &__heading {
     @include text($fs: 14px, $fw: 500);

package/components/common/diagramMain/network/SecondBlock.vue

@@ -38,6 +38,13 @@ const props = defineProps<{
 </script>
 
 <style scoped lang="scss">
+:root.dark-theme {
+  .panel {
+    fill: #1b2a32;
+    stroke: #adbbc4;
+  }
+}
+
 .panel {
   fill: #fff;
   stroke: #888;

package/components/common/diagramMain/port/Port.vue

@@ -44,9 +44,8 @@
       font-size="1em"
       font-weight="400"
       x="42"
-      class="small"
+      class="diagram__values small"
       :y="macAddressPosition"
-      fill="#565656"
     >
       {{ localization.macAddress }}: 00:0c:29:a8:0f:74
     </text>
@@ -268,9 +267,20 @@ const onSelectPort = (networkId: string, portId: string): void => {
 <style scoped lang="scss">
 @import '../../../../assets/scss/common/mixins';
 
+:root.dark-theme {
+  .selection-line {
+    stroke: #fdd006;
+  }
+  .diagram__values {
+    fill: #c1cdd4;
+  }
+}
+
 .diagram {
   &__values {
     @include text($fs: 12px, $fw: 400);
+
+    fill: #565656;
   }
 
   &-actions {

package/package.json

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