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

Move all ResultTablesHeader styles to styled-components

Browse Source
This commit is contained in:
Koen Vlaswinkel
2023-08-18 10:03:36 +02:00
parent a5c675b8c7
commit 2888fddf61
2 changed files with 47 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
extensions/ql-vscode/src/view/results/ResultTablesHeader.tsx
View File

@@ -18,6 +18,43 @@ interface Props {
selectedTable: string;
}
const Container = styled.span`
display: flex;
padding: 0.5em 0;
align-items: center;
top: 0;
background-color: var(--vscode-editorGutter-background);
position: sticky;
z-index: 1;
`;
const PaginationButton = styled.button`
padding: 0.3rem;
margin: 0.2rem;
border: 0;
font-size: large;
color: var(--vscode-editor-foreground);
background-color: var(--vscode-editorGutter-background);
cursor: pointer;
opacity: 0.8;
&:hover {
opacity: 1;
}
`;
const PageNumberInput = styled.input`
border-radius: 0;
padding: 0.3rem;
margin: 0.2rem;
width: 2rem;
color: var(--vscode-editor-foreground);
border: 0;
border-bottom: 1px solid var(--vscode-editor-foreground);
background-color: var(--vscode-editorGutter-background);
outline: none;
`;
const OpenQueryLink = styled(TextButton)`
text-decoration: none;
`;
@@ -110,9 +147,9 @@ export function ResultTablesHeader(props: Props) {
}, [queryPath]);
return (
<span className="vscode-codeql__table-selection-pagination">
<button onClick={prevPageHandler}>&#xab;</button>
<input
<Container>
<PaginationButton onClick={prevPageHandler}>&#xab;</PaginationButton>
<PageNumberInput
type="number"
size={3}
value={selectedPage}
@@ -123,16 +160,16 @@ export function ResultTablesHeader(props: Props) {
onKeyDown={onKeyDownHandler}
/>
<span>/&nbsp;{numPages}</span>
<button value=">" onClick={nextPageHandler}>
<PaginationButton value=">" onClick={nextPageHandler}>
&#xbb;
</button>
</PaginationButton>
<div className={tableHeaderItemClassName}>{queryName}</div>
<div className={tableHeaderItemClassName}>
<OpenQueryLink onClick={openQueryHandler}>
Open {basename(queryPath)}
</OpenQueryLink>
</div>
</span>
</Container>
);
}

43
extensions/ql-vscode/src/view/results/resultsView.css
View File

@@ -11,16 +11,6 @@
justify-content: space-between;
}
.vscode-codeql__table-selection-pagination {
display: flex;
padding: 0.5em 0;
align-items: center;
top: 0;
background-color: var(--vscode-editorGutter-background);
position: sticky;
z-index: 1;
}
.vscode-codeql__table-selection-header-item {
padding-left: 2em;
}
@@ -29,35 +19,6 @@
border: 0;
}
.vscode-codeql__table-selection-pagination button {
padding: 0.3rem;
margin: 0.2rem;
border: 0;
font-size: large;
color: var(--vscode-editor-foreground);
background-color: var(--vscode-editorGutter-background);
cursor: pointer;
opacity: 0.8;
}
.vscode-codeql__table-selection-pagination button:hover {
opacity: 1;
}
.vscode-codeql__table-selection-pagination input[type="number"] {
border-radius: 0;
padding: 0.3rem;
margin: 0.2rem;
width: 2rem;
border-radius: 0;
color: var(--vscode-editor-foreground);
border: 0;
border-bottom: 1px solid var(--vscode-editor-foreground);
background-color: var(--vscode-editorGutter-background);
border-radius: 0;
outline: none;
}
.vscode-codeql__result-table-alert-extras {
display: inline-block;
text-align: left;
@@ -244,3 +205,7 @@ td.vscode-codeql__path-index-cell {
font-size: 14px;
text-align: center;
}
.vscode-codeql__result-table-location-link {
text-decoration: none;
}