Skip to content

Commit b467299

Browse files
cstnscstns
authored
Merge pull request #6622 from FlowFuse/chore/extract-common-immersive-styling
Chore: extract common immersive styling
2 parents 4b9024c + 94bf3b3 commit b467299

3 files changed

Lines changed: 149 additions & 147 deletions

File tree

‎frontend/src/pages/instance/Editor/index.vue‎

Lines changed: 1 addition & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div ref="resizeTarget" class="ff-editor-wrapper" :class="{resizing: isEditorResizing}">
2+
<div ref="resizeTarget" class="ff--immersive-editor-wrapper" :class="{resizing: isEditorResizing}">
33
<EditorWrapper
44
:instance="instance"
55
:disable-events="isEditorResizing"
@@ -250,148 +250,3 @@ export default {
250250
}
251251
}
252252
</script>
253-
254-
<style scoped lang="scss">
255-
.ff-editor-wrapper {
256-
position: relative;
257-
height: 100%;
258-
display: flex;
259-
flex: 1;
260-
261-
.tabs-wrapper {
262-
position: fixed;
263-
left: 0;
264-
top: 60px;
265-
width: 0;
266-
height: calc(100% - 60px);
267-
background: white;
268-
transform: translateX(-100%);
269-
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
270-
display: flex;
271-
flex-direction: column;
272-
overflow: hidden;
273-
container-type: inline-size;
274-
container-name: drawer;
275-
z-index: 1;
276-
277-
&.open {
278-
transform: translateX(0);
279-
box-shadow: 5px 0px 8px rgba(0, 0, 0, 0.10);
280-
}
281-
282-
.header, main {
283-
opacity: 0;
284-
pointer-events: none;
285-
transition: opacity 0.2s;
286-
}
287-
288-
&.open {
289-
.header, main {
290-
opacity: 1;
291-
pointer-events: auto;
292-
}
293-
}
294-
295-
.header {
296-
padding: 0 15px 0 0;
297-
display: flex;
298-
line-height: 1.5;
299-
border-bottom: 1px solid $ff-grey-200;
300-
background: white;
301-
z-index: 10;
302-
303-
.logo {
304-
display: flex;
305-
flex-direction: column;
306-
justify-content: center;
307-
padding-left: 15px;
308-
309-
a {
310-
display: flex;
311-
justify-content: center;
312-
align-items: center;
313-
color: $ff-grey-500;
314-
gap: 4px;
315-
316-
.ff-btn--icon {
317-
width: 16px;
318-
height: 16px;
319-
}
320-
321-
img {
322-
height: 20px;
323-
}
324-
325-
&:hover {
326-
opacity: 0.8;
327-
}
328-
}
329-
}
330-
331-
.tabs {
332-
flex: 1;
333-
padding: 0 15px;
334-
min-width: 0;
335-
}
336-
337-
.side-actions {
338-
display: flex;
339-
justify-content: flex-end;
340-
gap: 10px;
341-
align-items: center;
342-
color: $ff-grey-500;
343-
flex-shrink: 0;
344-
345-
.close-drawer-button {
346-
background: none;
347-
border: none;
348-
padding: 0;
349-
color: inherit;
350-
font: inherit;
351-
display: flex;
352-
align-items: center;
353-
354-
&:hover {
355-
cursor: pointer;
356-
}
357-
}
358-
}
359-
}
360-
}
361-
362-
&.resizing {
363-
cursor: ew-resize;
364-
user-select: none;
365-
-moz-user-select: none;
366-
-webkit-user-select: none;
367-
-ms-user-select: none;
368-
.resize-bar {
369-
background-color: $ff-blue-500;
370-
}
371-
.tabs-wrapper {
372-
transition: none;
373-
}
374-
}
375-
}
376-
</style>
377-
378-
<style lang="scss">
379-
.ff-editor-wrapper {
380-
.tabs-wrapper {
381-
main {
382-
overflow-y: auto;
383-
overflow-x: hidden;
384-
}
385-
386-
.header {
387-
.tabs {
388-
.ff-tab-option {
389-
white-space: nowrap;
390-
overflow: hidden;
391-
text-overflow: ellipsis;
392-
}
393-
}
394-
}
395-
}
396-
}
397-
</style>

‎frontend/src/ui-components/index.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,6 @@
77
@import "./stylesheets/ff-components.scss";
88

99
@import "./stylesheets/ff-theme-light.scss";
10-
@import "./stylesheets/ff-theme-dark.scss";
10+
@import "./stylesheets/ff-theme-dark.scss";
11+
12+
@import "./stylesheets/ff-immersive-editor.scss";

‎frontend/src/ui-components/stylesheets/ff-immersive-editor.scss‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
.ff--immersive-editor-wrapper {
2+
position: relative;
3+
height: 100%;
4+
display: flex;
5+
flex: 1;
6+
7+
.editor-wrapper {
8+
height: 100%;
9+
width: 100%;
10+
position: absolute;
11+
display: flex;
12+
flex-direction: column;
13+
align-content: center;
14+
justify-content: center;
15+
}
16+
.editor-wrapper .status-wrapper {
17+
margin-top: -64px;
18+
}
19+
20+
.tabs-wrapper {
21+
position: fixed;
22+
left: 0;
23+
top: 60px;
24+
width: 0;
25+
height: calc(100% - 60px);
26+
background: white;
27+
transform: translateX(-100%);
28+
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
29+
display: flex;
30+
flex-direction: column;
31+
overflow: hidden;
32+
container-type: inline-size;
33+
container-name: drawer;
34+
z-index: 1;
35+
36+
.header, main {
37+
opacity: 0;
38+
pointer-events: none;
39+
transition: opacity 0.2s;
40+
}
41+
42+
main {
43+
overflow-y: auto;
44+
overflow-x: hidden;
45+
}
46+
47+
.header {
48+
padding: 0 15px 0 0;
49+
display: flex;
50+
line-height: 1.5;
51+
border-bottom: 1px solid $ff-grey-200;
52+
background: white;
53+
z-index: 10;
54+
55+
.logo {
56+
display: flex;
57+
flex-direction: column;
58+
justify-content: center;
59+
padding-left: 15px;
60+
61+
a {
62+
display: flex;
63+
justify-content: center;
64+
align-items: center;
65+
color: $ff-grey-500;
66+
gap: 4px;
67+
68+
.ff-btn--icon {
69+
width: 16px;
70+
height: 16px;
71+
}
72+
73+
img {
74+
height: 20px;
75+
}
76+
77+
&:hover {
78+
opacity: 0.8;
79+
}
80+
}
81+
}
82+
83+
.tabs {
84+
flex: 1;
85+
padding: 0 15px;
86+
min-width: 0;
87+
88+
.ff-tab-option {
89+
white-space: nowrap;
90+
overflow: hidden;
91+
text-overflow: ellipsis;
92+
}
93+
}
94+
95+
.side-actions {
96+
display: flex;
97+
justify-content: flex-end;
98+
gap: 10px;
99+
align-items: center;
100+
color: $ff-grey-500;
101+
flex-shrink: 0;
102+
103+
.close-drawer-button {
104+
background: none;
105+
border: none;
106+
padding: 0;
107+
color: inherit;
108+
font: inherit;
109+
display: flex;
110+
align-items: center;
111+
112+
&:hover {
113+
cursor: pointer;
114+
}
115+
}
116+
}
117+
}
118+
119+
&.open {
120+
transform: translateX(0);
121+
box-shadow: 5px 0 8px rgba(0, 0, 0, 0.10);
122+
123+
.header, main {
124+
opacity: 1;
125+
pointer-events: auto;
126+
}
127+
}
128+
}
129+
130+
&.resizing {
131+
cursor: ew-resize;
132+
user-select: none;
133+
-moz-user-select: none;
134+
-webkit-user-select: none;
135+
-ms-user-select: none;
136+
137+
.resize-bar {
138+
background-color: $ff-blue-500;
139+
}
140+
141+
.tabs-wrapper {
142+
transition: none;
143+
}
144+
}
145+
}

0 commit comments

Comments
 (0)