From e4f736cb0ff587dbd712f792e21b1d68d47b93eb Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Tue, 3 Jan 2023 18:33:23 +0530 Subject: [PATCH 1/2] change syntaxhighlighting style based on theme selection Signed-off-by: msivasubramaniaan --- package.json | 1 + src/extension.ts | 12 +++++++++++- src/webview/devfile-registry/app/cardItem.tsx | 10 +++++----- src/webview/devfile-registry/app/home.tsx | 13 ++++++++++--- .../devfile-registry/app/wrapperCardItem.tsx | 1 + src/webview/devfile-registry/registryViewLoader.ts | 8 ++++++++ 6 files changed, 36 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 27c07fdf8..30c7f558d 100644 --- a/package.json +++ b/package.json @@ -285,6 +285,7 @@ "onCommand:clusters.openshift.deployment.openConsole", "onCommand:clusters.openshift.imagestream.openConsole", "onCommand:openshift.componentTypesView.registry.openInView", + "onCommand:openshift.componentTypesView.registry.setTheme", "onWalkthrough:openshiftWalkthrough" ], "contributes": { diff --git a/src/extension.ts b/src/extension.ts index 51b51a1fd..64f1d495b 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -11,7 +11,9 @@ import { StatusBarAlignment, StatusBarItem, env, - QuickPickItemKind + QuickPickItemKind, + ColorTheme, + ColorThemeKind } from 'vscode'; import path = require('path'); import { startTelemetry } from './telemetry'; @@ -88,6 +90,14 @@ export async function activate(extensionContext: ExtensionContext): Promise ]; disposable.forEach((value) => extensionContext.subscriptions.push(value)); + let themeKind:ColorThemeKind = window.activeColorTheme.kind; + window.onDidChangeActiveColorTheme((editor: ColorTheme) => { + if (themeKind !== editor.kind) { + themeKind = editor?.kind; + void commands.executeCommand('openshift.componentTypesView.registry.setTheme', themeKind); + } + }); + function statusBarFunctions() { return commands.registerCommand('openshift.openStatusBar', async () => { const selection = await window.showQuickPick( diff --git a/src/webview/devfile-registry/app/cardItem.tsx b/src/webview/devfile-registry/app/cardItem.tsx index f0447d24a..755a23e7c 100644 --- a/src/webview/devfile-registry/app/cardItem.tsx +++ b/src/webview/devfile-registry/app/cardItem.tsx @@ -12,8 +12,8 @@ import { StarterProject } from '../../../odo/componentTypeDescription'; import { StarterProjectDisplay } from './starterProjectDisplay'; import { Badge, Backdrop, Button, Card, CardActions, Modal } from '@material-ui/core'; import { FileCopy } from '@material-ui/icons'; -import { monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs'; import { Tooltip, Typography } from '@mui/material'; +import { qtcreatorLight, monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs'; export class CardItem extends React.Component { constructor(props: DevFileProps) { @@ -246,7 +246,7 @@ export class CardItem extends React.Component this.copyClicked(true)} > @@ -254,14 +254,14 @@ export class CardItem extends React.Component diff --git a/src/webview/devfile-registry/app/home.tsx b/src/webview/devfile-registry/app/home.tsx index cb917b113..70ac38700 100644 --- a/src/webview/devfile-registry/app/home.tsx +++ b/src/webview/devfile-registry/app/home.tsx @@ -27,6 +27,7 @@ interface CompTypeDesc extends ComponentTypeDescription { interface HomePageProps extends React.AnchorHTMLAttributes { compDescriptions: CompTypeDesc[]; + themeKind: number; } export interface DefaultProps { @@ -34,7 +35,8 @@ export interface DefaultProps { } const HomeItem: React.FC = ({ - compDescriptions + compDescriptions, + themeKind }: HomePageProps) => { const homeStyleClass = useHomeStyles(); const cardItemStyle = useCardItemStyles(); @@ -45,7 +47,8 @@ const HomeItem: React.FC = ({ compDescriptions.map((compDescription: CompTypeDesc, key: number) => ( + cardItemStyle={cardItemStyle} projectDisplayStyle={projectDisplayStyle} hasGitLink={hasGitLink(compDescription)} + themeKind={themeKind} /> )) } @@ -59,6 +62,7 @@ export const Home: React.FC = ({ }) => { const [registries, setRegistries] = React.useState([]); const [searchValue, setSearchValue] = React.useState(''); const [error, setError] = React.useState(''); + const [themeKind, setThemeKind] = React.useState(0); React.useEffect(() => { return VSCodeMessage.onMessage((message) => { @@ -81,6 +85,7 @@ export const Home: React.FC = ({ }) => { } }); } + setThemeKind(message.data.themeValue); setCompDescriptions(message.data.compDescriptions); setRegistries(message.data.registries); setFilteredcompDescriptions(getFilteredCompDesc(message.data.registries, message.data.compDescriptions, searchValue)); @@ -90,6 +95,8 @@ export const Home: React.FC = ({ }) => { setFilteredcompDescriptions([]); setCompDescriptions([]); setSearchValue(''); + } else if(message.data.action === 'setTheme') { + setThemeKind(message.data.themeValue); } }); }); @@ -130,7 +137,7 @@ export const Home: React.FC = ({ }) => { }} /> } - + {error?.length > 0 ? : null} : diff --git a/src/webview/devfile-registry/app/wrapperCardItem.tsx b/src/webview/devfile-registry/app/wrapperCardItem.tsx index fb932037a..34e94f679 100644 --- a/src/webview/devfile-registry/app/wrapperCardItem.tsx +++ b/src/webview/devfile-registry/app/wrapperCardItem.tsx @@ -11,6 +11,7 @@ export interface DevFileProps extends React.AnchorHTMLAttributes { + if (panel) { + panel.webview.postMessage({ action: 'setTheme', themeValue: kind }); + } + } + @vsCommand('openshift.componentTypesView.registry.closeView') static async closeRegistryInWebview(): Promise { panel?.dispose(); @@ -149,6 +156,7 @@ function getAllComponents(eventActionName: string, url?: string, error?: string) action: eventActionName, compDescriptions: Array.from(componentDescriptions), registries: registries, + themeValue: vscode.window.activeColorTheme.kind, errorMessage: error } ); From b69422017f788ed60abb125c8309e8d01cdde011 Mon Sep 17 00:00:00 2001 From: msivasubramaniaan Date: Wed, 4 Jan 2023 15:09:56 +0530 Subject: [PATCH 2/2] moved onDidChangeActiveColorTheme into webview instead of using vscode command Signed-off-by: msivasubramaniaan --- package.json | 1 - src/extension.ts | 13 +------------ .../devfile-registry/registryViewLoader.ts | 19 +++++++++++-------- 3 files changed, 12 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 30c7f558d..27c07fdf8 100644 --- a/package.json +++ b/package.json @@ -285,7 +285,6 @@ "onCommand:clusters.openshift.deployment.openConsole", "onCommand:clusters.openshift.imagestream.openConsole", "onCommand:openshift.componentTypesView.registry.openInView", - "onCommand:openshift.componentTypesView.registry.setTheme", "onWalkthrough:openshiftWalkthrough" ], "contributes": { diff --git a/src/extension.ts b/src/extension.ts index 64f1d495b..b60093c24 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -11,9 +11,7 @@ import { StatusBarAlignment, StatusBarItem, env, - QuickPickItemKind, - ColorTheme, - ColorThemeKind + QuickPickItemKind } from 'vscode'; import path = require('path'); import { startTelemetry } from './telemetry'; @@ -32,7 +30,6 @@ import { ComponentsTreeDataProvider } from './componentsView'; import fsx = require('fs-extra'); - // eslint-disable-next-line @typescript-eslint/no-empty-function // this method is called when your extension is deactivated export function deactivate(): void { @@ -90,14 +87,6 @@ export async function activate(extensionContext: ExtensionContext): Promise ]; disposable.forEach((value) => extensionContext.subscriptions.push(value)); - let themeKind:ColorThemeKind = window.activeColorTheme.kind; - window.onDidChangeActiveColorTheme((editor: ColorTheme) => { - if (themeKind !== editor.kind) { - themeKind = editor?.kind; - void commands.executeCommand('openshift.componentTypesView.registry.setTheme', themeKind); - } - }); - function statusBarFunctions() { return commands.registerCommand('openshift.openStatusBar', async () => { const selection = await window.showQuickPick( diff --git a/src/webview/devfile-registry/registryViewLoader.ts b/src/webview/devfile-registry/registryViewLoader.ts index bdab30db7..fa18e84f4 100644 --- a/src/webview/devfile-registry/registryViewLoader.ts +++ b/src/webview/devfile-registry/registryViewLoader.ts @@ -14,6 +14,16 @@ import { Registry } from '../../odo/componentType'; let panel: vscode.WebviewPanel; +let themeKind: vscode.ColorThemeKind = vscode.window.activeColorTheme.kind; +vscode.window.onDidChangeActiveColorTheme((editor: vscode.ColorTheme) => { + if (themeKind !== editor.kind) { + themeKind = editor.kind; + if (panel) { + panel.webview.postMessage({ action: 'setTheme', themeValue: themeKind }); + } + } +}); + async function devfileRegistryViewerMessageListener(event: any): Promise { let starterProject = event.selectedProject; switch (event?.action) { @@ -118,13 +128,6 @@ export default class RegistryViewLoader { await RegistryViewLoader.loadView(`Devfile Registry - ${context.name}`, context.url); } - @vsCommand('openshift.componentTypesView.registry.setTheme') - static async setTheme(kind: vscode.ColorThemeKind): Promise { - if (panel) { - panel.webview.postMessage({ action: 'setTheme', themeValue: kind }); - } - } - @vsCommand('openshift.componentTypesView.registry.closeView') static async closeRegistryInWebview(): Promise { panel?.dispose(); @@ -156,7 +159,7 @@ function getAllComponents(eventActionName: string, url?: string, error?: string) action: eventActionName, compDescriptions: Array.from(componentDescriptions), registries: registries, - themeValue: vscode.window.activeColorTheme.kind, + themeValue: themeKind, errorMessage: error } );