Skip to content

Commit 658b0ce

Browse files
chariskcharisk
authored
Convert re-usable components to styled-components (#1112)
1 parent c084e31 commit 658b0ce

9 files changed

Lines changed: 86 additions & 128 deletions

File tree

‎extensions/ql-vscode/src/remote-queries/view/Badge.tsx‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,29 @@
11
import * as React from 'react';
2+
import styled from 'styled-components';
3+
4+
const BadgeContainer = styled.span`
5+
justify-content: center;
6+
align-items: center;
7+
min-height: 100vh;
8+
padding-left: 0.2em;
9+
`;
10+
11+
const BadgeText = styled.span`
12+
display: inline-block;
13+
min-width: 1.5em;
14+
padding: 0.3em;
15+
border-radius: 35%;
16+
font-size: x-small;
17+
text-align: center;
18+
background: var(--vscode-badge-background);
19+
color: var(--vscode-badge-foreground);
20+
border-color: var(--vscode-badge-background);
21+
`;
222

323
const Badge = ({ text }: { text: string }) => (
4-
<span className="vscode-codeql__badge-container">
5-
<span className="vscode-codeql__badge">{text}</span>
6-
</span>
24+
<BadgeContainer>
25+
<BadgeText>{text}</BadgeText>
26+
</BadgeContainer>
727
);
828

929
export default Badge;

‎extensions/ql-vscode/src/remote-queries/view/DownloadButton.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
import * as React from 'react';
22
import * as octicons from '../../view/octicons';
3+
import styled from 'styled-components';
4+
5+
const ButtonLink = styled.a`
6+
display: inline-block;
7+
font-size: x-small;
8+
text-decoration: none;
9+
cursor: pointer;
10+
vertical-align: middle;
11+
12+
svg {
13+
fill: var(--vscode-textLink-foreground);
14+
}
15+
`;
316

417
const DownloadButton = ({ text, onClick }: { text: string, onClick: () => void }) => (
5-
<a className="vscode-codeql__download-button"
6-
onClick={onClick}>
18+
<ButtonLink onClick={onClick}>
719
{octicons.download}{text}
8-
</a>
20+
</ButtonLink>
921
);
1022

1123
export default DownloadButton;

‎extensions/ql-vscode/src/remote-queries/view/DownloadSpinner.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
11
import { Spinner } from '@primer/react';
22
import * as React from 'react';
3+
import styled from 'styled-components';
4+
5+
const SpinnerContainer = styled.span`
6+
vertical-align: middle;
7+
8+
svg {
9+
width: 0.8em;
10+
height: 0.8em;
11+
}
12+
`;
313

414
const DownloadSpinner = () => (
5-
<span className="vscode-codeql__download-spinner">
15+
<SpinnerContainer>
616
<Spinner size="small" />
7-
</span>
17+
</SpinnerContainer>
818
);
919

1020
export default DownloadSpinner;

‎extensions/ql-vscode/src/remote-queries/view/HorizontalSpace.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import * as React from 'react';
1+
import styled from 'styled-components';
22

3-
const HorizontalSpace = () => (
4-
<span className="vscode-codeql__horizontal-space" />
5-
);
3+
const HorizontalSpace = styled.div<{ size: 1 | 2 | 3 }>`
4+
flex: 0 0 auto;
5+
display: inline-block;
6+
width: ${props => 0.2 * props.size}em;
7+
`;
68

79
export default HorizontalSpace;

‎extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,10 @@ const sumAnalysesResults = (analysesResults: AnalysisResults[]) =>
6969

7070
const QueryInfo = (queryResult: RemoteQueryResult) => (
7171
<>
72-
<VerticalSpace />
72+
<VerticalSpace size={1} />
7373
{queryResult.totalResultCount} results in {queryResult.totalRepositoryCount} repositories
7474
({queryResult.executionDuration}), {queryResult.executionTimestamp}
75-
<VerticalSpace />
75+
<VerticalSpace size={1} />
7676
<span className="vscode-codeql__query-file">{octicons.file}
7777
<a className="vscode-codeql__query-file-link" href="#" onClick={() => openQueryFile(queryResult)}>
7878
{queryResult.queryFileName}
@@ -97,7 +97,7 @@ const SummaryTitleWithResults = ({
9797

9898
return (
9999
<div className="vscode-codeql__query-summary-container">
100-
<SectionTitle text={`Repositories with results (${queryResult.affectedRepositoryCount}):`} />
100+
<SectionTitle>Repositories with results ({queryResult.affectedRepositoryCount}):</SectionTitle>
101101
{
102102
showDownloadButton && <DownloadButton
103103
text="Download all"
@@ -109,7 +109,7 @@ const SummaryTitleWithResults = ({
109109

110110
const SummaryTitleNoResults = () => (
111111
<div className="vscode-codeql__query-summary-container">
112-
<SectionTitle text="No results found" />
112+
<SectionTitle>No results found</SectionTitle>
113113
</div>
114114
);
115115

@@ -128,7 +128,7 @@ const SummaryItemDownload = ({
128128

129129
if (analysisResults.status === 'InProgress') {
130130
return <>
131-
<HorizontalSpace />
131+
<HorizontalSpace size={2} />
132132
<DownloadSpinner />
133133
</>;
134134
}
@@ -196,16 +196,16 @@ const Summary = ({
196196

197197
const AnalysesResultsTitle = ({ totalAnalysesResults, totalResults }: { totalAnalysesResults: number, totalResults: number }) => {
198198
if (totalAnalysesResults === totalResults) {
199-
return <SectionTitle text={`${totalAnalysesResults} results`} />;
199+
return <SectionTitle>{totalAnalysesResults} results</SectionTitle>;
200200
}
201201

202-
return <SectionTitle text={`${totalAnalysesResults}/${totalResults} results`} />;
202+
return <SectionTitle>{totalAnalysesResults}/{totalResults} results</SectionTitle>;
203203
};
204204

205205
const AnalysesResultsDescription = ({ totalAnalysesResults, totalResults }: { totalAnalysesResults: number, totalResults: number }) => {
206206
if (totalAnalysesResults < totalResults) {
207207
return <>
208-
<VerticalSpace />
208+
<VerticalSpace size={1} />
209209
Some results haven&apos;t been downloaded automatically because of their size or because enough were downloaded already.
210210
Download them manually from the list above if you want to see them here.
211211
</>;
@@ -223,8 +223,7 @@ const AnalysesResults = ({ analysesResults, totalResults }: { analysesResults: A
223223

224224
return (
225225
<>
226-
<VerticalSpace />
227-
<VerticalSpace />
226+
<VerticalSpace size={2} />
228227
<AnalysesResultsTitle
229228
totalAnalysesResults={totalAnalysesResults}
230229
totalResults={totalResults} />
@@ -263,7 +262,7 @@ export function RemoteQueries(): JSX.Element {
263262
try {
264263
return <div>
265264
<ThemeProvider>
266-
<ViewTitle title={queryResult.queryTitle} />
265+
<ViewTitle>{queryResult.queryTitle}</ViewTitle>
267266
<QueryInfo {...queryResult} />
268267
<Summary queryResult={queryResult} analysesResults={analysesResults} />
269268
<AnalysesResults analysesResults={analysesResults} totalResults={queryResult.totalResultCount} />

‎extensions/ql-vscode/src/remote-queries/view/SectionTitle.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
import * as React from 'react';
1+
import styled from 'styled-components';
22

3-
const SectionTitle = ({ text }: { text: string }) => (
4-
<h2 className="vscode-codeql__section-title">{text}</h2>
5-
);
3+
const SectionTitle = styled.h2`
4+
font-size: medium;
5+
font-weight: 500;
6+
padding: 0 0.5em 0 0;
7+
margin: 0;
8+
display: inline-block;
9+
vertical-align: middle;
10+
`;
611

712
export default SectionTitle;

‎extensions/ql-vscode/src/remote-queries/view/VerticalSpace.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import * as React from 'react';
1+
import styled from 'styled-components';
22

3-
const VerticalSpace = () => (
4-
<div className="vscode-codeql__vertical-space" />
5-
);
3+
const VerticalSpace = styled.div<{ size: 1 | 2 | 3 }>`
4+
flex: 0 0 auto;
5+
height: ${props => 0.5 * props.size}em;
6+
`;
67

78
export default VerticalSpace;

‎extensions/ql-vscode/src/remote-queries/view/ViewTitle.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import * as React from 'react';
1+
import styled from 'styled-components';
22

3-
const ViewTitle = ({ title }: { title: string }) => (
4-
<h1 className="vscode-codeql__view-title">{title}</h1>
5-
);
3+
const ViewTitle = styled.h1`
4+
font-size: large;
5+
margin-bottom: 0.5em;
6+
font-weight: 500;
7+
`;
68

79
export default ViewTitle;

‎extensions/ql-vscode/src/remote-queries/view/baseStyles.css‎

Lines changed: 0 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -2,96 +2,3 @@ body {
22
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
33
sans-serif, Apple Color Emoji, Segoe UI Emoji;
44
}
5-
6-
/* -------------------------------------------------------------------------- */
7-
/* SectionTitle component */
8-
/* -------------------------------------------------------------------------- */
9-
10-
.vscode-codeql__section-title {
11-
font-size: medium;
12-
font-weight: 500;
13-
padding: 0 0.5em 0 0;
14-
margin: 0;
15-
display: inline-block;
16-
vertical-align: middle;
17-
}
18-
19-
/* -------------------------------------------------------------------------- */
20-
/* ViewTitle component */
21-
/* -------------------------------------------------------------------------- */
22-
23-
.vscode-codeql__view-title {
24-
font-size: large;
25-
margin-bottom: 0.5em;
26-
font-weight: 500;
27-
}
28-
29-
/* -------------------------------------------------------------------------- */
30-
/* VerticalSpace component */
31-
/* -------------------------------------------------------------------------- */
32-
33-
.vscode-codeql__vertical-space {
34-
flex: 0 0 auto;
35-
height: 0.5rem;
36-
}
37-
38-
/* -------------------------------------------------------------------------- */
39-
/* HorizontalSpace component */
40-
/* -------------------------------------------------------------------------- */
41-
42-
.vscode-codeql__horizontal-space {
43-
flex: 0 0 auto;
44-
display: inline-block;
45-
width: 0.2rem;
46-
}
47-
48-
/* -------------------------------------------------------------------------- */
49-
/* Badge component */
50-
/* -------------------------------------------------------------------------- */
51-
52-
.vscode-codeql__badge-container {
53-
justify-content: center;
54-
align-items: center;
55-
min-height: 100vh;
56-
padding-left: 0.2em;
57-
}
58-
59-
.vscode-codeql__badge {
60-
display: inline-block;
61-
min-width: 1.5em;
62-
padding: 0.3em;
63-
border-radius: 35%;
64-
font-size: x-small;
65-
text-align: center;
66-
background: var(--vscode-badge-background);
67-
color: var(--vscode-badge-foreground);
68-
border-color: var(--vscode-badge-background);
69-
}
70-
71-
/* -------------------------------------------------------------------------- */
72-
/* DownloadButton component */
73-
/* -------------------------------------------------------------------------- */
74-
75-
.vscode-codeql__download-button {
76-
display: inline-block;
77-
font-size: x-small;
78-
text-decoration: none;
79-
cursor: pointer;
80-
vertical-align: middle;
81-
}
82-
83-
.vscode-codeql__download-button svg {
84-
fill: var(--vscode-textLink-foreground);
85-
}
86-
87-
/* -------------------------------------------------------------------------- */
88-
/* DownloadSpinner component */
89-
/* -------------------------------------------------------------------------- */
90-
.vscode-codeql__download-spinner {
91-
vertical-align: middle;
92-
}
93-
94-
.vscode-codeql__download-spinner svg {
95-
width: 0.8em;
96-
height: 0.8em;
97-
}

0 commit comments

Comments
 (0)