tfaour/espresso_frame
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Add a text widget (rich text: bold/italic/underline, per-run color/highlight)
Build and push server image / test (push) Successful in 27s
Details
Build and push server image / build-and-push (push) Successful in 1m59s
Details
Build and push server image / deploy (push) Successful in 1m9s
Details

Browse Source 
A new self-contained widget type showing user-authored rich text -- no
live upstream to poll, like the static image widget, just word-wrapped
styled text instead of an uploaded image.

The dialog's contenteditable HTML is never stored or replayed as HTML:
app/text_content.py parses it server-side (on save) into a plain
paragraphs-of-styled-runs structure -- the actual sanitization
boundary, since raw HTML never round-trips back into any browser DOM
(the dialog rebuilds its editor from that same JSON via
createElement/textContent). app/widgets/text.py renders it with a
custom word-wrap/shrink-to-fit layout, using real vendored font weights
(app/fonts/NotoSans-{Regular,Bold,Italic,BoldItalic}.ttf, OFL-licensed
like the emoji fonts already there) rather than every other widget's
single ImageFont.load_default() -- the one widget type where that
distinction matters.
This commit is contained in:
Thomas Faour
2026-07-25 14:21:52 +00:00
parent f1fda9bdee
commit 3735c5bfa7
23 changed files with 1062 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/app/static/theme.css
+49
View File
@@ -205,6 +205,12 @@ details.card .sub { margin-top: 8px; }
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
input[type="color"] {
width: 44px;
height: 34px;
padding: 2px;
cursor: pointer;
}
input[type="range"] {
width: 100%;
margin-top: 8px;
@@ -281,6 +287,49 @@ input:focus, select:focus {
.checkbox-row input { width: auto; margin-top: 0; }
.checkbox-row label { margin-top: 0; font-weight: normal; }
.richtext-toolbar { display: flex; align-items: center; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
.richtext-btn {
width: auto;
min-width: 32px;
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-alt);
color: var(--text);
font-size: 14px;
cursor: pointer;
}
.richtext-btn:hover { background: var(--surface); }
.richtext-toolbar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.richtext-color-label {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0;
font-weight: normal;
font-size: 14px;
color: var(--text-muted);
cursor: pointer;
}
.richtext-color-label input[type="color"] {
width: 22px;
height: 22px;
padding: 0;
margin-top: 0;
}
.richtext-editor {
margin-top: 8px;
min-height: 90px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-alt);
color: var(--text);
font-size: 15px;
line-height: 1.5;
}
.richtext-editor:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.calendar-user-list { list-style: none; margin: 12px 0 0; padding: 0; }
.calendar-user-list > li { margin-top: 14px; }
.calendar-user-list > li:first-child { margin-top: 0; }