Skip to content

Commit 589513d

Browse files
robertpiosikrobertpiosik
committed
Refactor MainView to use a consistent header structure and implement scroll-to-top functionality for view type changes
1 parent 20407bd commit 589513d

11 files changed

Lines changed: 169 additions & 148 deletions

File tree

‎packages/ui/src/components/editor/panel/Page/Page.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
display: flex;
1111
align-items: center;
1212
justify-content: space-between;
13-
margin: var(--padding-5px) var(--padding-12px) var(--padding-4px)
13+
margin: var(--padding-5px) var(--padding-12px) var(--padding-6px)
1414
var(--padding-12px);
1515
position: relative;
1616
height: 20px;

‎packages/ui/src/components/editor/panel/Scrollable/Scrollable.module.scss‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,14 @@
33
flex: 1;
44
position: relative;
55

6-
&::before {
6+
&--shadow::before {
77
content: '';
88
position: absolute;
99
z-index: 1;
1010
height: 3px;
1111
width: 100%;
12-
opacity: 0;
12+
opacity: 1;
1313
box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
1414
top: 0;
1515
}
16-
17-
&--shadow::before {
18-
opacity: 1;
19-
}
2016
}

‎packages/ui/src/components/editor/panel/Scrollable/Scrollable.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,27 @@ import cn from 'classnames'
55

66
type Props = {
77
children: ReactNode
8+
scroll_to_top_key?: any
89
}
910

10-
export const Scrollable: React.FC<Props> = ({ children }) => {
11+
export const Scrollable: React.FC<Props> = ({
12+
children,
13+
scroll_to_top_key
14+
}) => {
1115
const [has_top_shadow, set_has_top_shadow] = useState(false)
1216
const simplebar_ref = useRef<any>(null)
1317

18+
useEffect(() => {
19+
if (scroll_to_top_key === undefined) return
20+
21+
const simplebar_instance = simplebar_ref.current
22+
if (!simplebar_instance) return
23+
24+
const scroll_element = simplebar_instance.getScrollElement()
25+
if (!scroll_element) return
26+
scroll_element.scrollTop = 0
27+
}, [scroll_to_top_key])
28+
1429
useEffect(() => {
1530
const simplebar_instance = simplebar_ref.current
1631
if (!simplebar_instance) return

‎packages/ui/src/components/editor/panel/Separator/Separator.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
.separator {
22
flex-shrink: 0;
33

4+
&--4 {
5+
height: var(--padding-4px);
6+
}
7+
48
&--8 {
59
height: var(--padding-8px);
610
}

‎packages/ui/src/components/editor/panel/Separator/Separator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import cn from 'classnames'
33

44
export namespace Separator {
55
export type Props = {
6-
height: 8 | 10 | 12 | 14 | 16 | 24
6+
height: 4 | 8 | 10 | 12 | 14 | 16 | 24
77
}
88
}
99

‎packages/ui/src/components/editor/settings/Layout/Layout.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
@media (min-width: 770px) {
88
--sidebar-width: 180px;
99
}
10+
11+
[data-simplebar]:not(.simplebar-dragging) .simplebar-content-wrapper {
12+
scroll-behavior: smooth;
13+
}
1014
}
1115

1216
.sidebar {

‎packages/ui/src/styles/global.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,6 @@ strong {
4949
font-weight: 600;
5050
}
5151

52-
[data-simplebar]:not(.simplebar-dragging) .simplebar-content-wrapper {
53-
scroll-behavior: smooth;
54-
}
55-
5652
.simplebar-content {
5753
height: 100%;
5854
}

‎packages/vscode/src/views/panel/frontend/Home/Home.module.scss‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,46 +5,47 @@
55
height: 100%;
66
}
77

8-
.inner {
8+
.header {
9+
display: flex;
10+
align-items: center;
11+
gap: var(--padding-4px);
12+
width: 100%;
13+
padding: var(--padding-5px) var(--padding-12px) var(--padding-6px)
14+
var(--padding-12px);
15+
16+
&__home {
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
border-radius: var(--border-radius-5px);
21+
--size: 20px;
22+
width: var(--size);
23+
height: var(--size);
24+
color: var(--vscode-icon-foreground);
25+
}
26+
27+
&__text {
28+
font-weight: 600;
29+
color: var(--vscode-icon-foreground);
30+
}
31+
}
32+
33+
.content {
934
display: flex;
1035
flex-direction: column;
1136
align-items: center;
1237
justify-content: space-between;
1338
gap: var(--padding-24px);
1439
height: 100%;
15-
padding: var(--padding-3px) var(--padding-12px) 0 var(--padding-12px);
40+
padding: var(--padding-4px) var(--padding-12px) 0 var(--padding-12px);
1641
}
1742

18-
.top {
43+
.inner {
1944
display: flex;
2045
flex-direction: column;
2146
gap: var(--padding-8px);
2247
width: 100%;
2348

24-
&__header {
25-
display: flex;
26-
align-items: center;
27-
gap: var(--padding-4px);
28-
width: 100%;
29-
height: 24px;
30-
31-
&__home {
32-
display: flex;
33-
align-items: center;
34-
justify-content: center;
35-
border-radius: var(--border-radius-5px);
36-
--size: 20px;
37-
width: var(--size);
38-
height: var(--size);
39-
color: var(--vscode-icon-foreground);
40-
}
41-
42-
&__text {
43-
font-weight: 600;
44-
color: var(--vscode-icon-foreground);
45-
}
46-
}
47-
4849
&__buttons {
4950
display: flex;
5051
flex-direction: column;

‎packages/vscode/src/views/panel/frontend/Home/Home.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,17 @@ export const Home: React.FC<Props> = (props) => {
2828

2929
return (
3030
<div className={styles.container}>
31+
<div className={styles['header']}>
32+
<div className={styles['header__home']}>
33+
<span className="codicon codicon-home" />
34+
</div>
35+
<span className={styles['header__text']}>Home</span>
36+
</div>
37+
3138
<Scrollable>
32-
<div className={styles.inner}>
33-
<div className={styles.top}>
34-
<div className={styles['top__header']}>
35-
<div className={styles['top__header__home']}>
36-
<span className="codicon codicon-home" />
37-
</div>
38-
<span className={styles['top__header__text']}>Home</span>
39-
</div>
40-
<div className={styles['top__buttons']}>
39+
<div className={styles.content}>
40+
<div className={styles.inner}>
41+
<div className={styles['inner__buttons']}>
4142
<Enter
4243
label="Open View: New chat"
4344
description="Send prompt in a free chatbot"
@@ -56,7 +57,7 @@ export const Home: React.FC<Props> = (props) => {
5657
text_icon="CODE_WEB_CHAT_TEXT"
5758
label="Visit website"
5859
/>
59-
<div className={styles['top__buttons__donations']}>
60+
<div className={styles['inner__buttons__donations']}>
6061
<HomeLinkButton
6162
url="https://buymeacoffee.com/robertpiosik"
6263
background_color="#ffdd00"

‎packages/vscode/src/views/panel/frontend/Main/MainView/MainView.module.scss‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,55 @@
1010
}
1111
}
1212

13-
.inner {
13+
.content {
1414
display: flex;
1515
flex-direction: column;
16-
padding: var(--padding-3px) 0 var(--padding-8px) 0;
16+
padding: 0 0 var(--padding-8px) 0;
17+
}
18+
19+
.header {
20+
display: flex;
21+
justify-content: space-between;
22+
align-items: center;
23+
padding: var(--padding-3px) var(--padding-12px) var(--padding-4px)
24+
var(--padding-12px);
25+
gap: var(--padding-12px);
26+
27+
&__left {
28+
display: flex;
29+
align-items: center;
30+
gap: var(--padding-4px);
31+
32+
&__home-view-type {
33+
font-weight: 600;
34+
}
35+
36+
&__toggler {
37+
font-weight: 600;
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
border-radius: var(--border-radius-5px);
42+
--padding: var(--padding-6px);
43+
padding: 0 var(--padding);
44+
margin: 0 calc(var(--padding) * -1);
45+
height: 20px;
46+
color: var(--vscode-icon-foreground);
47+
white-space: nowrap;
48+
49+
&:focus {
50+
outline: none;
51+
}
52+
53+
&:hover {
54+
background-color: var(--vscode-toolbar-hoverBackground);
55+
}
56+
}
57+
}
58+
59+
&__right {
60+
flex: 1;
61+
}
1762
}
1863

1964
.responses {
@@ -178,50 +223,6 @@
178223
}
179224
}
180225

181-
.top {
182-
display: flex;
183-
justify-content: space-between;
184-
align-items: center;
185-
padding: 0 var(--padding-12px);
186-
gap: var(--padding-12px);
187-
188-
&__left {
189-
display: flex;
190-
align-items: center;
191-
gap: var(--padding-4px);
192-
193-
&__home-view-type {
194-
font-weight: 600;
195-
}
196-
197-
&__toggler {
198-
font-weight: 600;
199-
display: flex;
200-
align-items: center;
201-
justify-content: center;
202-
border-radius: var(--border-radius-5px);
203-
--padding: var(--padding-6px);
204-
padding: 0 var(--padding);
205-
margin: 0 calc(var(--padding) * -1);
206-
height: 20px;
207-
color: var(--vscode-icon-foreground);
208-
white-space: nowrap;
209-
210-
&:focus {
211-
outline: none;
212-
}
213-
214-
&:hover {
215-
background-color: var(--vscode-toolbar-hoverBackground);
216-
}
217-
}
218-
}
219-
220-
&__right {
221-
flex: 1;
222-
}
223-
}
224-
225226
.chat-input {
226227
margin: 0 var(--padding-12px);
227228
}

0 commit comments

Comments
 (0)