bfg-common 1.4.451 → 1.4.452

package/assets/localization/local_be.json

@@ -2832,9 +2832,6 @@
   },
   "feedback": {
     "additionalDetailsHelp": "Даведка па дадатковых звестках",
-    "additionalDetailsTooltip": "Каб атрымаць дадатковую інфармацыю, вы можаце альбо зрабіць скрыншот экрана, альбо загрузіць выяву ў фармаце .png або .jpeg.",
-    "annotate": "Анатаваць",
-    "annotateScreenshot": "Анатаваць скрыншот",
-    "annotateImage": "Анатаваць малюнак"
+    "additionalDetailsTooltip": "Каб атрымаць дадатковую інфармацыю, вы можаце альбо зрабіць скрыншот экрана, альбо загрузіць выяву ў фармаце .png або .jpeg."
   }
 }

package/assets/localization/local_en.json

@@ -2836,9 +2836,6 @@
   },
   "feedback": {
     "additionalDetailsHelp": "Additional Details Help",
-    "additionalDetailsTooltip": "For additional details, you can either take a screenshot of your screen or upload an image in .png or .jpeg format.",
-    "annotate": "Annotate",
-    "annotateScreenshot": "Annotate Screenshot",
-    "annotateImage": "Annotate Image"
+    "additionalDetailsTooltip": "For additional details, you can either take a screenshot of your screen or upload an image in .png or .jpeg format."
   }
 }

package/assets/localization/local_hy.json

@@ -2836,9 +2836,6 @@
   },
   "feedback": {
     "additionalDetailsHelp": "Լրացուցիչ մանրամասներ Օգնություն",
-    "additionalDetailsTooltip": "Լրացուցիչ մանրամասների համար կարող եք կամ լուսանկարել ձեր էկրանը կամ վերբեռնել պատկեր .png կամ .jpeg ձևաչափով:",
-    "annotate": "Նշում",
-    "annotateScreenshot": "Նշել սքրինշոթը",
-    "annotateImage": "Նշել պատկերը"
+    "additionalDetailsTooltip": "Լրացուցիչ մանրամասների համար կարող եք կամ լուսանկարել ձեր էկրանը կամ վերբեռնել պատկեր .png կամ .jpeg ձևաչափով:"
   }
 }

package/assets/localization/local_kk.json

@@ -2835,9 +2835,6 @@
   },
   "feedback": {
     "additionalDetailsHelp": "Қосымша мәліметтер анықтамасы",
-    "additionalDetailsTooltip": "Қосымша мәліметтер алу үшін экранның скриншотын түсіруге немесе суретті .png немесе .jpeg пішімінде жүктеп салуға болады.",
-    "annotate": "Аннотация жазу",
-    "annotateScreenshot": "Скриншотқа түсініктеме жазу",
-    "annotateImage": "Суретке түсініктеме жазу"
+    "additionalDetailsTooltip": "Қосымша мәліметтер алу үшін экранның скриншотын түсіруге немесе суретті .png немесе .jpeg пішімінде жүктеп салуға болады."
   }
 }

package/assets/localization/local_ru.json

@@ -2837,9 +2837,6 @@
   },
   "feedback": {
     "additionalDetailsHelp": "Дополнительная информация Помощь",
-    "additionalDetailsTooltip": "Для получения дополнительной информации вы можете сделать снимок экрана или загрузить изображение в формате .png или .jpeg.",
-    "annotate": "Аннотировать",
-    "annotateScreenshot": "Аннотировать снимок экрана",
-    "annotateImage": "Аннотировать изображение"
+    "additionalDetailsTooltip": "Для получения дополнительной информации вы можете сделать снимок экрана или загрузить изображение в формате .png или .jpeg."
   }
 }

package/assets/localization/local_zh.json

@@ -2834,9 +2834,6 @@
   },
   "feedback": {
     "additionalDetailsHelp": "其他详细信息帮助",
-    "additionalDetailsTooltip": "有关更多详细信息，您可以截取屏幕截图或上传 .png 或 .jpeg 格式的图像。",
-    "annotate": "注释",
-    "annotateScreenshot": "注释屏幕截图",
-    "annotateImage": "注释图像"
+    "additionalDetailsTooltip": "有关更多详细信息，您可以截取屏幕截图或上传 .png 或 .jpeg 格式的图像。"
   }
 }

package/components/common/layout/theHeader/feedback/Feedback.vue

@@ -96,7 +96,7 @@ const onHide = (): void => {
 const onSubmit = async (data: UI_I_FeedbackForm): Promise<void> => {
   onHide()
 
-  const sendForm: UI_I_FeedbackForm = isNewView.value ? feedbackForm.value : data
+  const sendForm: UI_I_FeedbackForm = isNewView ? feedbackForm.value : data
   const isValid = await handleRequest(sendForm)
 
   if (isValid) showNotification(msgSuccess.value)

package/components/common/layout/theHeader/feedback/lib/config/sendFeedback.ts

@@ -1,5 +1,4 @@
 import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
-// import type { UI_I_FeedbackCanvasOptions } from '~/components/common/layout/theHeader/feedback/new/lib/models/interfaces'
 export const feedbackDefaultFormFunc = (): UI_I_FeedbackForm => {
   return {
     description: '',
@@ -8,10 +7,3 @@ export const feedbackDefaultFormFunc = (): UI_I_FeedbackForm => {
     image: '', // base64
   }
 }
-
-// export const feedbackCanvasDefaultOptions = (): UI_I_FeedbackCanvasOptions => {
-//   return {
-//     isAnnotateImage: false,
-//     hasTakeScreenshot: false,
-//   }
-// }

package/components/common/layout/theHeader/feedback/new/New.vue

@@ -1,86 +1,78 @@
 <template>
   <Teleport to="body">
-    <div id="feedback-dialog">
-      <ui-modal
-        show
-        :width="!options.isAnnotateImage ? '560px' : '880px'"
-        test-id="feedback-modal"
-        :title="title"
-        class="feedback"
-        @hide="onHideModal"
-      >
-        <template #content>
-          <ui-modal-block-standard>
-            <template v-if="!options.isAnnotateImage">
-              <common-layout-the-header-feedback-new-subtitle />
-
-              <common-layout-the-header-feedback-new-tabs
-                v-model="selectedTab"
-                class="metrics-tabs"
-              />
-
-              <div
-                v-if="selectedTab === 'light-bulb'"
-                class="feedback__visit-portal"
-              >
-                {{ localization.common.useOurExternalIdeasPortal }}
-              </div>
-            </template>
-
-            <template v-if="selectedTab !== 'light-bulb'">
-              <template v-if="!options.isAnnotateImage">
-                <common-layout-the-header-feedback-new-description
-                  v-model="feedbackForm.description"
-                  v-model:is-valid="isValidForm"
-                  :selected-tab="selectedTab"
-                />
-
-                <common-layout-the-header-feedback-new-email
-                  v-model="feedbackForm.email"
-                />
-              </template>
-
-              <common-layout-the-header-feedback-new-additional-details
-                v-model="options"
-              />
-            </template>
-          </ui-modal-block-standard>
-        </template>
-
-        <template #footerLeftContent><span /></template>
-
-        <template #footerContent>
-          <div class="flex gap-4">
-            <ui-button
-              v-if="selectedTab !== 'light-bulb'"
-              test-id="feedback-modal-hide-btn"
-              size="md"
-              variant="outline"
-              min-width="96px"
-              @click="onHideModal"
-            >
-              {{ localization.common.cancel }}
-            </ui-button>
-            <ui-button
-              test-id="feedback-modal-submit-btn"
-              size="md"
-              :disabled="isDisabledButton"
-              min-width="96px"
-              @click="onSubmit"
-            >
-              <ui-icon
-                v-if="selectedTab === 'light-bulb'"
-                name="new-tab"
-                width="20"
-                height="20"
-                class="feedback__btn-icon"
-              />
-              {{ modalFooterButtonNames }}
-            </ui-button>
+    <ui-modal
+      show
+      width="560px"
+      test-id="feedback-modal"
+      :title="localization.common.sendFeedback"
+      class="feedback"
+      @hide="onHideModal"
+    >
+      <template #content>
+        <ui-modal-block-standard>
+          <common-layout-the-header-feedback-new-subtitle />
+
+          <common-layout-the-header-feedback-new-tabs
+            v-model="selectedTab"
+            class="metrics-tabs"
+          />
+
+          <div
+            v-if="selectedTab === 'light-bulb'"
+            class="feedback__visit-portal"
+          >
+            {{ localization.common.useOurExternalIdeasPortal }}
           </div>
-        </template>
-      </ui-modal>
-    </div>
+
+          <template v-else>
+            <common-layout-the-header-feedback-new-description
+              v-model="feedbackForm.description"
+              v-model:is-valid="isValidForm"
+              :selected-tab="selectedTab"
+            />
+
+            <common-layout-the-header-feedback-new-email
+              v-model="feedbackForm.email"
+            />
+
+            <common-layout-the-header-feedback-new-additional-details />
+          </template>
+        </ui-modal-block-standard>
+      </template>
+
+      <template #footerLeftContent><span /></template>
+
+      <template #footerContent>
+        <div class="flex gap-4">
+          <ui-button
+            v-if="selectedTab !== 'light-bulb'"
+            test-id="feedback-modal-hide-btn"
+            size="md"
+            variant="outline"
+            min-width="96px"
+            @click="onHideModal"
+          >
+            {{ localization.common.cancel }}
+          </ui-button>
+          <ui-button
+            test-id="feedback-modal-submit-btn"
+            size="md"
+            :disabled="!selectedTab"
+            min-width="96px"
+            @click="onSubmit"
+          >
+            <ui-icon
+              v-if="selectedTab === 'light-bulb'"
+              name="new-tab"
+              width="20"
+              height="20"
+              class="feedback__btn-icon"
+            />
+            {{ modalFooterButtonNames }}
+          </ui-button>
+        </div>
+      </template>
+    </ui-modal>
   </Teleport>
 </template>
 
@@ -88,8 +80,6 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
 import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
-import type { UI_I_FeedbackCanvasOptions } from '~/components/common/layout/theHeader/feedback/new/lib/models/interfaces'
-import { UI_E_FeedbackType } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/enums'
 
 const feedbackForm = defineModel<UI_I_FeedbackForm>({ required: true })
 const emits = defineEmits<{
@@ -99,47 +89,19 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const selectedTab = ref<UI_T_FeedbackTab>()
 const isValidForm = ref<boolean>(true)
-const options = ref<UI_I_FeedbackCanvasOptions>({
-  isAnnotateImage: false,
-  hasTakeScreenshot: false,
-})
-
-const title = computed<string>(() => {
-  const { common, feedback } = localization.value
-
-  return !options.value.isAnnotateImage
-    ? common.sendFeedback
-    : options.value.hasTakeScreenshot
-    ? feedback.annotateScreenshot
-    : feedback.annotateImage
-})
-const modalFooterButtonNames = computed<string>(() => {
-  const { visitIdeasPortal, send, save } = localization.value.common
-
-  return options.value.isAnnotateImage
-    ? save
-    : selectedTab.value === 'light-bulb'
-    ? visitIdeasPortal
-    : send
-})
+const selectedTab = ref<UI_T_FeedbackTab>()
 
-const isDisabledButton = computed<boolean>(() => {
-  return !options.value.isAnnotateImage && !selectedTab.value
+const modalFooterButtonNames = computed(() => {
+  return selectedTab.value === 'light-bulb'
+    ? localization.value.common.visitIdeasPortal
+    : localization.value.common.send
 })
 
 const onHideModal = (): void => {
-  !options.value.isAnnotateImage
-    ? emits('hide')
-    : (options.value.isAnnotateImage = false)
+  emits('hide')
 }
 const onSubmit = (): void => {
-  if (options.value.isAnnotateImage) {
-    options.value.isAnnotateImage = false
-    return
-  }
-
   if (selectedTab.value === 'light-bulb') {
     const targetUrl = 'https://customer.aobfg.ru/' // Ваш URL
     window.open(targetUrl, '_blank')
@@ -149,25 +111,24 @@ const onSubmit = (): void => {
   isValidForm.value = !!feedbackForm.value.description
 
   if (!isValidForm.value) return
-  const canvasData = (
-    document.getElementById('feedbackImg') as HTMLCanvasElement
-  ).toDataURL()
-  const canvasBlankData = (
-    document.getElementById('feedbackImgBlank') as HTMLCanvasElement
-  ).toDataURL()
-
-  const image = canvasData.match(/base64,(.+)/)?.[1] || ''
-  feedbackForm.value.image = canvasData === canvasBlankData ? '' : image
-  feedbackForm.value.type = UI_E_FeedbackType[selectedTab.value]
-
   emits('submit')
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+:root {
+  --description-color: #414b57;
+  --link-visited-color: #5659b8;
+}
+
+:root.dark-theme {
+  --description-color: #adbbc4;
+  --link-visited-color: #49afd9;
+}
+
 .feedback {
   &__visit-portal {
-    color: var(--feedback-text-color);
+    color: #4d5d69;
     font-size: 13px;
     font-weight: 400;
     line-height: 15.73px;
@@ -178,15 +139,3 @@ const onSubmit = (): void => {
   }
 }
 </style>
-<style lang="scss">
-:root {
-  --feedback-text-color: #4d5d69;
-  --feedback-tooltip-close-color: #213444;
-  --feedback-tab-active-bg-color: #008fd60f;
-}
-:root.dark-theme {
-  --feedback-text-color: #e9eaec;
-  --feedback-tooltip-close-color: #e9eaec;
-  --feedback-tab-active-bg-color: #2ba2de14;
-}
-</style>

package/components/common/layout/theHeader/feedback/new/additionalDetails/AdditionalDetails.vue

@@ -1,29 +1,14 @@
 <template>
   <div class="additional-details">
-    <template v-if="!optionsModel.isAnnotateImage">
-      <common-layout-the-header-feedback-new-additional-details-headline />
+    <common-layout-the-header-feedback-new-additional-details-headline />
 
-      <ui-alert
-        v-if="optionsModel.hasTakeScreenshot"
-        test-id="additional-details-info-alert"
-        :messages="[localization.common.screenshotQualityMayVary]"
-        type="info"
-        class="additional-details__alert"
-      ></ui-alert>
-    </template>
-
-    <div
-      v-if="!optionsModel.hasTakeScreenshot"
-      class="flex gap-4 button-container"
-    >
+    <div class="flex gap-4 button-container">
       <ui-button
         test-id="feedback-take-screenshot-btn"
         size="md"
-        type="default"
-        variant="outline"
+        type="grey"
         min-width="96px"
         class="take-screenshot"
-        @click="onTakeScreenshot"
       >
         <ui-icon
           name="take-screenshot"
@@ -37,8 +22,7 @@
       <ui-button
         test-id="feedback-upload-file-btn"
         size="md"
-        type="default"
-        variant="outline"
+        type="grey"
         min-width="96px"
         class="upload-image"
       >
@@ -57,410 +41,30 @@
           type="file"
           accept=".png, .jpeg"
           data-id="feedback-file-load-input"
-          @change="onUploadFile"
         />
       </ui-button>
     </div>
-
-    <div v-if="optionsModel.isAnnotateImage" class="drawer-btn-container">
-      <div>
-        <ui-button
-          test-id="feedback-use-red-marker-button"
-          size="sm"
-          type="default"
-          variant="outline"
-          class="btn marker"
-          :class="drawerMarker === 'marker' && 'active'"
-          @click="onUseRedMarker"
-        >
-          <ui-icon
-            name="marker"
-            width="16"
-            height="16"
-            class="feedback__btn-icon"
-          />
-          {{ localization.common.useRedMarker }}
-        </ui-button>
-
-        <ui-button
-          test-id="feedback-use-grey-marker-button"
-          size="sm"
-          type="default"
-          variant="outline"
-          class="btn eraser"
-          :class="drawerMarker === 'eraser' && 'active'"
-          @click="onUseGrayEraser"
-        >
-          <ui-icon
-            name="grey-eraser"
-            width="16"
-            height="16"
-            class="feedback__btn-icon"
-          />
-          {{ localization.common.useGrayEraser }}
-        </ui-button>
-        <div class="separator-line"></div>
-        <ui-button
-          test-id="feedback-undo-button"
-          size="sm"
-          type="default"
-          variant="outline"
-          class="btn undo"
-          :disabled="isDisabledButton"
-          @click="onUndoLast"
-        >
-          <ui-icon
-            name="reset"
-            width="16"
-            height="16"
-            class="feedback__btn-icon"
-          />
-          {{ localization.common.undo }}
-        </ui-button>
-      </div>
-
-      <ui-button
-        test-id="feedback-clear-all-button"
-        size="sm"
-        type="default"
-        variant="outline"
-        class="btn clear-all"
-        :disabled="isDisabledButton"
-        @click="clearAll"
-      >
-        <ui-icon
-          name="delete"
-          width="16"
-          height="16"
-          class="feedback__btn-icon"
-        />
-        {{ localization.common.clearAll }}
-      </ui-button>
-    </div>
-
-    <div
-      id="feedbackImgWrap"
-      ref="feedbackImgWrap"
-      class="preview-container"
-      :class="{
-        disabled: !optionsModel.hasTakeScreenshot,
-        annotate: optionsModel.isAnnotateImage,
-      }"
-    >
-      <div class="preview-container__backdrop">
-        <div>
-          <ui-button
-            test-id="feedback-image-annotate-btn"
-            size="md"
-            type="default"
-            variant="outline"
-            class=""
-            @click="onAnnotateImage"
-          >
-            <ui-icon
-              name="annotate-icon"
-              width="16"
-              height="16"
-              class="feedback__btn-icon"
-            />
-            {{ localization.feedback.annotate }}
-          </ui-button>
-
-          <ui-button
-            test-id="feedback-image-remove-btn"
-            size="md"
-            type="default"
-            variant="outline"
-            class=""
-            @click="onRemoveScreenshot"
-          >
-            <ui-icon
-              name="delete"
-              width="16"
-              height="16"
-              class="feedback__btn-icon"
-            />
-            {{ localization.common.remove }}
-          </ui-button>
-        </div>
-      </div>
-      <canvas
-        id="feedbackImg"
-        ref="feedbackImg"
-        class="preview-container__image"
-      ></canvas>
-      <canvas id="feedbackImgBlank" style="display: none"></canvas>
-    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import html2canvas from 'html2canvas'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_FeedbackCanvasOptions } from '~/components/common/layout/theHeader/feedback/new/lib/models/interfaces'
-
-const optionsModel = defineModel<UI_I_FeedbackCanvasOptions>({ required: true })
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-
-const drawerMarker = ref<'marker' | 'eraser' | null>(null)
-const isFileLoad = ref(null)
-const feedbackImgWrap = ref()
-const feedbackImg = ref()
-const memoryParentModalDialog = ref<string>('')
-const memoryParentMain = ref<string>('')
-
-let drawingArray: any = []
-const indexArray = ref<number>(0) // index of feedbackImg itself
-let isDrawing = false
-let startDrawingX: number | null = null
-let startDrawingY: number | null = null
-let drawColor = ''
-let drawWidth = ''
-
-const isDisabledButton = computed<boolean>(() => indexArray.value === 0)
-
-const onTakeScreenshot = (): void => {
-  optionsModel.value.hasTakeScreenshot = true
-
-  const feedbackDialog = document.getElementById('feedback-dialog')
-  if (!feedbackDialog) return
-
-  const display = feedbackDialog.style.display
-  feedbackDialog.style.display = 'none'
-  html2canvas(document.body).then(function (thisCanvas) {
-    feedbackDialog.style.display = display
-
-    const context = feedbackImg.value.getContext('2d')
-    feedbackImg.value.width = thisCanvas.width
-    feedbackImg.value.height = thisCanvas.height
-
-    feedbackImg.value.style.width = '500px'
-    feedbackImg.value.style.height =
-      thisCanvas.height / (thisCanvas.width / 500) + 'px'
-
-    context.drawImage(
-      thisCanvas,
-      0,
-      0,
-      feedbackImg.value.width,
-      feedbackImg.value.height
-    )
-    drawingArray.length = 0
-    indexArray.value = 0
-    drawingArray.push(
-      context.getImageData(
-        0,
-        0,
-        feedbackImg.value.width,
-        feedbackImg.value.height
-      )
-    )
-  })
-}
-const onUploadFile = (): void => {
-  optionsModel.value.hasTakeScreenshot = true
-  if (!isFileLoad.value) return
-
-  const isFileRead = new FileReader()
-  if (!isFileRead) return
-
-  isFileRead.readAsDataURL(isFileLoad.value.files[0])
-  isFileRead.onload = (): void => {
-    const img = new Image()
-    if (!feedbackImg.value) return
-
-    const context = feedbackImg.value.getContext('2d')
-    img.onload = (): void => {
-      feedbackImg.value.width = img.width
-      feedbackImg.value.height = img.height
-
-      updateFeedbackImageDimensions()
-
-      context.drawImage(img, 0, 0, img.width, img.height)
-      drawingArray.length = 0
-      indexArray.value = 0
-      drawingArray.push(
-        context.getImageData(
-          0,
-          0,
-          feedbackImg.value.width,
-          feedbackImg.value.height
-        )
-      )
-    }
-    img.src = isFileRead.result
-  }
-}
-
-const start = (event: MouseEvent): void => {
-  if (!drawColor) return
-  const context = feedbackImg.value.getContext('2d')
-  const canvasCoordinates = feedbackImg.value.getBoundingClientRect()
-  startDrawingX = event.pageX - canvasCoordinates.left
-  startDrawingY = event.pageY - canvasCoordinates.top
-  isDrawing = true
-  context.beginPath()
-  context.moveTo(
-    event.pageX - canvasCoordinates.left,
-    event.pageY - canvasCoordinates.top
-  )
-  event.preventDefault()
-}
-const draw = (event: MouseEvent): void => {
-  if (!drawColor) return
-  const context = feedbackImg.value.getContext('2d')
-  const canvasCoordinates = feedbackImg.value.getBoundingClientRect()
-  if (!isDrawing) return
-  context.lineTo(
-    event.pageX - canvasCoordinates.left,
-    event.pageY - canvasCoordinates.top
-  )
-  context.strokeStyle = drawColor
-  context.lineWidth = drawWidth
-  context.lineCap = 'round'
-  context.lineJoin = 'round'
-  context.stroke()
-  event.preventDefault()
-}
-
-const stop = (event: MouseEvent): void => {
-  if (!drawColor) return
-
-  const context = feedbackImg.value.getContext('2d')
-  const canvasCoordinates = feedbackImg.value.getBoundingClientRect()
-  if (!isDrawing) return
-
-  context.stroke()
-  context.closePath()
-  isDrawing = false
-  event.preventDefault()
-  if (
-    startDrawingX !== event.pageX - canvasCoordinates.left &&
-    startDrawingY !== event.pageY - canvasCoordinates.top
-  ) {
-    drawingArray.push(
-      context.getImageData(
-        0,
-        0,
-        feedbackImg.value.width,
-        feedbackImg.value.height
-      )
-    )
-    indexArray.value += 1
-  }
-}
-const onRemoveScreenshot = (): void => {
-  optionsModel.value.hasTakeScreenshot = false
-  const parentMain = document.getElementById('feedback-dialog')
-  const parentModalDialog = document.getElementById('feedback-modal-dialog-Id')
-  if (!parentMain || !parentModalDialog) return
-
-  parentMain.style.width = memoryParentMain.value
-  parentModalDialog.style.width = memoryParentModalDialog.value
-  const context = feedbackImg.value.getContext('2d')
-  context.fillStyle = 'green'
-  context.fillRect(0, 0, feedbackImg.value.width, feedbackImg.value.height)
-  feedbackImg.value.width = 0
-  feedbackImg.value.height = 0
-  feedbackImgWrap.value.style.width = 0 + 'px'
-  feedbackImgWrap.value.style.height = 0 + 'px'
-  // const value = {
-  //   width: memoryParentModalDialog.value,
-  // }
-  // emits('screen-shot', value)
-  clearAll()
-}
-const onUseRedMarker = (): void => {
-  drawerMarker.value = 'marker'
-  drawColor = '#f76945'
-  drawWidth = '5'
-}
-const onUseGrayEraser = (): void => {
-  drawerMarker.value = 'eraser'
-  drawColor = 'lightgray'
-  drawWidth = '14'
-}
-
-const onUndoLast = (): void => {
-  drawColor = ''
-  drawWidth = ''
-  drawerMarker.value = null
-  const context = feedbackImg.value.getContext('2d')
-  if (indexArray.value > 0) {
-    indexArray.value -= 1
-    drawingArray.pop()
-    context.putImageData(drawingArray[indexArray.value], 0, 0)
-  }
-}
-const clearAll = (): void => {
-  const context = feedbackImg.value.getContext('2d')
-  drawColor = ''
-  drawWidth = ''
-  drawerMarker.value = null
-  if (indexArray.value <= 0) return
-  while (indexArray.value > 0) {
-    drawingArray.pop()
-    indexArray.value -= 1
-    context.putImageData(drawingArray[indexArray.value], 0, 0)
-  }
-}
-
-onMounted(() => {
-  feedbackImg.value.addEventListener('touchstart', start, false)
-  feedbackImg.value.addEventListener('touchmove', draw, false)
-  feedbackImg.value.addEventListener('mousedown', start, false)
-  feedbackImg.value.addEventListener('mousemove', draw, false)
-  feedbackImg.value.addEventListener('touchend', stop, false)
-  feedbackImg.value.addEventListener('mouseup', stop, false)
-  feedbackImg.value.addEventListener('mouseout', stop, false)
-})
-
-onBeforeUnmount(() => {
-  onRemoveScreenshot()
-  feedbackImg.value.removeEventListener('touchstart', start, false)
-  feedbackImg.value.removeEventListener('touchmove', draw, false)
-  feedbackImg.value.removeEventListener('mousedown', start, false)
-  feedbackImg.value.removeEventListener('mousemove', draw, false)
-  feedbackImg.value.removeEventListener('touchend', stop, false)
-  feedbackImg.value.removeEventListener('mouseup', stop, false)
-  feedbackImg.value.removeEventListener('mouseout', stop, false)
-})
-const onAnnotateImage = (): void => {
-  feedbackImg.value.style.width = feedbackImg.value.width + 'px'
-  feedbackImg.value.style.height = feedbackImg.value.height + 'px'
-
-  optionsModel.value.isAnnotateImage = true
-}
-
-const updateFeedbackImageDimensions = (): void => {
-  if (feedbackImg.value) {
-    feedbackImg.value.style.width = '500px'
-    feedbackImg.value.style.height =
-      feedbackImg.value.height / (feedbackImg.value.width / 500) + 'px'
-  }
-}
-const resetDrawingState = (): void => {
-  drawingArray = [drawingArray.at(-1)]
-  indexArray.value = 0
-}
-
-watch(
-  optionsModel,
-  (newValue: UI_I_FeedbackCanvasOptions) => {
-    if (!newValue.isAnnotateImage) {
-      updateFeedbackImageDimensions()
-      resetDrawingState()
-    }
-  },
-  { deep: true, immediate: true }
-)
 </script>
 
 <style lang="scss" scoped>
 @import 'assets/scss/common/mixins.scss';
 .additional-details {
   .button-container {
+    margin-top: 16px;
+    .upload-image,
+    .take-screenshot {
+      color: #4d5d69;
+      gap: 8px;
+      border: 1px solid #e9ebed;
+    }
+
     .upload-image {
       label {
         @include flex($align: center, $just: center);
@@ -476,91 +80,5 @@ watch(
       }
     }
   }
-  .drawer-btn-container {
-    @include flex($align: center, $just: space-between);
-    margin-bottom: 12px;
-    & > div {
-      @include flex($align: center, $just: space-between);
-      gap: 15px;
-
-      .separator-line {
-        width: 1px;
-        height: 24px;
-        background: #e9ebed;
-        margin: 0;
-      }
-    }
-
-    .ui-btn {
-      width: initial;
-
-      &.clear-all {
-        color: #ea3223;
-      }
-
-      &.active {
-        background: var(--feedback-tab-active-bg-color);
-        color: var(--feedback-tab-active-text-color);
-        border: 1.4px solid var(--feedback-tab-active-text-color);
-      }
-    }
-  }
-
-  &__alert {
-    margin-bottom: 16px;
-  }
-}
-.preview-container {
-  width: 500px;
-  height: 280px;
-  position: relative;
-  &.annotate {
-    width: 100%;
-    height: 460px;
-    overflow: auto;
-  }
-  &.disabled {
-    display: none;
-  }
-
-  &__backdrop {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(27, 42, 55, 0.32);
-    backdrop-filter: blur(1.5px);
-    border-radius: 8px;
-    transition: opacity 0.3s ease;
-    opacity: 0;
-
-    & > div {
-      @include flex($align: center);
-      gap: 12px;
-      .ui-btn {
-        width: initial;
-
-        &:last-child {
-          color: #ea3223;
-        }
-      }
-    }
-  }
-
-  &__image {
-    width: inherit;
-    height: inherit;
-    border-radius: 8px;
-    .disabled & {
-      display: none;
-    }
-  }
-
-  &:hover:not(&.annotate) &__backdrop {
-    @include flex($align: center, $just: center);
-    opacity: 1;
-  }
 }
 </style>

package/components/common/layout/theHeader/feedback/new/additionalDetails/Headline.vue

@@ -18,7 +18,7 @@
       :elem-id="'feedback-additional-details-info-icon'"
     >
       <div class="common-widget-info">
-        <div class="justify-between flex-align-center">
+        <div class="headline justify-between flex-align-center">
           <div class="flex-align-center">
             <ui-icon-icon3 name="info-2" width="16px" height="16px" />
             <span class="title">
@@ -54,34 +54,31 @@ const isShowInfo = ref<boolean>(false)
 @import 'assets/scss/common/mixins.scss';
 .headline {
   @include flex($align: center);
-  margin: 32px 0 16px;
+  margin-top: 16px;
   &__label {
-    line-height: 19.36px;
+    line-height: 38px;
     font-size: 16px;
     font-weight: 500;
-    color: var(--feedback-text-color);
+    color: #4d5d69;
     margin-right: 8px;
   }
   .common-widget-info {
     padding: 16px;
+
     .title {
       font-size: 14px;
       font-weight: 500;
       line-height: 16.94px;
-      color: var(--feedback-text-color);
+      color: var(--zabbix-text-color);
       margin-left: 8px;
     }
 
     .common-widget-info-description {
       font-size: 13px;
       line-height: 15.73px;
-      color: var(--feedback-text-color);
+      color: var(--zabbix-text-color);
       margin-top: 12px;
     }
-
-    svg {
-      color: var(--feedback-tooltip-close-color);
-    }
   }
 }
 </style>

package/components/common/layout/theHeader/feedback/new/description/Description.vue

@@ -44,11 +44,11 @@ const descriptionErrorText = computed<boolean>(() => {
 .description {
   margin-top: 32px;
   &__title {
-    line-height: 19.36px;
+    line-height: 38px;
     margin-bottom: 16px;
     font-size: 16px;
     font-weight: 500;
-    color: var(--feedback-text-color);
+    color: #4d5d69;
   }
   :deep(.ui-main-textarea) {
     resize: none;

package/components/common/layout/theHeader/feedback/new/email/Email.vue

@@ -33,11 +33,11 @@ const emailErrorText = computed<string>(() => {
 .email {
   margin-top: 32px;
   &__title {
-    line-height: 19.36px;
+    line-height: 38px;
     margin-bottom: 16px;
     font-size: 16px;
     font-weight: 500;
-    color: var(--feedback-text-color);
+    color: #4d5d69;
   }
 }
 </style>

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

@@ -63,24 +63,21 @@ const isShowInfo = ref<boolean>(false)
   }
   .common-widget-info {
     padding: 16px;
+
     .title {
       font-size: 14px;
       font-weight: 500;
       line-height: 16.94px;
-      color: var(--feedback-text-color);
+      color: var(--zabbix-text-color);
       margin-left: 8px;
     }
 
     .common-widget-info-description {
       font-size: 13px;
       line-height: 15.73px;
-      color: var(--feedback-text-color);
+      color: var(--zabbix-text-color);
       margin-top: 12px;
     }
-
-    svg {
-      color: var(--feedback-tooltip-close-color);
-    }
   }
 }
 </style>

package/components/common/layout/theHeader/feedback/new/tabs/Tabs.vue

@@ -20,12 +20,13 @@
 
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+import type { T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+// import type { I_Metric } from '~/components/layout/new/tabs/lib/models/interfaces'
 import { tabsFunc } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/config/tabs'
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const selectedTab = defineModel<UI_T_FeedbackTab>({ required: true })
+const selectedTab = defineModel<T_FeedbackTab>({ required: true })
 const tabs = computed<any[]>(() =>
   tabsFunc(localization.value, selectedTab.value)
 )
@@ -39,7 +40,7 @@ const tabs = computed<any[]>(() =>
     margin-bottom: 16px;
     font-size: 16px;
     font-weight: 500;
-    color: var(--feedback-text-color);
+    color: #4d5d69;
   }
   &__container {
     display: flex;
@@ -49,21 +50,17 @@ const tabs = computed<any[]>(() =>
   :deep(.block) {
     width: max-content;
     padding: 10px 12px;
-    color: var(--feedback-text-color);
-    background: var(--feedback-tab-bg-color);
-    border: 1px solid var(--feedback-tab-border-color);
-    box-shadow: none;
+    color: #4d5d69;
     cursor: pointer;
   }
-
   :deep(.block.selected) {
-    border: 1.5px solid var(--feedback-tab-active-text-color);
-    color: var(--feedback-tab-active-text-color);
+    border: 1.5px solid #008fd6;
+    color: #008fd6;
     cursor: default;
 
     .main-info,
     .main-info-label {
-      color: var(--feedback-tab-active-text-color);
+      color: #008fd6;
     }
   }
 
@@ -80,16 +77,3 @@ const tabs = computed<any[]>(() =>
   }
 }
 </style>
-<style lang="scss">
-:root {
-  --feedback-tab-bg-color: #ffffff;
-  --feedback-tab-border-color: #e9ebed;
-  --feedback-tab-active-text-color: #008fd6;
-}
-
-:root.dark-theme {
-  --feedback-tab-bg-color: #1b2a373d;
-  --feedback-tab-border-color: #e9ebed1f;
-  --feedback-tab-active-text-color: #2ba2de;
-}
-</style>

package/components/common/layout/theHeader/feedback/new/tabs/lib/config/tabs.ts

@@ -1,9 +1,9 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+import type { T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
 
 export const tabsFunc = (
   localization: UI_I_Localization,
-  selectedTab: UI_T_FeedbackTab
+  selectedTab: T_FeedbackTab
 ): any[] => {
   return [
     {

package/components/common/layout/theHeader/feedback/new/tabs/lib/models/interfaces.ts

@@ -0,0 +1,17 @@
+import type {
+  T_MetricTab
+} from '~/components/common/pages/integration/zabbix/content/hosts/details/metrics/lib/models/types'
+
+export interface I_Metric {
+  iconName: T_MetricTab
+  label: string
+  isSelected: boolean
+  on: {
+    label: string
+    color: '#239332' | '#BDC3C7'
+  }
+  off: {
+    label: string
+    color: '#EA3223' | '#BDC3C7'
+  }
+}

package/components/common/pages/home/resource/Resource.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="home-resource">
+    <common-pages-home-resource-new
+      v-if="isNewView"
+    ></common-pages-home-resource-new>
+
+    <common-pages-home-resource-old
+      v-else
+      :items="props.items"
+    ></common-pages-home-resource-old>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  UI_I_ResourceMeter,
+  UI_I_MeterBlockItem,
+} from '~/components/common/home/lib/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_ResourceMeter<UI_I_MeterBlockItem>[]
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/pages/home/resource/ResourceNew.vue

@@ -0,0 +1,10 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/components/common/{home/ResourceBlock.vue → pages/home/resource/ResourceOld.vue}

@@ -21,8 +21,10 @@
                 :value="item.used.value"
               />
               <div class="capacity-entity-used">
-                {{ item.used.text }} {{ localization.common.used?.toLowerCase() }} |
-                {{ item.capacity.text }} {{ localization.common.total?.toLowerCase() }}
+                {{ item.used.text }}
+                {{ localization.common.used?.toLowerCase() }} |
+                {{ item.capacity.text }}
+                {{ localization.common.total?.toLowerCase() }}
               </div>
             </div>
           </div>

package/package.json

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

package/components/common/layout/theHeader/feedback/new/lib/models/interfaces.ts

@@ -1,4 +0,0 @@
-export interface UI_I_FeedbackCanvasOptions {
-  isAnnotateImage: boolean
-  hasTakeScreenshot: boolean
-}

package/components/common/layout/theHeader/feedback/new/tabs/lib/models/enums.ts

@@ -1,6 +0,0 @@
-export enum UI_E_FeedbackType {
-  'warning-outline',
-  'heart-outline',
-  WARNING,
-  'light-bulb',
-}