Skip to content
Snippets Groups Projects
Commit 63e37f3b authored by Stekelenburg, A.V. (Alexander, Student )'s avatar Stekelenburg, A.V. (Alexander, Student )
Browse files

Restyle the sidebar

parent bf6c8037
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
media/main.css
+ 60
− 2
View file @ 63e37f3b
......@@ -5,6 +5,7 @@ body {
#run-box {
display: flex;
justify-content: space-between;
padding: 0.2em 0 0.4em 0;
}
#run-box select {
......@@ -29,10 +30,9 @@ ul.option-list {
}
ul.option-list li {
padding: 0.25em 0;
padding: 0.15em 0;
display: flex;
justify-content: space-between;
}
ul.option-list li input.name {
......@@ -48,4 +48,62 @@ ul.option-list li input.value {
ul.option-list li label.name {
vertical-align: middle;
width: 70%;
text-overflow: ellipsis;
overflow: hidden;
}
h3 {
font-size: 11px;
min-width: 3ch;
font-weight: 700;
text-transform: uppercase;
}
.pane-view h3.title {
padding-top: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
left: var(--container-paddding);
position: absolute;
}
.pane-view .pane > .pane-body {
padding: 0.2em var(--container-paddding) 0.4em var(--container-paddding);
}
.pane-view .pane>.pane-header {
position: relative;
height: 22px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
overflow: hidden;
display: flex;
cursor: pointer;
align-items: center;
box-sizing: border-box;
line-height: 22px;
}
.pane-view .pane {
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.pane-view {
width: 100%;
height: 100%;
position: absolute;
left:0;
}
.pane-view .pane .pane-body.hidden {
display:none;
}
media/main.js
+ 25
− 0
View file @ 63e37f3b
......@@ -4,6 +4,10 @@
const vscode = acquireVsCodeApi();
for (const element of document.querySelectorAll(".pane-view .pane")) {
addCollapseBehaviour(element);
}
console.log("Started");
/**
* @type {HTMLSelectElement}
......@@ -54,6 +58,27 @@
}
});
/**
*
* @param {HTMLElement} element
*/
function addCollapseBehaviour(element) {
const header = element.querySelector(".pane-header");
const headerIcon = header.querySelector(".codicon");
const body = element.querySelector(".pane-body");
header.addEventListener("click", event => {
if (body.classList.contains("hidden")) {
body.classList.remove("hidden");
headerIcon.classList.remove("codicon-chevron-right");
headerIcon.classList.add("codicon-chevron-down");
} else {
body.classList.add("hidden");
headerIcon.classList.remove("codicon-chevron-down");
headerIcon.classList.add("codicon-chevron-right");
}
});
}
function fillTools(tools) {
const select = document.querySelector("#tools");
......
src/sidebar.ts
+ 44
− 27
View file @ 63e37f3b
......@@ -233,35 +233,52 @@ export class ModestSidebarProvider implements vscode.WebviewViewProvider {
const nonce = getNonce();
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
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'; 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">
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<h3>Select tool</h3>
<div id="run-box">
<select class="tools-dropdown" id="tools"> </select>
<button id="run-button"><i class="codicon codicon-play"></i></button>
<title>Modest run dialog</title>
</head>
<body>
<h3>Select tool</h3>
<div id="run-box">
<select class="tools-dropdown" id="tools"> </select>
<button id="run-button"><i class="codicon codicon-play"></i></button>
</div>
<div class="pane-view">
<div class="split-view-view">
<div class="pane vertical">
<div class="pane-header">
<div class="codicon codicon-chevron-down"></div>
<h3 class="title" title="Open Editors">Open constants </h3>
</div>
<div class="pane-body">
<ul class="option-list" id="constants">There are no undefined constants.</ul>
</div>
</div>
<div class="pane vertical">
<div class="pane-header">
<div class="codicon codicon-chevron-down"></div>
<h3 class="title" title="Open Editors">Parameters</h3>
</div>
<div class="pane-body">
<ul class="option-list" id="parameters">There are no parameters.</ul>
</div>
</div>
</div>
<h3>Open constants</h3>
<ul class="option-list" id="constants">There are no undefined constants.</ul>
<h3>Parameters</h3>
<ul class="option-list" id="parameters">There are no parameters.</ul>
<script nonce="${nonce}" src="${scriptUri}"></script>
</body>
</html>`;
</div>
<script nonce="${nonce}" src="${scriptUri}"></script>
</body>
</html>
`;
function getNonce() {
let text = "";
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment