bfg-common 1.5.464 → 1.5.466
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.
- package/assets/localization/local_be.json +1 -0
- package/assets/localization/local_en.json +1 -0
- package/assets/localization/local_hy.json +1 -0
- package/assets/localization/local_kk.json +1 -0
- package/assets/localization/local_ru.json +1 -0
- package/assets/localization/local_zh.json +1 -0
- package/components/common/browse/BrowseOld.vue +108 -80
- package/components/common/browse/blocks/Container.vue +236 -235
- package/components/common/vm/actions/clone/lib/config/steps.ts +8 -8
- package/package.json +1 -1
@@ -23,92 +23,98 @@
|
|
23
23
|
<!-- data-id="browse-filter-input"-->
|
24
24
|
<!-- />-->
|
25
25
|
<!-- </div>-->
|
26
|
-
<
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
:title="localization.common.datastores"
|
35
|
-
:sorting="props.firstBlockSorting"
|
36
|
-
@sort="emits('sort-first')"
|
26
|
+
<div class="browse-container">
|
27
|
+
<div class="browse-container__columns">
|
28
|
+
<common-browse-blocks-container
|
29
|
+
:blocks-width="props.blocksWidth"
|
30
|
+
type="horizontal"
|
31
|
+
test-id="browse-blocks-container"
|
32
|
+
class="columns-block"
|
33
|
+
@change-widths="onChangeWidths"
|
37
34
|
>
|
38
|
-
<template #
|
39
|
-
<
|
40
|
-
|
41
|
-
:
|
42
|
-
|
43
|
-
@
|
44
|
-
|
45
|
-
|
46
|
-
|
35
|
+
<template #firstBlock>
|
36
|
+
<common-browse-blocks-title-old
|
37
|
+
:width="props.blocksWidth[0]"
|
38
|
+
:title="localization.common.datastores"
|
39
|
+
:sorting="props.firstBlockSorting"
|
40
|
+
@sort="emits('sort-first')"
|
41
|
+
>
|
42
|
+
<template #content>
|
43
|
+
<div>
|
44
|
+
<common-recursion-tree
|
45
|
+
:nodes="props.nodesLocal"
|
46
|
+
class="recursion-tree"
|
47
|
+
@get-nodes="onShowNodes"
|
48
|
+
@select-node="onSelectNode"
|
49
|
+
/>
|
50
|
+
</div>
|
51
|
+
</template>
|
52
|
+
</common-browse-blocks-title-old>
|
47
53
|
</template>
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
54
|
+
<template #secondBlock>
|
55
|
+
<common-browse-blocks-title-old
|
56
|
+
:width="props.blocksWidth[1]"
|
57
|
+
:title="localization.common.contents"
|
58
|
+
:sorting="props.secondBlockSorting"
|
59
|
+
@sort="emits('sort-second')"
|
60
|
+
>
|
61
|
+
<template #content>
|
62
|
+
<common-browse-blocks-contents-files
|
63
|
+
:selected-folder-files="props.filesLocal"
|
64
|
+
:selected-file="props.selectedFile"
|
65
|
+
:browse-loading="props.browseLoading"
|
66
|
+
@select-file="onSelectFile"
|
67
|
+
/>
|
68
|
+
</template>
|
69
|
+
</common-browse-blocks-title-old>
|
64
70
|
</template>
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
:width="props.blocksWidth[2]"
|
70
|
-
:title="localization.common.information"
|
71
|
-
>
|
72
|
-
<template v-if="props.info" #content>
|
73
|
-
<div
|
74
|
-
v-for="item in props.info"
|
75
|
-
:key="item.title"
|
76
|
-
class="info-container"
|
71
|
+
<template #thirdBlock>
|
72
|
+
<common-browse-blocks-title-old
|
73
|
+
:width="props.blocksWidth[2]"
|
74
|
+
:title="localization.common.information"
|
77
75
|
>
|
78
|
-
<
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
76
|
+
<template v-if="props.info" #content>
|
77
|
+
<div
|
78
|
+
v-for="item in props.info"
|
79
|
+
:key="item.title"
|
80
|
+
class="info-container"
|
81
|
+
>
|
82
|
+
<common-browse-blocks-info-text
|
83
|
+
v-if="item.type === 'text'"
|
84
|
+
:title="item.title"
|
85
|
+
:value="item.value"
|
86
|
+
/>
|
87
|
+
<common-browse-blocks-info-size
|
88
|
+
v-if="item.type === 'size'"
|
89
|
+
:title="item.title"
|
90
|
+
:value="item.value"
|
91
|
+
/>
|
92
|
+
<common-browse-blocks-info-date
|
93
|
+
v-if="item.type === 'date'"
|
94
|
+
:title="item.title"
|
95
|
+
:value="item.value"
|
96
|
+
/>
|
97
|
+
</div>
|
98
|
+
</template>
|
99
|
+
</common-browse-blocks-title-old>
|
94
100
|
</template>
|
95
|
-
</common-browse-blocks-
|
96
|
-
</
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
:data-id="`${props.testId}-select`"
|
103
|
-
>
|
104
|
-
<option
|
105
|
-
v-for="item in props.fileTypes"
|
106
|
-
:key="item.value"
|
107
|
-
:value="item.value"
|
101
|
+
</common-browse-blocks-container>
|
102
|
+
</div>
|
103
|
+
<div v-if="props.fileTypes" class="ptm">
|
104
|
+
<b>{{ localization.common.fileType }}:</b>
|
105
|
+
<select
|
106
|
+
v-model="selectedFileTypeLocal"
|
107
|
+
:data-id="`${props.testId}-select`"
|
108
108
|
>
|
109
|
-
|
110
|
-
|
111
|
-
|
109
|
+
<option
|
110
|
+
v-for="item in props.fileTypes"
|
111
|
+
:key="item.value"
|
112
|
+
:value="item.value"
|
113
|
+
>
|
114
|
+
{{ item.text }}
|
115
|
+
</option>
|
116
|
+
</select>
|
117
|
+
</div>
|
112
118
|
</div>
|
113
119
|
</template>
|
114
120
|
</atoms-modal>
|
@@ -183,6 +189,28 @@ const selectedFileTypeLocal = computed<any>({
|
|
183
189
|
</script>
|
184
190
|
|
185
191
|
<style scoped lang="scss">
|
192
|
+
.browse-container {
|
193
|
+
display: grid;
|
194
|
+
grid-template-rows: 1fr auto;
|
195
|
+
height: 100%;
|
196
|
+
|
197
|
+
&__columns {
|
198
|
+
overflow-y: hidden;
|
199
|
+
overflow-x: auto;
|
200
|
+
|
201
|
+
.columns-block {
|
202
|
+
width: 808px;
|
203
|
+
height: 100%;
|
204
|
+
|
205
|
+
:deep(.title-block) {
|
206
|
+
min-height: auto;
|
207
|
+
}
|
208
|
+
:deep(.title-block__container) {
|
209
|
+
height: 100%;
|
210
|
+
}
|
211
|
+
}
|
212
|
+
}
|
213
|
+
}
|
186
214
|
:deep(.recursion-tree) {
|
187
215
|
.tree-node-text-drag {
|
188
216
|
border-radius: 3px 0 0 3px;
|
@@ -1,235 +1,236 @@
|
|
1
|
-
<template>
|
2
|
-
<div
|
3
|
-
ref="containerBlock"
|
4
|
-
:class="[
|
5
|
-
`title-block__${props.type}-container`,
|
6
|
-
{
|
7
|
-
'title-block__new-view': isNewView,
|
8
|
-
},
|
9
|
-
]"
|
10
|
-
>
|
11
|
-
<slot name="firstBlock"></slot>
|
12
|
-
<div
|
13
|
-
ref="moveSeperator"
|
14
|
-
:class="[
|
15
|
-
'move-separator',
|
16
|
-
{
|
17
|
-
'move-separator-new-view': isNewView,
|
18
|
-
'move-separator-new-view_selected':
|
19
|
-
sectionSelected && sectionSelectedName === 'first',
|
20
|
-
},
|
21
|
-
]"
|
22
|
-
:data-id="`${props.testId}-first`"
|
23
|
-
:style="seperatorStyles"
|
24
|
-
@mousedown.prevent="onMouseDown($event, 'first')"
|
25
|
-
>
|
26
|
-
<div :style="moveSeperatorBeforeStyles"></div>
|
27
|
-
</div>
|
28
|
-
<slot name="secondBlock"></slot>
|
29
|
-
<div
|
30
|
-
ref="secondMoveSeperator"
|
31
|
-
:class="[
|
32
|
-
'move-separator',
|
33
|
-
{
|
34
|
-
'move-separator-new-view': isNewView,
|
35
|
-
'move-separator-new-view_selected':
|
36
|
-
sectionSelected && sectionSelectedName === 'second',
|
37
|
-
},
|
38
|
-
]"
|
39
|
-
:data-id="`${props.testId}-second`"
|
40
|
-
:style="secondSeperatorStyles"
|
41
|
-
@mousedown.prevent="onMouseDown($event, 'second')"
|
42
|
-
>
|
43
|
-
<div :style="secondMoveSeperatorBeforeStyles"></div>
|
44
|
-
</div>
|
45
|
-
<slot name="thirdBlock"></slot>
|
46
|
-
</div>
|
47
|
-
</template>
|
48
|
-
|
49
|
-
<script setup lang="ts">
|
50
|
-
import { useElementSize } from '@vueuse/core'
|
51
|
-
import type { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
|
52
|
-
|
53
|
-
const props = withDefaults(
|
54
|
-
defineProps<{
|
55
|
-
type: 'horizontal' | 'vertical'
|
56
|
-
blocksWidth: UI_T_BlocksWidth
|
57
|
-
testId?: string
|
58
|
-
}>(),
|
59
|
-
{
|
60
|
-
testId: '',
|
61
|
-
}
|
62
|
-
)
|
63
|
-
|
64
|
-
const emits = defineEmits<{
|
65
|
-
(event: 'change-widths', width: number, index: number): void
|
66
|
-
}>()
|
67
|
-
|
68
|
-
const { $store }: any = useNuxtApp()
|
69
|
-
|
70
|
-
const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
|
71
|
-
|
72
|
-
const sectionSelected = ref<boolean>(false)
|
73
|
-
const sectionSelectedName = ref<string>('')
|
74
|
-
|
75
|
-
const positionOnDown = ref<number>(0)
|
76
|
-
|
77
|
-
const containerBlock = ref<HTMLElement | null>(null)
|
78
|
-
const { height: heightContainerBlock } = useElementSize(containerBlock)
|
79
|
-
|
80
|
-
const moveSeperator = ref<HTMLElement | null>(null)
|
81
|
-
const { height: heightMoveSeperator } = useElementSize(moveSeperator)
|
82
|
-
const moveSeperatorBeforeStyles = ref<any>({})
|
83
|
-
watch(
|
84
|
-
heightMoveSeperator,
|
85
|
-
(newValue) => {
|
86
|
-
if (!newValue) return
|
87
|
-
|
88
|
-
moveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
|
89
|
-
},
|
90
|
-
{ immediate: true, deep: true }
|
91
|
-
)
|
92
|
-
|
93
|
-
const secondMoveSeperator = ref<HTMLElement | null>(null)
|
94
|
-
const { height: heightSecondMoveSeperator } =
|
95
|
-
useElementSize(secondMoveSeperator)
|
96
|
-
const secondMoveSeperatorBeforeStyles = ref<any>({})
|
97
|
-
watch(
|
98
|
-
heightSecondMoveSeperator,
|
99
|
-
(newValue) => {
|
100
|
-
if (!newValue) return
|
101
|
-
|
102
|
-
secondMoveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
|
103
|
-
},
|
104
|
-
{ immediate: true, deep: true }
|
105
|
-
)
|
106
|
-
|
107
|
-
// const translation1 = computed<number>(() => (isNewView.value ? 31 : 28))
|
108
|
-
// const translation2 = computed<number>(() => (isNewView.value ? 47 : 28))
|
109
|
-
// const translation = computed<number>(() => (isNewView.value ? 31 : 28))
|
110
|
-
|
111
|
-
const seperatorStyles = computed(() => ({
|
112
|
-
// left: `${props.blocksWidth[0] + translation1.value}px`,
|
113
|
-
left: `${props.blocksWidth[0]}px`,
|
114
|
-
height: `${heightContainerBlock.value}px`,
|
115
|
-
}))
|
116
|
-
const secondSeperatorStyles = computed(() => ({
|
117
|
-
// right: `${props.blocksWidth[2] + translation2.value}px`,
|
118
|
-
left: `${props.blocksWidth[0] + props.blocksWidth[1]}px`,
|
119
|
-
height: `${heightContainerBlock.value}px`,
|
120
|
-
}))
|
121
|
-
|
122
|
-
const onMouseDown = (event: MouseEvent, section: string): void => {
|
123
|
-
sectionSelected.value = true
|
124
|
-
sectionSelectedName.value = section
|
125
|
-
positionOnDown.value = (
|
126
|
-
event.target as HTMLDivElement
|
127
|
-
).getBoundingClientRect().x
|
128
|
-
}
|
129
|
-
|
130
|
-
const onMouseMove = (event: MouseEvent): void => {
|
131
|
-
if (!sectionSelected.value) return
|
132
|
-
event.stopPropagation()
|
133
|
-
event.preventDefault()
|
134
|
-
event.cancelBubble = true
|
135
|
-
|
136
|
-
getSeparatorPosition(event, 0, 1, 'first')
|
137
|
-
getSeparatorPosition(event, 1, 2, 'second')
|
138
|
-
}
|
139
|
-
const onMouseUp = (): void => {
|
140
|
-
sectionSelected.value = false
|
141
|
-
}
|
142
|
-
|
143
|
-
const minWidth = computed<number>(() => (isNewView.value ? 120 : 30))
|
144
|
-
|
145
|
-
const getSeparatorPosition = (
|
146
|
-
event: MouseEvent,
|
147
|
-
firstBlock: number,
|
148
|
-
secondBlock: number,
|
149
|
-
separator: string
|
150
|
-
): void => {
|
151
|
-
if (sectionSelected.value && sectionSelectedName.value === separator) {
|
152
|
-
const blockWidth0 =
|
153
|
-
props.blocksWidth[firstBlock] - (positionOnDown.value - event.x)
|
154
|
-
const blockWidth1 =
|
155
|
-
props.blocksWidth[secondBlock] + (positionOnDown.value - event.x)
|
156
|
-
if (blockWidth0 < minWidth.value || blockWidth1 < minWidth.value) return
|
157
|
-
blockWidth0 >= minWidth.value &&
|
158
|
-
emits('change-widths', blockWidth0, firstBlock)
|
159
|
-
blockWidth1 >= minWidth.value &&
|
160
|
-
emits('change-widths', blockWidth1, secondBlock)
|
161
|
-
positionOnDown.value = event.x
|
162
|
-
}
|
163
|
-
}
|
164
|
-
|
165
|
-
onMounted(() => {
|
166
|
-
document.addEventListener('mousemove', onMouseMove)
|
167
|
-
document.addEventListener('mouseup', onMouseUp)
|
168
|
-
})
|
169
|
-
onUnmounted(() => {
|
170
|
-
document.removeEventListener('mousemove', onMouseMove)
|
171
|
-
document.removeEventListener('mouseup', onMouseUp)
|
172
|
-
})
|
173
|
-
</script>
|
174
|
-
|
175
|
-
<style scoped lang="scss">
|
176
|
-
.title-block__horizontal-container {
|
177
|
-
display: flex;
|
178
|
-
flex-direction: row;
|
179
|
-
gap: 5px;
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
transparent
|
200
|
-
|
201
|
-
var(--select-file-sprt-color)
|
202
|
-
|
203
|
-
transparent
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
}
|
235
|
-
|
1
|
+
<template>
|
2
|
+
<div
|
3
|
+
ref="containerBlock"
|
4
|
+
:class="[
|
5
|
+
`title-block__${props.type}-container`,
|
6
|
+
{
|
7
|
+
'title-block__new-view': isNewView,
|
8
|
+
},
|
9
|
+
]"
|
10
|
+
>
|
11
|
+
<slot name="firstBlock"></slot>
|
12
|
+
<div
|
13
|
+
ref="moveSeperator"
|
14
|
+
:class="[
|
15
|
+
'move-separator',
|
16
|
+
{
|
17
|
+
'move-separator-new-view': isNewView,
|
18
|
+
'move-separator-new-view_selected':
|
19
|
+
sectionSelected && sectionSelectedName === 'first',
|
20
|
+
},
|
21
|
+
]"
|
22
|
+
:data-id="`${props.testId}-first`"
|
23
|
+
:style="seperatorStyles"
|
24
|
+
@mousedown.prevent="onMouseDown($event, 'first')"
|
25
|
+
>
|
26
|
+
<div :style="moveSeperatorBeforeStyles"></div>
|
27
|
+
</div>
|
28
|
+
<slot name="secondBlock"></slot>
|
29
|
+
<div
|
30
|
+
ref="secondMoveSeperator"
|
31
|
+
:class="[
|
32
|
+
'move-separator',
|
33
|
+
{
|
34
|
+
'move-separator-new-view': isNewView,
|
35
|
+
'move-separator-new-view_selected':
|
36
|
+
sectionSelected && sectionSelectedName === 'second',
|
37
|
+
},
|
38
|
+
]"
|
39
|
+
:data-id="`${props.testId}-second`"
|
40
|
+
:style="secondSeperatorStyles"
|
41
|
+
@mousedown.prevent="onMouseDown($event, 'second')"
|
42
|
+
>
|
43
|
+
<div :style="secondMoveSeperatorBeforeStyles"></div>
|
44
|
+
</div>
|
45
|
+
<slot name="thirdBlock"></slot>
|
46
|
+
</div>
|
47
|
+
</template>
|
48
|
+
|
49
|
+
<script setup lang="ts">
|
50
|
+
import { useElementSize } from '@vueuse/core'
|
51
|
+
import type { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
|
52
|
+
|
53
|
+
const props = withDefaults(
|
54
|
+
defineProps<{
|
55
|
+
type: 'horizontal' | 'vertical'
|
56
|
+
blocksWidth: UI_T_BlocksWidth
|
57
|
+
testId?: string
|
58
|
+
}>(),
|
59
|
+
{
|
60
|
+
testId: '',
|
61
|
+
}
|
62
|
+
)
|
63
|
+
|
64
|
+
const emits = defineEmits<{
|
65
|
+
(event: 'change-widths', width: number, index: number): void
|
66
|
+
}>()
|
67
|
+
|
68
|
+
const { $store }: any = useNuxtApp()
|
69
|
+
|
70
|
+
const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
|
71
|
+
|
72
|
+
const sectionSelected = ref<boolean>(false)
|
73
|
+
const sectionSelectedName = ref<string>('')
|
74
|
+
|
75
|
+
const positionOnDown = ref<number>(0)
|
76
|
+
|
77
|
+
const containerBlock = ref<HTMLElement | null>(null)
|
78
|
+
const { height: heightContainerBlock } = useElementSize(containerBlock)
|
79
|
+
|
80
|
+
const moveSeperator = ref<HTMLElement | null>(null)
|
81
|
+
const { height: heightMoveSeperator } = useElementSize(moveSeperator)
|
82
|
+
const moveSeperatorBeforeStyles = ref<any>({})
|
83
|
+
watch(
|
84
|
+
heightMoveSeperator,
|
85
|
+
(newValue) => {
|
86
|
+
if (!newValue) return
|
87
|
+
|
88
|
+
moveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
|
89
|
+
},
|
90
|
+
{ immediate: true, deep: true }
|
91
|
+
)
|
92
|
+
|
93
|
+
const secondMoveSeperator = ref<HTMLElement | null>(null)
|
94
|
+
const { height: heightSecondMoveSeperator } =
|
95
|
+
useElementSize(secondMoveSeperator)
|
96
|
+
const secondMoveSeperatorBeforeStyles = ref<any>({})
|
97
|
+
watch(
|
98
|
+
heightSecondMoveSeperator,
|
99
|
+
(newValue) => {
|
100
|
+
if (!newValue) return
|
101
|
+
|
102
|
+
secondMoveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
|
103
|
+
},
|
104
|
+
{ immediate: true, deep: true }
|
105
|
+
)
|
106
|
+
|
107
|
+
// const translation1 = computed<number>(() => (isNewView.value ? 31 : 28))
|
108
|
+
// const translation2 = computed<number>(() => (isNewView.value ? 47 : 28))
|
109
|
+
// const translation = computed<number>(() => (isNewView.value ? 31 : 28))
|
110
|
+
|
111
|
+
const seperatorStyles = computed(() => ({
|
112
|
+
// left: `${props.blocksWidth[0] + translation1.value}px`,
|
113
|
+
left: `${props.blocksWidth[0]}px`,
|
114
|
+
height: `${heightContainerBlock.value}px`,
|
115
|
+
}))
|
116
|
+
const secondSeperatorStyles = computed(() => ({
|
117
|
+
// right: `${props.blocksWidth[2] + translation2.value}px`,
|
118
|
+
left: `${props.blocksWidth[0] + props.blocksWidth[1] + (isNewView.value ? 0 : 5)}px`,
|
119
|
+
height: `${heightContainerBlock.value}px`,
|
120
|
+
}))
|
121
|
+
|
122
|
+
const onMouseDown = (event: MouseEvent, section: string): void => {
|
123
|
+
sectionSelected.value = true
|
124
|
+
sectionSelectedName.value = section
|
125
|
+
positionOnDown.value = (
|
126
|
+
event.target as HTMLDivElement
|
127
|
+
).getBoundingClientRect().x
|
128
|
+
}
|
129
|
+
|
130
|
+
const onMouseMove = (event: MouseEvent): void => {
|
131
|
+
if (!sectionSelected.value) return
|
132
|
+
event.stopPropagation()
|
133
|
+
event.preventDefault()
|
134
|
+
event.cancelBubble = true
|
135
|
+
|
136
|
+
getSeparatorPosition(event, 0, 1, 'first')
|
137
|
+
getSeparatorPosition(event, 1, 2, 'second')
|
138
|
+
}
|
139
|
+
const onMouseUp = (): void => {
|
140
|
+
sectionSelected.value = false
|
141
|
+
}
|
142
|
+
|
143
|
+
const minWidth = computed<number>(() => (isNewView.value ? 120 : 30))
|
144
|
+
|
145
|
+
const getSeparatorPosition = (
|
146
|
+
event: MouseEvent,
|
147
|
+
firstBlock: number,
|
148
|
+
secondBlock: number,
|
149
|
+
separator: string
|
150
|
+
): void => {
|
151
|
+
if (sectionSelected.value && sectionSelectedName.value === separator) {
|
152
|
+
const blockWidth0 =
|
153
|
+
props.blocksWidth[firstBlock] - (positionOnDown.value - event.x)
|
154
|
+
const blockWidth1 =
|
155
|
+
props.blocksWidth[secondBlock] + (positionOnDown.value - event.x)
|
156
|
+
if (blockWidth0 < minWidth.value || blockWidth1 < minWidth.value) return
|
157
|
+
blockWidth0 >= minWidth.value &&
|
158
|
+
emits('change-widths', blockWidth0, firstBlock)
|
159
|
+
blockWidth1 >= minWidth.value &&
|
160
|
+
emits('change-widths', blockWidth1, secondBlock)
|
161
|
+
positionOnDown.value = event.x
|
162
|
+
}
|
163
|
+
}
|
164
|
+
|
165
|
+
onMounted(() => {
|
166
|
+
document.addEventListener('mousemove', onMouseMove)
|
167
|
+
document.addEventListener('mouseup', onMouseUp)
|
168
|
+
})
|
169
|
+
onUnmounted(() => {
|
170
|
+
document.removeEventListener('mousemove', onMouseMove)
|
171
|
+
document.removeEventListener('mouseup', onMouseUp)
|
172
|
+
})
|
173
|
+
</script>
|
174
|
+
|
175
|
+
<style scoped lang="scss">
|
176
|
+
.title-block__horizontal-container {
|
177
|
+
display: flex;
|
178
|
+
flex-direction: row;
|
179
|
+
gap: 5px;
|
180
|
+
position: relative;
|
181
|
+
}
|
182
|
+
|
183
|
+
.title-block__horizontal-container.title-block__new-view {
|
184
|
+
gap: 0;
|
185
|
+
height: inherit;
|
186
|
+
}
|
187
|
+
.move-separator {
|
188
|
+
position: absolute;
|
189
|
+
width: 3px;
|
190
|
+
height: inherit;
|
191
|
+
background-color: var(--modal-bg-color);
|
192
|
+
cursor: col-resize;
|
193
|
+
z-index: var(--z-fixed);
|
194
|
+
|
195
|
+
&-new-view {
|
196
|
+
width: 3px;
|
197
|
+
background: linear-gradient(
|
198
|
+
to right,
|
199
|
+
transparent 0,
|
200
|
+
transparent 1px,
|
201
|
+
var(--select-file-sprt-color) 1px,
|
202
|
+
var(--select-file-sprt-color) 2px,
|
203
|
+
transparent 2px,
|
204
|
+
transparent 100%
|
205
|
+
);
|
206
|
+
|
207
|
+
div {
|
208
|
+
position: relative;
|
209
|
+
|
210
|
+
&::before {
|
211
|
+
content: '';
|
212
|
+
width: 2px;
|
213
|
+
height: 16px;
|
214
|
+
background-color: var(--select-file-sprt-handler-color);
|
215
|
+
position: absolute;
|
216
|
+
left: 0.5px;
|
217
|
+
border-radius: 2px;
|
218
|
+
}
|
219
|
+
}
|
220
|
+
|
221
|
+
&:hover {
|
222
|
+
div::before {
|
223
|
+
background-color: var(--select-file-sprt-handler-hover-color);
|
224
|
+
}
|
225
|
+
}
|
226
|
+
|
227
|
+
&_selected {
|
228
|
+
div::before {
|
229
|
+
background-color: var(
|
230
|
+
--select-file-sprt-handler-selected-color
|
231
|
+
) !important;
|
232
|
+
}
|
233
|
+
}
|
234
|
+
}
|
235
|
+
}
|
236
|
+
</style>
|
@@ -215,7 +215,7 @@ export const stepsSchemeInitial = [
|
|
215
215
|
// 8
|
216
216
|
[
|
217
217
|
dynamicSteps.selectNameFolder,
|
218
|
-
dynamicSteps.selectComputeResource, // SC-1260
|
218
|
+
// dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
|
219
219
|
dynamicSteps.selectStorage,
|
220
220
|
dynamicSteps.selectOptions,
|
221
221
|
dynamicSteps.readyComplete,
|
@@ -223,7 +223,7 @@ export const stepsSchemeInitial = [
|
|
223
223
|
// 9 Customize the operating system
|
224
224
|
[
|
225
225
|
dynamicSteps.selectNameFolder,
|
226
|
-
dynamicSteps.selectComputeResource, // SC-1260
|
226
|
+
// dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
|
227
227
|
dynamicSteps.selectStorage,
|
228
228
|
dynamicSteps.selectOptions,
|
229
229
|
dynamicSteps.selectGuestOSMachineType,
|
@@ -232,7 +232,7 @@ export const stepsSchemeInitial = [
|
|
232
232
|
// 10 Customize this virtual machine's hardware
|
233
233
|
[
|
234
234
|
dynamicSteps.selectNameFolder,
|
235
|
-
dynamicSteps.selectComputeResource, // SC-1260
|
235
|
+
// dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
|
236
236
|
dynamicSteps.selectStorage,
|
237
237
|
dynamicSteps.selectOptions,
|
238
238
|
dynamicSteps.customizeHardware,
|
@@ -241,7 +241,7 @@ export const stepsSchemeInitial = [
|
|
241
241
|
// 11 Customize the operating system and this virtual machine's hardware
|
242
242
|
[
|
243
243
|
dynamicSteps.selectNameFolder,
|
244
|
-
dynamicSteps.selectComputeResource, // SC-1260
|
244
|
+
// dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
|
245
245
|
dynamicSteps.selectStorage,
|
246
246
|
dynamicSteps.selectOptions,
|
247
247
|
dynamicSteps.selectGuestOSMachineType,
|
@@ -252,7 +252,7 @@ export const stepsSchemeInitial = [
|
|
252
252
|
[
|
253
253
|
dynamicSteps.scheduledTasks,
|
254
254
|
dynamicSteps.selectNameFolder,
|
255
|
-
dynamicSteps.selectComputeResource, // SC-1260
|
255
|
+
// dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
|
256
256
|
dynamicSteps.selectStorage,
|
257
257
|
dynamicSteps.selectOptions,
|
258
258
|
dynamicSteps.readyComplete,
|
@@ -261,7 +261,7 @@ export const stepsSchemeInitial = [
|
|
261
261
|
[
|
262
262
|
dynamicSteps.scheduledTasks,
|
263
263
|
dynamicSteps.selectNameFolder,
|
264
|
-
dynamicSteps.selectComputeResource, // SC-1260
|
264
|
+
// dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
|
265
265
|
dynamicSteps.selectStorage,
|
266
266
|
dynamicSteps.selectOptions,
|
267
267
|
dynamicSteps.selectGuestOSMachineType,
|
@@ -271,7 +271,7 @@ export const stepsSchemeInitial = [
|
|
271
271
|
[
|
272
272
|
dynamicSteps.scheduledTasks,
|
273
273
|
dynamicSteps.selectNameFolder,
|
274
|
-
dynamicSteps.selectComputeResource, // SC-1260
|
274
|
+
// dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
|
275
275
|
dynamicSteps.selectStorage,
|
276
276
|
dynamicSteps.selectOptions,
|
277
277
|
dynamicSteps.customizeHardware,
|
@@ -281,7 +281,7 @@ export const stepsSchemeInitial = [
|
|
281
281
|
[
|
282
282
|
dynamicSteps.scheduledTasks,
|
283
283
|
dynamicSteps.selectNameFolder,
|
284
|
-
dynamicSteps.selectComputeResource, // SC-1260
|
284
|
+
// dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
|
285
285
|
dynamicSteps.selectStorage,
|
286
286
|
dynamicSteps.selectOptions,
|
287
287
|
dynamicSteps.selectGuestOSMachineType,
|