Skip to content

Commit 34db75d

Browse files
computing-dencomputing-den
committed
style
1 parent fb8cd98 commit 34db75d

File tree

4 files changed

+132
-116
lines changed

4 files changed

+132
-116
lines changed

‎src/view/section.css‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,19 @@
5151
display: flex;
5252
flex-direction: column;
5353

54-
.message {
55-
font-size: 1.5rem;
56-
color: var(--text-weak);
57-
margin: 2rem 1rem 2rem;
58-
text-align: center;
59-
letter-spacing: 2px;
54+
.messages {
55+
display: grid;
56+
justify-items: center;
57+
align-items: center;
58+
margin: 2rem 2rem;
59+
gap: 0.5rem;
60+
61+
& p {
62+
font-size: 0.9rem;
63+
color: var(--text-weak);
64+
text-align: center;
65+
letter-spacing: 2px;
66+
}
6067
}
6168
}
6269
}

‎src/view/section.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,14 +72,14 @@ export class Body extends React.Component<BodyProps> {
7272
}
7373
}
7474

75-
export function Message(props: { children: React.ReactNode }) {
76-
return <div className="message">{props.children}</div>;
75+
export function Messages(props: { children: React.ReactNode }) {
76+
return <div className="messages">{props.children}</div>;
7777
}
7878

7979
export default class Section extends React.Component<SectionProps> {
8080
static Header = Header;
8181
static Body = Body;
82-
static Message = Message;
82+
static Messages = Messages;
8383
render() {
8484
return (
8585
<div className={`section ${this.props.bordered ? 'bordered' : ''} ${this.props.className || ''}`}>

‎src/view/welcome.css‎

Lines changed: 58 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -49,83 +49,79 @@
4949
}
5050

5151
.welcome-sessions {
52-
.search-section .section-body {
53-
/* Set 1px top padding so that the focus outline of the search input doesn't overflow. */
54-
padding: 1px var(--container-padding-hor) 0 var(--container-padding-hor);
52+
.search-header {
53+
display: flex;
54+
align-items: center;
5555

56-
.search-subsection {
57-
display: flex;
58-
align-items: center;
56+
position: sticky;
57+
top: 0;
58+
background: var(--vscode-sideBar-background);
59+
padding-bottom: 0.5rem;
60+
z-index: 2;
61+
/* Set 1px top padding so that the focus outline of the search input doesn't overflow. */
62+
padding: 1px var(--container-padding-hor) 0.5rem var(--container-padding-hor);
63+
transition: 0.2s box-shadow ease;
5964

60-
& vscode-text-field {
61-
flex: 1;
62-
}
65+
&:not(.at-top) {
66+
box-shadow: 0 1px 10px 1px #0000002e;
67+
}
6368

64-
& vscode-button {
65-
margin-left: var(--spacing-x-small);
66-
}
69+
& vscode-text-field {
70+
flex: 1;
6771
}
6872

69-
.signin-subsection {
70-
p {
71-
margin: 0;
72-
}
73-
/* display: flex; */
74-
/* flex-direction: column; */
75-
76-
/* > * + * { */
77-
/* margin-left: 0.25rem; */
78-
/* } */
79-
80-
/* & vscode-button::part(content) { */
81-
/* white-space: nowrap; */
82-
/* } */
83-
84-
/* .fields { */
85-
/* display: flex; */
86-
/* margin: 0 -0.25rem; */
87-
88-
/* & > * { */
89-
/* flex: 1 0 0; */
90-
/* margin: 0 0.25rem; */
91-
/* } */
92-
/* } */
93-
/* .buttons { */
94-
/* display: flex; */
95-
/* flex-direction: column; */
96-
/* /\* margin: 0 -0.25rem; *\/ */
97-
98-
/* & > * { */
99-
/* flex: 1 0 0; */
100-
/* margin-top: 0.25rem; */
101-
/* /\* margin: 0 0.25rem; *\/ */
102-
/* } */
103-
/* } */
73+
& vscode-button {
74+
margin-left: var(--spacing-x-small);
10475
}
10576
}
10677

78+
.signin {
79+
margin-top: 0;
80+
padding: 0 var(--container-padding-hor);
81+
82+
p {
83+
margin: 0;
84+
}
85+
/* display: flex; */
86+
/* flex-direction: column; */
87+
88+
/* > * + * { */
89+
/* margin-left: 0.25rem; */
90+
/* } */
91+
92+
/* & vscode-button::part(content) { */
93+
/* white-space: nowrap; */
94+
/* } */
95+
96+
/* .fields { */
97+
/* display: flex; */
98+
/* margin: 0 -0.25rem; */
99+
100+
/* & > * { */
101+
/* flex: 1 0 0; */
102+
/* margin: 0 0.25rem; */
103+
/* } */
104+
/* } */
105+
/* .buttons { */
106+
/* display: flex; */
107+
/* flex-direction: column; */
108+
/* /\* margin: 0 -0.25rem; *\/ */
109+
110+
/* & > * { */
111+
/* flex: 1 0 0; */
112+
/* margin-top: 0.25rem; */
113+
/* /\* margin: 0 0.25rem; *\/ */
114+
/* } */
115+
/* } */
116+
}
107117
.sessions-section {
118+
margin-top: var(--spacing-medium);
108119
/* .session-item { */
109120
/* flex-direction: row; */
110121
/* .card-content { */
111122
/* display: flex; */
112123
/* flex-direction: column; */
113124
/* } */
114125
/* } */
115-
116-
.empty-listings {
117-
display: grid;
118-
justify-items: center;
119-
align-items: center;
120-
margin: 2rem 1rem 2rem;
121-
gap: 0.5rem;
122-
123-
& p {
124-
font-size: 0.9rem;
125-
color: var(--text-weak);
126-
text-align: center;
127-
letter-spacing: 2px;
128-
}
129-
}
130126
}
131127
}

‎src/view/welcome.tsx‎

Lines changed: 58 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import postMessage from './api.js';
1010
import _ from 'lodash';
1111
import { VSCodeButton, VSCodeLink, VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
1212
import { Link } from '@vscode/webview-ui-toolkit';
13+
import { cn } from './misc.js';
1314

1415
type Props = { user?: t.UserUI; welcome: t.WelcomeUIState; earlyAccessEmail?: string };
1516

@@ -75,6 +76,7 @@ export default function Welcome(props: Props) {
7576

7677
function WelcomeSessions(props: Props) {
7778
const { welcome } = props;
79+
const [atTop, setAtTop] = useState(true);
7880

7981
function login(e: React.MouseEvent) {
8082
e.stopPropagation();
@@ -94,59 +96,70 @@ function WelcomeSessions(props: Props) {
9496
const featured = welcome.sessions.filter(
9597
s => s.group === 'remote' && s.head.id !== current?.head.id && !recent.some(r => r.head.id === s.head.id),
9698
);
97-
const empty = !current && recent.length === 0 && featured.length === 0;
99+
100+
useEffect(() => {
101+
function scrolled() {
102+
setAtTop(!document.scrollingElement?.scrollTop);
103+
}
104+
105+
scrolled();
106+
window.addEventListener('scroll', scrolled);
107+
return () => window.removeEventListener('scroll', scrolled);
108+
}, []);
98109

99110
return (
100111
<Screen className="welcome-sessions">
101112
{/*<LatencyTest store={this.props.store} />*/}
102-
<Section className="search-section">
103-
<Section.Body>
104-
<div className="search-subsection subsection">
105-
<VSCodeTextField
106-
placeholder="Search"
107-
autofocus
108-
value={welcome.searchQuery}
109-
onInput={search}
110-
></VSCodeTextField>
111-
112-
<VSCodeButton
113-
onClick={() => postMessage({ type: 'welcome/openWorkspace' })}
114-
title="Open session"
115-
appearance="secondary"
116-
>
117-
<span className="codicon codicon-folder-opened" />
118-
</VSCodeButton>
119-
<VSCodeButton
120-
onClick={() => postMessage({ type: 'welcome/openNewSessionInRecorder' })}
121-
title="Record a new session"
122-
>
123-
<span className="codicon codicon-device-camera-video" />
124-
</VSCodeButton>
125-
</div>
126-
{!props.user && (
127-
<div className="signin-subsection subsection">
128-
<VSCodeLink href="#" onClick={login}>
129-
Log in
130-
</VSCodeLink>{' '}
131-
or{' '}
132-
<VSCodeLink href="#" onClick={join}>
133-
join
134-
</VSCodeLink>{' '}
135-
to publish your own sessions.
136-
</div>
137-
)}
138-
</Section.Body>
139-
</Section>
140-
<SessionsSection user={props.user} title="WORKSPACE" listings={_.compact([current])} />
113+
<div className={cn('search-header', atTop && 'at-top')}>
114+
<VSCodeTextField placeholder="Search" autofocus value={welcome.searchQuery} onInput={search}></VSCodeTextField>
115+
<VSCodeButton
116+
onClick={() => postMessage({ type: 'welcome/openWorkspace' })}
117+
title="Open session"
118+
appearance="secondary"
119+
>
120+
<span className="codicon codicon-folder-opened" />
121+
</VSCodeButton>
122+
<VSCodeButton
123+
onClick={() => postMessage({ type: 'welcome/openNewSessionInRecorder' })}
124+
title="Record a new session"
125+
>
126+
<span className="codicon codicon-device-camera-video" />
127+
</VSCodeButton>
128+
</div>
129+
{!props.user && (
130+
<div className="signin">
131+
<VSCodeLink href="#" onClick={login}>
132+
Log in
133+
</VSCodeLink>{' '}
134+
or{' '}
135+
<VSCodeLink href="#" onClick={join}>
136+
join
137+
</VSCodeLink>{' '}
138+
to publish your own sessions.
139+
</div>
140+
)}
141+
<SessionsSection
142+
user={props.user}
143+
title="WORKSPACE"
144+
listings={_.compact([current])}
145+
emptyMessage="No session found in workspace"
146+
/>
141147
{recent.length > 0 && <SessionsSection user={props.user} title="RECENT" listings={recent} />}
142-
<SessionsSection user={props.user} title="FEATURED" listings={featured} loading={welcome.loadingFeatured} />
148+
<SessionsSection
149+
user={props.user}
150+
title="FEATURED"
151+
listings={featured}
152+
loading={welcome.loadingFeatured}
153+
emptyMessage="Could not fetch featured sessions"
154+
/>
143155
</Screen>
144156
);
145157
}
146158

147159
type SessionsSectionProps = {
148160
user?: t.UserUI;
149161
title: string;
162+
emptyMessage?: string;
150163
listings: t.SessionUIListing[];
151164
bordered?: boolean;
152165
loading?: boolean;
@@ -174,9 +187,9 @@ function SessionsSection(props: SessionsSectionProps) {
174187
onShare={share}
175188
/>
176189
)}
177-
{props.listings.length === 0 && !props.loading && (
178-
<div className="empty-listings">
179-
<p>No session found in workspace</p>
190+
{props.listings.length === 0 && !props.loading && props.emptyMessage && (
191+
<Section.Messages>
192+
<p>{props.emptyMessage}</p>
180193
{/*
181194
<VSCodeButton
182195
appearance="secondary"
@@ -185,7 +198,7 @@ function SessionsSection(props: SessionsSectionProps) {
185198
>
186199
Open session
187200
</VSCodeButton>*/}
188-
</div>
201+
</Section.Messages>
189202
)}
190203
</Section.Body>
191204
</Section>

0 commit comments

Comments
 (0)