bfg-common 1.2.108 → 1.2.110

package/components/common/diagramMain/modals/editSettings/EditSettingsModal.vue

@@ -1,65 +1,71 @@
 <template>
-    <div>
-        <atoms-modal
-                :width="props.width"
-                :height="props.height"
-                :show="props.show"
-                :title="title"
-                :modal-loading="modalLoading"
-                class="diagram-action__edit"
-                @hide="onHideEditSettingsModal"
-                @submit="onSendDataRequest"
-        >
-            <template #modalBody>
-                <common-diagram-main-modals-edit-settings
-                        :items="props.items"
-                        :view-name="props.viewName"
-                        :initial-data="props.initialData"
-                        :adapters="props.adapters"
-                        :flag-send-data="flagSendData"
-                        @send-edit-data="onSendData"
-                        @change-edit-fields-data="onChangeEditFieldsData"
-                        @check-network-label="onCheckNetworkLabel"
-                />
-            </template>
-        </atoms-modal>
-        <div v-show="true" class="loader">
-            <i class="fa clr-tree-node-caret-icon spinner spinner" />
-        </div>
+  <div>
+    <atoms-modal
+      :width="props.width"
+      :height="props.height"
+      :show="props.show"
+      :title="title"
+      :modal-loading="modalLoading"
+      :class="[
+        'diagram-action__edit',
+        {
+          'is-dark': props.isDarkMode,
+        },
+      ]"
+      @hide="onHideEditSettingsModal"
+      @submit="onSendDataRequest"
+    >
+      <template #modalBody>
+        <common-diagram-main-modals-edit-settings
+          :items="props.items"
+          :view-name="props.viewName"
+          :initial-data="props.initialData"
+          :adapters="props.adapters"
+          :flag-send-data="flagSendData"
+          @send-edit-data="onSendData"
+          @change-edit-fields-data="onChangeEditFieldsData"
+          @check-network-label="onCheckNetworkLabel"
+        />
+      </template>
+    </atoms-modal>
+    <div v-show="true" class="loader">
+      <i class="fa clr-tree-node-caret-icon spinner spinner" />
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { UI_I_Localization } from '~/models/interfaces'
 import {
-    UI_I_ModalsInitialData,
-    UI_I_EditFieldsData,
-    UI_I_SwitchAdapters,
+  UI_I_ModalsInitialData,
+  UI_I_EditFieldsData,
+  UI_I_SwitchAdapters,
 } from '~/components/common/diagramMain/models/interfaces'
 
 // Props from up
 interface UI_I_PortViewSettingsModalProps {
-    show: boolean
-    viewName: string
-    width: string
-    height: string
-    title?: string
-    items: {
-        value: string
-        text: string
-    }[]
-    initialData?: UI_I_ModalsInitialData
-    adapters?: UI_I_SwitchAdapters
+  show: boolean
+  viewName: string
+  width: string
+  height: string
+  title?: string
+  items: {
+    value: string
+    text: string
+  }[]
+  initialData?: UI_I_ModalsInitialData
+  adapters?: UI_I_SwitchAdapters
+  isDarkMode: boolean
 }
 
 const props = withDefaults(defineProps<UI_I_PortViewSettingsModalProps>(), {
-    initialData: () => ({}),
-    title: 'Network',
-    adapters: () => ({
-        totalPages: 0,
-        totalItems: 0,
-        items: [],
-    }),
+  initialData: () => ({}),
+  title: 'Network',
+  adapters: () => ({
+    totalPages: 0,
+    totalItems: 0,
+    items: [],
+  }),
 })
 
 const modalLoading = ref<boolean>(false)
@@ -69,50 +75,50 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
 // Title
 const title = computed(
-    () => props.title + localization.value.networkEditSettings
+  () => props.title + localization.value.networkEditSettings
 )
 
 // Modal hiding
 const emits = defineEmits<{
-    (event: 'hide'): void
-    (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
-    (
-        event: 'send-edit-data',
-        type: string,
-        hideModal: () => void,
-        name?: string
-    ): void
-    (
-        event: 'check-network-label',
-        networkLabel: string,
-        cb: (error_message: string) => void,
-        hideLoader?: () => void
-    ): void
+  (event: 'hide'): void
+  (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
+  (
+    event: 'send-edit-data',
+    type: string,
+    hideModal: () => void,
+    name?: string
+  ): void
+  (
+    event: 'check-network-label',
+    networkLabel: string,
+    cb: (error_message: string) => void,
+    hideLoader?: () => void
+  ): void
 }>()
 
 const onCheckNetworkLabel = (
-    networkLabel: string,
-    cb: (error_message: string) => void
+  networkLabel: string,
+  cb: (error_message: string) => void
 ) => {
-    emits('check-network-label', networkLabel, cb)
+  emits('check-network-label', networkLabel, cb)
 }
 
 const onHideEditSettingsModal = (): void => {
-    emits('hide')
+  emits('hide')
 }
 
 const onChangeEditFieldsData = (newEditFieldsData: UI_I_EditFieldsData) => {
-    emits('change-edit-fields-data', newEditFieldsData)
+  emits('change-edit-fields-data', newEditFieldsData)
 }
 
 const flagSendData = ref(true)
 
 const onSendDataRequest = () => {
-    flagSendData.value = !flagSendData.value
+  flagSendData.value = !flagSendData.value
 }
 const onSendData = (type: string) => {
-    modalLoading.value = true
-    emits('send-edit-data', type, onHideEditSettingsModal, props.title)
+  modalLoading.value = true
+  emits('send-edit-data', type, onHideEditSettingsModal, props.title)
 }
 </script>
 
@@ -131,6 +137,7 @@ const onSendData = (type: string) => {
     border-bottom: 1px solid #a6a6a6;
     padding: 0;
   }
+
   .wizard-tab__container {
     display: flex;
     flex: 1 1 100%;
@@ -350,6 +357,9 @@ const onSendData = (type: string) => {
   .k-grid-toolbar:first-child {
     border-radius: 2px 2px 0 0;
   }
+  .vui-action-bar {
+    padding: 8px 0 3px;
+  }
   .vui-action-bar ul {
     margin: 0;
   }
@@ -604,7 +614,7 @@ const onSendData = (type: string) => {
     border-left: 1px solid #ddd;
 
     & > div {
-      padding-left: 10px;
+      margin-left: 10px;
     }
     .no-items-selected-container {
       display: -ms-flexbox;
@@ -711,4 +721,105 @@ const onSendData = (type: string) => {
     left: unset;
   }
 }
+
+:deep(.diagram-action__edit.is-dark) {
+  .property-label-group {
+    color: var(--main-color-mode2);
+  }
+  .flex-property-label-group {
+    color: var(--main-color-mode2);
+  }
+  .flex-property-value-group {
+    select {
+      color: #fff;
+    }
+  }
+  .failover-order-master {
+    .secondary-title label {
+      color: #fff;
+    }
+  }
+  .k-grid-content {
+    background-color: var(--modal-bg-color);
+  }
+  .vui-action-bar {
+    background-color: var(--pannel-bg-color);
+    color: var(--title-color);
+
+    .action-link-container:not(.disabled) {
+      &:hover {
+        background-color: #29414e;
+        border: 1px solid #c7e9ff;
+      }
+    }
+
+    svg {
+      fill: #fff;
+    }
+  }
+
+  .k-grid.k-widget .k-grid-content {
+    border-left: 1px solid #485764;
+    border-right: 1px solid #485764;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+
+    tbody tr {
+      background-color: var(--modal-bg-color);
+
+      td {
+        border-bottom: 1px solid #666666;
+        border-color: #666666;
+      }
+
+      &:hover {
+        background-color: #324f61;
+        color: var(--title-color);
+
+        td {
+          border-bottom: 1px solid #ffffff;
+        }
+      }
+
+      &.k-state-selected {
+        background-color: #d8e3e9;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+
+        td span {
+          color: #000;
+        }
+      }
+    }
+  }
+
+  .failover-order-details {
+    &.relative-container .absolute-container {
+      background-color: var(--pannel-bg-color);
+      color: var(--main-color-mode2);
+
+      &:has(.no-items-selected-container) {
+        background-color: transparent;
+      }
+    }
+
+    td span {
+      color: var(--main-color-mode2);
+    }
+    button span {
+      color: var(--main-color-mode2);
+
+      &:hover:not(.disabled) {
+        background-color: transparent;
+        border: 1px solid transparent;
+      }
+    }
+    button.active span {
+      color: #fff;
+    }
+  }
+
+  .select-adapter-info span {
+    color: var(--main-color-mode2);
+  }
+}
 </style>

package/components/common/diagramMain/modals/editSettings/tabs/TeamingFailover.vue

@@ -82,7 +82,7 @@
         :adapter-status="props.adapterStatus"
         @change-adapter-status="onChangeAdapterStatus"
       />
-      <div>
+      <div class="select-adapter-info">
         <span>
           {{ localization.selectActiveAndStandbyAdapters }}
         </span>