feature: WIP - a functioning history popup
This commit is contained in:
jamesread
parent
d169b3f2b1
commit
77b17604f3
|
|
@ -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">☰</label>
|
||||
<label for = "hide-sidebar-checkbox" id = "sidebar-toggler-button" title = "Toggle sidebar" tabindex = "0">☰</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">💩</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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
109
webui/style.css
109
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue