mirror of
https://github.com/microsoft/vscode-extension-samples.git
synced 2026-06-13 07:10:26 +08:00
Merge pull request #355 from microsoft/misolori/webview-styles
Update webviews to use vscode styles
This commit is contained in:
Miguel Solorio
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
30
custom-editor-sample/media/reset.css
Normal file
30
custom-editor-sample/media/reset.css
Normal file
@ -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;
|
||||
}
|
||||
91
custom-editor-sample/media/vscode.css
Normal file
91
custom-editor-sample/media/vscode.css
Normal file
@ -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);
|
||||
}
|
||||
@ -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
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link href="${styleUri}" rel="stylesheet" />
|
||||
<link href="${styleResetUri}" rel="stylesheet" />
|
||||
<link href="${styleVSCodeUri}" rel="stylesheet" />
|
||||
<link href="${styleMainUri}" rel="stylesheet" />
|
||||
|
||||
<title>Cat Scratch</title>
|
||||
</head>
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -338,8 +338,13 @@ export class PawDrawEditorProvider implements vscode.CustomEditorProvider<PawDra
|
||||
// Local path to script and css for the webview
|
||||
const scriptUri = webview.asWebviewUri(vscode.Uri.file(
|
||||
path.join(this._context.extensionPath, 'media', 'pawDraw.js')
|
||||
)); const styleResetUri = webview.asWebviewUri(vscode.Uri.file(
|
||||
path.join(this._context.extensionPath, 'media', 'reset.css')
|
||||
));
|
||||
const styleUri = webview.asWebviewUri(vscode.Uri.file(
|
||||
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', 'pawDraw.css')
|
||||
));
|
||||
|
||||
@ -360,7 +365,9 @@ export class PawDrawEditorProvider implements vscode.CustomEditorProvider<PawDra
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link href="${styleUri}" rel="stylesheet" />
|
||||
<link href="${styleResetUri}" rel="stylesheet" />
|
||||
<link href="${styleVSCodeUri}" rel="stylesheet" />
|
||||
<link href="${styleMainUri}" rel="stylesheet" />
|
||||
|
||||
<title>Paw Draw</title>
|
||||
</head>
|
||||
|
||||
30
webview-sample/media/reset.css
Normal file
30
webview-sample/media/reset.css
Normal file
@ -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;
|
||||
}
|
||||
91
webview-sample/media/vscode.css
Normal file
91
webview-sample/media/vscode.css
Normal file
@ -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);
|
||||
}
|
||||
@ -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.
|
||||
-->
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link href="${stylesResetUri}" rel="stylesheet">
|
||||
<link href="${stylesMainUri}" rel="stylesheet">
|
||||
|
||||
<title>Cat Coding</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
30
webview-view-sample/media/reset.css
Normal file
30
webview-view-sample/media/reset.css
Normal file
@ -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;
|
||||
}
|
||||
91
webview-view-sample/media/vscode.css
Normal file
91
webview-view-sample/media/vscode.css
Normal file
@ -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);
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link href="${styleUri}" rel="stylesheet">
|
||||
<link href="${styleResetUri}" rel="stylesheet">
|
||||
<link href="${styleVSCodeUri}" rel="stylesheet">
|
||||
<link href="${styleMainUri}" rel="stylesheet">
|
||||
|
||||
<title>Cat Colors</title>
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user