From 77b17604f3c84356a87d29c9703e1ecf67f3ea86 Mon Sep 17 00:00:00 2001
From: jamesread <contact@jread.com>
Date: Fri, 6 Oct 2023 09:27:44 +0100
Subject: [PATCH] feature: WIP - a functioning history popup

---
 webui/index.html         |  19 +++----
 webui/js/ActionButton.js |   4 +-
 webui/main.js            |   2 +
 webui/style.css          | 109 +++++++++++++++++++++------------------
 4 files changed, 74 insertions(+), 60 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 60e4381..ff88aad 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -18,14 +18,14 @@
 		<main title = "main content">
 			<div id = "perma-widget">
 				<div id = "sidebar-toggle-wrapper">
-					<label for = "sidebar-toggler" id = "sidebar-toggler-button" title = "Toggle sidebar" tabindex = "0">&#9776;</label>
+					<label for = "hide-sidebar-checkbox" id = "sidebar-toggler-button" title = "Toggle sidebar" tabindex = "0">&#9776;</label>
 				</div>
 				<h1 id = "page-title">OliveTin</h1>
 			</div>
 
 
 			<div id = "content-sidebar">
-				<input type = "checkbox" id = "sidebar-toggler" hidden checked />
+				<input type = "checkbox" id = "hide-sidebar-checkbox" hidden checked />
 				<aside>
 					<ul>
 						<li><a id = "showActions">Actions</a></li>
@@ -130,14 +130,15 @@
 		</template>
 
 		<template id = "tplActionButton">
-			<div>
-				<button>
-					<span role = "icon" title = "action button icon" class = "icon">&#x1f4a9;</span>
-					<span role = "title" class = "title">Untitled Button</span>
-				</button>
+			<button>
+				<span role = "icon" title = "action button icon" class = "icon">&#x1f4a9;</span>
+				<span role = "title" class = "title">Untitled Button</span>
+			</button>
 
-				<div class = "executions">
-				</div>
+			<div class = "action-button-footer">
+				<details class = "executions">
+					<summary>Not executed yet.</summary>
+				</details>
 			</div>
 		</template>
 
diff --git a/webui/js/ActionButton.js b/webui/js/ActionButton.js
index c09e7ac..0e48f37 100644
--- a/webui/js/ActionButton.js
+++ b/webui/js/ActionButton.js
@@ -81,7 +81,9 @@ class ActionButton extends window.HTMLElement {
 
     const btnExecution = document.createElement('execution-button')
     btnExecution.constructFromJson(startActionArgs.uuid)
-    this.querySelector('div.executions').appendChild(btnExecution)
+    this.querySelector('.executions').appendChild(btnExecution)
+
+    this.querySelector('summary').innerText = (this.querySelector('.executions').children.length - 1) + ' executions.'
 
     window.fetch(this.actionCallUrl, {
       method: 'POST',
diff --git a/webui/main.js b/webui/main.js
index 3d9c95f..2f0140f 100644
--- a/webui/main.js
+++ b/webui/main.js
@@ -11,6 +11,8 @@ function showSection (name) {
 
   document.getElementById('show' + name).classList.add('activeSection')
   document.getElementById('content' + name).hidden = false
+
+  document.getElementById('hide-sidebar-checkbox').checked = true
 }
 
 function setupSections () {
diff --git a/webui/style.css b/webui/style.css
index e24ba1e..c756a86 100644
--- a/webui/style.css
+++ b/webui/style.css
@@ -73,6 +73,7 @@ aside {
   background-color: white;
   border: 0 0 10px 0;
   box-shadow: 0 0 10px 0 #444;
+  z-index: 3;
 }
 
 input:checked ~ aside {
@@ -173,7 +174,16 @@ div.entity h2 {
   grid-column: 1 / span all;
 }
 
-/* Buttons */
+details {
+  display: inline-block;
+}
+
+details[open] {
+  margin-top: 1em;
+  display: block;
+}
+
+/* General Buttons */
 
 button,
 input[type="submit"] {
@@ -186,6 +196,53 @@ input[type="submit"] {
   user-select: none;
 }
 
+/* Action Buttons */
+action-button {
+  display: flex;
+  flex-direction: column;
+}
+
+action-button button {
+  width: 100%;
+  flex-grow: 1;
+  z-index: 2;
+}
+
+action-button details {
+  flex-grow: 1;
+}
+
+action-button details[open] {
+  margin-top: 0;
+}
+
+action-button details summary div {
+  display: inline-flex;
+}
+
+action-button details summary div span:first-child {
+  flex-grow: 1;
+}
+
+.action-button-footer {
+  display: block;
+  text-align: left;
+  font-size: smaller;
+  padding: 0.2em;
+  background-color: #efefef;
+  border-top: 0;
+  border-left: 1px solid #999;
+  border-right: 1px solid #999;
+  border-bottom: 1px solid #999;
+}
+
+execution-button button {
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
+}
+
+/* Button states */
+
 button:hover,
 input[type="submit"]:hover {
   box-shadow: 0 0 10px 0 #666;
@@ -204,45 +261,6 @@ input[type="submit"]:disabled {
   cursor: not-allowed;
 }
 
-div.executions button {
-  margin-top: .2em;
-  margin-bottom: .2em;
-}
-
-fieldset#section-switcher {
-  border: 0;
-  text-align: right;
-  margin-bottom: 1em;
-}
-
-fieldset#section-switcher button {
-  padding: 1em;
-  color: black;
-  display: table-cell;
-  text-align: center;
-  border: 1px solid #999;
-  background-color: white;
-  box-shadow: 0 0 6px 0 #aaa;
-  user-select: none;
-  cursor: pointer;
-}
-
-fieldset#root-group action-button button {
-  width: 100%;
-  height: 100%;
-}
-
-fieldset#section-switcher button:first-child {
-  border-radius: 1em 0 0 1em;
-}
-
-fieldset#section-switcher button:last-child {
-  border-radius: 0 1em 1em 0;
-}
-
-button.active-section {
-  font-weight: bold;
-}
 
 /* Button animations */
 
@@ -301,15 +319,6 @@ summary {
   cursor: pointer;
 }
 
-details {
-  display: inline-block;
-}
-
-details[open] {
-  margin-top: 1em;
-  display: block;
-}
-
 form div.wrapper {
   background-color: white;
   text-align: left;
@@ -326,7 +335,7 @@ label {
   position: absolute;
   top: 1em;
   left: 1em;
-  z-index: 2;
+  z-index: 9;
 }
 
 #perma-widget label {