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

Extract vscode-codeql__vertical-rule class to component

Browse Source
This commit is contained in:
Koen Vlaswinkel
2023-12-06 11:09:30 +01:00
parent acca6b34f8
commit 4f14592dd7
4 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
extensions/ql-vscode/src/view/common/VerticalRule.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { styled } from "styled-components";
export const VerticalRule = styled.span`
border-left: 1px solid var(--vscode-dropdown-border);
height: 100%;
position: absolute;
top: 0;
bottom: 0;
`;

5
extensions/ql-vscode/src/view/results/AlertTablePathNodeRow.tsx
View File

@@ -4,6 +4,7 @@ import * as Keys from "./result-keys";
import { SarifLocation } from "./locations/SarifLocation"; import { SarifLocation } from "./locations/SarifLocation";
import { selectableZebraStripe } from "./result-table-utils"; import { selectableZebraStripe } from "./result-table-utils";
import { useCallback, useMemo } from "react"; import { useCallback, useMemo } from "react";
import { VerticalRule } from "../common/VerticalRule";
interface Props { interface Props {
step: Sarif.ThreadFlowLocation; step: Sarif.ThreadFlowLocation;
@@ -54,10 +55,10 @@ export function AlertTablePathNodeRow(props: Props) {
className={isSelected ? "vscode-codeql__selected-path-node" : undefined} className={isSelected ? "vscode-codeql__selected-path-node" : undefined}
> >
<td className="vscode-codeql__icon-cell"> <td className="vscode-codeql__icon-cell">
<span className="vscode-codeql__vertical-rule"></span> <VerticalRule />
</td> </td>
<td className="vscode-codeql__icon-cell"> <td className="vscode-codeql__icon-cell">
<span className="vscode-codeql__vertical-rule"></span> <VerticalRule />
</td> </td>
<td <td
{...selectableZebraStripe( {...selectableZebraStripe(

3
extensions/ql-vscode/src/view/results/AlertTablePathRow.tsx
View File

@@ -5,6 +5,7 @@ import { selectableZebraStripe } from "./result-table-utils";
import { AlertTablePathNodeRow } from "./AlertTablePathNodeRow"; import { AlertTablePathNodeRow } from "./AlertTablePathNodeRow";
import { AlertTableDropdownIndicatorCell } from "./AlertTableDropdownIndicatorCell"; import { AlertTableDropdownIndicatorCell } from "./AlertTableDropdownIndicatorCell";
import { useCallback, useMemo } from "react"; import { useCallback, useMemo } from "react";
import { VerticalRule } from "../common/VerticalRule";
interface Props { interface Props {
path: Sarif.ThreadFlow; path: Sarif.ThreadFlow;
@@ -53,7 +54,7 @@ export function AlertTablePathRow(props: Props) {
{...selectableZebraStripe(isPathSpecificallySelected, resultIndex)} {...selectableZebraStripe(isPathSpecificallySelected, resultIndex)}
> >
<td className="vscode-codeql__icon-cell"> <td className="vscode-codeql__icon-cell">
<span className="vscode-codeql__vertical-rule"></span> <VerticalRule />
</td> </td>
<AlertTableDropdownIndicatorCell <AlertTableDropdownIndicatorCell
expanded={currentPathExpanded} expanded={currentPathExpanded}

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

@@ -145,14 +145,6 @@ td.vscode-codeql__path-index-cell {
text-align: right !important; text-align: right !important;
} }
.vscode-codeql__vertical-rule {
border-left: 1px solid var(--vscode-dropdown-border);
height: 100%;
position: absolute;
top: 0;
bottom: 0;
}
.octicon { .octicon {
fill: var(--vscode-editor-foreground); fill: var(--vscode-editor-foreground);
margin-top: 0.25em; margin-top: 0.25em;