npm - bfg-common - Versions diffs - 1.6.91 → 1.6.92 - Mend

@@ -19,6 +19,7 @@
               :selected-is-header="props.selectedIsHeader"
               :is-disabled-move-up="props.isDisabledMoveUp"
               :is-disabled-move-down="props.isDisabledMoveDown"
+              :is-active="props.isActive"
               @move-up-adapter="onMoveUp"
               @move-down-adapter="onMoveDown"
             />
@@ -285,6 +286,7 @@ const onShowAddAdapterModal = (): void => {
     :deep(.table-fixed-height) {
       min-height: unset !important;
       max-height: unset !important;
+      height: unset !important;
       .info-block-container {
         padding-right: 19px !important;
@@ -332,4 +334,89 @@ const onShowAddAdapterModal = (): void => {
     margin-bottom: 6px;
   }
 }
+.element-disabled {
+  pointer-events: none;
+  :deep(.adapter) {
+    .adapter-info-icon {
+      opacity: 0.4;
+    }
+    .adapter-info-title {
+      color: var(--btn-text-disabled-color);
+    }
+    &.selected {
+      background: var(--btn-text-disabled-color);
+      .adapter-info-title {
+        color: var(--accordion-selected-item-text);
+      }
+    }
+  }
+  :deep(.info-container) {
+    .tab-item {
+      color: var(--btn-text-disabled-color);
+      &.active {
+        color: var(--btn-text-disabled-color);
+        border-bottom: 3px solid var(--btn-text-disabled-color) !important;
+      }
+    }
+    .info-block-container-inner {
+      .row-sub-title {
+        color: var(--btn-text-disabled-color);
+      }
+      .row-name-container {
+        span {
+          color: var(--btn-text-disabled-color);
+        }
+      }
+      .settings-table__values:not(.is-status-yes),
+      .settings-table__values:not(.is-status-no) {
+        color: var(--btn-text-disabled-color);
+      }
+      .settings-table__values.is-status-yes,
+      .settings-table__values.is-status-no {
+        opacity: 0.4;
+      }
+    }
+  }
+  :deep(.manager-header-title) {
+    color: var(--btn-text-disabled-color);
+  }
+  :deep(.ui-main-no-items-found) {
+    color: var(--btn-text-disabled-color);
+    span {
+      color: var(--btn-text-disabled-color);
+    }
+  }
+}
+:root.dark-theme {
+  .element-disabled {
+    :deep(.adapter) {
+      .adapter-info-icon {
+        opacity: 0.32;
+      }
+    }
+    :deep(.info-container) {
+      .info-block-container-inner {
+        .settings-table__values.is-status-yes,
+        .settings-table__values.is-status-no {
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}
 </style>

@@ -200,3 +200,14 @@ html.light-theme {
   height: 100%;
   overflow: hidden;
 }
+.in-development {
+  opacity: 0.6 !important;
+  cursor: not-allowed !important;
+}
+:root.dark-theme {
+  .in-development {
+    opacity: 0.44 !important;
+  }
+}

@@ -161,6 +161,9 @@ b {
 .pointer {
   cursor: pointer !important;
 }
+.cursor-progress {
+  cursor: progress !important;
+}
 .default {
   cursor: default !important;

@@ -712,8 +712,8 @@
   //--gutter-bg-color: #25333d; // for old
   --gutter-bg-color: #e9ebed1f; // for new
   --new-gutter-bg-color: #394a58;
-  --gutter-hover-bg-color: #495a67;
-  --gutter-active-bg-color: #495a67;
+  --gutter-hover-bg-color: #2776a0;
+  --gutter-active-bg-color: #2ba2de;
   --gutter-before-bg: rgba(157, 166, 173, 0.32);
   /*  Items Row Variables light mode  */

@@ -144,7 +144,7 @@ const onRollBack = (): void => {
       flex: 1 1 auto;
       width: 60%;
       background-color: transparent;
-      word-break: break-all;
+      word-break: break-word;
     }
     .empty-icon {

@@ -83,8 +83,8 @@ const emits = defineEmits<{
 const columnKeysPresent = computed<UI_I_ColumnKey[]>(() => {
   return props.columnKeys.map((item): UI_I_ColumnKey => {
-    const testId = item.text
-      .toLowerCase()
+    const testId = item?.text
+      ?.toLowerCase()
       .replace(/\s/g, '_')
       .replace(/[^\p{L}_]/gu, '') // разрешает буквы любых языков
       .replace(/__+/g, '_')

@@ -17,6 +17,7 @@
           { 'has-error': props.hasError },
         ]"
         :style="tooltipStyles"
+        :data-id="props.testId"
       >
         <slot name="content" />
       </div>
@@ -31,9 +32,11 @@ const props = withDefaults(
   defineProps<{
     hasError: boolean
     selector?: string
+    testId?: string
   }>(),
   {
     selector: undefined,
+    testId: '',
   }
 )
 const emits = defineEmits<{

@@ -88,7 +88,7 @@ const onAddSelectedAdapters = (): void => {
     max-height: 520px;
     overflow-y: auto;
     height: calc(100vh - 300px);
-    min-height: 120px;
+    min-height: 132px;
   }
   .modal-footer-transparent-block {

@@ -10,7 +10,6 @@
     <template #footerContent>
       <ui-button
         :test-id="`${props.testId}-modal-close-button`"
-        variant="outline"
         size="md"
         @click="emits('hide')"
       >

@@ -5,6 +5,7 @@
     :selected-is-header="props.selectedIsHeader"
     :is-disabled-move-up="props.isDisabledMoveUp"
     :is-disabled-move-down="props.isDisabledMoveDown"
+    :is-active="props.isActive"
     @move-up-adapter="onMoveUp"
     @move-down-adapter="onMoveDown"
   />
@@ -32,6 +33,7 @@ const props = withDefaults(
     isDisabledMoveUp: boolean
     isDisabledMoveDown: boolean
     isDisabledRemove?: boolean
+    isActive: boolean
   }>(),
   {
     fullMode: false,

@@ -2,11 +2,11 @@
   <div v-if="!props.isAddModal">
     <ul class="adapter-manager-actions">
       <common-adapter-manager-ui-actions-move-up-adapter-button
-        :is-disabled-move-up="props.isDisabledMoveUp"
+        :is-disabled-move-up="props.isDisabledMoveUp || !props.isActive"
         @move-up-adapter="onMoveUp"
       />
       <common-adapter-manager-ui-actions-move-down-adapter-button
-        :is-disabled-move-down="props.isDisabledMoveDown"
+        :is-disabled-move-down="props.isDisabledMoveDown || !props.isActive"
         @move-down-adapter="onMoveDown"
       />
     </ul>
@@ -18,6 +18,7 @@ const props = defineProps<{
   isAddModal: boolean
   isDisabledMoveUp: boolean
   isDisabledMoveDown: boolean
+  isActive: boolean
 }>()
 const emits = defineEmits<{

@@ -92,6 +92,7 @@ const adapters = computed(() =>
   padding: 6px 8px;
   border-radius: 6px;
   color: var(--table-text-first);
+  cursor: pointer;
   &:not(.last-item) {
     margin-bottom: 4px;

@@ -9,6 +9,8 @@
       :adapters="props.adapters"
       :switch-adapters-loading="props.switchAdaptersLoading"
       :is-networking-loading="props.isNetworkingLoading"
+      :is-get-existing-switches-loading="props.isGetExistingSwitchesLoading"
+      :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
       :tcp-stacks="props.tcpStacks"
       :diagram-data="props.diagramData"
       :standard-switches="props.standardSwitches"
@@ -68,6 +70,8 @@ const props = withDefaults(
     diagramData?: UI_I_DiagramData[]
     standardSwitches?: UI_I_Switch[]
     freeAdapters?: UI_I_Adapter[]
+    isGetExistingSwitchesLoading?: boolean
+    isGetTcpStackLoading?: boolean
   }>(),
   {
     adapters: () => ({
@@ -81,6 +85,8 @@ const props = withDefaults(
     isDarkMode: false,
     switchAdaptersLoading: false,
     isNetworkingLoading: false,
+    isGetExistingSwitchesLoading: false,
+    isGetTcpStackLoading: false,
     tcpStacks: [],
     diagramData: [],
     standardSwitches: [],

bfg-common 1.6.91 → 1.6.92