bfg-common 1.4.361 → 1.4.363

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- export type UI_T_BlocksWidth = [number, number, number]
1
+ export type UI_T_BlocksWidth = [number, number, number]
@@ -1,5 +1,5 @@
1
- export interface UI_I_FileInfo {
2
- type: string
3
- title: string
4
- value: string | number
5
- }
1
+ export interface UI_I_FileInfo {
2
+ type: string
3
+ title: string
4
+ value: string | number
5
+ }
@@ -123,9 +123,9 @@
123
123
  <span class="text"></span>
124
124
  <div>
125
125
  <div class="btn btn-sm loadFile">
126
- <label id="labelFileLoad" for="fileLoad">{{
127
- localization.common.uploadImage
128
- }}</label>
126
+ <label id="labelFileLoad" for="fileLoad">
127
+ {{ localization.common.uploadImage }}
128
+ </label>
129
129
  <input
130
130
  id="fileLoad"
131
131
  ref="isFileLoad"
@@ -61,6 +61,13 @@
61
61
  min-width="96px"
62
62
  @click="onSubmit"
63
63
  >
64
+ <ui-icon
65
+ v-if="selectedTab === 'light-bulb'"
66
+ name="new-tab"
67
+ width="20"
68
+ height="20"
69
+ class="feedback__btn-icon"
70
+ />
64
71
  {{ modalFooterButtonNames }}
65
72
  </ui-button>
66
73
  </div>
@@ -127,5 +134,8 @@ const onSubmit = (): void => {
127
134
  line-height: 15.73px;
128
135
  margin-top: 24px;
129
136
  }
137
+ &__btn-icon {
138
+ margin-right: 5px;
139
+ }
130
140
  }
131
141
  </style>
@@ -1,14 +1,84 @@
1
1
  <template>
2
2
  <div class="additional-details">
3
+ <common-layout-the-header-feedback-new-additional-details-headline />
3
4
 
5
+ <div class="flex gap-4 button-container">
6
+ <ui-button
7
+ test-id="feedback-take-screenshot-btn"
8
+ size="md"
9
+ type="grey"
10
+ min-width="96px"
11
+ class="take-screenshot"
12
+ >
13
+ <ui-icon
14
+ name="take-screenshot"
15
+ width="20"
16
+ height="20"
17
+ class="feedback__btn-icon"
18
+ />
19
+ {{ localization.common.takeScreenshot }}
20
+ </ui-button>
21
+
22
+ <ui-button
23
+ test-id="feedback-upload-file-btn"
24
+ size="md"
25
+ type="grey"
26
+ min-width="96px"
27
+ class="upload-image"
28
+ >
29
+ <label id="labelFileLoad" for="fileLoad">
30
+ <ui-icon
31
+ name="upload-icon"
32
+ width="20"
33
+ height="20"
34
+ class="feedback__btn-icon"
35
+ />
36
+ {{ localization.common.uploadImage }}
37
+ </label>
38
+ <input
39
+ id="fileLoad"
40
+ ref="isFileLoad"
41
+ type="file"
42
+ accept=".png, .jpeg"
43
+ data-id="feedback-file-load-input"
44
+ />
45
+ </ui-button>
46
+ </div>
4
47
  </div>
5
48
  </template>
6
49
 
7
50
  <script lang="ts" setup>
51
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
52
+
53
+ const localization = computed<UI_I_Localization>(() => useLocal())
8
54
  </script>
9
55
 
10
56
  <style lang="scss" scoped>
57
+ @import 'assets/scss/common/mixins.scss';
11
58
  .additional-details {
59
+ .button-container {
60
+ margin-top: 16px;
61
+ .upload-image,
62
+ .take-screenshot {
63
+ color: #4d5d69;
64
+ gap: 8px;
65
+ border: 1px solid #e9ebed;
66
+ }
12
67
 
68
+ .upload-image {
69
+ label {
70
+ @include flex($align: center, $just: center);
71
+ width: 100%;
72
+ height: 100%;
73
+ font-size: 14px;
74
+ color: inherit;
75
+ font-weight: 500;
76
+ cursor: pointer;
77
+ }
78
+ input {
79
+ display: none;
80
+ }
81
+ }
82
+ }
13
83
  }
14
84
  </style>
@@ -0,0 +1,84 @@
1
+ <template>
2
+ <div class="headline">
3
+ <span class="headline__label">
4
+ {{ localization.common.additionalDetails }}
5
+ </span>
6
+ <ui-icon
7
+ id="feedback-additional-details-info-icon"
8
+ name="info"
9
+ width="18"
10
+ height="18"
11
+ :color="isShowInfo ? '#008FD6' : '#9DA6AD'"
12
+ class="info-icon pointer"
13
+ @click="isShowInfo = !isShowInfo"
14
+ />
15
+ <ui-popup-window
16
+ v-model="isShowInfo"
17
+ width="232px"
18
+ :elem-id="'feedback-additional-details-info-icon'"
19
+ >
20
+ <div class="common-widget-info">
21
+ <div class="headline justify-between flex-align-center">
22
+ <div class="flex-align-center">
23
+ <ui-icon-icon3 name="info-2" width="16px" height="16px" />
24
+ <span class="title">
25
+ {{ localization.feedback.additionalDetailsHelp }}
26
+ </span>
27
+ </div>
28
+ <ui-icon
29
+ name="close"
30
+ class="pointer hide-icon"
31
+ width="16px"
32
+ height="16px"
33
+ @click="isShowInfo = false"
34
+ />
35
+ </div>
36
+
37
+ <div class="common-widget-info-description">
38
+ {{ localization.feedback.additionalDetailsTooltip }}
39
+ </div>
40
+ </div>
41
+ </ui-popup-window>
42
+ </div>
43
+ </template>
44
+
45
+ <script lang="ts" setup>
46
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
47
+
48
+ const localization = computed<UI_I_Localization>(() => useLocal())
49
+
50
+ const isShowInfo = ref<boolean>(false)
51
+ </script>
52
+
53
+ <style lang="scss" scoped>
54
+ @import 'assets/scss/common/mixins.scss';
55
+ .headline {
56
+ @include flex($align: center);
57
+ margin-top: 16px;
58
+ &__label {
59
+ line-height: 38px;
60
+ font-size: 16px;
61
+ font-weight: 500;
62
+ color: #4d5d69;
63
+ margin-right: 8px;
64
+ }
65
+ .common-widget-info {
66
+ padding: 16px;
67
+
68
+ .title {
69
+ font-size: 14px;
70
+ font-weight: 500;
71
+ line-height: 16.94px;
72
+ color: var(--zabbix-text-color);
73
+ margin-left: 8px;
74
+ }
75
+
76
+ .common-widget-info-description {
77
+ font-size: 13px;
78
+ line-height: 15.73px;
79
+ color: var(--zabbix-text-color);
80
+ margin-top: 12px;
81
+ }
82
+ }
83
+ }
84
+ </style>