Add run button to the sidebar

6de54207 · Stekelenburg, A.V. (Alexander, Student ) · 3eb0cfd5 · 6de54207 · 6de54207 · 6de54207
Commit 6de54207 authored 4 years ago by Stekelenburg, A.V. (Alexander, Student )
--- a/media/main.css
+++ b/media/main.css
@@ -2,6 +2,27 @@ body {
 	background-color: transparent;
 }

+#run-box {
+	display: flex;
+	justify-content: space-between;
+}
+
+#run-box select {
+	margin-right: 1em;
+}
+
+#run-box button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: fit-content;
+	padding: var(--input-margin-vertical) 0.8em;
+}
+
+#run-box button:focus {
+	outline: none;
+}
+
 ul.option-list {
 	list-style: none;
 	padding: 0;

--- a/package-lock.json
+++ b/package-lock.json
@@ -1810,6 +1810,11 @@
 			"integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==",
 			"dev": true
 		},
+		"vscode-codicons": {
+			"version": "0.0.15",
+			"resolved": "https://registry.npmjs.org/vscode-codicons/-/vscode-codicons-0.0.15.tgz",
+			"integrity": "sha512-DPnJPgwsCJOCxIVrIdmG8uxS79f/W74J80gU9ktOLl36mb1GQvFGF/iT8he6I6k5+MYaK/VP7akbP96rnQIgXw=="
+		},
 		"vscode-jsonrpc": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-6.0.0.tgz",

--- a/package.json
+++ b/package.json
@@ -9,10 +9,17 @@
 		"vscode": "^1.52.0"
 	},
 	"categories": [
-		"Programming Languages", "Snippets", "Linters", "Formatters"
+		"Programming Languages",
+		"Snippets",
+		"Linters",
+		"Formatters"
 	],
 	"keywords": [
-		"modest", "toolset", "checker", "jani", "automata"
+		"modest",
+		"toolset",
+		"checker",
+		"jani",
+		"automata"
 	],
 	"qna": false,
 	"contributes": {
@@ -31,7 +38,6 @@
 				"command": "modest.simulate",
 				"when": "editorLangId == modest"
 			},
-
 			{
 				"command": "modest.add-parameters"
 			}
@@ -98,10 +104,10 @@
 		},
 		"snippets": [
 			{
-			  "language": "modest",
-			  "path": "./snippets.json"
+				"language": "modest",
+				"path": "./snippets.json"
 			}
-		  ]
+		]
 	},
 	"activationEvents": [
 		"onCommand:modest.simulate",
@@ -131,6 +137,7 @@
 		"vscode-test": "^1.5.0"
 	},
 	"dependencies": {
+		"vscode-codicons": "0.0.15",
 		"vscode-languageclient": "^7.0.0"
 	}
-}
\ No newline at end of file
+}
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -289,6 +289,8 @@ class ModestSidebarProvider implements vscode.WebviewViewProvider {
        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'));
+        const styleCodicons = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'node_modules', 'vscode-codicons', 'dist', 'codicon.css'));
+		const fontCodicons = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'node_modules', 'vscode-codicons', 'dist', 'codicon.ttf'))

        // Use a nonce to only allow a specific script to be run.
        const nonce = getNonce();
@@ -302,16 +304,20 @@ class ModestSidebarProvider implements vscode.WebviewViewProvider {
 					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'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
+				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${fontCodicons}; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 				<link href="${styleResetUri}" rel="stylesheet">
 				<link href="${styleVSCodeUri}" rel="stylesheet">
 				<link href="${styleMainUri}" rel="stylesheet">
+                <link href="${styleCodicons}" rel="stylesheet">

 				<title>Modest run dialog</title>
 			</head>
 			<body>
-                <select class="tools-dropdown" id="tools"> </select>
+                <div id="run-box">
+                    <select class="tools-dropdown" id="tools"> </select>
+                    <button id="run-button"><i class="codicon codicon-play"></i></button>
+                </div>
                <h3>Constants</h3>
 				<ul class="option-list" id="constants"> </ul>
                <h3>Options</h3>