Skip to content

Remove the use of VSCodeTag #3983

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tuan-nguen merged 4 commits into from
Apr 1, 2025
Merged

Remove the use of VSCodeTag #3983

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2d8195c
Add custom Tag component
tuan-nguen Mar 31, 2025
487713d
Remove uses of VSCodeTag
tuan-nguen Apr 1, 2025
14701cf
Change to span and make colours consistent in all themes
tuan-nguen Apr 1, 2025
873ad15
Use css variables
tuan-nguen Apr 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions extensions/ql-vscode/src/view/common/CodePaths/ThreadPath.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { styled } from "styled-components";
import { VSCodeTag } from "@vscode/webview-ui-toolkit/react";
import { Tag } from "../Tag";

import type {
AnalysisMessage,
Expand Down Expand Up @@ -56,12 +56,12 @@ export const ThreadPath = ({
</TitleContainer>
{isSource && (
<TagContainer>
<VSCodeTag>Source</VSCodeTag>
<Tag>Source</Tag>
</TagContainer>
)}
{isSink && (
<TagContainer>
<VSCodeTag>Sink</VSCodeTag>
<Tag>Sink</Tag>
</TagContainer>
)}
</HeaderContainer>
Expand Down
14 changes: 14 additions & 0 deletions extensions/ql-vscode/src/view/common/Tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { styled } from "styled-components";

export const Tag = styled.span`
background-color: #4d4d4d;
border: 1px solid transparent;
border-radius: 2px;
color: #ffffff;
Copy link
Copy Markdown
Contributor

@robertbrignull robertbrignull Apr 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some of the css attributes are hard-coded (e.g. background-color and color) because using the corresponding CSS variables makes the styles different for different themes.

Could you explain why we wouldn't want the styles to change?

Copy link
Copy Markdown
Contributor Author

@tuan-nguen tuan-nguen Apr 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought it makes more sense the keep the appearance the same as the old component. I am happy to use the CSS variables if you think that's the better approach. Here are some screenshots of the differences where left is the old component and the right one is the new component.

Github dark theme
Screenshot 2025-04-01 at 12 26 37

Dark high contrast theme
Screenshot 2025-04-01 at 12 26 02

Copy link
Copy Markdown
Contributor

@robertbrignull robertbrignull Apr 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've done a little experimentation and it seems to me that using --vscode-badge-background and --vscode-badge-foreground gets an experience that's closest to what it was before. So unless I'm misunderstanding things I'd suggest we go with those variables instead of hardcoding.

Interestingly I seem to be getting a different experience from you 🤔. Everything looks the same for the dark theme, but here's some screenshots I've taken using some other themes (including the wilder ones):

Appearance on main

Screenshot 2025-04-01 at 14 38 21 Screenshot 2025-04-01 at 14 38 02 Screenshot 2025-04-01 at 14 37 47

Appearance on tuan-nguen/remove-vscode-tags

Screenshot 2025-04-01 at 14 52 23 Screenshot 2025-04-01 at 14 52 14 Screenshot 2025-04-01 at 14 52 07

Appearance on tuan-nguen/remove-vscode-tags using CSS variables

Screenshot 2025-04-01 at 14 47 46 Screenshot 2025-04-01 at 14 47 53 Screenshot 2025-04-01 at 14 48 01

padding: 2px 4px;
text-transform: uppercase;
box-sizing: border-box;
font-family: var(--vscode-font-family);
font-size: 11px;
line-height: 16px;
`;
8 changes: 3 additions & 5 deletions extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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 }) => (
<StyledVSCodeTag $visible={modelingStatus === "unsaved"}>
Unsaved
</StyledVSCodeTag>
<StyledTag $visible={modelingStatus === "unsaved"}>Unsaved</StyledTag>
);

export type MethodModelingProps = {
Expand Down
9 changes: 3 additions & 6 deletions extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -169,7 +166,7 @@ export const LibraryRow = ({
<ModeledPercentage>
{percentFormatter.format(modeledPercentage / 100)} modeled
</ModeledPercentage>
{hasUnsavedChanges ? <VSCodeTag>UNSAVED</VSCodeTag> : null}
{hasUnsavedChanges ? <Tag>UNSAVED</Tag> : null}
</NameContainer>
{viewState.showGenerateButton &&
viewState.mode === Mode.Application && (
Expand Down
4 changes: 2 additions & 2 deletions extensions/ql-vscode/src/view/model-editor/MethodClassifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
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;
flex-direction: row;
gap: 0.5rem;
`;

const ClassificationTag = styled(VSCodeTag)`
const ClassificationTag = styled(Tag)`
font-size: 0.75em;
white-space: nowrap;
`;
Expand Down
11 changes: 4 additions & 7 deletions extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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;
Expand Down Expand Up @@ -305,9 +302,9 @@ export function ModelEditor({
<ViewTitle>
{getLanguageDisplayName(viewState.extensionPack.language)}
</ViewTitle>
<VSCodeTag>
<Tag>
{percentFormatter.format(modeledPercentage / 100)} modeled
</VSCodeTag>
</Tag>
</HeaderRow>
<HeaderRow>
<>{viewState.extensionPack.name}</>
Expand Down
Loading