From 2d8195c688f828e181096541528eef0dabe8aa33 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Mon, 31 Mar 2025 15:33:51 +0000 Subject: [PATCH 1/4] Add custom Tag component --- extensions/ql-vscode/src/view/common/Tag.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 extensions/ql-vscode/src/view/common/Tag.tsx diff --git a/extensions/ql-vscode/src/view/common/Tag.tsx b/extensions/ql-vscode/src/view/common/Tag.tsx new file mode 100644 index 00000000000..e0f39581bdb --- /dev/null +++ b/extensions/ql-vscode/src/view/common/Tag.tsx @@ -0,0 +1,14 @@ +import { styled } from "styled-components"; + +export const Tag = styled.div` + background-color: var(--vscode-badge-background); + border: 1px solid var(--vscode-button-border, transparent); + border-radius: 2px; + color: var(--vscode-badge-foreground); + padding: 2px 4px; + text-transform: uppercase; + box-sizing: border-box; + font-family: var(--vscode-font-family); + font-size: 11px; + line-height: 16px; +`; From 487713d31a8c32db5e6b1e1e48ab29579c2c6c5e Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Tue, 1 Apr 2025 08:40:33 +0000 Subject: [PATCH 2/4] Remove uses of VSCodeTag --- .../src/view/common/CodePaths/ThreadPath.tsx | 6 +++--- .../src/view/method-modeling/MethodModeling.tsx | 8 +++----- .../ql-vscode/src/view/model-editor/LibraryRow.tsx | 9 +++------ .../src/view/model-editor/MethodClassifications.tsx | 4 ++-- .../ql-vscode/src/view/model-editor/ModelEditor.tsx | 11 ++++------- 5 files changed, 15 insertions(+), 23 deletions(-) diff --git a/extensions/ql-vscode/src/view/common/CodePaths/ThreadPath.tsx b/extensions/ql-vscode/src/view/common/CodePaths/ThreadPath.tsx index 99659a36c18..fd2204daab6 100644 --- a/extensions/ql-vscode/src/view/common/CodePaths/ThreadPath.tsx +++ b/extensions/ql-vscode/src/view/common/CodePaths/ThreadPath.tsx @@ -1,5 +1,5 @@ import { styled } from "styled-components"; -import { VSCodeTag } from "@vscode/webview-ui-toolkit/react"; +import { Tag } from "../Tag"; import type { AnalysisMessage, @@ -56,12 +56,12 @@ export const ThreadPath = ({ {isSource && ( - Source + Source )} {isSink && ( - Sink + Sink )} diff --git a/extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx b/extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx index 1ae4b2f709c..9e16ed67bb9 100644 --- a/extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx +++ b/extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx @@ -4,7 +4,7 @@ import { ModelingStatusIndicator } from "../model-editor/ModelingStatusIndicator import type { Method } from "../../model-editor/method"; import { MethodName } from "../model-editor/MethodName"; import type { ModeledMethod } from "../../model-editor/modeled-method"; -import { VSCodeTag } from "@vscode/webview-ui-toolkit/react"; +import { Tag } from "../common/Tag"; import { ReviewInEditorButton } from "./ReviewInEditorButton"; import { MultipleModeledMethodsPanel } from "./MultipleModeledMethodsPanel"; import type { QueryLanguage } from "../../common/query-language"; @@ -39,14 +39,12 @@ const DependencyContainer = styled.div` margin-bottom: 0.8rem; `; -const StyledVSCodeTag = styled(VSCodeTag)<{ $visible: boolean }>` +const StyledTag = styled(Tag)<{ $visible: boolean }>` visibility: ${(props) => (props.$visible ? "visible" : "hidden")}; `; const UnsavedTag = ({ modelingStatus }: { modelingStatus: ModelingStatus }) => ( - - Unsaved - + Unsaved ); export type MethodModelingProps = { diff --git a/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx b/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx index bd285c7000f..662d739ad7b 100644 --- a/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx +++ b/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx @@ -7,14 +7,11 @@ import { calculateModeledPercentage } from "../../model-editor/shared/modeled-pe import { percentFormatter } from "./formatters"; import { Codicon } from "../common"; import { Mode } from "../../model-editor/shared/mode"; -import { - VSCodeButton, - VSCodeDivider, - VSCodeTag, -} from "@vscode/webview-ui-toolkit/react"; +import { VSCodeButton, VSCodeDivider } from "@vscode/webview-ui-toolkit/react"; import type { ModelEditorViewState } from "../../model-editor/shared/view-state"; import type { AccessPathSuggestionOptions } from "../../model-editor/suggestions"; import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state"; +import { Tag } from "../common/Tag"; const LibraryContainer = styled.div` background-color: var(--vscode-peekViewResult-background); @@ -169,7 +166,7 @@ export const LibraryRow = ({ {percentFormatter.format(modeledPercentage / 100)} modeled - {hasUnsavedChanges ? UNSAVED : null} + {hasUnsavedChanges ? UNSAVED : null} {viewState.showGenerateButton && viewState.mode === Mode.Application && ( diff --git a/extensions/ql-vscode/src/view/model-editor/MethodClassifications.tsx b/extensions/ql-vscode/src/view/model-editor/MethodClassifications.tsx index 8acfea16d93..59f9b5ea2f9 100644 --- a/extensions/ql-vscode/src/view/model-editor/MethodClassifications.tsx +++ b/extensions/ql-vscode/src/view/model-editor/MethodClassifications.tsx @@ -1,8 +1,8 @@ import { useMemo } from "react"; import type { Method } from "../../model-editor/method"; import { CallClassification } from "../../model-editor/method"; -import { VSCodeTag } from "@vscode/webview-ui-toolkit/react"; import { styled } from "styled-components"; +import { Tag } from "../common/Tag"; const ClassificationsContainer = styled.div` display: inline-flex; @@ -10,7 +10,7 @@ const ClassificationsContainer = styled.div` gap: 0.5rem; `; -const ClassificationTag = styled(VSCodeTag)` +const ClassificationTag = styled(Tag)` font-size: 0.75em; white-space: nowrap; `; diff --git a/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx b/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx index 02c235d5029..6d9628cf0db 100644 --- a/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx +++ b/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx @@ -1,10 +1,6 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import type { ToModelEditorMessage } from "../../common/interface-types"; -import { - VSCodeButton, - VSCodeCheckbox, - VSCodeTag, -} from "@vscode/webview-ui-toolkit/react"; +import { VSCodeButton, VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"; import { styled } from "styled-components"; import type { Method } from "../../model-editor/method"; import type { ModeledMethod } from "../../model-editor/modeled-method"; @@ -22,6 +18,7 @@ import type { AccessPathSuggestionOptions } from "../../model-editor/suggestions import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state"; import { ModelEvaluation } from "./ModelEvaluation"; import { useMessageFromExtension } from "../common/useMessageFromExtension"; +import { Tag } from "../common/Tag"; const LoadingContainer = styled.div` text-align: center; @@ -305,9 +302,9 @@ export function ModelEditor({ {getLanguageDisplayName(viewState.extensionPack.language)} - + {percentFormatter.format(modeledPercentage / 100)} modeled - + <>{viewState.extensionPack.name} From 14701cf6a7895e3960ff50b03e981178b11f5859 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Tue, 1 Apr 2025 09:12:47 +0000 Subject: [PATCH 3/4] Change to span and make colours consistent in all themes --- extensions/ql-vscode/src/view/common/Tag.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/extensions/ql-vscode/src/view/common/Tag.tsx b/extensions/ql-vscode/src/view/common/Tag.tsx index e0f39581bdb..a2353686343 100644 --- a/extensions/ql-vscode/src/view/common/Tag.tsx +++ b/extensions/ql-vscode/src/view/common/Tag.tsx @@ -1,10 +1,10 @@ import { styled } from "styled-components"; -export const Tag = styled.div` - background-color: var(--vscode-badge-background); - border: 1px solid var(--vscode-button-border, transparent); +export const Tag = styled.span` + background-color: #4d4d4d; + border: 1px solid transparent; border-radius: 2px; - color: var(--vscode-badge-foreground); + color: #ffffff; padding: 2px 4px; text-transform: uppercase; box-sizing: border-box; From 873ad15bb3f6cf55b33a53a3ba5f468daa40d235 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Tue, 1 Apr 2025 14:01:31 +0000 Subject: [PATCH 4/4] Use css variables --- extensions/ql-vscode/src/view/common/Tag.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/extensions/ql-vscode/src/view/common/Tag.tsx b/extensions/ql-vscode/src/view/common/Tag.tsx index a2353686343..ca83c7c6bca 100644 --- a/extensions/ql-vscode/src/view/common/Tag.tsx +++ b/extensions/ql-vscode/src/view/common/Tag.tsx @@ -1,10 +1,10 @@ import { styled } from "styled-components"; export const Tag = styled.span` - background-color: #4d4d4d; - border: 1px solid transparent; + background-color: var(--vscode-badge-background); + border: 1px solid var(--vscode-button-border, transparent); border-radius: 2px; - color: #ffffff; + color: var(--vscode-badge-foreground); padding: 2px 4px; text-transform: uppercase; box-sizing: border-box;