magnus/Notes
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 4 Wiki Activity

Checkbox item visualizes error

Browse Source
This commit is contained in:
Magnus Åhall 2024-01-10 23:28:00 +01:00
parent f98a6ab863
commit dc2b6dac8b
4 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/css/main.css
View File

@ -383,6 +383,12 @@ header .menu {
#checklist .checklist-item input[type="checkbox"].ok::before {
box-shadow: inset 1em 1em #54b356;
}
#checklist .checklist-item input[type="checkbox"].error {
border: 0.15em solid #d13636;
}
#checklist .checklist-item input[type="checkbox"].error::before {
box-shadow: inset 1em 1em #d13636;
}
#checklist .checklist-item input[type="checkbox"]::before {
content: "";
width: 0.7em;

3
static/js/app.mjs
View File

@ -46,7 +46,10 @@ class App extends Component {
responseError({ comm, app, upload }) {//{{{
if (comm !== undefined) {
if (typeof comm.text === 'function')
comm.text().then(body => alert(body))
else
alert(comm)
return
}

5
static/js/checklist.mjs
View File

@ -80,6 +80,7 @@ class ChecklistItemElement extends Component {
}//}}}
update(checked) {//{{{
this.setState({ checked })
this.checkbox.current.classList.remove('error')
window._app.current.request('/node/checklist_item/state', {
ChecklistItemID: this.props.item.ID,
State: checked,
@ -89,6 +90,8 @@ class ChecklistItemElement extends Component {
setTimeout(()=>this.checkbox.current.classList.remove('ok'), 500)
})
.catch(window._app.current.responseError)
.catch(()=>{
this.checkbox.current.classList.add('error')
})
}//}}}
}

7
static/less/main.less
View File

@ -443,6 +443,13 @@ header {
box-shadow: inset 1em 1em #54b356;
}
input[type="checkbox"].error {
border: 0.15em solid #d13636;
}
input[type="checkbox"].error::before {
box-shadow: inset 1em 1em #d13636;
}
input[type="checkbox"]::before {
content: "";