medlogic
/
olivetin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature: Rounded buttons... because apparently they look modern?! (#239) 

* feature: Rounded buttons... because apparently they look modern?!

* bugfix: Logo in readme
This commit is contained in:
James Read 2024-03-05 14:53:50 +00:00 committed by GitHub
parent ee4d61e476
commit 555b6929e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 4 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webui.dev/index.html
View File

@ -153,8 +153,7 @@
<span class = "title">Untitled Button</span> <span class = "title">Untitled Button</span>
</button> </button>
<div class = "action-button-footer"> <div class = "action-button-footer" hidden></div>
</div>
</template> </template>
<template id = "tplLogRow"> <template id = "tplLogRow">

2
webui.dev/js/ActionButton.js
View File

@ -129,6 +129,8 @@ class ActionButton extends ExecutionFeedbackButton {
if (this.popupOnStart === 'execution-button') { if (this.popupOnStart === 'execution-button') {
const btnExecution = document.createElement('execution-button') const btnExecution = document.createElement('execution-button')
btnExecution.constructFromJson(executionTrackingId) btnExecution.constructFromJson(executionTrackingId)
this.querySelector('.action-button-footer').hidden = false
this.querySelector('.action-button-footer').style.display = 'flex'
this.querySelector('.action-button-footer').prepend(btnExecution) this.querySelector('.action-button-footer').prepend(btnExecution)
return return

11
webui.dev/style.css
View File

@ -252,6 +252,7 @@ action-button button {
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
z-index: 2; z-index: 2;
border-radius: .7em;
} }
action-button details { action-button details {
@ -271,14 +272,8 @@ action-button details summary div span:first-child {
} }
.action-button-footer { .action-button-footer {
display: flex;
text-align: left; text-align: left;
font-size: smaller; font-size: smaller;
background-color: #efefef;
border-top: 0;
border-left: 1px solid #666;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
overflow: auto; overflow: auto;
} }
@ -544,10 +539,6 @@ div.toolbar * {
color: white; color: white;
} }
.action-button-footer {
background-color: #111;
}
button:disabled { button:disabled {
background-color: black; background-color: black;
} }