feature: WIP - a functioning history popup

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>
 

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',

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 () {

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,64 +196,72 @@ input[type="submit"] {
   user-select: none;
 }
 
-button:hover,
-input[type="submit"]:hover {
-  box-shadow: 0 0 10px 0 #666;
-  cursor: pointer;
+/* Action Buttons */
+action-button {
+  display: flex;
+  flex-direction: column;
 }
 
-button:focus,
-input[type="submit"]:focus {
-  outline: 1px solid black;
+action-button button {
+  width: 100%;
+  flex-grow: 1;
+  z-index: 2;
 }
 
-button:disabled,
-input[type="submit"]:disabled {
-  color: gray;
-  background-color: #333;
-  cursor: not-allowed;
+action-button details {
+  flex-grow: 1;
 }
 
-div.executions button {
-  margin-top: .2em;
-  margin-bottom: .2em;
+action-button details[open] {
+  margin-top: 0;
 }
 
-fieldset#section-switcher {
-  border: 0;
-  text-align: right;
-  margin-bottom: 1em;
+action-button details summary div {
+  display: inline-flex;
 }
 
-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;
+action-button details summary div span:first-child {
+  flex-grow: 1;
 }
 
-fieldset#root-group action-button button {
-  width: 100%;
-  height: 100%;
+.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;
 }
 
-fieldset#section-switcher button:first-child {
-  border-radius: 1em 0 0 1em;
+execution-button button {
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
 }
 
-fieldset#section-switcher button:last-child {
-  border-radius: 0 1em 1em 0;
+/* Button states */
+
+button:hover,
+input[type="submit"]:hover {
+  box-shadow: 0 0 10px 0 #666;
+  cursor: pointer;
 }
 
-button.active-section {
-  font-weight: bold;
+button:focus,
+input[type="submit"]:focus {
+  outline: 1px solid black;
 }
 
+button:disabled,
+input[type="submit"]:disabled {
+  color: gray;
+  background-color: #333;
+  cursor: not-allowed;
+}
+
+
 /* Button animations */
 
 .action-failed {
@@ -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 {