feat: layout mobile, abas múltiplas e categorias em árvore
- Responsivo ≤760px: sidebar vira gaveta com backdrop, painel de versões em tela cheia, toolbar/menu rolam sem rótulos, alvos de toque, dvh + safe-area, fonte do editor ≥16px (anti-zoom iOS) - Abas: várias notas abertas com estado sujo por aba, ✕ com confirmação, clique do meio, Alt+W / Alt+←/→ / Alt+1..9; abas e rascunhos sobrevivem à sessão via localStorage - Categorias: modelo vira árvore (categories.json) com notas em múltiplas categorias; explorador no sidebar com expandir/renomear/mover/excluir (sem ciclos, GC de vínculos) e seletor multi-marca no editor; filtro por pasta recursivo por padrão; migração automática do campo único legado - API: POST/PUT/DELETE /api/categories; notas aceitam categories: [ids] - Testes: store (árvore, ciclo, migração, GC) e api (CRUD de categorias)
This commit is contained in:
lgcosta committed
1 parent
9bc5de4c56
commit
7e89207b70
10 files changed
+1737
-489
No files matched your search
+216
-16
@@ -62,7 +62,7 @@ body {
|
||||
.muted { color: var(--muted); font-size: 12px; }
|
||||
code { font-family: var(--mono); font-size: 0.92em; }
|
||||
|
||||
#app { display: flex; flex-direction: column; height: 100vh; }
|
||||
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
|
||||
|
||||
/* ------------------------------------------------------------------ menus */
|
||||
#menubar {
|
||||
@@ -209,7 +209,7 @@ body.sidebar-off #sidebar { display: none; }
|
||||
color: var(--muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
#sidebar input[type="search"], #sidebar select {
|
||||
#sidebar input[type="search"] {
|
||||
width: 100%;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
@@ -270,16 +270,7 @@ body.sidebar-off #sidebar { display: none; }
|
||||
background: var(--panel-2);
|
||||
color: var(--fg);
|
||||
}
|
||||
#note-title:focus, .meta-cat:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
.meta-cat {
|
||||
flex: 0 0 220px;
|
||||
font-size: 13px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 3px;
|
||||
padding: 4px 8px;
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
}
|
||||
#note-title:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
|
||||
#editor-host { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }
|
||||
|
||||
@@ -545,10 +536,212 @@ body.no-gutter #gutter { display: none; }
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
/* responsivo simples -----------------------------------------------------*/
|
||||
@media (max-width: 940px) {
|
||||
#sidebar { position: absolute; left: 0; top: 68px; bottom: 26px; z-index: 30; box-shadow: 4px 0 14px rgba(0,0,0,.12); }
|
||||
#versions-panel { position: absolute; right: 0; top: 68px; bottom: 26px; z-index: 30; box-shadow: -4px 0 14px rgba(0,0,0,.12); }
|
||||
/* ------------------------------------------------------------- abas */
|
||||
#tabbar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: var(--panel-2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex: none;
|
||||
min-height: 32px;
|
||||
}
|
||||
#tabs { display: flex; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
|
||||
#tabs::-webkit-scrollbar { display: none; }
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: 0;
|
||||
border-right: 1px solid var(--border-soft);
|
||||
background: var(--panel-2);
|
||||
font: inherit;
|
||||
font-size: 12.5px;
|
||||
color: var(--muted);
|
||||
padding: 6px 8px 6px 12px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
max-width: 240px;
|
||||
}
|
||||
.tab.active {
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
font-weight: 600;
|
||||
box-shadow: inset 0 2px 0 var(--accent);
|
||||
}
|
||||
.tab.dirty .tab-label::after { content: ' ●'; color: var(--warn); }
|
||||
.tab-label { overflow: hidden; text-overflow: ellipsis; }
|
||||
.tab-close {
|
||||
flex: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.tab-close:hover { background: var(--danger); color: #fff; }
|
||||
.tab-new { margin: 3px 4px; }
|
||||
|
||||
/* ------------------------------------------------- árvore de categorias */
|
||||
#cat-tree { max-height: 240px; overflow-y: auto; }
|
||||
.tree-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: var(--fg);
|
||||
}
|
||||
.tree-row:hover { background: #e9e6e2; }
|
||||
.tree-row.active { background: #cfe2fa; box-shadow: inset 3px 0 0 var(--accent); }
|
||||
.tree-caret {
|
||||
border: 0;
|
||||
background: none;
|
||||
width: 14px;
|
||||
padding: 0;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
}
|
||||
.tree-icon { flex: none; }
|
||||
.tree-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.tree-count {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 8px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.tree-menu {
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
visibility: hidden;
|
||||
}
|
||||
.tree-row:hover .tree-menu, .tree-row.active .tree-menu { visibility: visible; }
|
||||
.tree-menu:hover { background: #dcd7d2; color: var(--fg); }
|
||||
|
||||
/* ------------------------------------------------- popover de categorias */
|
||||
#note-meta { position: relative; }
|
||||
#btn-cats {
|
||||
flex: none;
|
||||
max-width: 240px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cat-picker {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 8px;
|
||||
z-index: 45;
|
||||
width: min(300px, 90vw);
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0 0 5px 5px;
|
||||
box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
|
||||
padding: 6px;
|
||||
}
|
||||
.picker-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.picker-row:hover { background: var(--panel-2); }
|
||||
.picker-empty { padding: 8px; font-size: 12px; }
|
||||
|
||||
/* ------------------------------------------------- menu de contexto */
|
||||
.ctx-menu {
|
||||
position: fixed;
|
||||
z-index: 70;
|
||||
min-width: 180px;
|
||||
margin: 0;
|
||||
padding: 4px 0;
|
||||
list-style: none;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
|
||||
}
|
||||
.ctx-menu li { padding: 7px 14px; font-size: 13px; cursor: pointer; }
|
||||
.ctx-menu li:hover { background: var(--accent); color: #fff; }
|
||||
.ctx-danger { color: var(--danger); }
|
||||
.ctx-danger:hover { color: #fff; }
|
||||
|
||||
/* ------------------------------------------------- backdrop */
|
||||
#backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .4); }
|
||||
|
||||
.btn, .menu-btn, .tab, .tag-chip, .tree-row, .seg { touch-action: manipulation; }
|
||||
|
||||
/* ------------------------------------------------- responsivo (celular) */
|
||||
@media (max-width: 760px) {
|
||||
#menubar { padding: 0 2px; overflow-x: auto; scrollbar-width: none; }
|
||||
#menubar::-webkit-scrollbar { display: none; }
|
||||
.menu-btn { padding: 0 9px; }
|
||||
.menu-dropdown li { padding: 9px 14px; }
|
||||
|
||||
#toolbar { overflow-x: auto; scrollbar-width: none; padding: 0 6px; }
|
||||
#toolbar::-webkit-scrollbar { display: none; }
|
||||
.tb-label, .tb-caption { display: none; }
|
||||
.btn-icon { padding: 6px 9px; min-height: 32px; }
|
||||
.segmented .seg { padding: 7px 12px; }
|
||||
|
||||
/* sidebar vira gaveta */
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: min(320px, 86vw);
|
||||
z-index: 60;
|
||||
transform: translateX(-105%);
|
||||
transition: transform .18s ease;
|
||||
box-shadow: 6px 0 20px rgba(0, 0, 0, .25);
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
body.sidebar-off #sidebar { display: flex; } /* F9 é atalho de desktop */
|
||||
body.sidebar-open #sidebar { transform: none; }
|
||||
|
||||
/* painel de versões ocupa a tela toda */
|
||||
#versions-panel {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: auto;
|
||||
z-index: 60;
|
||||
box-shadow: none;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
|
||||
#statusbar {
|
||||
height: 32px;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
font-size: 11.5px;
|
||||
}
|
||||
#st-stats, #st-format { display: none; }
|
||||
.st-item { padding: 0 8px; }
|
||||
|
||||
#note-meta { flex-wrap: wrap; }
|
||||
#note-title { flex: 1 1 100%; }
|
||||
|
||||
.tab { padding: 9px 10px; }
|
||||
|
||||
/* 16px evita zoom automático do iOS ao focar o textarea */
|
||||
#editor, #hl, .ln { font-size: max(var(--editor-size), 16px); }
|
||||
}
|
||||
@media (min-width: 761px) {
|
||||
body.sidebar-open #sidebar { display: flex; } /* classe mobile não vaza no desktop */
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------- temas / esquemas */
|
||||
@@ -702,3 +895,10 @@ html[data-theme="solar-escuro"] #revisions-list li:hover { background: #0c4450;
|
||||
color: var(--fg);
|
||||
}
|
||||
.dialog .num { width: 74px; flex: none; }
|
||||
|
||||
/* diálogos no celular (depois das regras base de .dialog) */
|
||||
@media (max-width: 760px) {
|
||||
.dialog .row { font-size: 15px; }
|
||||
.dialog input { font-size: 16px; }
|
||||
.tree-menu { visibility: visible; } /* toque não tem hover */
|
||||
}
|
||||
+23
-7
@@ -2,7 +2,7 @@
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="color-scheme" content="light">
|
||||
<title>Notas — editor estilo Mousepad</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect width='16' height='16' rx='2' fill='%233584e4'/><path d='M3 4h10M3 7h10M3 10h7' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>">
|
||||
@@ -78,6 +78,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu de contexto das categorias (Nova subpasta / Renomear / Excluir) -->
|
||||
<ul id="ctx-menu" class="ctx-menu hidden">
|
||||
<li data-ctx="sub">Nova subpasta…</li>
|
||||
<li data-ctx="rename">Renomear…</li>
|
||||
<li data-ctx="delete" class="ctx-danger">Excluir…</li>
|
||||
</ul>
|
||||
|
||||
<div id="app">
|
||||
|
||||
<!-- Barra de menus (estilo Mousepad) -->
|
||||
@@ -93,6 +100,7 @@
|
||||
<li data-action="save">Salvar<span class="accel">Ctrl+S</span></li>
|
||||
<li data-action="export">Baixar arquivo (.txt/.md/.html)…</li>
|
||||
<li class="menu-sep"></li>
|
||||
<li data-action="close-tab">Fechar aba<span class="accel">Alt+W</span></li>
|
||||
<li data-action="delete-note">Excluir esta nota…</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -177,11 +185,11 @@
|
||||
<input id="search-input" type="search" placeholder="Buscar notas…" autocomplete="off">
|
||||
</div>
|
||||
<div class="side-section">
|
||||
<label class="side-label" for="category-select">Categoria</label>
|
||||
<select id="category-select">
|
||||
<option value="*">Todas as categorias</option>
|
||||
<option value="">Sem categoria</option>
|
||||
</select>
|
||||
<div class="side-listhead">
|
||||
<span class="side-label">Categorias</span>
|
||||
<button type="button" class="btn btn-small" id="btn-new-cat" title="Nova categoria raiz">+ pasta</button>
|
||||
</div>
|
||||
<div id="cat-tree"></div>
|
||||
</div>
|
||||
<div class="side-section">
|
||||
<span class="side-label">Tags</span>
|
||||
@@ -197,9 +205,15 @@
|
||||
</aside>
|
||||
|
||||
<section id="editor-pane">
|
||||
<!-- Abas de arquivos abertos -->
|
||||
<div id="tabbar" role="tablist">
|
||||
<div id="tabs"></div>
|
||||
<button type="button" class="btn btn-icon tab-new" id="btn-tab-new" title="Nova aba (Ctrl+N)">✚</button>
|
||||
</div>
|
||||
<div id="note-meta">
|
||||
<input id="note-title" type="text" placeholder="Título da nota" maxlength="200" autocomplete="off">
|
||||
<input id="note-category" type="text" placeholder="categoria (opcional)" maxlength="100" autocomplete="off" class="meta-cat">
|
||||
<button type="button" class="btn" id="btn-cats" title="Atribuir categorias">🗀 Sem categoria</button>
|
||||
<div id="cat-picker" class="cat-picker hidden"></div>
|
||||
</div>
|
||||
<div id="editor-host">
|
||||
<div id="editor-wrap">
|
||||
@@ -249,6 +263,8 @@
|
||||
<div id="toast" class="hidden"></div>
|
||||
</div>
|
||||
|
||||
<div id="backdrop" class="hidden"></div>
|
||||
|
||||
<script src="/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+771
-321
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user