bfg-common 1.0.19 → 1.0.21

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 (2) hide show
  1. package/components/common/spiceConsole/Drawer.vue +241 -233
  2. package/package.json +1 -1
package/components/common/spiceConsole/Drawer.vue CHANGED
@@ -1,233 +1,241 @@
1
- <template>
2
- <div
3
- :class="['vmw-drawer animation', { show: isShow }]"
4
- @click.capture="onInputManagerFocus"
5
- >
6
- <div
7
- v-if="!isShow"
8
- ref="grab"
9
- class="vmw-drawer__open"
10
- :style="`top: ${y}px;`"
11
- @click="toggleDrawer"
12
- >
13
- <atoms-the-icon name="arrow" class="vmw-drawer__open-icon" />
14
- <atoms-the-icon2 name="drag" class="vmw-drawer__drag-icon" />
15
- </div>
16
-
17
- <div class="vmw-drawer-header">
18
- <h3>{{ localization.consolePanel }}</h3>
19
- <atoms-the-icon
20
- class="vmw-drawer-header__close"
21
- name="close"
22
- @click="toggleDrawer"
23
- />
24
- </div>
25
-
26
- <div class="vmw-drawer-body">
27
- <div
28
- class="vmw-drawer-body__btn animation toggle-fullscreen"
29
- @click="emits('toggle-fullscreen')"
30
- >
31
- {{ localization.toggleFullscreenMode }}
32
- </div>
33
- <div
34
- class="vmw-drawer-body__btn animation toggle-fullscreen"
35
- @click="emits('send-alt-command')"
36
- >
37
- {{ localization.sendAltCommand }}
38
- </div>
39
-
40
- <select v-model="codec" @change="onChangeCodec">
41
- <option :value="1">MJPEG</option>
42
- <option :value="2">VP8</option>
43
- <option :value="3">H264</option>
44
- <option :value="4" disabled>VP9</option>
45
- <option :value="5">H265</option>
46
- </select>
47
-
48
- <hr />
49
- <div
50
- class="vmw-drawer-body__btn animation show-keyboard"
51
- @click="onToggleKeyboard"
52
- >
53
- {{ showOrHideKeyboard }}
54
- </div>
55
- </div>
56
-
57
- <div class="vmw-drawer-footer">
58
- <div id="debug-stream"></div>
59
- </div>
60
- <div v-if="isKeyboardShown">
61
- <common-spice-console-keyboard />
62
- </div>
63
- </div>
64
- </template>
65
- <script setup lang="ts">
66
- import { useDraggable } from '@vueuse/core'
67
- import { UI_I_Localization } from '~/models/interfaces'
68
- import { UI_T_CODEC } from '~/components/common/spiceConsole/models/types'
69
-
70
- const emits = defineEmits<{
71
- (event: 'toggle-fullscreen'): void
72
- (event: 'send-alt-command'): void
73
- }>()
74
-
75
- const codec = ref<UI_T_CODEC>(1)
76
- const onChangeCodec = () => {
77
- // @ts-ignore
78
- if (!window.app) return
79
- // @ts-ignore
80
- const channels = window.app.spiceConnection.channels
81
- for (let i in channels) {
82
- const channel = channels[i]
83
- if (channel.channel === wdi.SpiceVars.SPICE_CHANNEL_DISPLAY) {
84
- channel.changeCodec(codec.value)
85
- }
86
- }
87
- }
88
-
89
- const isKeyboardShown = ref<boolean>(false)
90
- const onToggleKeyboard = () => {
91
- isKeyboardShown.value = !isKeyboardShown.value
92
- }
93
-
94
- const isShow = ref<boolean>(false)
95
- const grab = ref<HTMLDivElement | null>(null)
96
- const localization = computed<UI_I_Localization>(() => useLocal())
97
- const initialTop = window.innerHeight / 2 - 15
98
- const { y } = useDraggable(grab, {
99
- initialValue: { x: -30, y: initialTop },
100
- })
101
-
102
- const showOrHideKeyboard = computed<string>(() =>
103
- isKeyboardShown.value
104
- ? localization.value.hideKeyboard
105
- : localization.value.showKeyboard
106
- )
107
-
108
- watch(y, () => {
109
- isDrag = true
110
- })
111
-
112
- let isDrag = false
113
- const toggleDrawer = () => {
114
- if (isDrag) {
115
- isDrag = false
116
- return
117
- }
118
- isShow.value = !isShow.value
119
- }
120
-
121
- const onInputManagerFocus = () => {
122
- document.getElementById('inputmanager')?.focus()
123
- }
124
- </script>
125
- <style lang="scss" scoped>
126
- .vmw-drawer {
127
- background-color: #314351;
128
- position: absolute;
129
- top: 0;
130
- right: -300px;
131
- width: 300px;
132
- height: 100vh;
133
- padding: 20px;
134
-
135
- &.show {
136
- right: 0;
137
-
138
- .vmw-drawer__open {
139
- z-index: -1;
140
- }
141
- }
142
-
143
- &__open {
144
- width: 65px;
145
- height: 40px;
146
- background-color: #314351;
147
- position: absolute;
148
- left: -30px;
149
- cursor: pointer;
150
- border-top-left-radius: 20px;
151
- border-bottom-left-radius: 20px;
152
- box-shadow: 0 0 15px 5px #31435169;
153
- transition: left 0.5s;
154
- user-select: none;
155
-
156
- &.moving {
157
- cursor: grabbing;
158
- }
159
-
160
- &:hover {
161
- left: -60px;
162
- }
163
-
164
- & .vmw-drawer__open-icon {
165
- fill: #ffffff;
166
- transform: rotate(-90deg);
167
- width: 30px;
168
- height: 40px;
169
- z-index: 2222222222222222;
170
- }
171
-
172
- & .vmw-drawer__drag-icon {
173
- fill: #ffffff;
174
- width: 40px;
175
- position: absolute;
176
- left: 21px;
177
- z-index: 1;
178
- cursor: grabbing;
179
- }
180
- }
181
-
182
- .vmw-drawer-header {
183
- & h3 {
184
- color: #fff;
185
- font-weight: bold;
186
- font-size: 20px;
187
- text-align: center;
188
- }
189
-
190
- &__close {
191
- width: 30px;
192
- fill: #fff;
193
- position: absolute;
194
- right: 10px;
195
- top: 10px;
196
- cursor: pointer;
197
- }
198
- }
199
-
200
- .vmw-drawer-body {
201
- margin-top: 50px;
202
-
203
- & select,
204
- &__btn {
205
- width: 100%;
206
- color: #fff;
207
- cursor: pointer;
208
- font-size: 15px;
209
- border: 1px solid #fff;
210
- padding: 5px;
211
- border-radius: 5px;
212
- text-align: center;
213
- margin-bottom: 20px;
214
-
215
- &:not(.disable):hover {
216
- background-color: #ffffff;
217
- color: #314351;
218
- }
219
-
220
- &.disable {
221
- opacity: 0.5;
222
- cursor: not-allowed;
223
- }
224
- }
225
-
226
- & > hr {
227
- margin-bottom: 20px;
228
- border-color: #ffffff40;
229
- box-shadow: 0 0 20px 0.5px #ffffff2e;
230
- }
231
- }
232
- }
233
- </style>
1
+ <template>
2
+ <div
3
+ :class="['vmw-drawer animation', { show: isShow }]"
4
+ @click.capture="onInputManagerFocus"
5
+ >
6
+ <div
7
+ v-if="!isShow"
8
+ ref="grab"
9
+ class="vmw-drawer__open"
10
+ :style="`top: ${y}px;`"
11
+ @click="toggleDrawer"
12
+ >
13
+ <atoms-the-icon name="arrow" class="vmw-drawer__open-icon" />
14
+ <atoms-the-icon2 name="drag" class="vmw-drawer__drag-icon" />
15
+ </div>
16
+
17
+ <div class="vmw-drawer-header">
18
+ <h3>{{ localization.consolePanel }}</h3>
19
+ <atoms-the-icon
20
+ class="vmw-drawer-header__close"
21
+ name="close"
22
+ @click="toggleDrawer"
23
+ />
24
+ </div>
25
+
26
+ <div class="vmw-drawer-body">
27
+ <div
28
+ class="vmw-drawer-body__btn animation toggle-fullscreen"
29
+ @click="emits('toggle-fullscreen')"
30
+ >
31
+ {{ localization.toggleFullscreenMode }}
32
+ </div>
33
+ <div
34
+ class="vmw-drawer-body__btn animation toggle-fullscreen"
35
+ @click="emits('send-alt-command')"
36
+ >
37
+ {{ localization.sendAltCommand }}
38
+ </div>
39
+
40
+ <select
41
+ v-model="codec"
42
+ @mouseenter="hover = true"
43
+ @mouseleave="hover = false"
44
+ @change="onChangeCodec"
45
+ >
46
+ <option :value="1">MJPEG</option>
47
+ <option :value="2">VP8</option>
48
+ <option :value="3">H264</option>
49
+ <option :value="4" disabled>VP9</option>
50
+ <option :value="5">H265</option>
51
+ </select>
52
+
53
+ <hr />
54
+ <div
55
+ class="vmw-drawer-body__btn animation show-keyboard"
56
+ @click="onToggleKeyboard"
57
+ >
58
+ {{ showOrHideKeyboard }}
59
+ </div>
60
+ </div>
61
+
62
+ <div class="vmw-drawer-footer">
63
+ <div id="debug-stream"></div>
64
+ </div>
65
+ <div v-if="isKeyboardShown">
66
+ <common-spice-console-keyboard />
67
+ </div>
68
+ </div>
69
+ </template>
70
+ <script setup lang="ts">
71
+ import { useDraggable } from '@vueuse/core'
72
+ import { UI_I_Localization } from '~/models/interfaces'
73
+ import { UI_T_CODEC } from '~/components/common/spiceConsole/models/types'
74
+
75
+ const emits = defineEmits<{
76
+ (event: 'toggle-fullscreen'): void
77
+ (event: 'send-alt-command'): void
78
+ }>()
79
+
80
+ const codec = ref<UI_T_CODEC>(1)
81
+ const onChangeCodec = () => {
82
+ // @ts-ignore
83
+ if (!window.app) return
84
+ // @ts-ignore
85
+ const channels = window.app.spiceConnection.channels
86
+ for (let i in channels) {
87
+ const channel = channels[i]
88
+ if (channel.channel === wdi.SpiceVars.SPICE_CHANNEL_DISPLAY) {
89
+ channel.changeCodec(codec.value)
90
+ }
91
+ }
92
+ document.getElementById('inputmanager')?.focus()
93
+ }
94
+
95
+ const isKeyboardShown = ref<boolean>(false)
96
+ const onToggleKeyboard = () => {
97
+ isKeyboardShown.value = !isKeyboardShown.value
98
+ }
99
+
100
+ const isShow = ref<boolean>(false)
101
+ const grab = ref<HTMLDivElement | null>(null)
102
+ const localization = computed<UI_I_Localization>(() => useLocal())
103
+ const initialTop = window.innerHeight / 2 - 15
104
+ const { y } = useDraggable(grab, {
105
+ initialValue: { x: -30, y: initialTop },
106
+ })
107
+
108
+ const showOrHideKeyboard = computed<string>(() =>
109
+ isKeyboardShown.value
110
+ ? localization.value.hideKeyboard
111
+ : localization.value.showKeyboard
112
+ )
113
+
114
+ watch(y, () => {
115
+ isDrag = true
116
+ })
117
+
118
+ let isDrag = false
119
+ const toggleDrawer = () => {
120
+ if (isDrag) {
121
+ isDrag = false
122
+ return
123
+ }
124
+ isShow.value = !isShow.value
125
+ }
126
+
127
+ const hover = ref<boolean>(false)
128
+ const onInputManagerFocus = () => {
129
+ if (hover.value) return
130
+ document.getElementById('inputmanager')?.focus()
131
+ }
132
+ </script>
133
+ <style lang="scss" scoped>
134
+ .vmw-drawer {
135
+ background-color: #314351;
136
+ position: absolute;
137
+ top: 0;
138
+ right: -300px;
139
+ width: 300px;
140
+ height: 100vh;
141
+ padding: 20px;
142
+
143
+ &.show {
144
+ right: 0;
145
+
146
+ .vmw-drawer__open {
147
+ z-index: -1;
148
+ }
149
+ }
150
+
151
+ &__open {
152
+ width: 65px;
153
+ height: 40px;
154
+ background-color: #314351;
155
+ position: absolute;
156
+ left: -30px;
157
+ cursor: pointer;
158
+ border-top-left-radius: 20px;
159
+ border-bottom-left-radius: 20px;
160
+ box-shadow: 0 0 15px 5px #31435169;
161
+ transition: left 0.5s;
162
+ user-select: none;
163
+
164
+ &.moving {
165
+ cursor: grabbing;
166
+ }
167
+
168
+ &:hover {
169
+ left: -60px;
170
+ }
171
+
172
+ & .vmw-drawer__open-icon {
173
+ fill: #ffffff;
174
+ transform: rotate(-90deg);
175
+ width: 30px;
176
+ height: 40px;
177
+ z-index: 2222222222222222;
178
+ }
179
+
180
+ & .vmw-drawer__drag-icon {
181
+ fill: #ffffff;
182
+ width: 40px;
183
+ position: absolute;
184
+ left: 21px;
185
+ z-index: 1;
186
+ cursor: grabbing;
187
+ }
188
+ }
189
+
190
+ .vmw-drawer-header {
191
+ & h3 {
192
+ color: #fff;
193
+ font-weight: bold;
194
+ font-size: 20px;
195
+ text-align: center;
196
+ }
197
+
198
+ &__close {
199
+ width: 30px;
200
+ fill: #fff;
201
+ position: absolute;
202
+ right: 10px;
203
+ top: 10px;
204
+ cursor: pointer;
205
+ }
206
+ }
207
+
208
+ .vmw-drawer-body {
209
+ margin-top: 50px;
210
+
211
+ & select,
212
+ &__btn {
213
+ width: 100%;
214
+ color: #fff;
215
+ cursor: pointer;
216
+ font-size: 15px;
217
+ border: 1px solid #fff;
218
+ padding: 5px;
219
+ border-radius: 5px;
220
+ text-align: center;
221
+ margin-bottom: 20px;
222
+
223
+ &:not(.disable):hover {
224
+ background-color: #ffffff;
225
+ color: #314351;
226
+ }
227
+
228
+ &.disable {
229
+ opacity: 0.5;
230
+ cursor: not-allowed;
231
+ }
232
+ }
233
+
234
+ & > hr {
235
+ margin-bottom: 20px;
236
+ border-color: #ffffff40;
237
+ box-shadow: 0 0 20px 0.5px #ffffff2e;
238
+ }
239
+ }
240
+ }
241
+ </style>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bfg-common",
3
3
  "private": false,
4
- "version": "1.0.19",
4
+ "version": "1.0.21",
5
5
  "scripts": {
6
6
  "build": "nuxt build",
7
7
  "dev": "nuxt dev --port=3002",