/* ═══════════════════════════════════════════════════════════════════════════ TiM → Qdrant · Help centar, editor članka: polja, combobox, lista stavki, prevlačenje redosleda, WYSIWYG polje. Deo je podeljenog design sistema (static/css/). Odvojeno od help.css kad je taj prešao budžet od 600 linija; seče po ekranu, ne po komponenti — help.css nosi LISTU članaka (tabela, sortiranje, paginacija), ovaj fajl EDITOR jednog članka. `.drag-handle` ostaje u help.css jer je zajednička. REDOSLED UČITAVANJA JE KASKADA i stoji u -u index.html — ne menjaj ga: vendor/phosphor → tokens → primitives → layout → components → feedback → help → help-editor → views → responsive Pravila i uputstvo za dodavanje novih ekrana: docs/DESIGN_SYSTEM.md ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Editor help članka ────────────────────────────────────────────────── Traka polja članka pa dve kolone: uska lista stavki levo, tekst izabrane stavke desno. `.card-duo` je 50/50 i ovde ne odgovara — leva kolona je spisak naslova, a desna nosi ceo tekst. */ .editor-crumb { display: inline-flex; align-items: center; gap: var(--s-2); } .crumb-link { padding: 0; background: none; border: none; color: var(--accent); font: inherit; cursor: pointer; } .crumb-link:hover { text-decoration: underline; } .crumb-sep { color: var(--faint); } .crumb-current { color: var(--muted); } /* Traka polja je flex, ne grid: „Redni br." i „ID" traže 70px, a jednake grid kolone bi im ostavile ceo track pa razmak do sledećeg polja. `nowrap` drži svih šest polja u jednom redu — višak širine ide naslovu i roditelju (jedini sa `flex-grow`), a manjak se skida sa njih preko `flex-shrink`. `align-items: end` drži kontrole u istoj liniji i kad se uska labela prelomi u dva reda. */ .editor-fields { display: flex; flex-wrap: nowrap; align-items: end; gap: var(--s-4); margin-bottom: var(--s-5); } .editor-field { flex: 1 1 150px; min-width: 0; } .editor-field-wide { flex: 2 1 220px; } /* Status nosi kratke natpise iz šifarnika („U pripremi", „Završeno") — ne raste sa širinom ekrana, prostor je potrebniji naslovu. */ .editor-field-status { flex: 0 1 130px; } .editor-field-narrow { flex: 0 0 70px; } /* Strelice spinnera pojedu trećinu polja od 70px — brojka je bitnija, a tastaturne strelice i dalje rade. */ .editor-field-narrow input[type="number"] { appearance: textfield; } .editor-field-narrow input[type="number"]::-webkit-inner-spin-button, .editor-field-narrow input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; } /* Combobox (npr. nadređeni članak u editoru): input nosi filter, a ponuda se slaže u padajuću listu ispod njega. `.combo` treba referentni okvir listi. */ .combo { position: relative; } .combo-list { position: absolute; inset-inline: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none; max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 8px 24px rgb(0 0 0 / 0.35); z-index: 20; } .combo-option { padding: 6px var(--s-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; border-bottom: 1px solid var(--line); } .combo-option:last-child { border-bottom: none; } .combo-option:hover, .combo-option:focus-visible { background: var(--surface-2); } .combo-option[aria-selected="true"] { background: var(--accent-soft); font-weight: 600; } .combo-note { padding: 6px var(--s-3); font-size: 12px; color: var(--muted); } .editor-field input, .editor-field select { margin: 0; } .mono-input { font-family: var(--mono); color: var(--muted); } /* Qdrant veza — jedino polje koje ne ide u ERP, ali stoji uz ostala jer je i dalje podatak o članku. Dugme je bez natpisa; `.select-wrap` nosi flex. Bez `flex-grow`: select ne treba da bude širi od imena kolekcije, duže ime se skraćuje trotačkom. */ .editor-field-sync { flex: 0 1 240px; } .editor-field-sync .select-wrap { align-items: stretch; } /* Fiksnih 40px ne prati visinu selecta (padding + font), pa dugme prati red. */ .editor-field-sync .icon-btn { height: auto; } /* Sat nosi stanje poslednje sinhronizacije — tekst u oblačiću (`.tip`), a boja je jedini deo koji se vidi bez hovera. */ .sync-clock { display: grid; place-items: center; flex-shrink: 0; width: 30px; color: var(--faint); cursor: help; } .sync-clock.is-ok { color: var(--ok); } .sync-clock.is-error { color: var(--err); } .editor-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s-5); align-items: start; } /* Leva kolona (stavke jednog članka) nosi spisak naslova — malo šira od generičke 280px, naslovi stavki su po pravilu duži od naslova opcija. */ .stavka-pane { min-width: 0; } .stavka-list { margin: 0 0 var(--s-3); padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .stavka-item { display: flex; align-items: center; gap: var(--s-1); padding: 6px var(--s-2); border-bottom: 1px solid var(--line); /* `position` je uslov da vučeni red (`z-index`) izađe iznad suseda. */ position: relative; transition: background 0.12s var(--ease); } .stavka-item:last-child { border-bottom: none; } .stavka-item:hover { background: var(--surface-2); } .stavka-item.is-selected { background: var(--accent-soft); } /* Mirno stanje: nosi tranziciju po kojoj susedi klize dok se red vuče preko njih (sortable.js pomera samo `transform`, DOM ostaje netaknut do drop-a). Isti prelaz koristi i FLIP animacija dugmadi gore/dole. */ .stavka-item.is-idle { transition: background 0.12s var(--ease), transform 0.25s var(--ease); } /* Red koji se prevlači — mora da se razlikuje i kad je već izabran, inače izabrana stavka pod kursorom izgleda kao da se ništa ne dešava. Bez tranzicije: prati kursor 1:1. */ .stavka-item.is-draggable { z-index: 5; background: var(--accent-soft); outline: 1px solid var(--accent); outline-offset: -1px; opacity: 0.75; cursor: grabbing; } .stavka-item.is-draggable .drag-handle { cursor: grabbing; } /* Dok se prevlači, tekst ne sme da se selektuje pod kursorom. Sloj se podiže samo za to vreme — trajno `will-change` bi držalo teksturu po redu. */ .stavka-list.is-sorting { user-select: none; } .stavka-list.is-sorting .stavka-item { will-change: transform; } @media (prefers-reduced-motion: reduce) { .stavka-item.is-idle { transition: none; } } /* Trag nesačuvanog redosleda — pomeranje ide lokalno, upis tek na „Sačuvaj". */ .stavka-order-hint { display: flex; align-items: center; gap: var(--s-1); margin: calc(-1 * var(--s-2)) 0 var(--s-3); color: var(--warn); font-size: 11.5px; } .stavka-order-hint .ico { font-size: 14px; } .stavka-pick { flex: 1; min-width: 0; padding: 2px 0; background: none; border: none; color: inherit; font: inherit; font-size: 12.5px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .stavka-item.is-selected .stavka-pick { font-weight: 600; } /* Stavka sa nesačuvanim tekstom — tačkica, bez pomeranja rasporeda. */ .stavka-item.is-dirty .stavka-pick::after { content: " •"; color: var(--warn); } .stavka-badge { flex-shrink: 0; padding: 1px 6px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--faint); font-size: 10.5px; } .stavka-empty { padding: var(--s-4); color: var(--muted); font-size: 12.5px; text-align: center; } .stavka-editor { min-width: 0; } /* WYSIWYG polje: toolbar i contenteditable dele isti okvir, pa deluju kao jedna kontrola. Fokus se crta na omotaču, ne na samom polju. */ .rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 5px 6px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-md) var(--r-md) 0 0; } .rte-btn { display: grid; place-items: center; width: 30px; height: 30px; background: transparent; border: none; border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; transition: background 0.16s var(--ease), color 0.16s var(--ease); } .rte-btn:hover { background: var(--surface-3); color: var(--ink); } .rte-btn.is-active { background: var(--accent-soft); color: var(--accent); } .rte-btn .ico { font-size: 17px; } .rte-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line-strong); } /* Traka za tabelu stoji između toolbar-a i polja i vidi se samo kad je kursor u tabeli (`rteTable.js`). Deo je istog okvira, pa nema svoje zaobljenje. */ .rte-tabletools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 6px; background: var(--accent-soft); border: 1px solid var(--line-strong); border-top: none; } .rte-tabletools-label { margin-left: 2px; color: var(--ink-2); font-size: 12px; font-weight: 600; } .rte-tabletools .ghost-btn { background: var(--surface); } .rte-body { min-height: 260px; max-height: 60vh; overflow-y: auto; padding: var(--s-4); background: var(--input-bg); border: 1px solid var(--line-strong); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); color: var(--ink); font-size: 14px; line-height: 1.6; outline: none; } .rte-body:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } /* Sadržaj članka u polju. Klasa je `rte-content`, a ne `rte-body`, jer isto polje vozi dva mesta: editor stavke (`.rte-body`) i karticu u sanducetu predloga (`.op-edit-body`, `diff.css`). Oba nose i `rte-content`, pa tekst, tabela i slika izgledaju isto gde god se uređivali — bez duplog seta pravila koji bi se razišao pri prvoj izmeni. Okvir, visina i fokus ostaju uz pojedinačno polje. */ .rte-content > *:first-child { margin-top: 0; } .rte-content p, .rte-content div, .rte-content blockquote, .rte-content pre, .rte-content ul, .rte-content ol, .rte-content table { margin: 0 0 var(--s-3); } .rte-content h2 { margin: var(--s-4) 0 var(--s-2); font-size: 17px; font-weight: 600; } .rte-content h3 { margin: var(--s-4) 0 var(--s-2); font-size: 15px; font-weight: 600; } .rte-content ul, .rte-content ol { padding-left: var(--s-6); } .rte-content li { margin-bottom: var(--s-1); } /* `
` je ovde **uvučen red**, ne citat: to je ono što browser napravi od dugmeta „Uvuci red", a ugnežđavanjem se uvlači dublje. Zato izgleda kao uvlačenje, bez crte i sive boje — ERP-ovoj stranici ionako ide samo tag, pa bi ukras u polju obećavao izgled koji objavljeni članak nema. */ .rte-content blockquote { margin-left: var(--s-6); padding-left: 0; border-left: none; color: inherit; } .rte-content pre { padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-sm); font-family: var(--mono); font-size: 12.5px; overflow-x: auto; } .rte-content code { padding: 1px 5px; background: var(--surface-2); border-radius: var(--r-xs); font-family: var(--mono); font-size: 12.5px; } .rte-content a { color: var(--accent); } /* Olovka nad linkom (`js/help/rteLink.js`). Stoji u `document.body` sa `position: fixed`, jer sve unutar contenteditable polja ide u ERP pri čuvanju. `z-index` je ispod modala (100), iznad lepljivih delova editora. */ .rte-link-pill { position: fixed; z-index: 50; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; transform: translateY(-50%); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--sh-md); color: var(--ink-2); cursor: pointer; transition: background 0.16s var(--ease), color 0.16s var(--ease); } /* Podloga na hover mora ostati NEPROZIRNA. `--accent-soft` je rgba sa 12–14% alfe: na traci leži na neprozirnoj kartici pa se ne primeti, ali dugme stoji nad samim tekstom — tekst je probijao kroz njega i ikonica je delovala kao da je otišla iza teksta. Zato tinta ide kao `background-image` preko neprozirnog `background-color`, a ne umesto njega. */ .rte-link-pill:hover { background-color: var(--surface); background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); border-color: var(--accent); color: var(--accent); } .rte-link-pill .ico { font-size: 15px; } .rte-content img { max-width: 100%; height: auto; border-radius: var(--r-sm); } .rte-content table { width: 100%; border-collapse: collapse; font-size: 13px; } /* `height` je na ćeliji zapravo minimum: prazna ćelija bez njega ima visinu samo svog padding-a, pa je kursor viši od reda u koji kuca. `min-width` je iz istog razloga — u usku kolonu se ne može ni kliknuti. */ .rte-content th, .rte-content td { height: 32px; min-width: 56px; padding: 6px 10px; border: 1px solid var(--line-strong); text-align: left; vertical-align: top; } .rte-content th { background: var(--surface-2); font-weight: 600; } /* Ćelija pod kursorom. U mreži praznih ćelija se inače ne vidi u koju se kuca; `outline` je unutrašnji da ne pomera susede kao što bi debeo `border`. */ .rte-content th.is-caret, .rte-content td.is-caret { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); } .stavka-actions { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-3); }