adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-08-09 18:33:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

#505 - Preview theming

Browse Source
This commit is contained in:
Elio Struyf
2023-02-07 20:32:23 +01:00
parent 5119f631f3
commit 716f7d1f0c
8 changed files with 60 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/commands/Dashboard.ts
+8 -3
View File
@@ -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}"` : ""} ></div>
} ${experimental ? `data-experimental="${experimental}"` : ''} ></div>
<img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`dashboard-${version.installedVersion}`}" alt="Daily usage" />
src/commands/Preview.ts
+8 -4
View File
@@ -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 = `
<!DOCTYPE html>
<html lang="en" style="width:100%;height:100%;margin:0;padding:0;">
@@ -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;"></div>
}" data-version="${version.usedVersion}" ${
experimental ? `data-experimental="${experimental}"` : ''
} style="width:100%;height:100%;margin:0;padding:0;"></div>
<script ${isProd ? `nonce="${nonce}"` : ''} src="${scriptUri}"></script>
</body>
src/dashboardWebView/components/Menu/ActionMenuButton.tsx
+9 -1
View File
@@ -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<IActionMenuButtonProps> =
disabled,
ref
}: React.PropsWithChildren<IActionMenuButtonProps>) => {
const { getColors } = useThemeColors();
return (
<Menu.Button
ref={ref || null}
disabled={disabled}
className={`group inline-flex justify-center text-sm font-medium text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600 ${
className={`group inline-flex justify-center text-sm font-medium ${
getColors(
'text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600',
'text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'
)
} ${
disabled ? 'opacity-50' : ''
}`}
>
src/dashboardWebView/components/Menu/MenuButton.tsx
+17 -4
View File
@@ -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<IMenuButtonProps> = ({
title,
disabled
}: React.PropsWithChildren<IMenuButtonProps>) => {
const { getColors } = useThemeColors();
return (
<div className={`inline-flex items-center ${disabled ? 'opacity-50' : ''}`}>
<span className={`text-gray-500 dark:text-whisper-700 mr-2 font-medium`}>{label}:</span>
<div className={`groupinline-flex items-center ${disabled ? 'opacity-50' : ''}`}>
<span className={`mr-2 font-medium ${getColors('text-gray-500 dark:text-whisper-700', 'text-[var(--vscode-tab-inactiveForeground)]')}`}>{label}:</span>
<Menu.Button
disabled={disabled}
className="group inline-flex justify-center text-sm font-medium text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600"
className={`group inline-flex justify-center text-sm font-medium ${
getColors(
'text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600',
'text-[var(--vscode-list-activeSelectionForeground)] hover:text-[var(--vscode-list-highlightForeground)]'
)
}`}
>
{title}
<ChevronDownIcon
className="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-whisper-600 dark:group-hover:text-whisper-700"
className={`flex-shrink-0 -mr-1 ml-1 h-5 w-5 ${
getColors(
'text-gray-400 group-hover:text-gray-500 dark:text-whisper-600 dark:group-hover:text-whisper-700',
'text-[var(--vscode-list-activeSelectionForeground)] group-hover:text-[var(--vscode-list-highlightForeground)]'
)
}`}
aria-hidden="true"
/>
</Menu.Button>
src/dashboardWebView/components/Modals/FormDialog.tsx
+2 -2
View File
@@ -91,7 +91,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button
type="button"
className={`w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm sm:ml-3 ${
className={`w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm sm:ml-3 ${
getColors(
'bg-teal-600 focus:ring-teal-500 text-white hover:bg-teal-700 dark:hover:bg-teal-900 ',
'bg-[var(--vscode-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]'
@@ -105,7 +105,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
<button
type="button"
className={`mt-3 w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm ${
className={`mt-3 w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm ${
getColors(
'bg-white border-gray-300 text-gray-700 hover:bg-gray-50 dark:hover:bg-gray-200',
'bg-[var(--vscode-button-secondaryBackground)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
src/dashboardWebView/components/Modals/InfoDialog.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export const InfoDialog: React.FunctionComponent<IInfoDialogProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 ${
<div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 ${
getColors(
`bg-white dark:bg-vulcan-500 border-whisper-900`,
`bg-[var(--vscode-editor-background)] border-[var(--vscode-panel-border)]`
src/dashboardWebView/components/Preview/Preview.tsx
+11 -13
View File
@@ -3,6 +3,7 @@ import { ArrowRightIcon, ExternalLinkIcon, RefreshIcon } from '@heroicons/react/
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { PreviewCommands } from '../../../constants';
import useThemeColors from '../../hooks/useThemeColors';
export interface IPreviewProps {
url: string | null;
@@ -12,7 +13,8 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
url
}: React.PropsWithChildren<IPreviewProps>) => {
const iframeRef = useRef<HTMLIFrameElement>(null);
const [ crntUrl, setCrntUrl ] = useState<string | null>(null);
const [crntUrl, setCrntUrl] = useState<string | null>(null);
const { getColors } = useThemeColors();
const onRefresh = () => {
if (iframeRef.current?.src) {
@@ -40,7 +42,7 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
return (
<div className="w-full h-full bg-white">
<div
className="slug fixed h-[30px] w-full top-0 flex items-center bg-[var(--vscode-editor-background)] text-[color:var(--vscode-editor-background)] border-b border-b-[var(--vscode-focusBorder)]"
className="slug fixed h-[30px] w-full top-0 flex items-center bg-[var(--vscode-editor-background)] text-[color:var(--vscode-editor-background)] border-b border-b-[var(--vscode-panel-border)]"
>
<input
type="text"
@@ -51,27 +53,23 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
navigateToUrl();
}
}}
className="w-full m-[1px] h-full border-1 border-transparent bg-transparent text-xs py-1 px-2 focus:border-color-blue-500 focus:outline-none"
style={{
color: 'var(--vscode-editor-foreground)'
}}
placeholder="Enter a URL"
className="w-full m-[1px] h-full border-1 border-transparent text-xs py-1 px-2 focus:border-color-blue-500 bg-[var(--vscode-tab-activeBackground)] text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] focus:text-[var(--vscode-tab-activeForeground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-[var(--vscode-focusBorder)"
/>
<div
className="actions absolute right-[1px] top-[1px] bottom-[1px] flex items-center space-x-2 px-2 text-gray-400 dark:text-whisper-900"
style={{
background: 'var(--vscode-editor-background)'
}}
className={`actions absolute right-[1px] top-[1px] bottom-[1px] flex items-center space-x-2 px-2 ${getColors('text-vulcan-500 dark:text-whisper-100', 'text-[var(--vscode-list-activeSelectionForeground)]')
}`}
>
<button title="Navigate" onClick={navigateToUrl} className={`hover:text-vulcan-500 dark:hover:text-whisper-100`}>
<button title="Navigate" onClick={navigateToUrl} className={getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}>
<ArrowRightIcon className="w-4 h-4" aria-hidden="true" />
</button>
<button title="Refresh" onClick={onRefresh} className={`hover:text-vulcan-500 dark:hover:text-whisper-100 mr-2`}>
<button title="Refresh" onClick={onRefresh} className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
<RefreshIcon className="w-4 h-4" aria-hidden="true" />
</button>
<button title="Open" onClick={openInBrowser} className={`hover:text-vulcan-500 dark:hover:text-whisper-100 mr-2`}>
<button title="Open" onClick={openInBrowser} className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
<ExternalLinkIcon className="w-4 h-4" aria-hidden="true" />
</button>
</div>
src/dashboardWebView/index.tsx
+4 -1
View File
@@ -54,7 +54,10 @@ if (elm) {
}
if (type === 'preview') {
render(<Preview url={url} />, elm);
render(
<SettingsProvider experimental={experimental === 'true'} version={version || ""}>
<Preview url={url} />
</SettingsProvider>, elm);
} else {
render(
<RecoilRoot>