bfg-common 1.5.241 → 1.5.243

package/components/common/layout/theHeader/feedback/new/subtitle/Subtitle.vue

@@ -3,41 +3,51 @@
     <span class="subtitle__label">
       {{ localization.common.helpUsImprove }}
     </span>
-    <ui-icon
-      id="feedback-description-info-icon"
-      name="info"
-      width="16"
-      height="16"
-      :class="['subtitle__icon pointer', isShowInfo && 'active']"
-      @click="isShowInfo = !isShowInfo"
+
+    <common-tooltip-help
+        test-id="feedback-description-help"
+        help-id="feedback-description-info-icon"
+        dropdown-width="320px"
+        :title="localization.common.feedbackHelp"
+        :help-text="localization.common.anyFeedbackYouProvideMay"
+        dropdown-left
     />
-    <ui-popup-window
-      v-model="isShowInfo"
-      :elem-id="'feedback-description-info-icon'"
-      width="320px"
-      class="subtitle__tooltip"
-      is-priority-right-position
-    >
-      <div class="common-widget-info">
-        <div class="headline justify-between flex-align-start">
-          <div class="flex-align-start">
-            <ui-icon name="info-2" width="16px" height="16px" />
-            <span class="title">{{ localization.common.feedbackHelp }}</span>
-          </div>
-          <ui-icon
-            name="close"
-            class="pointer hide-icon"
-            width="16px"
-            height="16px"
-            @click="isShowInfo = false"
-          />
-        </div>
 
-        <div class="common-widget-info-description">
-          {{ localization.common.anyFeedbackYouProvideMay }}
-        </div>
-      </div>
-    </ui-popup-window>
+    <!--    <ui-icon-->
+    <!--      id="feedback-description-info-icon"-->
+    <!--      name="info"-->
+    <!--      width="16"-->
+    <!--      height="16"-->
+    <!--      :class="['subtitle__icon pointer', isShowInfo && 'active']"-->
+    <!--      @click="isShowInfo = !isShowInfo"-->
+    <!--    />-->
+    <!--    <ui-popup-window-->
+    <!--      v-model="isShowInfo"-->
+    <!--      :elem-id="'feedback-description-info-icon'"-->
+    <!--      width="320px"-->
+    <!--      class="subtitle__tooltip"-->
+    <!--      is-priority-right-position-->
+    <!--    >-->
+    <!--      <div class="common-widget-info">-->
+    <!--        <div class="headline justify-between flex-align-start">-->
+    <!--          <div class="flex-align-start">-->
+    <!--            <ui-icon name="info-2" width="16px" height="16px" />-->
+    <!--            <span class="title">{{ localization.common.feedbackHelp }}</span>-->
+    <!--          </div>-->
+    <!--          <ui-icon-->
+    <!--            name="close"-->
+    <!--            class="pointer hide-icon"-->
+    <!--            width="16px"-->
+    <!--            height="16px"-->
+    <!--            @click="isShowInfo = false"-->
+    <!--          />-->
+    <!--        </div>-->
+
+    <!--        <div class="common-widget-info-description">-->
+    <!--          {{ localization.common.anyFeedbackYouProvideMay }}-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </ui-popup-window>-->
   </div>
 </template>
 
@@ -46,7 +56,7 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isShowInfo = ref<boolean>(false)
+// const isShowInfo = ref<boolean>(false)
 </script>
 
 <style lang="scss" scoped>
@@ -56,20 +66,20 @@ const isShowInfo = ref<boolean>(false)
   border-bottom: 1px solid var(--horizontal-line);
   padding: 24px 0 12px;
 
-  &__icon {
-    color: var(--feedback-tooltip-trigger-color);
-    &:hover {
-      color: var(--feedback-tooltip-hover-trigger-color);
-    }
-    &.active {
-      color: var(--feedback-tooltip-acctive-trigger-color);
-    }
-  }
-  &__tooltip {
-    .flex-align-center {
-      height: 16px;
-    }
-  }
+  //&__icon {
+  //  color: var(--feedback-tooltip-trigger-color);
+  //  &:hover {
+  //    color: var(--feedback-tooltip-hover-trigger-color);
+  //  }
+  //  &.active {
+  //    color: var(--feedback-tooltip-acctive-trigger-color);
+  //  }
+  //}
+  //&__tooltip {
+  //  .flex-align-center {
+  //    height: 16px;
+  //  }
+  //}
 
   &__label {
     font-size: 12px;
@@ -77,27 +87,27 @@ const isShowInfo = ref<boolean>(false)
     line-height: 14.52px;
     color: #9da6ad;
   }
-  .common-widget-info {
-    padding: 16px;
-    .title {
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 16.94px;
-      color: var(--feedback-text-color);
-      margin-left: 8px;
-    }
-
-    .common-widget-info-description {
-      font-size: 13px;
-      line-height: 15.73px;
-      color: var(--feedback-text-color);
-      margin-top: 12px;
-    }
-
-    svg {
-      flex: none;
-      color: var(--feedback-tooltip-close-color);
-    }
-  }
+  //.common-widget-info {
+  //  padding: 16px;
+  //  .title {
+  //    font-size: 14px;
+  //    font-weight: 500;
+  //    line-height: 16.94px;
+  //    color: var(--feedback-text-color);
+  //    margin-left: 8px;
+  //  }
+  //
+  //  .common-widget-info-description {
+  //    font-size: 13px;
+  //    line-height: 15.73px;
+  //    color: var(--feedback-text-color);
+  //    margin-top: 12px;
+  //  }
+  //
+  //  svg {
+  //    flex: none;
+  //    color: var(--feedback-tooltip-close-color);
+  //  }
+  //}
 }
 </style>

package/components/common/layout/theHeader/helpMenu/About.vue

@@ -1,82 +1,82 @@
-<template>
-  <Teleport to="body">
-    <common-layout-the-header-help-menu-about-new
-      v-if="isNewView"
-      :title="title"
-      :subtitle="subtitle"
-      :about-heading-text="aboutHeadingText"
-      :about-desc-one="aboutDesc1"
-      :about-desc-second="aboutDesc2"
-      :project-name="props.projectName"
-      :url="companyWebSitePath"
-      @hide="emits('hide')"
-    />
-
-    <common-layout-the-header-help-menu-about-old
-      v-else
-      :title="title"
-      :subtitle="subtitle"
-      :about-heading-text="aboutHeadingText"
-      :about-desc-one="aboutDesc1"
-      :about-desc-second="aboutDesc2"
-      :project-name="props.projectName"
-      :url="companyWebSitePath"
-      @hide="emits('hide')"
-    />
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  version: string
-  projectName: string
-}>()
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $store }: any = useNuxtApp()
-const config = useRuntimeConfig()
-
-const companyName = computed<string>(
-  () => config.public[`COMPANY_NAME_${useEnvLanguage()}`]
-)
-const brandName = computed<string>(
-  () => config.public[`TRADEMARK_${useEnvLanguage()}`]
-)
-
-const companyWebSitePath = ref<string>('https://iridium-soft.com/')
-
-const title = computed<string>(() => `${brandName.value}® ${props.projectName}`)
-const subtitle = computed<string>(() =>
-  localization.value.layout.aboutWebClientVersion
-    .replace('{0}', props.projectName)
-    .replace('{1}', props.version)
-)
-
-const aboutHeadingText = computed<string>(() =>
-  localization.value.layout.aboutHeading.replace(
-    '{companyName}',
-    companyName.value
-  ).replace(
-    '{year}',
-      new Date().getFullYear() + ''
-  )
-)
-
-const aboutDesc1 = computed<string>(() =>
-  localization.value.layout.aboutDesc1
-    .replaceAll('{companyName}', companyName.value)
-    .replaceAll('{trademark}', brandName.value)
-)
-const aboutDesc2 = computed<string>(() =>
-  localization.value.layout.aboutDesc2
-    .replaceAll('{companyName}', companyName.value)
-    .replaceAll('{trademark}', brandName.value)
-)
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-</script>
+<template>
+  <Teleport to="body">
+    <common-layout-the-header-help-menu-about-new
+      v-if="isNewView"
+      :title="title"
+      :subtitle="subtitle"
+      :about-heading-text="aboutHeadingText"
+      :about-desc-one="aboutDesc1"
+      :about-desc-second="aboutDesc2"
+      :project-name="props.projectName"
+      :url="companyWebSitePath"
+      @hide="emits('hide')"
+    />
+
+    <common-layout-the-header-help-menu-about-old
+      v-else
+      :title="title"
+      :subtitle="subtitle"
+      :about-heading-text="aboutHeadingText"
+      :about-desc-one="aboutDesc1"
+      :about-desc-second="aboutDesc2"
+      :project-name="props.projectName"
+      :url="companyWebSitePath"
+      @hide="emits('hide')"
+    />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  version: string
+  projectName: string
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+const config = useRuntimeConfig()
+
+const companyName = computed<string>(
+  () => config.public[`COMPANY_NAME_${useEnvLanguage()}`]
+)
+const brandName = computed<string>(
+  () => config.public[`TRADEMARK_${useEnvLanguage()}`]
+)
+
+const companyWebSitePath = ref<string>('https://iridium-soft.com/')
+
+const title = computed<string>(() => `${brandName.value}® ${props.projectName}`)
+const subtitle = computed<string>(() =>
+  localization.value.layout.aboutWebClientVersion
+    .replace('{0}', props.projectName)
+    .replace('{1}', props.version)
+)
+
+const aboutHeadingText = computed<string>(() =>
+  localization.value.layout.aboutHeading.replace(
+    '{companyName}',
+    companyName.value
+  ).replace(
+    '{year}',
+      new Date().getFullYear() + ''
+  )
+)
+
+const aboutDesc1 = computed<string>(() =>
+  localization.value.layout.aboutDesc1
+    .replaceAll('{companyName}', companyName.value)
+    .replaceAll('{trademark}', brandName.value)
+)
+const aboutDesc2 = computed<string>(() =>
+  localization.value.layout.aboutDesc2
+    .replaceAll('{companyName}', companyName.value)
+    .replaceAll('{trademark}', brandName.value)
+)
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>

package/components/common/layout/theHeader/userMenu/modals/preferences/view/ViewOld.vue

@@ -1,112 +1,112 @@
-<template>
-  <form id="view-form" class="compact">
-    <div class="description">
-      {{ props.description }}
-    </div>
-
-    <div class="flex-align-center" :title="localization.common.inDevelopment">
-      <label for="view">{{ localization.common.newView }}</label>
-      <input
-        id="view"
-        v-model="newViewLocal"
-        :disabled="isDisabled"
-        type="checkbox"
-        class="switch"
-      />
-    </div>
-  </form>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  description: string
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const newViewLocal = defineModel<boolean>()
-
-const isDisabled = ref<boolean>(true)
-// @ts-ignore
-window.tools = new Proxy(
-  {},
-  {
-    set: function (_obj, prop, value): boolean {
-      if (prop === 'isDev') isDisabled.value = !value
-      return true
-    },
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.description {
-  margin-bottom: 10px;
-}
-
-label {
-  margin-right: 6px;
-}
-
-input[type='checkbox'] {
-  --active: var(--checkbox-value-active-color);
-  --active-inner: var(--checkbox-mark-color);
-  --border: var(--checkbox-mark-color);
-  --background: var(--checkbox-mark-background-color);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  height: 20px;
-  outline: none;
-  display: inline-block;
-  vertical-align: top;
-  position: relative;
-  margin: 0;
-  cursor: pointer;
-  border: 1px solid var(--bc, var(--border));
-  background: var(--b, var(--background));
-  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
-  &:after {
-    content: '';
-    display: block;
-    left: 0;
-    top: 0;
-    position: absolute;
-    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
-      opacity var(--d-o, 0.2s);
-  }
-  &:checked {
-    --b: var(--active);
-    --bc: var(--active);
-    --d-o: 0.3s;
-    --d-t: 0.6s;
-    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
-  }
-}
-input[type='checkbox'] {
-  &.switch {
-    width: 35px;
-    border-radius: 11px;
-    &:after {
-      left: 2px;
-      top: 2px;
-      bottom: 2px;
-      border-radius: 50%;
-      width: 14px;
-      height: 14px;
-      border: 1px solid var(--bc, var(--border));
-      background: var(--ab, var(--border));
-      transform: translateX(var(--x, 0));
-    }
-    &:checked {
-      --ab: var(--active-inner);
-      --x: 14px;
-    }
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-  }
-}
-</style>
+<template>
+  <form id="view-form" class="compact">
+    <div class="description">
+      {{ props.description }}
+    </div>
+
+    <div class="flex-align-center" :title="localization.common.inDevelopment">
+      <label for="view">{{ localization.common.newView }}</label>
+      <input
+        id="view"
+        v-model="newViewLocal"
+        :disabled="isDisabled"
+        type="checkbox"
+        class="switch"
+      />
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  description: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const newViewLocal = defineModel<boolean>()
+
+const isDisabled = ref<boolean>(true)
+// @ts-ignore
+window.tools = new Proxy(
+  {},
+  {
+    set: function (_obj, prop, value): boolean {
+      if (prop === 'isDev') isDisabled.value = !value
+      return true
+    },
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.description {
+  margin-bottom: 10px;
+}
+
+label {
+  margin-right: 6px;
+}
+
+input[type='checkbox'] {
+  --active: var(--checkbox-value-active-color);
+  --active-inner: var(--checkbox-mark-color);
+  --border: var(--checkbox-mark-color);
+  --background: var(--checkbox-mark-background-color);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  height: 20px;
+  outline: none;
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  margin: 0;
+  cursor: pointer;
+  border: 1px solid var(--bc, var(--border));
+  background: var(--b, var(--background));
+  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
+  &:after {
+    content: '';
+    display: block;
+    left: 0;
+    top: 0;
+    position: absolute;
+    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
+      opacity var(--d-o, 0.2s);
+  }
+  &:checked {
+    --b: var(--active);
+    --bc: var(--active);
+    --d-o: 0.3s;
+    --d-t: 0.6s;
+    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+  }
+}
+input[type='checkbox'] {
+  &.switch {
+    width: 35px;
+    border-radius: 11px;
+    &:after {
+      left: 2px;
+      top: 2px;
+      bottom: 2px;
+      border-radius: 50%;
+      width: 14px;
+      height: 14px;
+      border: 1px solid var(--bc, var(--border));
+      background: var(--ab, var(--border));
+      transform: translateX(var(--x, 0));
+    }
+    &:checked {
+      --ab: var(--active-inner);
+      --x: 14px;
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+}
+</style>