From 100b1b20459e2026fe686ef1da0348abf744f4c8 Mon Sep 17 00:00:00 2001 From: Miguel Solorio Date: Tue, 20 Oct 2020 14:28:28 -0700 Subject: [PATCH] Update webviews to use vscode styles --- custom-editor-sample/media/catScratch.css | 6 +- custom-editor-sample/media/reset.css | 30 +++++++ custom-editor-sample/media/vscode.css | 91 ++++++++++++++++++++ custom-editor-sample/src/catScratchEditor.ts | 16 +++- custom-editor-sample/src/pawDrawEditor.ts | 11 ++- webview-sample/media/reset.css | 30 +++++++ webview-sample/media/vscode.css | 91 ++++++++++++++++++++ webview-sample/src/extension.ts | 14 ++- webview-view-sample/media/main.css | 6 -- webview-view-sample/media/reset.css | 30 +++++++ webview-view-sample/media/vscode.css | 91 ++++++++++++++++++++ webview-view-sample/src/extension.ts | 8 +- 12 files changed, 404 insertions(+), 20 deletions(-) create mode 100644 custom-editor-sample/media/reset.css create mode 100644 custom-editor-sample/media/vscode.css create mode 100644 webview-sample/media/reset.css create mode 100644 webview-sample/media/vscode.css create mode 100644 webview-view-sample/media/reset.css create mode 100644 webview-view-sample/media/vscode.css diff --git a/custom-editor-sample/media/catScratch.css b/custom-editor-sample/media/catScratch.css index f68f733c..69a2232c 100644 --- a/custom-editor-sample/media/catScratch.css +++ b/custom-editor-sample/media/catScratch.css @@ -49,10 +49,6 @@ body.vscode-dark { align-items: center; } -.add-button button { - background-color: var(--vscode-button-foreground); -} - .delete-button { position: absolute; top: 0; @@ -66,4 +62,4 @@ body.vscode-dark { .note:hover .delete-button { display: block; -} \ No newline at end of file +} diff --git a/custom-editor-sample/media/reset.css b/custom-editor-sample/media/reset.css new file mode 100644 index 00000000..92d02910 --- /dev/null +++ b/custom-editor-sample/media/reset.css @@ -0,0 +1,30 @@ +html { + box-sizing: border-box; + font-size: 13px; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ol, +ul { + margin: 0; + padding: 0; + font-weight: normal; +} + +img { + max-width: 100%; + height: auto; +} diff --git a/custom-editor-sample/media/vscode.css b/custom-editor-sample/media/vscode.css new file mode 100644 index 00000000..5d12b7e0 --- /dev/null +++ b/custom-editor-sample/media/vscode.css @@ -0,0 +1,91 @@ +:root { + --container-paddding: 20px; + --input-padding-vertical: 6px; + --input-padding-horizontal: 4px; + --input-margin-vertical: 4px; + --input-margin-horizontal: 0; +} + +body { + padding: 0 var(--container-paddding); + color: var(--vscode-foreground); + font-size: var(--vscode-font-size); + font-weight: var(--vscode-font-weight); + font-family: var(--vscode-font-family); + background-color: var(--vscode-editor-background); +} + +ol, +ul { + padding-left: var(--container-paddding); +} + +body > *, +form > * { + margin-block-start: var(--input-margin-vertical); + margin-block-end: var(--input-margin-vertical); +} + +*:focus { + outline-color: var(--vscode-focusBorder) !important; +} + +a { + color: var(--vscode-textLink-foreground); +} + +a:hover, +a:active { + color: var(--vscode-textLink-activeForeground); +} + +code { + font-size: var(--vscode-editor-font-size); + font-family: var(--vscode-editor-font-family); +} + +button { + border: none; + padding: var(--input-padding-vertical) var(--input-padding-horizontal); + width: 100%; + text-align: center; + outline: 1px solid transparent; + outline-offset: 2px !important; + color: var(--vscode-button-foreground); + background: var(--vscode-button-background); +} + +button:hover { + cursor: pointer; + background: var(--vscode-button-hoverBackground); +} + +button:focus { + outline-color: var(--vscode-focusBorder); +} + +button.secondary { + color: var(--vscode-button-secondaryForeground); + background: var(--vscode-button-secondaryBackground); +} + +button.secondary:hover { + background: var(--vscode-button-secondaryHoverBackground); +} + +input:not([type='checkbox']), +textarea { + display: block; + width: 100%; + border: none; + font-family: var(--vscode-font-family); + padding: var(--input-padding-vertical) var(--input-padding-horizontal); + color: var(--vscode-input-foreground); + outline-color: var(--vscode-input-border); + background-color: var(--vscode-input-background); +} + +input::placeholder, +textarea::placeholder { + color: var(--vscode-input-placeholderForeground); +} diff --git a/custom-editor-sample/src/catScratchEditor.ts b/custom-editor-sample/src/catScratchEditor.ts index 66d700fd..3fc027e1 100644 --- a/custom-editor-sample/src/catScratchEditor.ts +++ b/custom-editor-sample/src/catScratchEditor.ts @@ -16,7 +16,7 @@ import { getNonce } from './util'; */ export class CatScratchEditorProvider implements vscode.CustomTextEditorProvider { - public static register(context: vscode.ExtensionContext): vscode.Disposable { + public static register(context: vscode.ExtensionContext): vscode.Disposable { const provider = new CatScratchEditorProvider(context); const providerRegistration = vscode.window.registerCustomEditorProvider(CatScratchEditorProvider.viewType, provider); return providerRegistration; @@ -96,7 +96,13 @@ export class CatScratchEditorProvider implements vscode.CustomTextEditorProvider const scriptUri = webview.asWebviewUri(vscode.Uri.file( path.join(this.context.extensionPath, 'media', 'catScratch.js') )); - const styleUri = webview.asWebviewUri(vscode.Uri.file( + const styleResetUri = webview.asWebviewUri(vscode.Uri.file( + path.join(this.context.extensionPath, 'media', 'reset.css') + )); + const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.file( + path.join(this.context.extensionPath, 'media', 'vscode.css') + )); + const styleMainUri = webview.asWebviewUri(vscode.Uri.file( path.join(this.context.extensionPath, 'media', 'catScratch.css') )); @@ -117,7 +123,9 @@ export class CatScratchEditorProvider implements vscode.CustomTextEditorProvider - + + + Cat Scratch @@ -193,7 +201,7 @@ export class CatScratchEditorProvider implements vscode.CustomTextEditorProvider document.uri, new vscode.Range(0, 0, document.lineCount, 0), JSON.stringify(json, null, 2)); - + return vscode.workspace.applyEdit(edit); } } diff --git a/custom-editor-sample/src/pawDrawEditor.ts b/custom-editor-sample/src/pawDrawEditor.ts index be4337db..9f8cf506 100644 --- a/custom-editor-sample/src/pawDrawEditor.ts +++ b/custom-editor-sample/src/pawDrawEditor.ts @@ -338,8 +338,13 @@ export class PawDrawEditorProvider implements vscode.CustomEditorProvider - + + + Paw Draw diff --git a/webview-sample/media/reset.css b/webview-sample/media/reset.css new file mode 100644 index 00000000..92d02910 --- /dev/null +++ b/webview-sample/media/reset.css @@ -0,0 +1,30 @@ +html { + box-sizing: border-box; + font-size: 13px; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ol, +ul { + margin: 0; + padding: 0; + font-weight: normal; +} + +img { + max-width: 100%; + height: auto; +} diff --git a/webview-sample/media/vscode.css b/webview-sample/media/vscode.css new file mode 100644 index 00000000..5d12b7e0 --- /dev/null +++ b/webview-sample/media/vscode.css @@ -0,0 +1,91 @@ +:root { + --container-paddding: 20px; + --input-padding-vertical: 6px; + --input-padding-horizontal: 4px; + --input-margin-vertical: 4px; + --input-margin-horizontal: 0; +} + +body { + padding: 0 var(--container-paddding); + color: var(--vscode-foreground); + font-size: var(--vscode-font-size); + font-weight: var(--vscode-font-weight); + font-family: var(--vscode-font-family); + background-color: var(--vscode-editor-background); +} + +ol, +ul { + padding-left: var(--container-paddding); +} + +body > *, +form > * { + margin-block-start: var(--input-margin-vertical); + margin-block-end: var(--input-margin-vertical); +} + +*:focus { + outline-color: var(--vscode-focusBorder) !important; +} + +a { + color: var(--vscode-textLink-foreground); +} + +a:hover, +a:active { + color: var(--vscode-textLink-activeForeground); +} + +code { + font-size: var(--vscode-editor-font-size); + font-family: var(--vscode-editor-font-family); +} + +button { + border: none; + padding: var(--input-padding-vertical) var(--input-padding-horizontal); + width: 100%; + text-align: center; + outline: 1px solid transparent; + outline-offset: 2px !important; + color: var(--vscode-button-foreground); + background: var(--vscode-button-background); +} + +button:hover { + cursor: pointer; + background: var(--vscode-button-hoverBackground); +} + +button:focus { + outline-color: var(--vscode-focusBorder); +} + +button.secondary { + color: var(--vscode-button-secondaryForeground); + background: var(--vscode-button-secondaryBackground); +} + +button.secondary:hover { + background: var(--vscode-button-secondaryHoverBackground); +} + +input:not([type='checkbox']), +textarea { + display: block; + width: 100%; + border: none; + font-family: var(--vscode-font-family); + padding: var(--input-padding-vertical) var(--input-padding-horizontal); + color: var(--vscode-input-foreground); + outline-color: var(--vscode-input-border); + background-color: var(--vscode-input-background); +} + +input::placeholder, +textarea::placeholder { + color: var(--vscode-input-placeholderForeground); +} diff --git a/webview-sample/src/extension.ts b/webview-sample/src/extension.ts index d4dfc1a6..81f6f1dc 100644 --- a/webview-sample/src/extension.ts +++ b/webview-sample/src/extension.ts @@ -167,6 +167,14 @@ class CatCodingPanel { // And the uri we use to load this script in the webview const scriptUri = webview.asWebviewUri(scriptPathOnDisk); + // Local path to css styles + const styleResetPath = vscode.Uri.joinPath(this._extensionUri, 'media', 'reset.css'); + const stylesPathMainPath = vscode.Uri.joinPath(this._extensionUri, 'media', 'vscode.css'); + + // Uri to load styles into webview + const stylesResetUri = webview.asWebviewUri(styleResetPath); + const stylesMainUri = webview.asWebviewUri(stylesPathMainPath); + // Use a nonce to only allow specific scripts to be run const nonce = getNonce(); @@ -179,9 +187,13 @@ class CatCodingPanel { Use a content security policy to only allow loading images from https or from our extension directory, and only allow scripts that have a specific nonce. --> - + + + + + Cat Coding diff --git a/webview-view-sample/media/main.css b/webview-view-sample/media/main.css index 26b15661..73de1146 100644 --- a/webview-view-sample/media/main.css +++ b/webview-view-sample/media/main.css @@ -31,12 +31,6 @@ .add-color-button { display: block; - color: var(--vscode-button-foreground); - background: var(--vscode-button-background); border: none; margin: 0 auto; } - -.add-color-button:hover { - background: var(--vscode-button-hoverBackground); -} \ No newline at end of file diff --git a/webview-view-sample/media/reset.css b/webview-view-sample/media/reset.css new file mode 100644 index 00000000..92d02910 --- /dev/null +++ b/webview-view-sample/media/reset.css @@ -0,0 +1,30 @@ +html { + box-sizing: border-box; + font-size: 13px; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ol, +ul { + margin: 0; + padding: 0; + font-weight: normal; +} + +img { + max-width: 100%; + height: auto; +} diff --git a/webview-view-sample/media/vscode.css b/webview-view-sample/media/vscode.css new file mode 100644 index 00000000..5d12b7e0 --- /dev/null +++ b/webview-view-sample/media/vscode.css @@ -0,0 +1,91 @@ +:root { + --container-paddding: 20px; + --input-padding-vertical: 6px; + --input-padding-horizontal: 4px; + --input-margin-vertical: 4px; + --input-margin-horizontal: 0; +} + +body { + padding: 0 var(--container-paddding); + color: var(--vscode-foreground); + font-size: var(--vscode-font-size); + font-weight: var(--vscode-font-weight); + font-family: var(--vscode-font-family); + background-color: var(--vscode-editor-background); +} + +ol, +ul { + padding-left: var(--container-paddding); +} + +body > *, +form > * { + margin-block-start: var(--input-margin-vertical); + margin-block-end: var(--input-margin-vertical); +} + +*:focus { + outline-color: var(--vscode-focusBorder) !important; +} + +a { + color: var(--vscode-textLink-foreground); +} + +a:hover, +a:active { + color: var(--vscode-textLink-activeForeground); +} + +code { + font-size: var(--vscode-editor-font-size); + font-family: var(--vscode-editor-font-family); +} + +button { + border: none; + padding: var(--input-padding-vertical) var(--input-padding-horizontal); + width: 100%; + text-align: center; + outline: 1px solid transparent; + outline-offset: 2px !important; + color: var(--vscode-button-foreground); + background: var(--vscode-button-background); +} + +button:hover { + cursor: pointer; + background: var(--vscode-button-hoverBackground); +} + +button:focus { + outline-color: var(--vscode-focusBorder); +} + +button.secondary { + color: var(--vscode-button-secondaryForeground); + background: var(--vscode-button-secondaryBackground); +} + +button.secondary:hover { + background: var(--vscode-button-secondaryHoverBackground); +} + +input:not([type='checkbox']), +textarea { + display: block; + width: 100%; + border: none; + font-family: var(--vscode-font-family); + padding: var(--input-padding-vertical) var(--input-padding-horizontal); + color: var(--vscode-input-foreground); + outline-color: var(--vscode-input-border); + background-color: var(--vscode-input-background); +} + +input::placeholder, +textarea::placeholder { + color: var(--vscode-input-placeholderForeground); +} diff --git a/webview-view-sample/src/extension.ts b/webview-view-sample/src/extension.ts index 13250c6e..ae933724 100644 --- a/webview-view-sample/src/extension.ts +++ b/webview-view-sample/src/extension.ts @@ -75,7 +75,9 @@ class ColorsViewProvider implements vscode.WebviewViewProvider { const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.js')); // Do the same for the stylesheet. - const styleUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.css')); + const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'reset.css')); + const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'vscode.css')); + const styleMainUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.css')); // Use a nonce to only allow a specific script to be run. const nonce = getNonce(); @@ -93,7 +95,9 @@ class ColorsViewProvider implements vscode.WebviewViewProvider { - + + + Cat Colors