bfg-common 1.3.479 → 1.3.481

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.
Files changed (3) hide show
  1. package/assets/scss/common/icons/icons-8.scss +112 -112
  2. package/components/common/layout/theHeader/userMenu/modals/preferences/View.vue +125 -113
  3. package/package.json +1 -1
package/assets/scss/common/icons/icons-8.scss CHANGED
@@ -1,152 +1,152 @@
1
1
  /* _____BACKGROUND POSITION_____ */
2
- .host-disconnected {
2
+ .icon-host-disconnected {
3
3
  background-position: 0 0;
4
4
  }
5
- .send-feedback {
5
+ .icon-send-feedback {
6
6
  background-position: 0 3.7%;
7
7
  }
8
- .password {
8
+ .icon-password {
9
9
  background-position: 0 7.5%;
10
10
  }
11
- .log-out {
11
+ .icon-log-out {
12
12
  background-position: 0 11.2%;
13
13
  }
14
- .hybrid-cloud-services {
14
+ .icon-hybrid-cloud-services {
15
15
  background-position: 0 14.9%;
16
16
  }
17
- .access-log {
17
+ .icon-access-log {
18
18
  background-position: 0 18.6%;
19
19
  }
20
- .logs {
20
+ .icon-logs {
21
21
  background-position: 0 22.4%;
22
22
  }
23
- .lifecycle-manager {
23
+ .icon-lifecycle-manager {
24
24
  background-position: 0 26%;
25
25
  }
26
- .realize-operations {
26
+ .icon-realize-operations {
27
27
  background-position: 0 29.7%;
28
28
  }
29
- .virtual-machines {
29
+ .icon-virtual-machines {
30
30
  background-position: 0 33.4%;
31
31
  }
32
- .connection {
32
+ .icon-connection {
33
33
  background-position: 0 37.2%;
34
34
  }
35
- .certificate-renew {
35
+ .icon-certificate-renew {
36
36
  background-position: 0 40.9%;
37
37
  }
38
- .power {
38
+ .icon-power {
39
39
  background-position: 0 44.5%;
40
40
  }
41
- .web-terminal {
41
+ .icon-web-terminal {
42
42
  background-position: 0 48.2%;
43
43
  }
44
- .move {
44
+ .icon-move {
45
45
  background-position: 0 51.9%;
46
46
  }
47
- .settings {
47
+ .icon-settings {
48
48
  background-position: 0 55.6%;
49
49
  }
50
- .remove {
50
+ .icon-remove {
51
51
  background-position: 0 59.3%;
52
52
  }
53
- .backup-storage {
53
+ .icon-backup-storage {
54
54
  background-position: 0 62.9%;
55
55
  }
56
- .backup-storage-error {
56
+ .icon-backup-storage-error {
57
57
  background-position: 0 66.7%;
58
58
  }
59
- .backup-storage-warning {
59
+ .icon-backup-storage-warning {
60
60
  background-position: 0 70.4%;
61
61
  }
62
- .backup-storage-maintenance {
62
+ .icon-backup-storage-maintenance {
63
63
  background-position: 0 74.1%;
64
64
  }
65
- .backup-storage-inaccessible {
65
+ .icon-backup-storage-inaccessible {
66
66
  background-position: 0 77.8%;
67
67
  }
68
- .backup-storage-connected {
68
+ .icon-backup-storage-connected {
69
69
  background-position: 0 81.4%;
70
70
  }
71
- .backup-storage-disconnected {
71
+ .icon-backup-storage-disconnected {
72
72
  background-position: 0 85.2%;
73
73
  }
74
- .backup-bucket {
74
+ .icon-backup-bucket {
75
75
  background-position: 0 88.9%;
76
76
  }
77
- .backup-bucket-ok {
77
+ .icon-backup-bucket-ok {
78
78
  background-position: 0 92.6%;
79
79
  }
80
- .backup-bucket-warning {
80
+ .icon-backup-bucket-warning {
81
81
  background-position: 0 96.3%;
82
82
  }
83
- .backup-bucket-error {
83
+ .icon-backup-bucket-error {
84
84
  background-position: 0 100%;
85
85
  }
86
86
 
87
87
  /* _____BACKGROUND IMAGE_____ */
88
- .host-disconnected,
89
- .send-feedback,
90
- .password,
91
- .log-out,
92
- .hybrid-cloud-services,
93
- .access-log,
94
- .logs,
95
- .lifecycle-manager,
96
- .realize-operations,
97
- .virtual-machines,
98
- .connection,
99
- .certificate-renew,
100
- .power,
101
- .web-terminal,
102
- .move,
103
- .settings,
104
- .remove,
105
- .backup-storage,
106
- .backup-storage-error,
107
- .backup-storage-warning,
108
- .backup-storage-maintenance,
109
- .backup-storage-inaccessible,
110
- .backup-storage-connected,
111
- .backup-storage-disconnected,
112
- .backup-bucket,
113
- .backup-bucket-ok,
114
- .backup-bucket-warning,
115
- .backup-bucket-error {
88
+ .icon-host-disconnected,
89
+ .icon-send-feedback,
90
+ .icon-password,
91
+ .icon-log-out,
92
+ .icon-hybrid-cloud-services,
93
+ .icon-access-log,
94
+ .icon-logs,
95
+ .icon-lifecycle-manager,
96
+ .icon-realize-operations,
97
+ .icon-virtual-machines,
98
+ .icon-connection,
99
+ .icon-certificate-renew,
100
+ .icon-power,
101
+ .icon-web-terminal,
102
+ .icon-move,
103
+ .icon-settings,
104
+ .icon-remove,
105
+ .icon-backup-storage,
106
+ .icon-backup-storage-error,
107
+ .icon-backup-storage-warning,
108
+ .icon-backup-storage-maintenance,
109
+ .icon-backup-storage-inaccessible,
110
+ .icon-backup-storage-connected,
111
+ .icon-backup-storage-disconnected,
112
+ .icon-backup-bucket,
113
+ .icon-backup-bucket-ok,
114
+ .icon-backup-bucket-warning,
115
+ .icon-backup-bucket-error {
116
116
  background-image: url('../img/icons/icons-sprite-light-8.svg');
117
117
 
118
118
  html.dark-theme & {
119
119
  background-image: url('../img/icons/icons-sprite-dark-8.svg');
120
120
  }
121
121
  }
122
- .active .host-disconnected,
123
- .active .send-feedback,
124
- .active .password,
125
- .active .log-out,
126
- .active .hybrid-cloud-services,
127
- .active .access-log,
128
- .active .logs,
129
- .active .lifecycle-manager,
130
- .active .realize-operations,
131
- .active .virtual-machines,
132
- .active .connection,
133
- .active .certificate-renew,
134
- .active .power,
135
- .active .web-terminal,
136
- .active .move,
137
- .active .settings,
138
- .active .remove,
139
- .active .backup-storage,
140
- .active .backup-storage-error,
141
- .active .backup-storage-warning,
142
- .active .backup-storage-maintenance,
143
- .active .backup-storage-inaccessible,
144
- .active .backup-storage-connected,
145
- .active .backup-storage-disconnected,
146
- .active .backup-bucket,
147
- .active .backup-bucket-ok,
148
- .active .backup-bucket-warning,
149
- .active .backup-bucket-error {
122
+ .active .icon-host-disconnected,
123
+ .active .icon-send-feedback,
124
+ .active .icon-password,
125
+ .active .icon-log-out,
126
+ .active .icon-hybrid-cloud-services,
127
+ .active .icon-access-log,
128
+ .active .icon-logs,
129
+ .active .icon-lifecycle-manager,
130
+ .active .icon-realize-operations,
131
+ .active .icon-virtual-machines,
132
+ .active .icon-connection,
133
+ .active .icon-certificate-renew,
134
+ .active .icon-power,
135
+ .active .icon-web-terminal,
136
+ .active .icon-move,
137
+ .active .icon-settings,
138
+ .active .icon-remove,
139
+ .active .icon-backup-storage,
140
+ .active .icon-backup-storage-error,
141
+ .active .icon-backup-storage-warning,
142
+ .active .icon-backup-storage-maintenance,
143
+ .active .icon-backup-storage-inaccessible,
144
+ .active .icon-backup-storage-connected,
145
+ .active .icon-backup-storage-disconnected,
146
+ .active .icon-backup-bucket,
147
+ .active .icon-backup-bucket-ok,
148
+ .active .icon-backup-bucket-warning,
149
+ .active .icon-backup-bucket-error {
150
150
  background-image: url('../img/icons/icons-sprite-dark-8.svg');
151
151
 
152
152
  html.dark-theme & {
@@ -155,34 +155,34 @@
155
155
  }
156
156
 
157
157
  /* _____ICONS COMMON STYLES_____ */
158
- .host-disconnected,
159
- .send-feedback,
160
- .password,
161
- .log-out,
162
- .hybrid-cloud-services,
163
- .access-log,
164
- .logs,
165
- .lifecycle-manager,
166
- .realize-operations,
167
- .virtual-machines,
168
- .connection,
169
- .certificate-renew,
170
- .power,
171
- .web-terminal,
172
- .move,
173
- .settings,
174
- .remove,
175
- .backup-storage,
176
- .backup-storage-error,
177
- .backup-storage-warning,
178
- .backup-storage-maintenance,
179
- .backup-storage-inaccessible,
180
- .backup-storage-connected,
181
- .backup-storage-disconnected,
182
- .backup-bucket,
183
- .backup-bucket-ok,
184
- .backup-bucket-warning,
185
- .backup-bucket-error {
158
+ .icon-host-disconnected,
159
+ .icon-send-feedback,
160
+ .icon-password,
161
+ .icon-log-out,
162
+ .icon-hybrid-cloud-services,
163
+ .icon-access-log,
164
+ .icon-logs,
165
+ .icon-lifecycle-manager,
166
+ .icon-realize-operations,
167
+ .icon-virtual-machines,
168
+ .icon-connection,
169
+ .icon-certificate-renew,
170
+ .icon-power,
171
+ .icon-web-terminal,
172
+ .icon-move,
173
+ .icon-settings,
174
+ .icon-remove,
175
+ .icon-backup-storage,
176
+ .icon-backup-storage-error,
177
+ .icon-backup-storage-warning,
178
+ .icon-backup-storage-maintenance,
179
+ .icon-backup-storage-inaccessible,
180
+ .icon-backup-storage-connected,
181
+ .icon-backup-storage-disconnected,
182
+ .icon-backup-bucket,
183
+ .icon-backup-bucket-ok,
184
+ .icon-backup-bucket-warning,
185
+ .icon-backup-bucket-error {
186
186
  width: 18px;
187
187
  min-width: 18px;
188
188
  height: 18px;
package/components/common/layout/theHeader/userMenu/modals/preferences/View.vue CHANGED
@@ -1,113 +1,125 @@
1
- <template>
2
- <form id="view-form" class="compact">
3
- <div class="description">
4
- {{ description }}
5
- </div>
6
-
7
- <div class="flex-align-center">
8
- <label for="view">{{ localization.newView }}</label>
9
- <input
10
- id="view"
11
- v-model="isNewViewLocal"
12
- type="checkbox"
13
- class="switch"
14
- @change="onChange"
15
- />
16
- </div>
17
- </form>
18
- </template>
19
-
20
- <script setup lang="ts">
21
- import type { UI_I_Localization } from '~/lib/models/interfaces'
22
-
23
- const props = defineProps<{
24
- isNewView: boolean
25
- }>()
26
-
27
- const isNewViewLocal = ref<boolean>(props.isNewView)
28
-
29
- const emits = defineEmits<{
30
- (event: 'update', value: boolean): void
31
- }>()
32
-
33
- const config = useRuntimeConfig()
34
-
35
- const localization = computed<UI_I_Localization>(() => useLocal())
36
-
37
- const description = computed<string>(() => {
38
- return localization.value.viewDesc.replaceAll(
39
- '{trademark}',
40
- String(config.public[`TRADEMARK_${useEnvLanguage()}`])
41
- )
42
- })
43
-
44
- const onChange = (): void => {
45
- emits('update', isNewViewLocal.value)
46
- }
47
- </script>
48
-
49
- <style lang="scss" scoped>
50
- .description {
51
- margin-bottom: 10px;
52
- }
53
-
54
- label {
55
- margin-right: 6px;
56
- }
57
-
58
- input[type='checkbox'] {
59
- --active: var(--checkbox-value-active-color);
60
- --active-inner: var(--checkbox-mark-color);
61
- --border: var(--checkbox-mark-color);
62
- --background: var(--checkbox-mark-background-color);
63
- -webkit-appearance: none;
64
- -moz-appearance: none;
65
- height: 20px;
66
- outline: none;
67
- display: inline-block;
68
- vertical-align: top;
69
- position: relative;
70
- margin: 0;
71
- cursor: pointer;
72
- border: 1px solid var(--bc, var(--border));
73
- background: var(--b, var(--background));
74
- transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
75
- &:after {
76
- content: '';
77
- display: block;
78
- left: 0;
79
- top: 0;
80
- position: absolute;
81
- transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
82
- opacity var(--d-o, 0.2s);
83
- }
84
- &:checked {
85
- --b: var(--active);
86
- --bc: var(--active);
87
- --d-o: 0.3s;
88
- --d-t: 0.6s;
89
- --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
90
- }
91
- }
92
- input[type='checkbox'] {
93
- &.switch {
94
- width: 35px;
95
- border-radius: 11px;
96
- &:after {
97
- left: 2px;
98
- top: 2px;
99
- bottom: 2px;
100
- border-radius: 50%;
101
- width: 14px;
102
- height: 14px;
103
- border: 1px solid var(--bc, var(--border));
104
- background: var(--ab, var(--border));
105
- transform: translateX(var(--x, 0));
106
- }
107
- &:checked {
108
- --ab: var(--active-inner);
109
- --x: 14px;
110
- }
111
- }
112
- }
113
- </style>
1
+ <template>
2
+ <form id="view-form" class="compact">
3
+ <div class="description">
4
+ {{ description }}
5
+ </div>
6
+
7
+ <div class="flex-align-center">
8
+ <label for="view">{{ localization.newView }}</label>
9
+ <input
10
+ id="view"
11
+ v-model="isNewViewLocal"
12
+ type="checkbox"
13
+ class="switch"
14
+ :disabled="isDisabled"
15
+ @change="onChange"
16
+ />
17
+ </div>
18
+ </form>
19
+ </template>
20
+
21
+ <script setup lang="ts">
22
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
23
+
24
+ const props = defineProps<{
25
+ isNewView: boolean
26
+ }>()
27
+
28
+ const isNewViewLocal = ref<boolean>(props.isNewView)
29
+
30
+ const emits = defineEmits<{
31
+ (event: 'update', value: boolean): void
32
+ }>()
33
+
34
+ const config = useRuntimeConfig()
35
+
36
+ const localization = computed<UI_I_Localization>(() => useLocal())
37
+
38
+ const description = computed<string>(() => {
39
+ return localization.value.viewDesc.replaceAll(
40
+ '{trademark}',
41
+ String(config.public[`TRADEMARK_${useEnvLanguage()}`])
42
+ )
43
+ })
44
+
45
+ const onChange = (): void => {
46
+ emits('update', isNewViewLocal.value)
47
+ }
48
+ const isDisabled = ref<boolean>(true)
49
+ // @ts-ignore
50
+ window.tools = new Proxy(
51
+ {},
52
+ {
53
+ set: function (_obj, prop, value): boolean {
54
+ if (prop === 'isDev') isDisabled.value = !value
55
+ return true
56
+ },
57
+ }
58
+ )
59
+ </script>
60
+
61
+ <style lang="scss" scoped>
62
+ .description {
63
+ margin-bottom: 10px;
64
+ }
65
+
66
+ label {
67
+ margin-right: 6px;
68
+ }
69
+
70
+ input[type='checkbox'] {
71
+ --active: var(--checkbox-value-active-color);
72
+ --active-inner: var(--checkbox-mark-color);
73
+ --border: var(--checkbox-mark-color);
74
+ --background: var(--checkbox-mark-background-color);
75
+ -webkit-appearance: none;
76
+ -moz-appearance: none;
77
+ height: 20px;
78
+ outline: none;
79
+ display: inline-block;
80
+ vertical-align: top;
81
+ position: relative;
82
+ margin: 0;
83
+ cursor: pointer;
84
+ border: 1px solid var(--bc, var(--border));
85
+ background: var(--b, var(--background));
86
+ transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
87
+ &:after {
88
+ content: '';
89
+ display: block;
90
+ left: 0;
91
+ top: 0;
92
+ position: absolute;
93
+ transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
94
+ opacity var(--d-o, 0.2s);
95
+ }
96
+ &:checked {
97
+ --b: var(--active);
98
+ --bc: var(--active);
99
+ --d-o: 0.3s;
100
+ --d-t: 0.6s;
101
+ --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
102
+ }
103
+ }
104
+ input[type='checkbox'] {
105
+ &.switch {
106
+ width: 35px;
107
+ border-radius: 11px;
108
+ &:after {
109
+ left: 2px;
110
+ top: 2px;
111
+ bottom: 2px;
112
+ border-radius: 50%;
113
+ width: 14px;
114
+ height: 14px;
115
+ border: 1px solid var(--bc, var(--border));
116
+ background: var(--ab, var(--border));
117
+ transform: translateX(var(--x, 0));
118
+ }
119
+ &:checked {
120
+ --ab: var(--active-inner);
121
+ --x: 14px;
122
+ }
123
+ }
124
+ }
125
+ </style>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bfg-common",
3
3
  "private": false,
4
- "version": "1.3.479",
4
+ "version": "1.3.481",
5
5
  "scripts": {
6
6
  "build": "nuxt build",
7
7
  "dev": "nuxt dev --port=3002",