mrva/vscode-codeql
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Convert re-usable components to styled-components (#1112)

Browse Source
This commit is contained in:
Charis Kyriakou
2022-02-03 08:34:24 +00:00
committed by GitHub
parent c084e31416
commit 658b0ce243
9 changed files with 86 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
extensions/ql-vscode/src/remote-queries/view/Badge.tsx
View File

@@ -1,9 +1,29 @@
import * as React from 'react';
import styled from 'styled-components';
const BadgeContainer = styled.span`
justify-content: center;
align-items: center;
min-height: 100vh;
padding-left: 0.2em;
`;
const BadgeText = styled.span`
display: inline-block;
min-width: 1.5em;
padding: 0.3em;
border-radius: 35%;
font-size: x-small;
text-align: center;
background: var(--vscode-badge-background);
color: var(--vscode-badge-foreground);
border-color: var(--vscode-badge-background);
`;
const Badge = ({ text }: { text: string }) => (
<span className="vscode-codeql__badge-container">
<span className="vscode-codeql__badge">{text}</span>
</span>
<BadgeContainer>
<BadgeText>{text}</BadgeText>
</BadgeContainer>
);
export default Badge;

18
extensions/ql-vscode/src/remote-queries/view/DownloadButton.tsx
View File

@@ -1,11 +1,23 @@
import * as React from 'react';
import * as octicons from '../../view/octicons';
import styled from 'styled-components';
const ButtonLink = styled.a`
display: inline-block;
font-size: x-small;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
svg {
fill: var(--vscode-textLink-foreground);
}
`;
const DownloadButton = ({ text, onClick }: { text: string, onClick: () => void }) => (
<a className="vscode-codeql__download-button"
onClick={onClick}>
<ButtonLink onClick={onClick}>
{octicons.download}{text}
</a>
</ButtonLink>
);
export default DownloadButton;

14
extensions/ql-vscode/src/remote-queries/view/DownloadSpinner.tsx
View File

@@ -1,10 +1,20 @@
import { Spinner } from '@primer/react';
import * as React from 'react';
import styled from 'styled-components';
const SpinnerContainer = styled.span`
vertical-align: middle;
svg {
width: 0.8em;
height: 0.8em;
}
`;
const DownloadSpinner = () => (
<span className="vscode-codeql__download-spinner">
<SpinnerContainer>
<Spinner size="small" />
</span>
</SpinnerContainer>
);
export default DownloadSpinner;

10
extensions/ql-vscode/src/remote-queries/view/HorizontalSpace.tsx
View File

@@ -1,7 +1,9 @@
import * as React from 'react';
import styled from 'styled-components';
const HorizontalSpace = () => (
<span className="vscode-codeql__horizontal-space" />
);
const HorizontalSpace = styled.div<{ size: 1 | 2 | 3 }>`
flex: 0 0 auto;
display: inline-block;
width: ${props => 0.2 * props.size}em;
`;
export default HorizontalSpace;

21
extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx
View File

@@ -69,10 +69,10 @@ const sumAnalysesResults = (analysesResults: AnalysisResults[]) =>
const QueryInfo = (queryResult: RemoteQueryResult) => (
<>
<VerticalSpace />
<VerticalSpace size={1} />
{queryResult.totalResultCount} results in {queryResult.totalRepositoryCount} repositories
({queryResult.executionDuration}), {queryResult.executionTimestamp}
<VerticalSpace />
<VerticalSpace size={1} />
<span className="vscode-codeql__query-file">{octicons.file}
<a className="vscode-codeql__query-file-link" href="#" onClick={() => openQueryFile(queryResult)}>
{queryResult.queryFileName}
@@ -97,7 +97,7 @@ const SummaryTitleWithResults = ({
return (
<div className="vscode-codeql__query-summary-container">
<SectionTitle text={`Repositories with results (${queryResult.affectedRepositoryCount}):`} />
<SectionTitle>Repositories with results ({queryResult.affectedRepositoryCount}):</SectionTitle>
{
showDownloadButton && <DownloadButton
text="Download all"
@@ -109,7 +109,7 @@ const SummaryTitleWithResults = ({
const SummaryTitleNoResults = () => (
<div className="vscode-codeql__query-summary-container">
<SectionTitle text="No results found" />
<SectionTitle>No results found</SectionTitle>
</div>
);
@@ -128,7 +128,7 @@ const SummaryItemDownload = ({
if (analysisResults.status === 'InProgress') {
return <>
<HorizontalSpace />
<HorizontalSpace size={2} />
<DownloadSpinner />
</>;
}
@@ -196,16 +196,16 @@ const Summary = ({
const AnalysesResultsTitle = ({ totalAnalysesResults, totalResults }: { totalAnalysesResults: number, totalResults: number }) => {
if (totalAnalysesResults === totalResults) {
return <SectionTitle text={`${totalAnalysesResults} results`} />;
return <SectionTitle>{totalAnalysesResults} results</SectionTitle>;
}
return <SectionTitle text={`${totalAnalysesResults}/${totalResults} results`} />;
return <SectionTitle>{totalAnalysesResults}/{totalResults} results</SectionTitle>;
};
const AnalysesResultsDescription = ({ totalAnalysesResults, totalResults }: { totalAnalysesResults: number, totalResults: number }) => {
if (totalAnalysesResults < totalResults) {
return <>
<VerticalSpace />
<VerticalSpace size={1} />
Some results haven&apos;t been downloaded automatically because of their size or because enough were downloaded already.
Download them manually from the list above if you want to see them here.
</>;
@@ -223,8 +223,7 @@ const AnalysesResults = ({ analysesResults, totalResults }: { analysesResults: A
return (
<>
<VerticalSpace />
<VerticalSpace />
<VerticalSpace size={2} />
<AnalysesResultsTitle
totalAnalysesResults={totalAnalysesResults}
totalResults={totalResults} />
@@ -263,7 +262,7 @@ export function RemoteQueries(): JSX.Element {
try {
return <div>
<ThemeProvider>
<ViewTitle title={queryResult.queryTitle} />
<ViewTitle>{queryResult.queryTitle}</ViewTitle>
<QueryInfo {...queryResult} />
<Summary queryResult={queryResult} analysesResults={analysesResults} />
<AnalysesResults analysesResults={analysesResults} totalResults={queryResult.totalResultCount} />

13
extensions/ql-vscode/src/remote-queries/view/SectionTitle.tsx
View File

@@ -1,7 +1,12 @@
import * as React from 'react';
import styled from 'styled-components';
const SectionTitle = ({ text }: { text: string }) => (
<h2 className="vscode-codeql__section-title">{text}</h2>
);
const SectionTitle = styled.h2`
font-size: medium;
font-weight: 500;
padding: 0 0.5em 0 0;
margin: 0;
display: inline-block;
vertical-align: middle;
`;
export default SectionTitle;

9
extensions/ql-vscode/src/remote-queries/view/VerticalSpace.tsx
View File

@@ -1,7 +1,8 @@
import * as React from 'react';
import styled from 'styled-components';
const VerticalSpace = () => (
<div className="vscode-codeql__vertical-space" />
);
const VerticalSpace = styled.div<{ size: 1 | 2 | 3 }>`
flex: 0 0 auto;
height: ${props => 0.5 * props.size}em;
`;
export default VerticalSpace;

10
extensions/ql-vscode/src/remote-queries/view/ViewTitle.tsx
View File

@@ -1,7 +1,9 @@
import * as React from 'react';
import styled from 'styled-components';
const ViewTitle = ({ title }: { title: string }) => (
<h1 className="vscode-codeql__view-title">{title}</h1>
);
const ViewTitle = styled.h1`
font-size: large;
margin-bottom: 0.5em;
font-weight: 500;
`;
export default ViewTitle;

93
extensions/ql-vscode/src/remote-queries/view/baseStyles.css
View File

@@ -2,96 +2,3 @@ body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
/* -------------------------------------------------------------------------- */
/* SectionTitle component */
/* -------------------------------------------------------------------------- */
.vscode-codeql__section-title {
font-size: medium;
font-weight: 500;
padding: 0 0.5em 0 0;
margin: 0;
display: inline-block;
vertical-align: middle;
}
/* -------------------------------------------------------------------------- */
/* ViewTitle component */
/* -------------------------------------------------------------------------- */
.vscode-codeql__view-title {
font-size: large;
margin-bottom: 0.5em;
font-weight: 500;
}
/* -------------------------------------------------------------------------- */
/* VerticalSpace component */
/* -------------------------------------------------------------------------- */
.vscode-codeql__vertical-space {
flex: 0 0 auto;
height: 0.5rem;
}
/* -------------------------------------------------------------------------- */
/* HorizontalSpace component */
/* -------------------------------------------------------------------------- */
.vscode-codeql__horizontal-space {
flex: 0 0 auto;
display: inline-block;
width: 0.2rem;
}
/* -------------------------------------------------------------------------- */
/* Badge component */
/* -------------------------------------------------------------------------- */
.vscode-codeql__badge-container {
justify-content: center;
align-items: center;
min-height: 100vh;
padding-left: 0.2em;
}
.vscode-codeql__badge {
display: inline-block;
min-width: 1.5em;
padding: 0.3em;
border-radius: 35%;
font-size: x-small;
text-align: center;
background: var(--vscode-badge-background);
color: var(--vscode-badge-foreground);
border-color: var(--vscode-badge-background);
}
/* -------------------------------------------------------------------------- */
/* DownloadButton component */
/* -------------------------------------------------------------------------- */
.vscode-codeql__download-button {
display: inline-block;
font-size: x-small;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
}
.vscode-codeql__download-button svg {
fill: var(--vscode-textLink-foreground);
}
/* -------------------------------------------------------------------------- */
/* DownloadSpinner component */
/* -------------------------------------------------------------------------- */
.vscode-codeql__download-spinner {
vertical-align: middle;
}
.vscode-codeql__download-spinner svg {
width: 0.8em;
height: 0.8em;
}