Moved "extension/ui" to "webview", removed "shared".

2020-02-29 21:31:22 +01:00
parent f55bef23c2
commit 5318b5e4ae
56 changed files with 144 additions and 116 deletions
--- a/webview/src/style.scss
+++ b/webview/src/style.scss
@@ -0,0 +1,188 @@
+@import "~normalize.css";
+@import "~@blueprintjs/core/lib/css/blueprint.css";
+@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
+
+html,
+body,
+.target {
+	height: 100%;
+}
+
+body {
+	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+	margin: 0px;
+	padding: 0px;
+	border: 0px;
+
+	margin: 0;
+	padding: 0;
+
+	background-color: var(--vscode-editor-background);
+}
+
+.bp3-input,
+.bp3-button {
+	border-radius: 0;
+}
+
+.bp3-icon {
+	svg {
+		color: lighten(black, 20);
+		width: 14px;
+	}
+}
+
+.component-GUI {
+	& > .part-Header {
+		padding: 6px 20px 6px 0;
+		background-color: var(--vscode-sideBar-background);
+
+		// border-top: solid 1px var(--vscode-button-background);
+		// rgba(128, 128, 128, 0.15)
+	}
+}
+
+.component-VisualizerHeader {
+	.part-ExpandButton {
+		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23646465' d='M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z'/%3E%3C/svg%3E");
+
+		background-position: 50%;
+		background-position-x: 50%;
+		background-position-y: center;
+		background-repeat: no-repeat;
+
+		width: 15px;
+		margin: -6px 6px -6px 0px;
+
+		&.expanded {
+			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23646465' d='M11 10.07H5.344L11 4.414v5.656z'/%3E%3C/svg%3E");
+		}
+
+		&:hover {
+			background-color: var(--vscode-titleBar-activeBackground);
+		}
+	}
+}
+
+.component-VisualizerHeaderMain {
+	.part-Icon {
+		margin-left: 4px;
+		svg {
+			fill: var(--vscode-editor-foreground);
+		}
+	}
+}
+
+.component-NamedSelect {
+	.part-Name {
+		color: var(--vscode-editor-foreground);
+	}
+}
+
+.component-Select {
+	.part-Button {
+		background-color: var(--vscode-button-background);
+		color: var(--vscode-button-foreground);
+		padding: 4px 10px;
+
+		width: 100%;
+
+		border: none;
+		cursor: pointer;
+		&:hover,
+		&:focus {
+			background-color: var(--vscode-button-hoverBackground);
+		}
+	}
+
+	.part-Items {
+		background-color: var(--vscode-sideBar-background);
+
+		.part-Item {
+			//color: black;
+			color: var(--vscode-editor-foreground);
+			padding: 12px 16px;
+			text-decoration: none;
+			display: block;
+			cursor: pointer;
+
+			&:hover {
+				background-color: var(
+					--vscode-titleBar-activeBackground
+				); // #ddd;
+			}
+		}
+	}
+
+	.bp3-popover-wrapper {
+		width: 100%;
+	}
+
+	.bp3-popover-target {
+		width: 100%;
+	}
+}
+
+.component-Visualizer {
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+}
+
+.component-NoData {
+	width: 100%;
+	height: 100%;
+
+	svg {
+		float: left; // to prevent scrollbar.
+		// I don't know why it works.
+		width: 100%;
+		height: 100%;
+
+		rect {
+			fill: var(--vscode-editor-background);
+		}
+
+		line {
+			stroke: gray;
+		}
+
+		text {
+			fill: var(--vscode-editor-foreground);
+			stroke-width: 0px;
+		}
+	}
+}
+
+.component-monaco-editor {
+	width: 100%;
+	min-width: 0;
+	box-sizing: border-box;
+	display: flex;
+	padding: 2px;
+	border: 0.5px solid gray;
+
+	.part-editor {
+		min-width: 0;
+		min-height: 0;
+		flex: 1;
+
+		.current-line {
+			border: none !important;
+		}
+		.selectionHighlight {
+			background: transparent !important;
+		}
+	}
+}
+
+.svgViewer {
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	margin: 0;
+}
+
+.bp3-transition-container {
+	z-index: 100000;
+}