From 716f7d1f0c8d6a9e607a948a0151b1c661ff6f2c Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Tue, 7 Feb 2023 20:32:23 +0100 Subject: [PATCH] #505 - Preview theming --- src/commands/Dashboard.ts | 11 ++++++--- src/commands/Preview.ts | 12 ++++++---- .../components/Menu/ActionMenuButton.tsx | 10 +++++++- .../components/Menu/MenuButton.tsx | 21 ++++++++++++---- .../components/Modals/FormDialog.tsx | 4 ++-- .../components/Modals/InfoDialog.tsx | 2 +- .../components/Preview/Preview.tsx | 24 +++++++++---------- src/dashboardWebView/index.tsx | 5 +++- 8 files changed, 60 insertions(+), 29 deletions(-) diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts index 1079ade6..09619abf 100644 --- a/src/commands/Dashboard.ts +++ b/src/commands/Dashboard.ts @@ -1,4 +1,9 @@ -import { SETTING_DASHBOARD_OPENONSTART, CONTEXT, ExtensionState, SETTING_EXPERIMENTAL } from '../constants'; +import { + SETTING_DASHBOARD_OPENONSTART, + CONTEXT, + ExtensionState, + SETTING_EXPERIMENTAL +} from '../constants'; import { join } from 'path'; import { commands, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode'; import { Logger, Settings as SettingsHelper } from '../helpers'; @@ -221,7 +226,7 @@ export class Dashboard { const isBeta = ext.isBetaVersion(); // Get experimental setting - const experimental = SettingsHelper.get(SETTING_EXPERIMENTAL) + const experimental = SettingsHelper.get(SETTING_EXPERIMENTAL); const csp = [ `default-src 'none';`, @@ -258,7 +263,7 @@ export class Dashboard { isBeta ? 'BETA' : 'main' }" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${ version.usedVersion ? '' : `data-showWelcome="true"` - } ${experimental ? `data-experimental="${experimental}"` : ""} > + } ${experimental ? `data-experimental="${experimental}"` : ''} > Daily usage diff --git a/src/commands/Preview.ts b/src/commands/Preview.ts index 583fbfd0..4701040d 100644 --- a/src/commands/Preview.ts +++ b/src/commands/Preview.ts @@ -4,7 +4,8 @@ import { SETTING_PREVIEW_PATHNAME, CONTEXT, TelemetryEvent, - PreviewCommands + PreviewCommands, + SETTING_EXPERIMENTAL } from './../constants'; import { ArticleHelper } from './../helpers/ArticleHelper'; import { join } from 'path'; @@ -165,6 +166,9 @@ export class Preview { scriptUri = `http://${localServerUrl}/${dashboardFile}`; } + // Get experimental setting + const experimental = Settings.get(SETTING_EXPERIMENTAL); + webView.webview.html = ` @@ -181,9 +185,9 @@ export class Preview { slug || '' )}" data-isProd="${isProd}" data-environment="${ isBeta ? 'BETA' : 'main' - }" data-version="${ - version.usedVersion - }" style="width:100%;height:100%;margin:0;padding:0;"> + }" data-version="${version.usedVersion}" ${ + experimental ? `data-experimental="${experimental}"` : '' + } style="width:100%;height:100%;margin:0;padding:0;"> diff --git a/src/dashboardWebView/components/Menu/ActionMenuButton.tsx b/src/dashboardWebView/components/Menu/ActionMenuButton.tsx index 48dc5c58..c9945c49 100644 --- a/src/dashboardWebView/components/Menu/ActionMenuButton.tsx +++ b/src/dashboardWebView/components/Menu/ActionMenuButton.tsx @@ -1,6 +1,7 @@ import { Menu } from '@headlessui/react'; import { DotsVerticalIcon } from '@heroicons/react/outline'; import * as React from 'react'; +import useThemeColors from '../../hooks/useThemeColors'; export interface IActionMenuButtonProps { title: string; @@ -13,11 +14,18 @@ export const ActionMenuButton: React.FunctionComponent = disabled, ref }: React.PropsWithChildren) => { + const { getColors } = useThemeColors(); + return ( diff --git a/src/dashboardWebView/components/Menu/MenuButton.tsx b/src/dashboardWebView/components/Menu/MenuButton.tsx index 4323cc75..24d73d2d 100644 --- a/src/dashboardWebView/components/Menu/MenuButton.tsx +++ b/src/dashboardWebView/components/Menu/MenuButton.tsx @@ -1,6 +1,7 @@ import { Menu } from '@headlessui/react'; import { ChevronDownIcon } from '@heroicons/react/solid'; import * as React from 'react'; +import useThemeColors from '../../hooks/useThemeColors'; export interface IMenuButtonProps { label: string | JSX.Element; @@ -13,17 +14,29 @@ export const MenuButton: React.FunctionComponent = ({ title, disabled }: React.PropsWithChildren) => { + const { getColors } = useThemeColors(); + return ( -
- {label}: +
+ {label}: {title} diff --git a/src/dashboardWebView/components/Modals/FormDialog.tsx b/src/dashboardWebView/components/Modals/FormDialog.tsx index 65b5e128..40136075 100644 --- a/src/dashboardWebView/components/Modals/FormDialog.tsx +++ b/src/dashboardWebView/components/Modals/FormDialog.tsx @@ -91,7 +91,7 @@ export const FormDialog: React.FunctionComponent = ({
- -
diff --git a/src/dashboardWebView/index.tsx b/src/dashboardWebView/index.tsx index de985d40..4c17e145 100644 --- a/src/dashboardWebView/index.tsx +++ b/src/dashboardWebView/index.tsx @@ -54,7 +54,10 @@ if (elm) { } if (type === 'preview') { - render(, elm); + render( + + + , elm); } else { render(