zoldar/jenot
1
0
Fork 0
mirror of https://github.com/zoldar/jenot.git synced 2026-01-03 14:32:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement better empty state for label

Browse source
This commit is contained in:
Adrian Gruntkowski 2025-02-09 21:27:11 +01:00
parent ca0f954b14
commit 0ac303b6ef
2 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
priv/static/js/components.js
View file

@ -186,7 +186,17 @@ class EditableArea extends HTMLElement {
} }
#sync() { #sync() {
this.displayElement.replaceChildren(...renderText(this.inputElement.value)); const value = this.inputElement.value;
if (value.trim() === "") {
this.classList.add("empty");
this.classList.remove("non-empty");
} else {
this.classList.remove("empty");
this.classList.add("non-empty");
}
this.displayElement.replaceChildren(...renderText(value));
} }
} }

10
priv/static/style.css
View file

@ -11,6 +11,7 @@
--shadow-color: rgb(0 0 0 / 0.8); --shadow-color: rgb(0 0 0 / 0.8);
--button-background: lightgray; --button-background: lightgray;
--inactive-color: gray; --inactive-color: gray;
--placeholder-text: #999;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -24,6 +25,7 @@
--shadow-color: rgb(211 211 211 / 0.8); --shadow-color: rgb(211 211 211 / 0.8);
--button-background: silver; --button-background: silver;
--inactive-color: lightgray; --inactive-color: lightgray;
--placeholder-text: #999;
} }
html { html {
@ -243,7 +245,8 @@ task-list ul {
/* Note form */ /* Note form */
note-form:focus-within .title { note-form:focus-within .title,
note-form .title:has(.non-empty) {
display: block; display: block;
} }
@ -253,6 +256,11 @@ note-form .title {
font-weight: bold; font-weight: bold;
} }
note-form .title .empty .display::before {
content: "Title";
color: var(--placeholder-text);
}
note-form .content { note-form .content {
min-height: 2.5em; min-height: 2.5em;
} }