fix: menu contextuel — tous les tags visibles + sélection couleur en grille
FlowDeck CI / test (push) Failing after 4s
FlowDeck CI / docker (push) Has been skipped

- loadWorkspaceTags() utilise /api/settings/tags/all (TOUS les tags, pas
  seulement ceux déjà utilisés via JOIN page_tags). Avant: 2/6 tags visibles.
- Nouvelle grille couleurs 'New tag': grid 7 colonnes × 2 rangées,
  carrés responsifs via padding-bottom:100%. + bouton Add à droite.
- .ctx-menu: max-height:80vh + overflow-y:auto → plus de clipping
  en bas de fenêtre. z-index 600 (au-dessus du settings panel).
- .color-swatch-ctx: carrés parfaits dans la grid, hover scale 1.15
This commit is contained in:
2026-07-12 15:53:57 -04:00
parent 1f31e33b69
commit 130a8a09ad
+20 -15
View File
@@ -269,7 +269,7 @@
.view-menu-item.active{background:rgba(35,131,226,.12);color:var(--accent);font-weight:500;}
/* Context menu */
.ctx-menu{position:fixed;z-index:300;background:#1E1E1E;border:1px solid var(--border-strong);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.7);min-width:180px;overflow:hidden;padding:4px 0;}
.ctx-menu{position:fixed;background:#1E1E1E;border:1px solid var(--border-strong);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);min-width:200px;z-index:600;padding:4px 0;max-height:80vh;overflow-y:auto;}
.ctx-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:13px;color:var(--text);cursor:pointer;transition:background 100ms;}
.ctx-item:hover{background:var(--bg-hover);}
.ctx-item.ctx-danger{color:var(--danger);}
@@ -280,8 +280,8 @@
.ctx-tag-add:hover{color:var(--accent);}
.ctx-section{padding:5px 14px;font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;}
.ctx-tag-color{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.color-swatch-ctx{width:18px;height:18px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:all 100ms;}
.color-swatch-ctx:hover{transform:scale(1.15);}
.color-swatch-ctx{width:100%;padding-bottom:100%;border-radius:5px;cursor:pointer;border:2px solid transparent;transition:all 100ms;box-sizing:border-box;position:relative;}
.color-swatch-ctx:hover{transform:scale(1.15);z-index:1;}
.color-swatch-ctx.selected{border-color:var(--text);box-shadow:0 0 0 2px var(--accent);}
.ctx-add-tag-item:hover{background:rgba(35,131,226,.08);}
.ctx-has-sub{justify-content:space-between;}
@@ -804,17 +804,22 @@
<span style="flex:1;">➕ New tag</span>
<span x-text="ctxTagAdding ? '▾' : '▸'"></span>
</div>
<div x-show="ctxTagAdding" style="display:flex;align-items:center;gap:4px;padding:4px 14px;">
<template x-for="c in ctxTagColors" :key="c">
<div class="color-swatch-ctx" :class="{ selected: ctxNewTagColor === c }"
:style="{background: c}" @click.stop="ctxNewTagColor=c"></div>
</template>
<input class="tag-input" x-ref="ctxTagInput"
@keydown.enter="ctxAddNewTag($event.target.value); $event.target.value=''"
@keydown.escape="ctxTagAdding=false"
@click.stop
placeholder="tag name..."
style="margin-left:4px;">
<div x-show="ctxTagAdding" style="padding:6px 10px;background:var(--bg-tertiary);border-radius:6px;margin:2px 6px;">
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;">
<template x-for="c in ctxTagColors" :key="c">
<div class="color-swatch-ctx" :class="{ selected: ctxNewTagColor === c }"
:style="{background: c}" @click.stop="ctxNewTagColor=c"></div>
</template>
</div>
<div style="display:flex;gap:4px;">
<input class="tag-input" x-ref="ctxTagInput"
@keydown.enter="ctxAddNewTag($event.target.value); $event.target.value=''"
@keydown.escape="ctxTagAdding=false"
@click.stop
placeholder="Tag name..."
style="flex:1;">
<button class="btn btn-primary" @click.stop="ctxAddNewTag($refs.ctxTagInput.value); $refs.ctxTagInput.value=''" style="padding:2px 10px;font-size:12px;">Add</button>
</div>
</div>
<div class="ctx-sep"></div>
<div class="ctx-item ctx-danger" @click="ctxMenuDelete()">🗑 Delete</div>
@@ -2238,7 +2243,7 @@ document.addEventListener('alpine:init', function() {
// ── Tag management ──
async loadWorkspaceTags() {
try {
var r = await fetch('/api/local-workspace/tags');
var r = await fetch('/api/settings/tags/all');
var d = await r.json();
this.workspaceTags = d.tags || [];
} catch(e) { this.workspaceTags = []; }