bfg-common 1.5.242 → 1.5.243

package/components/common/vm/actions/common/customizeHardware/virtualHardware/bus/BusNew.vue

@@ -17,53 +17,62 @@
           size="sm"
         />
 
-        <div
-          v-if="props.helpText"
-          :id="props.helpId"
-          class="flex-align-center relative"
-        >
-          <ui-icon
-            :data-id="`${props.testId}-show-help-icon`"
-            width="20"
-            height="20"
-            name="info"
-            :class="['bus-help-icon cursor-pointer', {active: isShowHelp}]"
-            @click.stop="isShowHelp = !isShowHelp"
+        <div v-if="props.helpText">
+          <common-tooltip-help
+              :test-id="`${props.testId}`"
+              :help-id="`${props.helpId}`"
+              :help-text="props.helpText"
+              :dropdown-left="true"
+              dropdown-width="480px"
           />
-          <Teleport to="body">
-            <ui-dropdown
-              :show="isShowHelp"
-              :elem-id="props.helpId"
-              :items="[]"
-              test-id=""
-              width="480px"
-              left
-              @hide="isShowHelp = false"
-            >
-              <template #content>
-                <div class="help-content">
-                  <div class="headline">
-                    <ui-icon name="info-2" width="16" height="16" />
-                    <h3 class="help-title">
-                      {{ localization.mainNavigation.help }}
-                    </h3>
-                    <ui-icon
-                      name="close"
-                      width="16"
-                      height="16"
-                      class="bus-help-close-icon cursor-pointer"
-                      @click="isShowHelp = false"
-                    />
-                  </div>
-
-                  <p class="help-text">
-                    {{ props.helpText }}
-                  </p>
-                </div>
-              </template>
-            </ui-dropdown>
-          </Teleport>
         </div>
+<!--        <div-->
+<!--          v-if="props.helpText"-->
+<!--          :id="props.helpId"-->
+<!--          class="flex-align-center relative"-->
+<!--        >-->
+<!--          <ui-icon-->
+<!--            :data-id="`${props.testId}-show-help-icon`"-->
+<!--            width="16"-->
+<!--            height="16"-->
+<!--            name="info"-->
+<!--            :class="['bus-help-icon cursor-pointer', {active: isShowHelp}]"-->
+<!--            @click.stop="isShowHelp = !isShowHelp"-->
+<!--          />-->
+<!--          <Teleport to="body">-->
+<!--            <ui-dropdown-->
+<!--              :show="isShowHelp"-->
+<!--              :elem-id="props.helpId"-->
+<!--              :items="[]"-->
+<!--              test-id=""-->
+<!--              width="480px"-->
+<!--              left-->
+<!--              @hide="isShowHelp = false"-->
+<!--            >-->
+<!--              <template #content>-->
+<!--                <div class="help-content">-->
+<!--                  <div class="headline">-->
+<!--                    <ui-icon name="info-2" width="16" height="16" />-->
+<!--                    <h3 class="help-title">-->
+<!--                      {{ localization.mainNavigation.help }}-->
+<!--                    </h3>-->
+<!--                    <ui-icon-->
+<!--                      name="close"-->
+<!--                      width="16"-->
+<!--                      height="16"-->
+<!--                      class="bus-help-close-icon cursor-pointer"-->
+<!--                      @click="isShowHelp = false"-->
+<!--                    />-->
+<!--                  </div>-->
+
+<!--                  <p class="help-text">-->
+<!--                    {{ props.helpText }}-->
+<!--                  </p>-->
+<!--                </div>-->
+<!--              </template>-->
+<!--            </ui-dropdown>-->
+<!--          </Teleport>-->
+<!--        </div>-->
       </div>
     </template>
   </ui-stack-block>
@@ -74,7 +83,7 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 
 const bus = defineModel<string>('bus')
-const isShowHelp = defineModel<boolean>('isShowHelp')
+// const isShowHelp = defineModel<boolean>('isShowHelp')
 
 const props = defineProps<{
   index: number
@@ -94,55 +103,55 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
 <style>
-:root {
-  --bus-help-color: #4d5d69;
-  --bus-help-icon-hover-color: #4d5d69;
-  --bus-help-icon-active-color: #008fd6;
-  --bus-help-close-icon-color: #182531;
-}
-:root.dark-theme {
-  --bus-help-color: #e9eaec;
-  --bus-help-icon-hover-color: #e9eaec;
-  --bus-help-icon-active-color: #2ba2de;
-  --bus-help-close-icon-color: #e9eaec;
-}
+//:root {
+//  --bus-help-color: #4d5d69;
+//  --bus-help-icon-hover-color: #4d5d69;
+//  --bus-help-icon-active-color: #008fd6;
+//  --bus-help-close-icon-color: #182531;
+//}
+//:root.dark-theme {
+//  --bus-help-color: #e9eaec;
+//  --bus-help-icon-hover-color: #e9eaec;
+//  --bus-help-icon-active-color: #2ba2de;
+//  --bus-help-close-icon-color: #e9eaec;
+//}
 </style>
 <style lang="scss" scoped>
-.bus-help-icon {
-  color: #9da6ad; // for light and dark
-
-  &:hover {
-    color: var(--bus-help-icon-hover-color);
-  }
-  &.active {
-    color: var(--bus-help-icon-active-color);
-  }
-}
-.help-content {
-  padding: 16px;
-
-  .headline {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 12px;
-
-    .help-title {
-      flex: 1;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 16.94px;
-      color: var(--bus-help-color);
-    }
-    .bus-help-close-icon {
-      color: var(--bus-help-close-icon-color)
-    }
-  }
-
-  .help-text {
-    font-size: 13px;
-    line-height: 15.73px;
-    color: var(--bus-help-color);
-  }
-}
+//.bus-help-icon {
+//  color: #9da6ad; // for light and dark
+//
+//  &:hover {
+//    color: var(--bus-help-icon-hover-color);
+//  }
+//  &.active {
+//    color: var(--bus-help-icon-active-color);
+//  }
+//}
+//.help-content {
+//  padding: 16px;
+//
+//  .headline {
+//    display: flex;
+//    align-items: center;
+//    gap: 8px;
+//    margin-bottom: 12px;
+//
+//    .help-title {
+//      flex: 1;
+//      font-size: 14px;
+//      font-weight: 500;
+//      line-height: 16.94px;
+//      color: var(--bus-help-color);
+//    }
+//    .bus-help-close-icon {
+//      color: var(--bus-help-close-icon-color)
+//    }
+//  }
+//
+//  .help-text {
+//    font-size: 13px;
+//    line-height: 15.73px;
+//    color: var(--bus-help-color);
+//  }
+//}
 </style>