Skip to content

Commit c78ca3c

Browse files
Steve-MclSteve-Mcl
authored
Merge branch 'main' into ci-prestg-stacks-nr-update
2 parents 6a99a85 + 5b664d8 commit c78ca3c

11 files changed

Lines changed: 456 additions & 356 deletions

File tree

‎frontend/src/components/bill-of-materials/InstancesItem.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="title truncate">
44
<h6 v-if="isDevice">
55
<IconDeviceSolid class="ff-icon text-teal-700" />
6-
<router-link :to="{name: 'DeviceOverview', params: {id: instance.id}}" class="ff-link">
6+
<router-link :to="{name: 'device-overview', params: {id: instance.id}}" class="ff-link">
77
{{ instance.name }}
88
</router-link>
99
</h6>

‎frontend/src/components/global-search/components/ResultSection.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export default {
9595
routeName = 'instance-overview'
9696
break
9797
case 'device':
98-
routeName = 'DeviceOverview'
98+
routeName = 'device-overview'
9999
break
100100
default:
101101
routeName = ''

‎frontend/src/components/pipelines/DeployStageDialog.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
Device snapshots can be managed on the
112112
<router-link
113113
:to="{
114-
name: 'DeviceSnapshots',
114+
name: 'device-version-history',
115115
params: { id: stage.device.id },
116116
}"
117117
>
@@ -154,7 +154,7 @@
154154
Device snapshots can be managed on the
155155
<router-link
156156
:to="{
157-
name: 'DeviceSnapshots',
157+
name: 'device-version-history',
158158
params: { id: stage.device.id },
159159
}"
160160
>

‎frontend/src/composables/DrawerHelper.js‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import { nextTick, reactive, ref } from 'vue'
2+
3+
import { getServiceFactory } from '../services/service.factory.js'
4+
5+
export function useDrawerHelper () {
6+
const serviceFactory = getServiceFactory()
7+
const $services = serviceFactory.$serviceInstances
8+
9+
const drawer = reactive({ open: false })
10+
11+
const isMouseInDrawer = ref(false)
12+
let teaseCloseTimeout = null
13+
const isInitialTease = ref(false)
14+
15+
let containerEl = null
16+
let getInstance = null
17+
let setEditorWidth = null
18+
let defaultWidth = null
19+
20+
function bindDrawer ({
21+
containerEl: getEl,
22+
getInstance: getInst,
23+
setEditorWidth: setWidth,
24+
defaultWidth: width
25+
} = {}) {
26+
containerEl = getEl
27+
getInstance = getInst
28+
setEditorWidth = setWidth
29+
defaultWidth = width
30+
}
31+
32+
function notifyDrawerState () {
33+
const instance = getInstance()
34+
35+
if (!containerEl || !instance) return
36+
37+
const iframe = window.frames['immersive-editor-iframe']
38+
39+
if (iframe) {
40+
const targetOrigin = instance.url || window.location.origin
41+
42+
$services.messaging.sendMessage({
43+
message: {
44+
type: 'drawer-state',
45+
payload: { open: drawer.open }
46+
},
47+
target: iframe,
48+
targetOrigin
49+
})
50+
}
51+
}
52+
53+
function toggleDrawer () {
54+
if (drawer.open) {
55+
drawer.open = false
56+
} else {
57+
drawer.open = true
58+
if (setEditorWidth && defaultWidth != null) {
59+
setEditorWidth(defaultWidth)
60+
}
61+
}
62+
nextTick(() => {
63+
notifyDrawerState()
64+
})
65+
}
66+
67+
function handleDrawerMouseEnter () {
68+
if (isInitialTease.value) {
69+
isMouseInDrawer.value = true
70+
}
71+
}
72+
73+
function handleDrawerMouseLeave () {
74+
if (isInitialTease.value) {
75+
isMouseInDrawer.value = false
76+
if (teaseCloseTimeout) {
77+
clearTimeout(teaseCloseTimeout)
78+
teaseCloseTimeout = setTimeout(() => {
79+
if (!isMouseInDrawer.value && drawer.open) {
80+
toggleDrawer()
81+
}
82+
isInitialTease.value = false
83+
teaseCloseTimeout = null
84+
}, 2000)
85+
}
86+
}
87+
}
88+
89+
function runInitialTease () {
90+
setTimeout(() => {
91+
isInitialTease.value = true
92+
toggleDrawer()
93+
teaseCloseTimeout = setTimeout(() => {
94+
if (!isMouseInDrawer.value) {
95+
toggleDrawer()
96+
}
97+
isInitialTease.value = false
98+
teaseCloseTimeout = null
99+
}, 2000)
100+
}, 1200)
101+
}
102+
103+
function cleanup () {
104+
if (teaseCloseTimeout) {
105+
clearTimeout(teaseCloseTimeout)
106+
teaseCloseTimeout = null
107+
}
108+
}
109+
110+
return {
111+
drawer,
112+
toggleDrawer,
113+
notifyDrawerState,
114+
handleDrawerMouseEnter,
115+
handleDrawerMouseLeave,
116+
runInitialTease,
117+
bindDrawer,
118+
cleanup
119+
}
120+
}

‎frontend/src/composables/ResizingHelper.js‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function useResizingHelper () {
1313
const MAX_WIDTH_RATIO = ref(1)
1414
const MAX_HEIGHT_RATIO = ref(1)
1515

16-
let resizing = false
16+
const resizing = ref(false)
1717
let startX = 0
1818
let startY = 0
1919
let startWidth = 0
@@ -23,7 +23,7 @@ export function useResizingHelper () {
2323
const height = ref(0)
2424

2525
function startResize (e) {
26-
resizing = true
26+
resizing.value = true
2727
startX = e.clientX
2828
startY = e.clientY
2929

@@ -35,13 +35,13 @@ export function useResizingHelper () {
3535
}
3636

3737
function stopResize () {
38-
resizing = false
38+
resizing.value = false
3939
document.removeEventListener('mousemove', resize)
4040
document.removeEventListener('mouseup', stopResize)
4141
}
4242

4343
function resize (e) {
44-
if (resizing) {
44+
if (resizing.value) {
4545
const widthChange = e.clientX - startX
4646
const heightChange = e.clientY - startY
4747

@@ -67,7 +67,7 @@ export function useResizingHelper () {
6767
minHeight,
6868
maxViewportMarginX,
6969
maxViewportMarginY,
70-
mobileBreakpoint,
70+
mobileBreakpoint = 640,
7171
maxWidthRatio,
7272
maxHeightRatio
7373
} = {}) {
@@ -97,6 +97,14 @@ export function useResizingHelper () {
9797
MAX_HEIGHT_RATIO.value = maxHeightRatio ?? 1
9898
}
9999

100+
function setWidth (newWidth) {
101+
width.value = newWidth
102+
}
103+
104+
function setHeight (newHeight) {
105+
height.value = newHeight
106+
}
107+
100108
const heightStyle = computed(() => {
101109
if (viewportHeight.value < MOBILE_BREAKPOINT.value) {
102110
return `${Math.min(height.value, viewportHeight.value)}px`
@@ -111,11 +119,16 @@ export function useResizingHelper () {
111119
return `${Math.min(width.value, viewportWidth.value * MAX_WIDTH_RATIO.value)}px`
112120
})
113121

122+
const isResizing = computed(() => resizing.value)
123+
114124
return {
115125
heightStyle,
116126
widthStyle,
127+
isResizing,
117128
startResize,
118129
stopResize,
119-
bindResizer
130+
bindResizer,
131+
setWidth,
132+
setHeight
120133
}
121134
}

‎frontend/src/pages/application/DeviceGroup/devices.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
<ff-checkbox v-model="device.selected" />
5050
</ff-data-table-cell>
5151
<ff-data-table-cell>
52-
<router-link :to="{name: 'DeviceOverview', params: {id: device.id}}">{{ device.name }}</router-link>
52+
<router-link :to="{name: 'device-overview', params: {id: device.id}}">{{ device.name }}</router-link>
5353
</ff-data-table-cell>
5454
<ff-data-table-cell>{{ device.type }}</ff-data-table-cell>
5555
</ff-data-table-row>
@@ -80,7 +80,7 @@
8080
<ff-checkbox v-model="device.selected" class="inline" />
8181
</ff-data-table-cell>
8282
<ff-data-table-cell class="w-1/3">
83-
<router-link :to="{name: 'DeviceOverview', params: {id: device.id}}">{{ device.name }}</router-link>
83+
<router-link :to="{name: 'device-overview', params: {id: device.id}}">{{ device.name }}</router-link>
8484
</ff-data-table-cell>
8585
<ff-data-table-cell class="w-1/3">{{ device.name }}</ff-data-table-cell>
8686
<ff-data-table-cell v-if="!editMode" class="w-1/3">

‎frontend/src/pages/device/index.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -247,13 +247,13 @@ export default {
247247
return [
248248
{
249249
label: 'Overview',
250-
to: { name: 'DeviceOverview' },
250+
to: { name: 'device-overview' },
251251
tag: 'device-overview'
252252
},
253253
{
254254
label: 'Version History',
255255
to: {
256-
name: 'DeviceSnapshots',
256+
name: 'device-version-history',
257257
params: { id: this.$route.params.id }
258258
},
259259
tag: 'version-history'
@@ -281,7 +281,7 @@ export default {
281281
},
282282
{
283283
label: 'Developer Mode',
284-
to: { name: 'DeviceDeveloperMode' },
284+
to: { name: 'device-developer-mode' },
285285
tag: 'device-devmode',
286286
hidden: !(this.isDevModeAvailable && this.device.mode === 'developer')
287287
}
@@ -333,7 +333,7 @@ export default {
333333
// the device status is empty or the device is in a transition state
334334
// This is to prevent settings pages from refreshing the device state while modifying settings
335335
// See `watch: { device: { handler () ... in pages/device/Settings/General.vue for why that happens
336-
const settingsPages = ['DeviceOverview', 'DeviceDeveloperMode']
336+
const settingsPages = ['device-overview', 'device-developer-mode']
337337
try {
338338
if (settingsPages.includes(this.$route.name)) {
339339
await this.loadDevice()

0 commit comments

Comments
 (0)