bfg-common 1.3.277 → 1.3.278

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

@@ -20,25 +20,24 @@
       :hide="!isSelectedAdapter"
     />
 
-    <a
-      :id="`adapter-${props.adapter.id}`"
-      :data-id="`${props.adapter.testId}-select`"
-      data-title="adapter-name"
-      cursor="pointer"
-      class="adapter-name"
-      @click="onSelectAdapter(props.adapter.id)"
+    <foreignObject
+      dy="11px"
+      height="20"
+      width="198"
+      x="482"
+      :y="props.adapter.adapterPosition"
+      class="diagram__values"
     >
-      <text
-        dy="11px"
-        font-size="12"
-        font-weight="400"
-        x="482"
-        :y="props.adapter.adapterPosition"
-        class="diagram__values"
+      <span
+        :id="`adapter-${props.adapter.id}`"
+        :data-id="`${props.adapter.testId}-select`"
+        data-title="adapter-name"
+        class="adapter-name text-ellipsis"
+        @click="onSelectAdapter(props.adapter.id)"
       >
         {{ adapterName }}
-      </text>
-    </a>
+      </span>
+    </foreignObject>
 
     <foreignObject
       v-if="!props.adapter.carrier"
@@ -218,6 +217,31 @@ const onShowModal = (
   .adapter-name {
     fill: #c1cdd4;
   }
+
+  .text-ellipsis {
+    color: #c1cdd4;
+
+    &:hover {
+      color: #c1cdd4;
+      text-decoration: solid underline #c1cdd4 1px;
+    }
+  }
+}
+
+.text-ellipsis {
+  display: block;
+  max-width: 198px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 12px;
+  color: #565656;
+
+  &:hover {
+    color: #565656;
+    text-decoration: solid underline #565656 1px;
+  }
 }
 
 .diagram {
@@ -242,5 +266,9 @@ const onShowModal = (
 
 .adapter-name {
   fill: #565656;
+  font-size: 12px;
+  font-weight: 400;
+  cursor: pointer;
+  line-height: normal;
 }
 </style>

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

@@ -35,18 +35,22 @@
       {{ localization.physicalAdapters }}
     </text>
 
-    <text
+    <foreignObject
       v-if="!hasAdapters"
       data-title="no-adapter-text"
       dy="11px"
-      font-size="13"
-      font-weight="400"
+      height="20"
+      width="230"
       x="462"
       y="53"
-      class="no-physical-adapters"
     >
-      {{ localization.noPhysicalNetworkAdapters }}
-    </text>
+      <span
+        data-title="no-physical-adapters"
+        class="no-physical-adapters text-ellipsis"
+      >
+        {{ localization.noPhysicalNetworkAdapters }}
+      </span>
+    </foreignObject>
   </g>
 </template>
 
@@ -86,6 +90,20 @@ const onToggleAdapters = (networkId: string, portId: string): void => {
   .no-physical-adapters {
     fill: #c1cdd4;
   }
+  .text-ellipsis {
+    color: #c1cdd4;
+  }
+}
+
+.text-ellipsis {
+  display: block;
+  max-width: 230px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 12px;
+  color: #565656;
 }
 
 .virtual-switch__arrow-icon {
@@ -108,5 +126,8 @@ const onToggleAdapters = (networkId: string, portId: string): void => {
 }
 .no-physical-adapters {
   fill: #565656;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: normal;
 }
 </style>

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

@@ -29,37 +29,35 @@
       <foreignObject
         data-title="network-name-text"
         height="20"
-        width="206"
-        x="42"
+        width="226"
+        x="22"
         :y="portTitlePosition"
         class="diagram__values"
       >
         <span
-          class="text-ellipsis"
+          v-if="props.port.state?.state === 2 || props.port.state?.state === 3"
+          class="port-state-icon-container"
+          :title="props.port.state?.errors?.[0] || ''"
+        >
+          <atoms-the-icon
+            v-if="props.port.state?.state === 2"
+            name="warning"
+            width="15"
+            height="15"
+          />
+          <atoms-the-icon
+            v-if="props.port.state?.state === 3"
+            name="error-outline"
+            width="15"
+            height="15"
+          />
+        </span>
+        <span
+          class="port-text text-ellipsis"
           :title="props.port.name"
           :id="`port_${props.port.id}`"
         >
           {{ props.port.name }}
-          <span
-            v-if="
-              props.port.state?.state === 2 || props.port.state?.state === 3
-            "
-            class="port-state-icon-container"
-            :title="props.port.state?.errors?.[0] || ''"
-          >
-            <atoms-the-icon
-              v-if="props.port.state?.state === 2"
-              name="warning"
-              width="15"
-              height="15"
-            />
-            <atoms-the-icon
-              v-if="props.port.state?.state === 3"
-              name="error-outline"
-              width="15"
-              height="15"
-            />
-          </span>
         </span>
       </foreignObject>
     </a>
@@ -398,9 +396,10 @@ const onSelectPort = (networkId: string, portId: string): void => {
 .port-state-icon-container {
   position: absolute;
   top: 4px;
+  left: 3px;
+}
 
-  //&:hover {
-  //  transform: scale(1.2);
-  //}
+.port-text {
+  padding-left: 20px;
 }
 </style>

package/package.json

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