bfg-common 1.4.481 → 1.4.482

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

@@ -1,34 +1,30 @@
 <template>
   <g data-title="adapter-item-group">
-    <g>
-      <common-diagram-main-highlights
-        data-title="adapter-item"
-        type="main-orange"
-        width="276"
-        height="18"
-        :x="positions.blockX"
-        :y="adapterSelectionPosition"
-        radius="3"
-        :hide="!isConnectedAdapterToPortOrNetwork"
-      />
-
-      <common-diagram-main-highlights
-        data-title="adapter-item"
-        type="main-blue"
-        width="276"
-        height="18"
-        :x="positions.blockX"
-        :y="adapterSelectionPosition"
-        radius="3"
-        :hide="!isSelectedAdapter"
-      />
-    </g>
+    <common-diagram-main-highlights
+      data-title="adapter-item"
+      type="main-orange"
+      width="276"
+      height="18"
+      x="430.5"
+      :y="adapterSelectionPosition"
+      :hide="!isConnectedAdapterToPortOrNetwork"
+    />
+
+    <common-diagram-main-highlights
+      data-title="adapter-item"
+      type="main-blue"
+      width="276"
+      height="18"
+      x="430.5"
+      :y="adapterSelectionPosition"
+      :hide="!isSelectedAdapter"
+    />
 
     <foreignObject
       dy="11px"
       height="20"
-      :width="positions.adapterWidth"
-      :x="positions.adapterX"
+      width="198"
+      x="482"
       :y="props.adapter.adapterPosition"
       class="diagram__values"
     >
@@ -43,11 +39,8 @@
       </span>
     </foreignObject>
 
-    <!--    Connection X-->
     <foreignObject
-      v-if="
-        !props.adapter.carrier && props.adapter.status !== 'error' && !isNewView
-      "
+      v-if="!props.adapter.carrier && props.adapter.status !== 'error'"
       data-title="adapter-connection-icon"
       width="18"
       height="18"
@@ -59,64 +52,32 @@
 
     <foreignObject
       v-if="props.adapter.status === 'error'"
-      data-title="adapter-error-icon"
+      data-title="adapter-connection-icon"
       width="15"
       height="15"
-      :x="positions.errorIconX"
-      :y="positions.errorIconY"
+      x="447"
+      :y="adapterSelectionPosition"
     >
-      <!-- TODO MAKE TOOLTIP-->
-      <ui-icon
-        v-if="isNewView"
-        name="info"
-        color="#EA3223"
-        width="14"
-        height="14"
-      />
-      <atoms-diagram-icon v-else name="adapter-error" />
+      <atoms-diagram-icon name="adapter-error" />
     </foreignObject>
 
     <common-diagram-main-highlights
       data-title="adapter-item-line"
       type="line-orange"
-      :x="positions.x1"
+      x="391.5"
       :y="adapterLinePosition"
-      :x2="positions.x2"
+      x2="362.5"
       :y2="adapterLinePosition"
       :hide="!isVisibleAdapterLine"
     />
-
     <foreignObject
       data-title="adapter-item-icon"
-      :width="positions.adapterIconSize"
-      :height="positions.adapterIconSize"
-      :x="positions.adapterIconX"
-      :y="positions.adapterIconY"
+      width="18"
+      height="18"
+      x="462"
+      :y="adapterIconPosition"
     >
-      <div v-if="isNewView && !props.adapter.carrier">
-        <ui-icon
-          v-if="props.isDarkMode"
-          name="diagram-adapter-item-not-connected-dark"
-          width="20"
-          height="20"
-        />
-        <ui-icon
-          v-else
-          name="diagram-adapter-item-not-connected"
-          width="20"
-          height="20"
-        />
-      </div>
-      <div v-else-if="isNewView && props.adapter.carrier">
-        <ui-icon
-          v-if="props.isDarkMode"
-          name="diagram-adapter-item-dark"
-          width="20"
-          height="20"
-        />
-        <ui-icon v-else name="diagram-adapter-item" width="20" height="20" />
-      </div>
-      <div v-else>
+      <div>
         <atoms-diagram-icon
           v-if="props.isDarkMode"
           name="adapter-item-icon-dark"
@@ -130,35 +91,11 @@
       data-title="adapter-action-icon"
       width="18"
       height="18"
-      :x="positions.actionX"
-      :y="positions.actionY"
+      x="682"
+      :y="adapterActionIconPosition"
       cursor="pointer"
     >
-      <div v-if="isNewView" class="dropdown-actions-container">
-        <button
-          :id="`dropdown-${props.adapter.id}`"
-          :class="[
-            'action-button',
-            { 'action-button-selected': isShowDropdown },
-          ]"
-          @click="isShowDropdown = !isShowDropdown"
-        >
-          <ui-icon name="horizontal-dotes" width="16" height="16" />
-        </button>
-        <Teleport to="body">
-          <ui-dropdown
-            :test-id="props.adapter.testId"
-            :show="isShowDropdown"
-            :items="adapterPopupFields"
-            :elem-id="`dropdown-${props.adapter.id}`"
-            width="max-content"
-            show-from-left
-            @select="(value) => onShowModal(value, adapterProperties)"
-            @hide="onHide"
-          ></ui-dropdown>
-        </Teleport>
-      </div>
-      <div v-else class="diagram-actions">
+      <div class="diagram-actions">
         <atoms-collapse-nav
           class="diagram-actions__icon"
           value="-1"
@@ -171,45 +108,31 @@
       </div>
     </foreignObject>
 
-    <g v-if="props.adapter.status !== 'error'">
-      <foreignObject
-        v-if="props.adapter.carrier"
-        data-title="adapter-second-connected-icon"
-        :width="positions.adapterSecondIconSize"
-        :height="positions.adapterSecondIconSize"
-        :x="positions.adapterSecondIconX"
-        :y="positions.adapterSecondIconY"
-      >
-        <div>
-          <ui-icon
-            v-if="isNewView"
-            width="16"
-            height="16"
-            name="diagram-fill-adapter"
-          />
-          <atoms-diagram-icon v-else name="fill-adapter" />
-        </div>
-      </foreignObject>
-
-      <foreignObject
-        v-else
-        data-title="adapter-second-not-connected-icon"
-        :width="positions.adapterSecondIconSize"
-        :height="positions.adapterSecondIconSize"
-        :x="positions.adapterSecondIconX"
-        :y="positions.adapterSecondIconY"
-      >
-        <div>
-          <ui-icon
-            v-if="isNewView"
-            width="16"
-            height="16"
-            name="diagram-outline-adapter"
-          />
-          <atoms-diagram-icon v-else name="outline-adapter" />
-        </div>
-      </foreignObject>
-    </g>
+    <foreignObject
+      v-if="props.adapter.carrier && props.adapter.status !== 'error'"
+      data-title="adapter-second-connected-icon"
+      width="18"
+      height="18"
+      x="396"
+      :y="props.adapter.adapterPosition"
+    >
+      <div>
+        <atoms-diagram-icon name="fill-adapter" />
+      </div>
+    </foreignObject>
+
+    <foreignObject
+      v-if="!props.adapter.carrier && props.adapter.status !== 'error'"
+      data-title="adapter-second-not-connected-icon"
+      width="18"
+      height="18"
+      x="396"
+      :y="props.adapter.adapterPosition"
+    >
+      <div>
+        <atoms-diagram-icon name="outline-adapter" />
+      </div>
+    </foreignObject>
   </g>
 </template>
 
@@ -222,15 +145,9 @@ import {
   UI_I_SelectedPort,
   UI_I_NetworksWithPositions,
 } from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_I_Localization, UI_I_ArbitraryObject } from '~/lib/models/interfaces'
-import {
-  adapterPopupFieldsFunc,
-  adapterPopupFieldsNewFunc,
-} from '~/components/common/diagramMain/modals/lib/config'
-import {
-  dataForSelectedAdapterFunc,
-  adapterItemPositionsFunc,
-} from '~/components/common/diagramMain/lib/config'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { adapterPopupFieldsFunc } from '~/components/common/diagramMain/modals/lib/config'
+import { dataForSelectedAdapterFunc } from '~/components/common/diagramMain/lib/config'
 
 const props = defineProps<{
   adapter: (UI_I_Adapter | UI_I_AdapterWithError) & { adapterPosition: number }
@@ -250,15 +167,10 @@ const emits = defineEmits<{
   ): void
 }>()
 
-const { $store }: any = useNuxtApp()
-
 const localization = computed<UI_I_Localization>(() => useLocal())
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const adapterPopupFields = computed(() =>
-  isNewView.value
-    ? adapterPopupFieldsNewFunc(localization.value, props.adapter.testId)
-    : adapterPopupFieldsFunc(localization.value, props.adapter.testId)
+  adapterPopupFieldsFunc(localization.value, props.adapter.testId)
 )
 
 const adapterProperties = dataForSelectedAdapterFunc(props.adapter)
@@ -322,22 +234,6 @@ const onShowModal = (
 ): void => {
   emits('show-modal', value, properties)
 }
-
-const positions = computed<UI_I_ArbitraryObject<number>>(() =>
-  adapterItemPositionsFunc(
-    isNewView.value,
-    adapterIconPosition.value,
-    props.adapter.carrier,
-    props.adapter.adapterPosition,
-    adapterSelectionPosition.value,
-    adapterActionIconPosition.value
-  )
-)
-
-const isShowDropdown = ref<boolean>(false)
-const onHide = (): void => {
-  isShowDropdown.value = false
-}
 </script>
 
 <style scoped lang="scss">
@@ -348,7 +244,7 @@ const onHide = (): void => {
     fill: #c1cdd4;
   }
 
-  .adapter-name {
+  .text-ellipsis {
     color: #c1cdd4;
 
     &:hover {
@@ -364,19 +260,14 @@ const onHide = (): void => {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-}
-
-.adapter-name {
+  font-weight: 400;
+  font-size: 12px;
   color: #565656;
 
   &:hover {
     color: #565656;
     text-decoration: solid underline #565656 1px;
   }
-  font-size: 12px;
-  font-weight: 400;
-  cursor: pointer;
-  line-height: normal;
 }
 
 .diagram {
@@ -399,31 +290,11 @@ const onHide = (): void => {
   }
 }
 
-:root.is-new-view {
-  .adapter-name {
-    color: var(--diagram-content-text);
-
-    &:hover {
-      color: var(--diagram-content-text-hover);
-      text-decoration: unset;
-    }
-  }
-
-  .action-button {
-    border: none;
-    margin: 0;
-    padding: 0;
-    background: transparent;
-    cursor: pointer;
-    color: var(--diagram-content-text);
-
-    &:hover {
-      color: var(--diagram-content-text-hover);
-    }
-
-    &.action-button-selected {
-      color: var(--diagram-content-text-selected);
-    }
-  }
+.adapter-name {
+  fill: #565656;
+  font-size: 12px;
+  font-weight: 400;
+  cursor: pointer;
+  line-height: normal;
 }
 </style>

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

@@ -1,48 +1,48 @@
-<template>
-  <g data-title="adapter-main-block-group">
-    <rect
-      data-title="adapter-main-block"
-      width="280"
-      :height="props.adaptersWithPositionsHeight"
-      x="428.5"
-      y="17.5"
-      shape-rendering="geometricprecision"
-      class="panel"
-    />
-
-    <common-diagram-main-highlights
-      data-title="adapter-main"
-      type="main-orange"
-      :height="props.adaptersWithPositionsHeight"
-      x="428.5"
-      y="17.5"
-      :hide="!props.isHighlightedClosedAdapterBlock"
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  adaptersWithPositionsHeight: number
-  isHighlightedClosedAdapterBlock: boolean
-}>()
-</script>
-
-<style scoped lang="scss">
-:root.dark-theme {
-  .panel {
-    fill: #1b2a32;
-    stroke: #adbbc4;
-  }
-}
-
-.panel {
-  fill: #fff;
-  stroke: #888;
-  margin-bottom: 20px;
-  background-color: #fff;
-  border: 1px solid transparent;
-  border-radius: 0;
-  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
-}
-</style>
+<template>
+  <g data-title="adapter-main-block-group">
+    <rect
+      data-title="adapter-main-block"
+      width="280"
+      :height="props.adaptersWithPositionsHeight"
+      x="428.5"
+      y="17.5"
+      shape-rendering="geometricprecision"
+      class="panel"
+    />
+
+    <common-diagram-main-highlights
+      data-title="adapter-main"
+      type="main-orange"
+      :height="props.adaptersWithPositionsHeight"
+      x="428.5"
+      y="17.5"
+      :hide="!isHighlightedClosedAdapterBlock"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  adaptersWithPositionsHeight: number
+  isHighlightedClosedAdapterBlock: boolean
+}>()
+</script>
+
+<style scoped lang="scss">
+:root.dark-theme {
+  .panel {
+    fill: #1b2a32;
+    stroke: #adbbc4;
+  }
+}
+
+.panel {
+  fill: #fff;
+  stroke: #888;
+  margin-bottom: 20px;
+  background-color: #fff;
+  border: 1px solid transparent;
+  border-radius: 0;
+  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
+}
+</style>

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

@@ -1,33 +1,18 @@
 <template>
   <g data-title="adapter-block-contents">
     <foreignObject
-      v-if="isShowArrow"
+      v-if="hasAdapters"
       :data-id="`${props.testId}-adapters-toggle`"
       data-title="adapter-toggle"
-      :width="positions.arrowIconSize"
-      :height="positions.arrowIconSize"
-      :x="positions.arrowIconX"
+      width="18"
+      height="18"
+      x="438"
       :y="arrawIconPosition"
-      :cursor="hasAdapters && 'pointer'"
+      cursor="pointer"
       @click="onToggleAdapters"
     >
       <div class="diagram-block__toggle">
-        <ui-icon
-          v-if="isNewView"
-          name="arrow"
-          width="20"
-          height="20"
-          :class="[
-            'virtual-switch__arrow-icon',
-            {
-              'is-new': isNewView,
-              open: hasAdapters ? props.adaptersWithPositions.toggle : false,
-              'without-adapters': !hasAdapters,
-            },
-          ]"
-        />
         <atoms-the-icon
-          v-else
           name="angle"
           :class="[
             'virtual-switch__arrow-icon',
@@ -36,7 +21,6 @@
             },
           ]"
         />
-        {{ hasAdapters }}
       </div>
     </foreignObject>
     <text
@@ -44,15 +28,15 @@
       dy="14px"
       font-size="14"
       font-weight="500"
-      :x="positions.adapterTextX"
+      x="462"
       :y="props.adaptersWithPositions.titlePosition"
       class="diagram__heading"
     >
-      {{ headerText }}
+      {{ localization.common.physicalAdapters }}
     </text>
 
     <foreignObject
-      v-if="!isNewView && !hasAdapters"
+      v-if="!hasAdapters"
       data-title="no-adapter-text"
       dy="11px"
       height="20"
@@ -72,11 +56,7 @@
 
 <script setup lang="ts">
 import type { UI_I_AdaptersWithPositions } from '~/components/common/diagramMain/lib/models/interfaces'
-import type {
-  UI_I_Localization,
-  UI_I_ArbitraryObject,
-} from '~/lib/models/interfaces'
-import { adapterContentPositionsFunc } from '~/components/common/diagramMain/lib/config'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const props = defineProps<{
   adaptersWithPositions: UI_I_AdaptersWithPositions
@@ -86,30 +66,11 @@ const emits = defineEmits<{
   (event: 'toggle-adapters', networkId: string, portId: string): void
 }>()
 
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const positions = computed<UI_I_ArbitraryObject<number>>(() =>
-  adapterContentPositionsFunc(isNewView.value)
-)
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const hasAdapters = computed<boolean>(
   () => props.adaptersWithPositions.adaptersCount > 0
 )
-
-const isShowArrow = computed<boolean>(() => (isNewView.value ? true : hasAdapters.value))
-
-const headerText = computed<string>(() =>
-  isNewView.value
-    ? `${localization.value.common.physicalAdapters} (${
-        props.adaptersWithPositions.adaptersCount || 0
-      })`
-    : localization.value.common.physicalAdapters
-)
-
 const arrawIconPosition = computed<number>(
   () => props.adaptersWithPositions.titlePosition + 1
 )
@@ -152,21 +113,10 @@ const onToggleAdapters = (networkId: string, portId: string): void => {
   transform: rotate(90deg);
   align-self: center;
   fill: var(--triger-icon-color);
-
-  &.is-new {
-    fill: none;
-    color: var(--diagram-content-second-text);
-  }
-
-  &.open:not(.without-adapters) {
+  cursor: pointer;
+  &.open {
     transform: rotate(180deg);
   }
-
-  &.without-adapters {
-    color: var(--diagram-content-second-disabled-text);
-    fill: none;
-    pointer-events: none;
-  }
 }
 .diagram__heading {
   @include text($fs: 14px, $fw: 500);
@@ -180,10 +130,4 @@ const onToggleAdapters = (networkId: string, portId: string): void => {
   font-weight: 400;
   line-height: normal;
 }
-
-:root.is-new-view {
-  .text-ellipsis {
-    color: var(--diagram-content-text);
-  }
-}
 </style>