arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

feat(19-03): add view toggle button to TablosDashboard

Browse source 
- Add plain <button class="view-toggle-btn"> with inline SVG list icon and onclick JS
- data-view="grid" static attribute added to #tablos-list container
- .view-toggle-btn CSS block added to app.css (Section 20c)
- Tailwind CSS rebuilt to include view-toggle-btn class
- templ generate + go build exit 0
This commit is contained in:
Arthur Belleville 2026-05-17 16:33:02 +02:00
parent 4a0b42052d
commit 3deb4f9595
No known key found for this signature in database
3 changed files with 55 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
backend/internal/web/ui/app.css
View file

@ -889,6 +889,30 @@
display: flex;
}
/* ============================================================
Section 20c — View toggle button
============================================================ */
.view-toggle-btn {
align-items: center;
background: transparent;
border: 1px solid var(--color-border-subtle);
border-radius: 0.5rem;
color: var(--color-text-secondary);
cursor: pointer;
display: inline-flex;
height: 2rem;
justify-content: center;
padding: 0;
transition: background-color 0.15s ease, color 0.15s ease;
width: 2rem;
}
.view-toggle-btn:hover {
background: var(--color-surface-neutral-hover);
color: var(--color-text-primary);
}
/* ============================================================
Section 21 — Tab nav (tablo detail tab bar)
============================================================ */

2
backend/static/tailwind.css
View file

File diff suppressed because one or more lines are too long

43
backend/templates/tablos.templ
View file

@ -16,21 +16,38 @@ templ TablosDashboard(user *auth.User, csrfToken string, activePath string, tabl
<section class="overview-section">
<div class="overview-section-heading">
<h3>Your Tablos</h3>
@ui.Button(ui.ButtonProps{
Label: "New tablo",
Variant: ui.ButtonVariantDefault,
Tone: ui.ButtonToneSolid,
Size: ui.SizeMD,
Type: "button",
Attrs: templ.Attributes{
"hx-get": "/tablos/new",
"hx-target": "#create-form-slot",
"hx-swap": "innerHTML",
},
})
<div class="flex items-center gap-2">
<button
type="button"
class="view-toggle-btn"
onclick="var el=document.getElementById('tablos-list');el.dataset.view=el.dataset.view==='list'?'grid':'list'"
aria-label="Toggle list view"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<line x1="8" x2="21" y1="6" y2="6"></line>
<line x1="8" x2="21" y1="12" y2="12"></line>
<line x1="8" x2="21" y1="18" y2="18"></line>
<line x1="3" x2="3.01" y1="6" y2="6"></line>
<line x1="3" x2="3.01" y1="12" y2="12"></line>
<line x1="3" x2="3.01" y1="18" y2="18"></line>
</svg>
</button>
@ui.Button(ui.ButtonProps{
Label: "New tablo",
Variant: ui.ButtonVariantDefault,
Tone: ui.ButtonToneSolid,
Size: ui.SizeMD,
Type: "button",
Attrs: templ.Attributes{
"hx-get": "/tablos/new",
"hx-target": "#create-form-slot",
"hx-swap": "innerHTML",
},
})
</div>
</div>
<div id="create-form-slot"></div>
<div id="tablos-list" class="project-grid">
<div id="tablos-list" class="project-grid" data-view="grid">
if len(cards) == 0 {
@TablosEmptyState()
} else {