diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index f401ec2..1fd1054 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -651,7 +651,7 @@ covered by the `styles.css` manifest. library sync and renaming / deleting a saved prompt; `prompt_material_source.js` reads saved prompts as cards and saves one; `ui_prompt_reference.js` is the reference column a clicked card opens in, between the cards and the boxes (its tags taken one by one or all, ticks - on those the box has; it widens the drawer while open); `ui_prompt_card_popover.js` owns the card preview (hover + on those the box has; it widens the drawer while open, and takes the cards' place where three columns do not fit); `ui_prompt_card_popover.js` owns the card preview (hover corridor, pin, Copy / Add / Rename / Delete); `prompt_card_drag.js` lets a card or a box be dragged out of the drawer onto a canvas prompt box or empty canvas (through `material_drag.js` and `prompt_drop.js`), passing through inside the drawer so the boxes still take it. diff --git a/CHANGELOG.md b/CHANGELOG.md index ad90a9f..4cddfd2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ### 📒 Prompt cards look like notebook pages (提示词卡片换成笔记本样式) - In Prompt Studio each card is a page with a bound spine in its colour (green positive, red negative), its title, a Positive / Negative label and its first words as small tags instead of a cut-off line of text. The card open as the reference wears a ribbon; Common and My prompts are index tabs with how many cards they hold. Dark and light themes alike. +- **The reference no longer squeezes a narrow window**: where three columns do not fit (a side-panel browser window, a narrow drawer), the reference takes the card list's place and **‹ Cards** brings the list back, so the reference and the prompt you edit each get half the width. ### 🗂️ Tidier model folders (模型文件夹更清爽) - **Settings → Models → Files that come with models**: what a scan found (`.info`), your names and notes (`.anomalous.json`) and Civitai's picture kept aside can go **in a hidden `.amb` folder** inside each model folder instead of beside every model, leaving only the model and its cover there. Covers stay beside the model, where ComfyUI and other plugins look. Choosing a place says how many files will move, then moves them (only moves; switch back any time); a file that cannot move still works where it is. diff --git a/web/modules/locales.js b/web/modules/locales.js index d57f661..1666b98 100644 --- a/web/modules/locales.js +++ b/web/modules/locales.js @@ -1815,6 +1815,7 @@ export const i18n = { promptStudioAllThere: "这些词已经都有了", promptStudioRefTitle: "参考:{name}", promptStudioRefClose: "关掉参考", + promptStudioRefBack: "‹ 卡片", promptStudioRefAddAll: "全部加入", promptStudioRefAddAllHint: "把这张卡片的词一次全加进去(已经有的不重复加)", promptStudioRefNote: "点一个词,只把它加进正在改的提示词;打勾的是已经有的。", @@ -4535,6 +4536,7 @@ export const i18n = { promptStudioAllThere: "Those tags are there already", promptStudioRefTitle: "Reference: {name}", promptStudioRefClose: "Close the reference", + promptStudioRefBack: "‹ Cards", promptStudioRefAddAll: "Add all", promptStudioRefAddAllHint: "Add every tag of this card at once (those there already are not added twice)", promptStudioRefNote: "Click a tag to add just that one to the prompt being edited; ticked ones are there already.", diff --git a/web/modules/ui_prompt_reference.js b/web/modules/ui_prompt_reference.js index 0518d55..4fd737f 100644 --- a/web/modules/ui_prompt_reference.js +++ b/web/modules/ui_prompt_reference.js @@ -3,7 +3,8 @@ * boxes, as its tags (with their meanings when a language is picked), so single tags can be * taken from it: a click puts that tag into the box the card goes into (ui_prompt_target.js), * "Add all" the whole card. Tags the box has already are ticked. Read only: the card itself is - * never changed here. In the drawer it widens the drawer by the column while it is open. + * never changed here. In the drawer it widens the drawer by the column while it is open; where + * three columns do not fit it takes the cards' place, and "‹ Cards" goes back (the stylesheet). */ import { translate as t } from './locales.js'; @@ -57,7 +58,8 @@ export function createPromptReference(grid, { drawer, scope, prefs, target, onSh const addAll = button('anomalous-ps-mini', t('promptStudioRefAddAll'), t('promptStudioRefAddAllHint'), () => { if (card) void target.addCard(card).then(render); }); - head.append(label, addAll); + const back = button('anomalous-ps-mini anomalous-ps-ref-back', t('promptStudioRefBack'), t('promptStudioRefClose'), () => close()); + head.append(back, label, addAll); const role = el('span', 'anomalous-ps-role'); const note = el('p', 'anomalous-ps-target-note', t('promptStudioRefNote')); const tagsEl = el('div', 'anomalous-ps-tags'); diff --git a/web/styles/21-prompt-studio.css b/web/styles/21-prompt-studio.css index 9777e7e..062dbc5 100644 --- a/web/styles/21-prompt-studio.css +++ b/web/styles/21-prompt-studio.css @@ -806,7 +806,33 @@ display: none; } -/* A narrow drawer stacks the cards over the prompt boxes. */ +/* No room for three columns: the reference takes the cards' place, its "‹ Cards" goes back. */ +.anomalous-ps-ref-back { + display: none; +} + +@container anomalous-ps (max-width: 980px) { + .anomalous-ps-grid.has-ref .anomalous-ps-deck { + display: none; + } + + .anomalous-ps-grid.has-ref, + .anomalous-prompt-page .anomalous-ps-grid.has-ref, + .anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-ps-grid.has-ref { + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + } + + .anomalous-ps-ref-back { + display: inline-flex; + flex-shrink: 0; + } + + .anomalous-ps-ref .anomalous-ps-target-x { + display: none; + } +} + +/* A narrow drawer stacks the cards (or the reference) over the prompt boxes. */ @container anomalous-ps (max-width: 540px) { .anomalous-ps-grid, .anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-ps-grid { @@ -817,7 +843,7 @@ .anomalous-ps-grid.has-ref, .anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-ps-grid.has-ref { grid-template-columns: minmax(0, 1fr); - grid-template-rows: minmax(100px, 26%) minmax(100px, 30%) minmax(0, 1fr); + grid-template-rows: minmax(120px, 40%) minmax(0, 1fr); } .anomalous-ps-deck,