rnsrk/wisski-cloud-distillery
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: Make buttons nicer

Browse source
This commit is contained in:
Tom Wiesing 2022-10-14 21:15:31 +02:00
parent cdc7d69ad9
commit ebdbe9fabd
No known key found for this signature in database
16 changed files with 60 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

15
internal/component/info/html/index.html
View file

@ -9,6 +9,10 @@
<body> <body>
<header> <header>
<h1 id="top">Distillery Control Page</h1> <h1 id="top">Distillery Control Page</h1>
<small>Generated at <code class="date">{{ .Time.Format "2006-01-02T15:04:05Z07:00" }}</code></small>
<p>
<a class="pure-button pure-button-primary" href="/dis/index">Control</a>
</p>
</header> </header>
<main> <main>
<div class="pure-g"> <div class="pure-g">
@ -262,14 +266,15 @@
{{range .Instances}} {{range .Instances}}
<div class="pure-u-1 pure-u-xl-1-3"> <div class="pure-u-1 pure-u-xl-1-3">
<div class="padding wisski {{ if .Running }}running{{ else }}stopped{{ end }}"> <div class="wisski {{ if .Running }}running{{ else }}stopped{{ end }}">
<h3 id="instance-{{.Slug}}">{{.Slug}}{{ if not .Running }}&nbsp;<small>not running</small>{{ end }}</h3> <h3>
{{.Slug}}
{{ if not .Running }}&nbsp;<small>not running</small>{{ end }}
</h3>
<p> <p>
<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.URL}}</a><br> <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.URL}}</a><br>
<small> <a class="pure-button" href="/dis/instance/{{.Slug}}">Details</a>
<a href="/dis/instance/{{.Slug}}">More Details</a>
</small>
</p> </p>
</div> </div>
</div> </div>

23
internal/component/info/html/instance.html
View file

@ -9,9 +9,11 @@
<body> <body>
<header> <header>
<h1 id="top">Distillery Control Page - {{ .Info.Slug }}</h1> <h1 id="top">Distillery Control Page - {{ .Info.Slug }}</h1>
<small>Generated at <code class="date">{{ .Time.Format "2006-01-02T15:04:05Z07:00" }}</code></small>
<p> <p>
<a href="/dis/instance/{{ .Info.Slug }}">Reload</a> <a class="pure-button" href="/dis/index">Control</a> &gt;
<a href="/dis/index">Back to index</a> <a class="pure-button pure-button-primary" href="/dis/instance/{{ .Info.Slug }}">Instance</a>
</p> </p>
</header> </header>
@ -77,7 +79,7 @@
<tr> <tr>
<th colspan="2"> <th colspan="2">
Build Build
<button class="remote-action" data-action="rebuild" data-param="{{ .Instance.Slug }}" data-buffer="1000">Rebuild</button> <button class="remote-action pure-button pure-button-action" data-action="rebuild" data-param="{{ .Instance.Slug }}" data-buffer="1000">Rebuild</button>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -109,10 +111,6 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<p>
<pre class="remote-action-out" id="rebuild"></pre>
</p>
</div> </div>
</div> </div>
@ -256,6 +254,9 @@
<div class="pure-u-1-1"> <div class="pure-u-1-1">
<h2 id="snapshots">Snapshots</h2> <h2 id="snapshots">Snapshots</h2>
<p>
<button class="remote-action pure-button pure-button-action" data-action="snapshot" data-param="{{ .Instance.Slug }}" data-buffer="1000">Take a snapshot</button>
</p>
</div> </div>
<div class="pure-u-1"> <div class="pure-u-1">
@ -284,17 +285,9 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<p>
<button class="remote-action" data-action="snapshot" data-param="{{ .Instance.Slug }}" data-buffer="1000">Take a snapshot</button>
</p>
</div> </div>
</div> </div>
</main> </main>
<footer>
Generated at <code>{{ .Time }}</code>
</footer>
{{ JS }} {{ JS }}
</body> </body>

1
internal/component/static/dist/control/index.a0bd71f2.css vendored
View file

File diff suppressed because one or more lines are too long

1
internal/component/static/dist/control/index.a27ed337.js vendored
View file

File diff suppressed because one or more lines are too long

1
internal/component/static/dist/control/index.b3c7c0f7.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
internal/component/static/dist/control/index.dbb01556.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
internal/component/static/dist/control/index.html vendored
View file

@ -1 +1 @@
<link rel="stylesheet" href="/static/control/index.a0bd71f2.css"><script type="module" src="/static/control/index.a27ed337.js"></script> <link rel="stylesheet" href="/static/control/index.b3c7c0f7.css"><script type="module" src="/static/control/index.dbb01556.js"></script>

2
internal/component/static/dist/control/instance.html vendored
View file

@ -1 +1 @@
<link rel="stylesheet" href="/static/control/index.a0bd71f2.css"><script type="module" src="/static/control/index.a27ed337.js"></script> <link rel="stylesheet" href="/static/control/index.b3c7c0f7.css"><script type="module" src="/static/control/index.dbb01556.js"></script>

0
internal/component/static/dist/home/index.38d394c2.js vendored
View file

1
internal/component/static/dist/home/index.d87c909c.js vendored Normal file
View file

@ -0,0 +1 @@
const e=e=>{const n=document.getElementsByTagName("h"+e);Array.from(n).forEach((e=>{void 0!==e.id&&""!==e.id&&e.appendChild((e=>{const n=document.createElement("a");return n.className="header-link",n.href="#"+e,n.innerHTML="#",n})(e.id))}))};new Array(6).fill(0).forEach(((n,r)=>e(r+1)));

2
internal/component/static/dist/home/index.html vendored
View file

@ -1 +1 @@
<link rel="stylesheet" href="/static/control/index.a0bd71f2.css"><script type="module" src="/static/home/index.38d394c2.js"></script> <link rel="stylesheet" href="/static/control/index.b3c7c0f7.css"><script type="module" src="/static/home/index.d87c909c.js"></script>

13
internal/component/static/src/base/index.css
View file

@ -1,7 +1,10 @@
body { body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
} }
header, main, footer {
header,
main,
footer {
margin: 2em; margin: 2em;
} }
@ -23,6 +26,7 @@ header, main, footer {
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
} }
.overflow table td:last-child, .overflow table td:last-child,
.overflow table th:last-child { .overflow table th:last-child {
white-space: nowrap; white-space: nowrap;
@ -32,3 +36,10 @@ header, main, footer {
display: block; display: block;
height: 2em; height: 2em;
} }
.pure-button-action {
background-color: rgb(66, 184, 221) !important;
}
.pure-button-success {
background-color: rgb(28, 184, 65) !important;
}

12
internal/component/static/src/entry/control/index.css
View file

@ -1,5 +1,15 @@
.wisski { .wisski {
padding-left: 5px; padding: 1em;
}
.wisski h3 {
padding: 0;
}
.wisski a.pure-button {
float: right;
position: relative;
bottom: 1em;
} }
.wisski.running { .wisski.running {

1
internal/component/static/src/lib/autolink/index.css
View file

@ -17,5 +17,6 @@ h3:hover .header-link,
h4:hover .header-link, h4:hover .header-link,
h5:hover .header-link, h5:hover .header-link,
h6:hover .header-link { h6:hover .header-link {
color: black !important;
opacity: 1; opacity: 1;
} }

4
internal/component/static/src/lib/autolink/index.ts
View file

@ -1,7 +1,7 @@
import "./index.css" import "./index.css"
/** Adapted from http://blog.parkermoore.de/2014/08/01/header-anchor-links-in-vanilla-javascript-for-github-pages-and-jekyll/ */ /** Adapted from http://blog.parkermoore.de/2014/08/01/header-anchor-links-in-vanilla-javascript-for-github-pages-and-jekyll/ */
const anchorForId = (id) => { const anchorForId = (id: string) => {
const anchor = document.createElement("a") const anchor = document.createElement("a")
anchor.className = "header-link" anchor.className = "header-link"
anchor.href = "#" + id anchor.href = "#" + id
@ -9,7 +9,7 @@ const anchorForId = (id) => {
return anchor return anchor
} }
const linkifyAnchors = (level) => { const linkifyAnchors = (level: number) => {
const headers = document.getElementsByTagName("h" + level); const headers = document.getElementsByTagName("h" + level);
Array.from(headers).forEach((header) => { Array.from(headers).forEach((header) => {
if (typeof header.id === "undefined" || header.id === "") return if (typeof header.id === "undefined" || header.id === "") return

6
internal/component/static/src/lib/remote/index.ts
View file

@ -71,19 +71,23 @@ Array.from(elements).forEach((element) => {
// create a button to eventually close everything // create a button to eventually close everything
const button = document.createElement("button") const button = document.createElement("button")
button.className = "pure-button" button.className = "pure-button pure-button-success"
button.append("Close") button.append("Close")
button.addEventListener('click', function (event) { button.addEventListener('click', function (event) {
event.preventDefault(); event.preventDefault();
modal.parentNode?.removeChild(modal); modal.parentNode?.removeChild(modal);
}) })
const onbeforeunload = window.onbeforeunload;
window.onbeforeunload = () => "A remote session is in progress. Are you sure you want to leave?";
// when closing, add a button to the modal! // when closing, add a button to the modal!
let didClose = false let didClose = false
const close = function () { const close = function () {
if (didClose) return if (didClose) return
didClose = true didClose = true
window.onbeforeunload = onbeforeunload;
modal.append(button) modal.append(button)
// DEBUG: print terminal stats! // DEBUG: print terminal stats!
// const quota = (println.paintedFrames / (println.missedFrames + println.paintedFrames)) * 100 // const quota = (println.paintedFrames / (println.missedFrames + println.paintedFrames)) * 100