v1.2.7: Phase 0 — CSS foundation + icons + snackbar

style.css: +93 lines — sidebar, view, tabs, toolbar, field (label on top), skeleton, snackbar, combobox classes. Font scale 13/14/16. icons.js (NEW): 10 inline-SVG Lucide icons (play, edit, trash, check, x, chevronDown, search, plus, rotateCw, cloud). stroke=currentColor. snackbar.js (NEW): showSnackbar(msg, type). bottom-right, 4s/8s auto-hide, stacking max 4, accessibility role=status aria-live=polite. index.html: include icons.js before utils.js
2026-07-31 12:52:02 +04:00
parent cc60f9401a
commit 78b5063259
5 changed files with 141 additions and 1 deletions
@@ -0,0 +1,16 @@
+// icons.js — 10 inline-SVG иконок (Lucide, MIT)
+// stroke="currentColor" — цвет берётся из CSS
+// Размер: 20x20, stroke-width: 2
+
+const ICONS = {
+    play: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>',
+    edit: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
+    trash: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
+    check: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
+    xIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
+    chevronDown: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>',
+    search: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
+    plus: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',
+    rotateCw: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>',
+    cloud: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>',
+};
@@ -0,0 +1,30 @@
+// snackbar.js — лёгкие уведомления (без зависимостей)
+// showSnackbar(msg, type='info') — type: info, success, error
+
+function showSnackbar(msg, type) {
+    type = type || 'info';
+    let container = document.getElementById('snackbar-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'snackbar-container';
+        container.className = 'snackbar-container';
+        container.setAttribute('role', 'status');
+        container.setAttribute('aria-live', 'polite');
+        document.body.appendChild(container);
+    }
+    const el = document.createElement('div');
+    el.className = 'snackbar ' + type;
+    el.textContent = msg;
+    el.onclick = function() { el.remove(); };
+    container.appendChild(el);
+
+    // Limit stacking
+    const all = container.querySelectorAll('.snackbar');
+    if (all.length > 4) all[0].remove();
+
+    // Auto-hide: info/success 4s, error 8s
+    const delay = (type === 'error') ? 8000 : 4000;
+    setTimeout(function() {
+        if (el.parentNode) el.remove();
+    }, delay);
+}
@@ -150,3 +150,96 @@ tr:hover td {
    color: #fff;
    border-color: var(--destructive);
 }
+
+/* === Phase 0: Redesign Foundation === */
+
+/* ── Sidebar ── */
+.sidebar {
+    position: fixed; top: 0; left: 0; bottom: 0;
+    width: 192px; background: var(--background);
+    border-right: 1px solid var(--brand-gray);
+    display: flex; flex-direction: column; z-index: 100;
+    transition: width .2s;
+}
+.sidebar.collapsed { width: 56px; }
+.sidebar-top {
+    height: 80px; border-top: 4px solid var(--brand-primary);
+    display: flex; align-items: center; padding: 0 16px;
+}
+.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
+.sidebar-item {
+    display: flex; align-items: center; gap: 12px;
+    padding: 10px 16px; font-size: 14px; color: var(--foreground);
+    cursor: pointer; transition: background .15s;
+    border: none; background: none; width: 100%; text-align: left;
+}
+.sidebar-item:hover { background: var(--brand-grey-light); }
+.sidebar-item.active { background: #dbeafe; font-weight: 600; }
+.sidebar-item svg { width: 20px; height: 20px; flex-shrink: 0; }
+.sidebar-bottom { padding: 8px 0; border-top: 1px solid var(--brand-gray); }
+
+/* ── Views ── */
+.view { margin-left: 192px; padding: 16px 20px; min-height: 100vh; }
+.view.hidden { display: none; }
+.view-header { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
+
+/* ── Tabs ── */
+.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--brand-gray); margin-bottom: 12px; }
+.tab {
+    padding: 8px 16px; font-size: 14px; color: var(--muted);
+    cursor: pointer; border: none; background: none;
+    border-bottom: 2px solid transparent; margin-bottom: -2px;
+    transition: color .15s, border-color .15s;
+}
+.tab:hover { color: var(--foreground); }
+.tab.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); font-weight: 600; }
+
+/* ── Toolbar ── */
+.toolbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--brand-gray); border-bottom: 1px solid var(--brand-gray); margin: 8px 0; }
+
+/* ── Field (label on top) ── */
+.field { margin-bottom: 10px; }
+.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; color: var(--foreground); }
+.field label.required::after { content: " *"; color: var(--destructive); }
+.field input, .field select, .field textarea {
+    width: 100%; padding: 8px 10px; font-size: 14px;
+    border: 1px solid var(--brand-gray); border-radius: var(--radius-sm);
+    background: var(--background);
+}
+.field input:focus, .field select:focus {
+    outline: none; border-color: var(--brand-primary);
+    box-shadow: 0 0 0 2px rgba(37,99,235,.15);
+}
+
+/* ── Skeleton ── */
+.skeleton {
+    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+    background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite;
+    border-radius: 4px;
+}
+@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+.skeleton-line { height: 14px; margin-bottom: 8px; }
+.skeleton-line:last-child { width: 60%; }
+
+/* ── Snackbar ── */
+.snackbar-container { position: fixed; bottom: 16px; right: 16px; z-index: 10001; display: flex; flex-direction: column; gap: 8px; }
+.snackbar {
+    padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px;
+    color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2);
+    animation: snackbar-in .3s ease; max-width: 360px;
+}
+.snackbar.info { background: var(--brand-primary); }
+.snackbar.success { background: var(--green); }
+.snackbar.error { background: var(--destructive); }
+@keyframes snackbar-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+/* ── Combobox ── */
+.combobox { position: relative; }
+.combobox-input { width: 100%; padding: 6px 10px; font-size: 13px; border: 1px solid var(--brand-gray); border-radius: var(--radius-sm); }
+.combobox-input:focus { outline: none; border-color: var(--brand-primary); }
+.combobox-list { position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: var(--background); border: 1px solid var(--brand-gray); border-radius: 0 0 var(--radius-sm) var(--radius-sm); z-index: 10; }
+.combobox-item { padding: 6px 10px; font-size: 13px; cursor: pointer; }
+.combobox-item:hover { background: var(--brand-grey-light); }
+
+/* ── Body for sidebar ── */
+body.has-sidebar { padding-left: 0; }