Topology, sidebar

Author: veniware

Protest/Front/topology.css

@@ -1,16 +1,29 @@
+.topology-workspace {
+	position: absolute;
+	width: calc(100% - 316px);
+	height: 100%;
+	background-color: var(--clr-bg);
+	overflow: auto;
+}
+
+.topology-sidebar {
+	position: absolute;
+	right: 8px;
+	width: 300px;
+	top: 8px;
+	bottom: 8px;
+	background-color: var(--clr-pane);
+	border-radius: 4px;
+	overflow-y: auto;
+}
+
 .topology-device {
 	position: absolute;
 	border-radius: 4px;
 	color: var(--clr-light);
 	max-width: 72px;
 }
 
-.topology-selected {
-	background-color: color-mix(in srgb, var(--clr-select) 50%, transparent 50%);
-	outline: 2px solid var(--clr-select);
-	z-index: 1;
-}
-
 .topology-device-icon {
 	width: 72px;
 	height: 64px;
@@ -28,3 +41,15 @@
 	text-overflow: ellipsis;
 	direction: rtl;
 }
+
+.topology-selected {
+	background-color: color-mix(in srgb, var(--clr-select) 50%, transparent 50%);
+	outline: 2px solid var(--clr-select);
+	z-index: 1;
+}
+
+.topology-pending {
+	background-size: 3px 3px;
+	background-image: radial-gradient(circle, transparent 1px, #c0c0c0 1px);
+	background-color: transparent;
+}

Protest/Front/topology.js

@@ -19,12 +19,22 @@ class Topology extends Window{
 
 		this.SetupToolbar();
 
-		this.content.style.overflow = "auto";
-
 		this.startButton = this.AddToolbarButton("Start discovery", "mono/play.svg?light");
 		this.stopButton = this.AddToolbarButton("Stop", "mono/stop.svg?light");
+		this.stopButton.disabled = true;
 		this.AddToolbarSeparator();
 
+		this.workspace = document.createElement("div");
+		this.workspace.className = "topology-workspace";
+		this.content.appendChild(this.workspace);
+
+		this.sideBar = document.createElement("div");
+		this.sideBar.className = "topology-sidebar";
+		this.content.appendChild(this.sideBar);
+
+		this.content.style.overflow = "auto";
+		this.content.style.overflow = "auto";
+
 		this.content.onmousedown = ()=> {
 			if (this.selected) {
 				this.selected.classList.remove("topology-selected");
@@ -72,8 +82,8 @@ class Topology extends Window{
 			this.CreateDevice({
 				file: device,
 				name: ip,
-				left: 16 + (count % 10) * 96,
-				top: 16 + Math.floor(count / 10) * 96
+				left: 16 + (count % 10) * 112,
+				top: 16 + Math.floor(count / 10) * 112
 			});
 
 			count++;
@@ -86,10 +96,10 @@ class Topology extends Window{
 		device.style.left = options.left + "px";
 		device.style.top = options.top + "px";
 		device.setAttribute("file", options.file);
-		this.content.appendChild(device);
+		this.workspace.appendChild(device);
 
 		const icon = document.createElement("div");
-		icon.className = "topology-device-icon";
+		icon.className = "topology-device-icon topology-pending";
 		icon.style.maskImage = "url(mono/switch.svg?light)";
 		device.appendChild(icon);
 
@@ -256,7 +266,8 @@ class Topology extends Window{
 	}
 
 	Stop() {
-
+		this.startButton.disabled = false;
+		this.stopButton.disabled = true;
 	}
 
 }