Skip to content

Commit b2723ff

Browse files
robertpiosikrobertpiosik
committed
Improve landscape layout styling and hidden view handling
- in landscape: similarly to main view, center target buttons and discord/coffe buttons vertically - place a dummy 'home' icon button to reserve space and align properly (it's a trick used also in main view's header) - when in api target, should also show a dummy 'back' icon button - wrap edit&ask in a div (add flex, gap) - in landscape, below targets add 6px spacer - should not set display:none on hidden content as it causes simplebar to re-render ├── apps │ └── editor │ └── src │ └── views │ └── prompt │ └── frontend │ ├── Home │ │ ├── Home.module.scss │ │ ├── Home.tsx │ │ ├── hooks │ │ │ ├── use-has-scrolled-past-mode-button.ts │ │ │ ├── use-keyboard-shortcuts.ts │ │ │ └── use-tasks.ts │ │ └── index.ts │ ├── Main │ │ └── MainView │ │ ├── MainView.tsx │ │ └── components │ │ └── Header │ │ ├── Header.module.scss │ │ ├── Header.tsx │ │ └── index.ts │ ├── Prompt.module.scss │ └── Prompt.tsx └── packages └── ui └── src └── components └── editor └── common └── Scrollable └── Scrollable.tsx
1 parent 969ab35 commit b2723ff

5 files changed

Lines changed: 119 additions & 80 deletions

File tree

‎apps/editor/src/views/prompt/frontend/Home/Home.module.scss‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
height: var(--height);
66

77
@include landscape {
8-
height: unset;
8+
height: 100%;
99
width: unset;
10-
margin: 6px 0 0 12px;
10+
margin: 0 0 0 12px;
1111

1212
@include modern-ui {
13-
margin: 6px 0 0 10px;
13+
margin: 0 0 0 10px;
1414
}
1515
}
1616

@@ -42,12 +42,14 @@
4242
position: static;
4343
flex-direction: column;
4444
align-items: flex-start;
45+
justify-content: flex-start;
4546
gap: 4px;
46-
padding: 0;
47+
padding: 6px 0;
48+
height: 100%;
4749
transition: none;
4850

4951
@include modern-ui {
50-
padding: 0;
52+
padding: 6px 0;
5153
}
5254
}
5355
}
@@ -71,7 +73,7 @@
7173
@include landscape {
7274
flex-direction: column;
7375
align-items: flex-start;
74-
margin-left: -2px;
76+
margin: auto 0 auto -2px;
7577
}
7678
}
7779

@@ -232,11 +234,7 @@
232234
}
233235

234236
.content {
235-
padding-bottom: 8px;
236-
237-
@include modern-ui {
238-
padding-bottom: 6px;
239-
}
237+
justify-content: center;
240238
}
241239
}
242240

‎apps/editor/src/views/prompt/frontend/Home/Home.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,18 @@ export const Home: React.FC<Props> = (props) => {
160160
codicon="coffee"
161161
is_compact={is_landscape || compact_step >= 2}
162162
/>
163+
{is_landscape && (
164+
<div
165+
style={{
166+
visibility: 'hidden',
167+
pointerEvents: 'none'
168+
}}
169+
>
170+
<div className={styles.header__icon}>
171+
<span className="codicon codicon-home" />
172+
</div>
173+
</div>
174+
)}
163175
</div>
164176
</div>
165177

@@ -337,6 +349,7 @@ export const Home: React.FC<Props> = (props) => {
337349
<div className={styles.inner}>
338350
<UiSeparator height={6} />
339351
{targets_section}
352+
<UiSeparator height={6} />
340353
</div>
341354
</div>
342355
</UiScrollable>

‎apps/editor/src/views/prompt/frontend/Main/MainView/components/Header/Header.module.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,19 @@
4343

4444
&__types {
4545
display: flex;
46-
align-items: center;
47-
gap: 4px;
4846

4947
@include landscape {
5048
flex-direction: column;
5149
margin: auto 0;
5250
}
51+
52+
&__inner {
53+
display: flex;
54+
gap: 4px;
55+
56+
@include landscape {
57+
flex-direction: column;
58+
}
59+
}
5360
}
5461
}

‎apps/editor/src/views/prompt/frontend/Main/MainView/components/Header/Header.tsx‎

Lines changed: 82 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -44,77 +44,93 @@ export const Header: React.FC<Props> = (props) => {
4444
<div className={styles.header__types}>
4545
{props.target == TARGET.WEB && (
4646
<>
47-
<UiKeycapWrapper char={props.is_alt_pressed ? 'E' : undefined}>
48-
<UiIconAccentButton
49-
label={web_prompt_type_labels['edit-files']}
50-
icon="edit-sparkle"
51-
is_active={props.web_prompt_type == 'edit-files'}
52-
active_color="blue"
53-
is_compact={
54-
!props.is_landscape &&
55-
(props.web_prompt_type == 'edit-files'
56-
? compact_step >= 2
57-
: compact_step >= 1)
58-
}
59-
on_click={() => props.on_web_prompt_type_change('edit-files')}
60-
/>
61-
</UiKeycapWrapper>
62-
<UiKeycapWrapper char={props.is_alt_pressed ? 'A' : undefined}>
63-
<UiIconAccentButton
64-
label={web_prompt_type_labels['ask-about-files']}
65-
icon="chat-sparkle"
66-
is_active={props.web_prompt_type == 'ask-about-files'}
67-
active_color="purple"
68-
is_compact={
69-
!props.is_landscape &&
70-
(props.web_prompt_type == 'ask-about-files'
71-
? compact_step >= 2
72-
: compact_step >= 1)
73-
}
74-
on_click={() =>
75-
props.on_web_prompt_type_change('ask-about-files')
76-
}
77-
/>
78-
</UiKeycapWrapper>
79-
{props.is_landscape && (
80-
<div
81-
style={{
82-
visibility: 'hidden',
83-
pointerEvents: 'none',
84-
width: 0
85-
}}
86-
>
87-
<UiIconButton codicon_icon="chevron-left" />
88-
{props.is_browser_connection_status_bar_closed && (
89-
<UiStatusBar
90-
icon="codicon-debug-disconnect"
91-
label=""
92-
actions={[
93-
{
94-
id: 'install',
95-
icon: 'codicon-add',
96-
label: '',
97-
title: '',
98-
on_click: () => {}
99-
}
100-
]}
101-
/>
102-
)}
103-
</div>
104-
)}
47+
<div className={styles.header__types__inner}>
48+
<UiKeycapWrapper char={props.is_alt_pressed ? 'E' : undefined}>
49+
<UiIconAccentButton
50+
label={web_prompt_type_labels['edit-files']}
51+
icon="edit-sparkle"
52+
is_active={props.web_prompt_type == 'edit-files'}
53+
active_color="blue"
54+
is_compact={
55+
!props.is_landscape &&
56+
(props.web_prompt_type == 'edit-files'
57+
? compact_step >= 2
58+
: compact_step >= 1)
59+
}
60+
on_click={() =>
61+
props.on_web_prompt_type_change('edit-files')
62+
}
63+
/>
64+
</UiKeycapWrapper>
65+
<UiKeycapWrapper char={props.is_alt_pressed ? 'A' : undefined}>
66+
<UiIconAccentButton
67+
label={web_prompt_type_labels['ask-about-files']}
68+
icon="chat-sparkle"
69+
is_active={props.web_prompt_type == 'ask-about-files'}
70+
active_color="purple"
71+
is_compact={
72+
!props.is_landscape &&
73+
(props.web_prompt_type == 'ask-about-files'
74+
? compact_step >= 2
75+
: compact_step >= 1)
76+
}
77+
on_click={() =>
78+
props.on_web_prompt_type_change('ask-about-files')
79+
}
80+
/>
81+
</UiKeycapWrapper>
82+
</div>
10583
</>
10684
)}
10785
{props.target == TARGET.API && (
108-
<UiIconAccentButton
109-
label={api_prompt_type_labels['edit-files']}
110-
icon="edit-sparkle"
111-
is_active={props.api_prompt_type == 'edit-files'}
112-
active_color="blue"
113-
is_compact={!props.is_landscape && compact_step >= 1}
114-
on_click={() => props.on_api_prompt_type_change('edit-files')}
115-
/>
86+
<>
87+
<UiIconAccentButton
88+
label={api_prompt_type_labels['edit-files']}
89+
icon="edit-sparkle"
90+
is_active={props.api_prompt_type == 'edit-files'}
91+
active_color="blue"
92+
is_compact={!props.is_landscape && compact_step >= 1}
93+
on_click={() => props.on_api_prompt_type_change('edit-files')}
94+
/>
95+
</>
96+
)}
97+
{props.is_landscape && (
98+
<div
99+
style={{
100+
visibility: 'hidden',
101+
pointerEvents: 'none',
102+
width: 0
103+
}}
104+
>
105+
{props.is_browser_connection_status_bar_closed && (
106+
<UiStatusBar
107+
icon="codicon-debug-disconnect"
108+
label=""
109+
actions={[
110+
{
111+
id: 'install',
112+
icon: 'codicon-add',
113+
label: '',
114+
title: '',
115+
on_click: () => {}
116+
}
117+
]}
118+
/>
119+
)}
120+
</div>
116121
)}
117122
</div>
123+
124+
{props.is_landscape && (
125+
<div
126+
style={{
127+
visibility: 'hidden',
128+
pointerEvents: 'none'
129+
}}
130+
>
131+
<UiIconButton codicon_icon="chevron-left" />
132+
</div>
133+
)}
118134
</div>
119135
</div>
120136
)

‎apps/editor/src/views/prompt/frontend/Prompt.module.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@
2424
flex: 1;
2525

2626
&--hidden {
27-
display: none;
27+
position: absolute;
28+
visibility: hidden;
29+
opacity: 0;
30+
pointer-events: none;
31+
width: 100%;
32+
height: 100%;
2833
}
2934

3035
:global {

0 commit comments

Comments
 (0)