From 8260bd022dd9a1b165daa8a90452df7cc2afc872 Mon Sep 17 00:00:00 2001 From: Will Miao Date: Thu, 3 Sep 2026 18:16:00 +0800 Subject: [PATCH] feat(ui): improve discoverability of hidden interactions - Expand onboarding tour from 8 to 11 steps: marquee drag-select, drag card to sidebar folder, and the three context menus (card / bulk / global); enrich bulk-mode step with range-select and exit tips - Add Replay Tutorial button to help modal Getting Started tab - Add Shortcuts cheat-sheet tab to help modal, opened directly via the '?' key when not typing - Fix trigger-word tooltip to mention double-click to edit - Keep checkpoint/embedding send tooltips truthful (no replace mode) Sync new i18n keys to all locales (placeholders pending translation) --- locales/de.json | 56 +++++++++- locales/en.json | 60 ++++++++++- locales/es.json | 56 +++++++++- locales/fr.json | 56 +++++++++- locales/he.json | 56 +++++++++- locales/ja.json | 56 +++++++++- locales/ko.json | 56 +++++++++- locales/ru.json | 56 +++++++++- locales/zh-CN.json | 56 +++++++++- locales/zh-TW.json | 56 +++++++++- static/css/components/modal/help-modal.css | 85 ++++++++++++++- static/js/components/shared/ModelCard.js | 2 + static/js/components/shared/TriggerWords.js | 8 +- static/js/managers/HelpManager.js | 78 +++++++++++--- static/js/managers/OnboardingManager.js | 24 ++++- templates/components/modals/help_modal.html | 109 ++++++++++++++++++++ 16 files changed, 816 insertions(+), 54 deletions(-) diff --git a/locales/de.json b/locales/de.json index 7e8f9177..64907f87 100644 --- a/locales/de.json +++ b/locales/de.json @@ -117,6 +117,18 @@ "contextMenu": { "title": "Kontextmenü", "content": "Rechtsklick auf eine Modellkarte öffnet ein Kontextmenü mit weiteren Aktionen." + }, + "marqueeSelect": { + "title": "[TODO: Translate] Drag to Select", + "content": "[TODO: Translate] Hold the left mouse button on an empty area of the grid and drag to draw a marquee that selects multiple cards at once." + }, + "dragToSidebar": { + "title": "[TODO: Translate] Organize by Dragging", + "content": "[TODO: Translate] Drag a model card onto a folder in the sidebar to move the file there. This also works with multiple selected cards in bulk mode." + }, + "contextMenus": { + "title": "[TODO: Translate] More Context Menus", + "content": "[TODO: Translate] In bulk mode, right-click a selected card for bulk actions. Right-click an empty area of the page for global actions like update checks and managing excluded models." } } }, @@ -1629,7 +1641,7 @@ "addPlaceholder": "Tippen zum Hinzufügen oder klicken Sie auf Vorschläge unten", "editWord": "Trigger Word bearbeiten", "editPlaceholder": "Trigger Word bearbeiten", - "copyWord": "Trigger Word kopieren", + "copyOrEditWord": "[TODO: Translate] Click to copy, double-click to edit", "deleteWord": "Trigger Word löschen", "suggestions": { "noSuggestions": "Keine Vorschläge verfügbar", @@ -1954,10 +1966,48 @@ "tabs": { "gettingStarted": "Erste Schritte", "updateVlogs": "Update-Vlogs", - "documentation": "Dokumentation" + "documentation": "Dokumentation", + "shortcuts": "[TODO: Translate] Shortcuts" }, "gettingStarted": { - "title": "Erste Schritte mit LoRA Manager" + "title": "Erste Schritte mit LoRA Manager", + "replayTutorial": "[TODO: Translate] Replay Tutorial" + }, + "shortcuts": { + "title": "[TODO: Translate] Keyboard & Mouse Shortcuts", + "groups": { + "general": "[TODO: Translate] General", + "selection": "[TODO: Translate] Selection & Bulk Mode", + "navigation": "[TODO: Translate] Navigation", + "modelModal": "[TODO: Translate] Model / Recipe Modal", + "mediaViewer": "[TODO: Translate] Media Viewer / Showcase" + }, + "keys": { + "click": "[TODO: Translate] Click", + "drag": "[TODO: Translate] Drag", + "rightClick": "[TODO: Translate] Right-click", + "letter": "[TODO: Translate] Letter", + "swipe": "[TODO: Translate] Swipe" + }, + "entries": { + "focusSearch": "[TODO: Translate] Focus search", + "closeModal": "[TODO: Translate] Close modal / panel", + "openShortcuts": "[TODO: Translate] Open this shortcuts panel", + "toggleBulkMode": "[TODO: Translate] Toggle bulk mode", + "selectAll": "[TODO: Translate] Select all visible models", + "rangeSelect": "[TODO: Translate] Range select", + "marqueeSelect": "[TODO: Translate] Marquee-select cards (on empty grid area)", + "exitBulkMode": "[TODO: Translate] Exit bulk mode", + "bulkActions": "[TODO: Translate] On selected card: bulk actions menu", + "globalActions": "[TODO: Translate] On empty page area: global actions menu (update check, manage excluded models)", + "scrollPages": "[TODO: Translate] Scroll pages", + "jumpAlphabet": "[TODO: Translate] Jump alphabet bar", + "prevNext": "[TODO: Translate] Previous / next model", + "deleteEntry": "[TODO: Translate] Delete", + "cycleMedia": "[TODO: Translate] Cycle media ([ / ] in showcase gallery)", + "swipeTouch": "[TODO: Translate] Cycle media on touch devices", + "closeViewer": "[TODO: Translate] Close viewer" + } }, "updateVlogs": { "title": "Neueste Updates", diff --git a/locales/en.json b/locales/en.json index f65caa5d..d775ad37 100644 --- a/locales/en.json +++ b/locales/en.json @@ -96,7 +96,7 @@ }, "bulk": { "title": "Bulk Operations", - "content": "Enter bulk mode by clicking this button or pressing B. Select multiple models and perform batch operations. Use Ctrl+A to select all visible models." + "content": "Enter bulk mode by clicking this button or pressing B to select multiple models and perform batch operations.
• Ctrl/Cmd+A select all visible models, Shift+Click select a range.
• Esc or clicking an empty area exits bulk mode." }, "searchOptions": { "title": "Search Options", @@ -116,7 +116,19 @@ }, "contextMenu": { "title": "Context Menu", - "content": "Right-click any model card for a context menu with additional actions." + "content": "Right-click any model card for a context menu with card actions like moving, deleting, or editing metadata." + }, + "marqueeSelect": { + "title": "Drag to Select", + "content": "Hold the left mouse button on an empty area of the grid and drag to draw a marquee that selects multiple cards at once." + }, + "dragToSidebar": { + "title": "Organize by Dragging", + "content": "Drag a model card onto a folder in the sidebar to move the file there. This also works with multiple selected cards in bulk mode." + }, + "contextMenus": { + "title": "More Context Menus", + "content": "In bulk mode, right-click a selected card for bulk actions. Right-click an empty area of the page for global actions like update checks and managing excluded models." } } }, @@ -1629,7 +1641,7 @@ "addPlaceholder": "Type to add or click suggestions below", "editWord": "Edit trigger word", "editPlaceholder": "Edit trigger word", - "copyWord": "Copy trigger word", + "copyOrEditWord": "Click to copy, double-click to edit", "deleteWord": "Delete trigger word", "suggestions": { "noSuggestions": "No suggestions available", @@ -1954,10 +1966,48 @@ "tabs": { "gettingStarted": "Getting Started", "updateVlogs": "Update Vlogs", - "documentation": "Documentation" + "documentation": "Documentation", + "shortcuts": "Shortcuts" }, "gettingStarted": { - "title": "Getting Started with LoRA Manager" + "title": "Getting Started with LoRA Manager", + "replayTutorial": "Replay Tutorial" + }, + "shortcuts": { + "title": "Keyboard & Mouse Shortcuts", + "groups": { + "general": "General", + "selection": "Selection & Bulk Mode", + "navigation": "Navigation", + "modelModal": "Model / Recipe Modal", + "mediaViewer": "Media Viewer / Showcase" + }, + "keys": { + "click": "Click", + "drag": "Drag", + "rightClick": "Right-click", + "letter": "Letter", + "swipe": "Swipe" + }, + "entries": { + "focusSearch": "Focus search", + "closeModal": "Close modal / panel", + "openShortcuts": "Open this shortcuts panel", + "toggleBulkMode": "Toggle bulk mode", + "selectAll": "Select all visible models", + "rangeSelect": "Range select", + "marqueeSelect": "Marquee-select cards (on empty grid area)", + "exitBulkMode": "Exit bulk mode", + "bulkActions": "On selected card: bulk actions menu", + "globalActions": "On empty page area: global actions menu (update check, manage excluded models)", + "scrollPages": "Scroll pages", + "jumpAlphabet": "Jump alphabet bar", + "prevNext": "Previous / next model", + "deleteEntry": "Delete", + "cycleMedia": "Cycle media ([ / ] in showcase gallery)", + "swipeTouch": "Cycle media on touch devices", + "closeViewer": "Close viewer" + } }, "updateVlogs": { "title": "Latest Updates", diff --git a/locales/es.json b/locales/es.json index c929abde..0582e714 100644 --- a/locales/es.json +++ b/locales/es.json @@ -117,6 +117,18 @@ "contextMenu": { "title": "Menú contextual", "content": "Clic derecho en cualquier tarjeta de modelo para ver un menú contextual con acciones adicionales." + }, + "marqueeSelect": { + "title": "[TODO: Translate] Drag to Select", + "content": "[TODO: Translate] Hold the left mouse button on an empty area of the grid and drag to draw a marquee that selects multiple cards at once." + }, + "dragToSidebar": { + "title": "[TODO: Translate] Organize by Dragging", + "content": "[TODO: Translate] Drag a model card onto a folder in the sidebar to move the file there. This also works with multiple selected cards in bulk mode." + }, + "contextMenus": { + "title": "[TODO: Translate] More Context Menus", + "content": "[TODO: Translate] In bulk mode, right-click a selected card for bulk actions. Right-click an empty area of the page for global actions like update checks and managing excluded models." } } }, @@ -1629,7 +1641,7 @@ "addPlaceholder": "Escribe para añadir o haz clic en sugerencias de abajo", "editWord": "Editar palabra de activación", "editPlaceholder": "Editar palabra de activación", - "copyWord": "Copiar palabra de activación", + "copyOrEditWord": "[TODO: Translate] Click to copy, double-click to edit", "deleteWord": "Eliminar palabra de activación", "suggestions": { "noSuggestions": "No hay sugerencias disponibles", @@ -1954,10 +1966,48 @@ "tabs": { "gettingStarted": "Comenzando", "updateVlogs": "Vlogs de actualización", - "documentation": "Documentación" + "documentation": "Documentación", + "shortcuts": "[TODO: Translate] Shortcuts" }, "gettingStarted": { - "title": "Comenzando con el gestor de LoRA" + "title": "Comenzando con el gestor de LoRA", + "replayTutorial": "[TODO: Translate] Replay Tutorial" + }, + "shortcuts": { + "title": "[TODO: Translate] Keyboard & Mouse Shortcuts", + "groups": { + "general": "[TODO: Translate] General", + "selection": "[TODO: Translate] Selection & Bulk Mode", + "navigation": "[TODO: Translate] Navigation", + "modelModal": "[TODO: Translate] Model / Recipe Modal", + "mediaViewer": "[TODO: Translate] Media Viewer / Showcase" + }, + "keys": { + "click": "[TODO: Translate] Click", + "drag": "[TODO: Translate] Drag", + "rightClick": "[TODO: Translate] Right-click", + "letter": "[TODO: Translate] Letter", + "swipe": "[TODO: Translate] Swipe" + }, + "entries": { + "focusSearch": "[TODO: Translate] Focus search", + "closeModal": "[TODO: Translate] Close modal / panel", + "openShortcuts": "[TODO: Translate] Open this shortcuts panel", + "toggleBulkMode": "[TODO: Translate] Toggle bulk mode", + "selectAll": "[TODO: Translate] Select all visible models", + "rangeSelect": "[TODO: Translate] Range select", + "marqueeSelect": "[TODO: Translate] Marquee-select cards (on empty grid area)", + "exitBulkMode": "[TODO: Translate] Exit bulk mode", + "bulkActions": "[TODO: Translate] On selected card: bulk actions menu", + "globalActions": "[TODO: Translate] On empty page area: global actions menu (update check, manage excluded models)", + "scrollPages": "[TODO: Translate] Scroll pages", + "jumpAlphabet": "[TODO: Translate] Jump alphabet bar", + "prevNext": "[TODO: Translate] Previous / next model", + "deleteEntry": "[TODO: Translate] Delete", + "cycleMedia": "[TODO: Translate] Cycle media ([ / ] in showcase gallery)", + "swipeTouch": "[TODO: Translate] Cycle media on touch devices", + "closeViewer": "[TODO: Translate] Close viewer" + } }, "updateVlogs": { "title": "Últimas actualizaciones", diff --git a/locales/fr.json b/locales/fr.json index 7fff6e3d..5fb4f173 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -117,6 +117,18 @@ "contextMenu": { "title": "Menu contextuel", "content": "Clic droit sur une carte de modèle pour accéder à un menu contextuel avec des actions supplémentaires." + }, + "marqueeSelect": { + "title": "[TODO: Translate] Drag to Select", + "content": "[TODO: Translate] Hold the left mouse button on an empty area of the grid and drag to draw a marquee that selects multiple cards at once." + }, + "dragToSidebar": { + "title": "[TODO: Translate] Organize by Dragging", + "content": "[TODO: Translate] Drag a model card onto a folder in the sidebar to move the file there. This also works with multiple selected cards in bulk mode." + }, + "contextMenus": { + "title": "[TODO: Translate] More Context Menus", + "content": "[TODO: Translate] In bulk mode, right-click a selected card for bulk actions. Right-click an empty area of the page for global actions like update checks and managing excluded models." } } }, @@ -1629,7 +1641,7 @@ "addPlaceholder": "Tapez pour ajouter ou cliquez sur les suggestions ci-dessous", "editWord": "Modifier le mot-clé", "editPlaceholder": "Modifier le mot-clé", - "copyWord": "Copier le mot-clé", + "copyOrEditWord": "[TODO: Translate] Click to copy, double-click to edit", "deleteWord": "Supprimer le mot-clé", "suggestions": { "noSuggestions": "Aucune suggestion disponible", @@ -1954,10 +1966,48 @@ "tabs": { "gettingStarted": "Commencer", "updateVlogs": "Vlogs de mise à jour", - "documentation": "Documentation" + "documentation": "Documentation", + "shortcuts": "[TODO: Translate] Shortcuts" }, "gettingStarted": { - "title": "Premiers pas avec le Gestionnaire LoRA" + "title": "Premiers pas avec le Gestionnaire LoRA", + "replayTutorial": "[TODO: Translate] Replay Tutorial" + }, + "shortcuts": { + "title": "[TODO: Translate] Keyboard & Mouse Shortcuts", + "groups": { + "general": "[TODO: Translate] General", + "selection": "[TODO: Translate] Selection & Bulk Mode", + "navigation": "[TODO: Translate] Navigation", + "modelModal": "[TODO: Translate] Model / Recipe Modal", + "mediaViewer": "[TODO: Translate] Media Viewer / Showcase" + }, + "keys": { + "click": "[TODO: Translate] Click", + "drag": "[TODO: Translate] Drag", + "rightClick": "[TODO: Translate] Right-click", + "letter": "[TODO: Translate] Letter", + "swipe": "[TODO: Translate] Swipe" + }, + "entries": { + "focusSearch": "[TODO: Translate] Focus search", + "closeModal": "[TODO: Translate] Close modal / panel", + "openShortcuts": "[TODO: Translate] Open this shortcuts panel", + "toggleBulkMode": "[TODO: Translate] Toggle bulk mode", + "selectAll": "[TODO: Translate] Select all visible models", + "rangeSelect": "[TODO: Translate] Range select", + "marqueeSelect": "[TODO: Translate] Marquee-select cards (on empty grid area)", + "exitBulkMode": "[TODO: Translate] Exit bulk mode", + "bulkActions": "[TODO: Translate] On selected card: bulk actions menu", + "globalActions": "[TODO: Translate] On empty page area: global actions menu (update check, manage excluded models)", + "scrollPages": "[TODO: Translate] Scroll pages", + "jumpAlphabet": "[TODO: Translate] Jump alphabet bar", + "prevNext": "[TODO: Translate] Previous / next model", + "deleteEntry": "[TODO: Translate] Delete", + "cycleMedia": "[TODO: Translate] Cycle media ([ / ] in showcase gallery)", + "swipeTouch": "[TODO: Translate] Cycle media on touch devices", + "closeViewer": "[TODO: Translate] Close viewer" + } }, "updateVlogs": { "title": "Dernières mises à jour", diff --git a/locales/he.json b/locales/he.json index 91d65087..f1c73328 100644 --- a/locales/he.json +++ b/locales/he.json @@ -117,6 +117,18 @@ "contextMenu": { "title": "תפריט הקשר", "content": "לחיצה ימנית על כל כרטיס מודל לתפריט הקשר עם פעולות נוספות." + }, + "marqueeSelect": { + "title": "[TODO: Translate] Drag to Select", + "content": "[TODO: Translate] Hold the left mouse button on an empty area of the grid and drag to draw a marquee that selects multiple cards at once." + }, + "dragToSidebar": { + "title": "[TODO: Translate] Organize by Dragging", + "content": "[TODO: Translate] Drag a model card onto a folder in the sidebar to move the file there. This also works with multiple selected cards in bulk mode." + }, + "contextMenus": { + "title": "[TODO: Translate] More Context Menus", + "content": "[TODO: Translate] In bulk mode, right-click a selected card for bulk actions. Right-click an empty area of the page for global actions like update checks and managing excluded models." } } }, @@ -1629,7 +1641,7 @@ "addPlaceholder": "הקלד להוספה או לחץ על הצעות למטה", "editWord": "עריכת מילת טריגר", "editPlaceholder": "עריכת מילת טריגר", - "copyWord": "העתק מילת טריגר", + "copyOrEditWord": "[TODO: Translate] Click to copy, double-click to edit", "deleteWord": "מחק מילת טריגר", "suggestions": { "noSuggestions": "אין הצעות זמינות", @@ -1954,10 +1966,48 @@ "tabs": { "gettingStarted": "תחילת עבודה", "updateVlogs": "בלוגי וידאו של עדכונים", - "documentation": "תיעוד" + "documentation": "תיעוד", + "shortcuts": "[TODO: Translate] Shortcuts" }, "gettingStarted": { - "title": "תחילת עבודה עם מנהל LoRA" + "title": "תחילת עבודה עם מנהל LoRA", + "replayTutorial": "[TODO: Translate] Replay Tutorial" + }, + "shortcuts": { + "title": "[TODO: Translate] Keyboard & Mouse Shortcuts", + "groups": { + "general": "[TODO: Translate] General", + "selection": "[TODO: Translate] Selection & Bulk Mode", + "navigation": "[TODO: Translate] Navigation", + "modelModal": "[TODO: Translate] Model / Recipe Modal", + "mediaViewer": "[TODO: Translate] Media Viewer / Showcase" + }, + "keys": { + "click": "[TODO: Translate] Click", + "drag": "[TODO: Translate] Drag", + "rightClick": "[TODO: Translate] Right-click", + "letter": "[TODO: Translate] Letter", + "swipe": "[TODO: Translate] Swipe" + }, + "entries": { + "focusSearch": "[TODO: Translate] Focus search", + "closeModal": "[TODO: Translate] Close modal / panel", + "openShortcuts": "[TODO: Translate] Open this shortcuts panel", + "toggleBulkMode": "[TODO: Translate] Toggle bulk mode", + "selectAll": "[TODO: Translate] Select all visible models", + "rangeSelect": "[TODO: Translate] Range select", + "marqueeSelect": "[TODO: Translate] Marquee-select cards (on empty grid area)", + "exitBulkMode": "[TODO: Translate] Exit bulk mode", + "bulkActions": "[TODO: Translate] On selected card: bulk actions menu", + "globalActions": "[TODO: Translate] On empty page area: global actions menu (update check, manage excluded models)", + "scrollPages": "[TODO: Translate] Scroll pages", + "jumpAlphabet": "[TODO: Translate] Jump alphabet bar", + "prevNext": "[TODO: Translate] Previous / next model", + "deleteEntry": "[TODO: Translate] Delete", + "cycleMedia": "[TODO: Translate] Cycle media ([ / ] in showcase gallery)", + "swipeTouch": "[TODO: Translate] Cycle media on touch devices", + "closeViewer": "[TODO: Translate] Close viewer" + } }, "updateVlogs": { "title": "עדכונים אחרונים", diff --git a/locales/ja.json b/locales/ja.json index cd7469ad..9ef133fc 100644 --- a/locales/ja.json +++ b/locales/ja.json @@ -117,6 +117,18 @@ "contextMenu": { "title": "コンテキストメニュー", "content": "モデルカードを右クリックすると追加の操作ができるコンテキストメニューが表示されます。" + }, + "marqueeSelect": { + "title": "[TODO: Translate] Drag to Select", + "content": "[TODO: Translate] Hold the left mouse button on an empty area of the grid and drag to draw a marquee that selects multiple cards at once." + }, + "dragToSidebar": { + "title": "[TODO: Translate] Organize by Dragging", + "content": "[TODO: Translate] Drag a model card onto a folder in the sidebar to move the file there. This also works with multiple selected cards in bulk mode." + }, + "contextMenus": { + "title": "[TODO: Translate] More Context Menus", + "content": "[TODO: Translate] In bulk mode, right-click a selected card for bulk actions. Right-click an empty area of the page for global actions like update checks and managing excluded models." } } }, @@ -1629,7 +1641,7 @@ "addPlaceholder": "入力して追加するか、下の提案をクリック", "editWord": "トリガーワードを編集", "editPlaceholder": "トリガーワードを編集", - "copyWord": "トリガーワードをコピー", + "copyOrEditWord": "[TODO: Translate] Click to copy, double-click to edit", "deleteWord": "トリガーワードを削除", "suggestions": { "noSuggestions": "提案はありません", @@ -1954,10 +1966,48 @@ "tabs": { "gettingStarted": "はじめに", "updateVlogs": "更新Vlog", - "documentation": "ドキュメント" + "documentation": "ドキュメント", + "shortcuts": "[TODO: Translate] Shortcuts" }, "gettingStarted": { - "title": "LoRA Managerを始める" + "title": "LoRA Managerを始める", + "replayTutorial": "[TODO: Translate] Replay Tutorial" + }, + "shortcuts": { + "title": "[TODO: Translate] Keyboard & Mouse Shortcuts", + "groups": { + "general": "[TODO: Translate] General", + "selection": "[TODO: Translate] Selection & Bulk Mode", + "navigation": "[TODO: Translate] Navigation", + "modelModal": "[TODO: Translate] Model / Recipe Modal", + "mediaViewer": "[TODO: Translate] Media Viewer / Showcase" + }, + "keys": { + "click": "[TODO: Translate] Click", + "drag": "[TODO: Translate] Drag", + "rightClick": "[TODO: Translate] Right-click", + "letter": "[TODO: Translate] Letter", + "swipe": "[TODO: Translate] Swipe" + }, + "entries": { + "focusSearch": "[TODO: Translate] Focus search", + "closeModal": "[TODO: Translate] Close modal / panel", + "openShortcuts": "[TODO: Translate] Open this shortcuts panel", + "toggleBulkMode": "[TODO: Translate] Toggle bulk mode", + "selectAll": "[TODO: Translate] Select all visible models", + "rangeSelect": "[TODO: Translate] Range select", + "marqueeSelect": "[TODO: Translate] Marquee-select cards (on empty grid area)", + "exitBulkMode": "[TODO: Translate] Exit bulk mode", + "bulkActions": "[TODO: Translate] On selected card: bulk actions menu", + "globalActions": "[TODO: Translate] On empty page area: global actions menu (update check, manage excluded models)", + "scrollPages": "[TODO: Translate] Scroll pages", + "jumpAlphabet": "[TODO: Translate] Jump alphabet bar", + "prevNext": "[TODO: Translate] Previous / next model", + "deleteEntry": "[TODO: Translate] Delete", + "cycleMedia": "[TODO: Translate] Cycle media ([ / ] in showcase gallery)", + "swipeTouch": "[TODO: Translate] Cycle media on touch devices", + "closeViewer": "[TODO: Translate] Close viewer" + } }, "updateVlogs": { "title": "最新の更新", diff --git a/locales/ko.json b/locales/ko.json index 3f618f9c..e77d279f 100644 --- a/locales/ko.json +++ b/locales/ko.json @@ -117,6 +117,18 @@ "contextMenu": { "title": "컨텍스트 메뉴", "content": "오른쪽 클릭으로 모델 카드의 추가 작업 메뉴를 사용할 수 있습니다." + }, + "marqueeSelect": { + "title": "[TODO: Translate] Drag to Select", + "content": "[TODO: Translate] Hold the left mouse button on an empty area of the grid and drag to draw a marquee that selects multiple cards at once." + }, + "dragToSidebar": { + "title": "[TODO: Translate] Organize by Dragging", + "content": "[TODO: Translate] Drag a model card onto a folder in the sidebar to move the file there. This also works with multiple selected cards in bulk mode." + }, + "contextMenus": { + "title": "[TODO: Translate] More Context Menus", + "content": "[TODO: Translate] In bulk mode, right-click a selected card for bulk actions. Right-click an empty area of the page for global actions like update checks and managing excluded models." } } }, @@ -1629,7 +1641,7 @@ "addPlaceholder": "입력하거나 아래 제안을 클릭하세요", "editWord": "트리거 단어 편집", "editPlaceholder": "트리거 단어 편집", - "copyWord": "트리거 단어 복사", + "copyOrEditWord": "[TODO: Translate] Click to copy, double-click to edit", "deleteWord": "트리거 단어 삭제", "suggestions": { "noSuggestions": "사용 가능한 제안이 없습니다", @@ -1954,10 +1966,48 @@ "tabs": { "gettingStarted": "시작하기", "updateVlogs": "업데이트 영상", - "documentation": "문서" + "documentation": "문서", + "shortcuts": "[TODO: Translate] Shortcuts" }, "gettingStarted": { - "title": "LoRA Manager 시작하기" + "title": "LoRA Manager 시작하기", + "replayTutorial": "[TODO: Translate] Replay Tutorial" + }, + "shortcuts": { + "title": "[TODO: Translate] Keyboard & Mouse Shortcuts", + "groups": { + "general": "[TODO: Translate] General", + "selection": "[TODO: Translate] Selection & Bulk Mode", + "navigation": "[TODO: Translate] Navigation", + "modelModal": "[TODO: Translate] Model / Recipe Modal", + "mediaViewer": "[TODO: Translate] Media Viewer / Showcase" + }, + "keys": { + "click": "[TODO: Translate] Click", + "drag": "[TODO: Translate] Drag", + "rightClick": "[TODO: Translate] Right-click", + "letter": "[TODO: Translate] Letter", + "swipe": "[TODO: Translate] Swipe" + }, + "entries": { + "focusSearch": "[TODO: Translate] Focus search", + "closeModal": "[TODO: Translate] Close modal / panel", + "openShortcuts": "[TODO: Translate] Open this shortcuts panel", + "toggleBulkMode": "[TODO: Translate] Toggle bulk mode", + "selectAll": "[TODO: Translate] Select all visible models", + "rangeSelect": "[TODO: Translate] Range select", + "marqueeSelect": "[TODO: Translate] Marquee-select cards (on empty grid area)", + "exitBulkMode": "[TODO: Translate] Exit bulk mode", + "bulkActions": "[TODO: Translate] On selected card: bulk actions menu", + "globalActions": "[TODO: Translate] On empty page area: global actions menu (update check, manage excluded models)", + "scrollPages": "[TODO: Translate] Scroll pages", + "jumpAlphabet": "[TODO: Translate] Jump alphabet bar", + "prevNext": "[TODO: Translate] Previous / next model", + "deleteEntry": "[TODO: Translate] Delete", + "cycleMedia": "[TODO: Translate] Cycle media ([ / ] in showcase gallery)", + "swipeTouch": "[TODO: Translate] Cycle media on touch devices", + "closeViewer": "[TODO: Translate] Close viewer" + } }, "updateVlogs": { "title": "최신 업데이트", diff --git a/locales/ru.json b/locales/ru.json index 616a5efa..dff99a88 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -117,6 +117,18 @@ "contextMenu": { "title": "Контекстное меню", "content": "Правый клик по карточке модели откроет контекстное меню с дополнительными действиями." + }, + "marqueeSelect": { + "title": "[TODO: Translate] Drag to Select", + "content": "[TODO: Translate] Hold the left mouse button on an empty area of the grid and drag to draw a marquee that selects multiple cards at once." + }, + "dragToSidebar": { + "title": "[TODO: Translate] Organize by Dragging", + "content": "[TODO: Translate] Drag a model card onto a folder in the sidebar to move the file there. This also works with multiple selected cards in bulk mode." + }, + "contextMenus": { + "title": "[TODO: Translate] More Context Menus", + "content": "[TODO: Translate] In bulk mode, right-click a selected card for bulk actions. Right-click an empty area of the page for global actions like update checks and managing excluded models." } } }, @@ -1629,7 +1641,7 @@ "addPlaceholder": "Введите для добавления или нажмите на предложения ниже", "editWord": "Редактировать триггерное слово", "editPlaceholder": "Редактировать триггерное слово", - "copyWord": "Копировать триггерное слово", + "copyOrEditWord": "[TODO: Translate] Click to copy, double-click to edit", "deleteWord": "Удалить триггерное слово", "suggestions": { "noSuggestions": "Предложения недоступны", @@ -1954,10 +1966,48 @@ "tabs": { "gettingStarted": "Начало работы", "updateVlogs": "Видео обновлений", - "documentation": "Документация" + "documentation": "Документация", + "shortcuts": "[TODO: Translate] Shortcuts" }, "gettingStarted": { - "title": "Начало работы с LoRA Manager" + "title": "Начало работы с LoRA Manager", + "replayTutorial": "[TODO: Translate] Replay Tutorial" + }, + "shortcuts": { + "title": "[TODO: Translate] Keyboard & Mouse Shortcuts", + "groups": { + "general": "[TODO: Translate] General", + "selection": "[TODO: Translate] Selection & Bulk Mode", + "navigation": "[TODO: Translate] Navigation", + "modelModal": "[TODO: Translate] Model / Recipe Modal", + "mediaViewer": "[TODO: Translate] Media Viewer / Showcase" + }, + "keys": { + "click": "[TODO: Translate] Click", + "drag": "[TODO: Translate] Drag", + "rightClick": "[TODO: Translate] Right-click", + "letter": "[TODO: Translate] Letter", + "swipe": "[TODO: Translate] Swipe" + }, + "entries": { + "focusSearch": "[TODO: Translate] Focus search", + "closeModal": "[TODO: Translate] Close modal / panel", + "openShortcuts": "[TODO: Translate] Open this shortcuts panel", + "toggleBulkMode": "[TODO: Translate] Toggle bulk mode", + "selectAll": "[TODO: Translate] Select all visible models", + "rangeSelect": "[TODO: Translate] Range select", + "marqueeSelect": "[TODO: Translate] Marquee-select cards (on empty grid area)", + "exitBulkMode": "[TODO: Translate] Exit bulk mode", + "bulkActions": "[TODO: Translate] On selected card: bulk actions menu", + "globalActions": "[TODO: Translate] On empty page area: global actions menu (update check, manage excluded models)", + "scrollPages": "[TODO: Translate] Scroll pages", + "jumpAlphabet": "[TODO: Translate] Jump alphabet bar", + "prevNext": "[TODO: Translate] Previous / next model", + "deleteEntry": "[TODO: Translate] Delete", + "cycleMedia": "[TODO: Translate] Cycle media ([ / ] in showcase gallery)", + "swipeTouch": "[TODO: Translate] Cycle media on touch devices", + "closeViewer": "[TODO: Translate] Close viewer" + } }, "updateVlogs": { "title": "Последние обновления", diff --git a/locales/zh-CN.json b/locales/zh-CN.json index 38f60346..d6419e9d 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -117,6 +117,18 @@ "contextMenu": { "title": "右键菜单", "content": "右键点击任意模型卡片可打开更多操作菜单。" + }, + "marqueeSelect": { + "title": "[TODO: Translate] Drag to Select", + "content": "[TODO: Translate] Hold the left mouse button on an empty area of the grid and drag to draw a marquee that selects multiple cards at once." + }, + "dragToSidebar": { + "title": "[TODO: Translate] Organize by Dragging", + "content": "[TODO: Translate] Drag a model card onto a folder in the sidebar to move the file there. This also works with multiple selected cards in bulk mode." + }, + "contextMenus": { + "title": "[TODO: Translate] More Context Menus", + "content": "[TODO: Translate] In bulk mode, right-click a selected card for bulk actions. Right-click an empty area of the page for global actions like update checks and managing excluded models." } } }, @@ -1629,7 +1641,7 @@ "addPlaceholder": "输入或点击下方建议添加", "editWord": "编辑触发词", "editPlaceholder": "编辑触发词", - "copyWord": "复制触发词", + "copyOrEditWord": "[TODO: Translate] Click to copy, double-click to edit", "deleteWord": "删除触发词", "suggestions": { "noSuggestions": "暂无建议", @@ -1954,10 +1966,48 @@ "tabs": { "gettingStarted": "新手入门", "updateVlogs": "更新日志", - "documentation": "文档" + "documentation": "文档", + "shortcuts": "[TODO: Translate] Shortcuts" }, "gettingStarted": { - "title": "LoRA 管理器新手入门" + "title": "LoRA 管理器新手入门", + "replayTutorial": "[TODO: Translate] Replay Tutorial" + }, + "shortcuts": { + "title": "[TODO: Translate] Keyboard & Mouse Shortcuts", + "groups": { + "general": "[TODO: Translate] General", + "selection": "[TODO: Translate] Selection & Bulk Mode", + "navigation": "[TODO: Translate] Navigation", + "modelModal": "[TODO: Translate] Model / Recipe Modal", + "mediaViewer": "[TODO: Translate] Media Viewer / Showcase" + }, + "keys": { + "click": "[TODO: Translate] Click", + "drag": "[TODO: Translate] Drag", + "rightClick": "[TODO: Translate] Right-click", + "letter": "[TODO: Translate] Letter", + "swipe": "[TODO: Translate] Swipe" + }, + "entries": { + "focusSearch": "[TODO: Translate] Focus search", + "closeModal": "[TODO: Translate] Close modal / panel", + "openShortcuts": "[TODO: Translate] Open this shortcuts panel", + "toggleBulkMode": "[TODO: Translate] Toggle bulk mode", + "selectAll": "[TODO: Translate] Select all visible models", + "rangeSelect": "[TODO: Translate] Range select", + "marqueeSelect": "[TODO: Translate] Marquee-select cards (on empty grid area)", + "exitBulkMode": "[TODO: Translate] Exit bulk mode", + "bulkActions": "[TODO: Translate] On selected card: bulk actions menu", + "globalActions": "[TODO: Translate] On empty page area: global actions menu (update check, manage excluded models)", + "scrollPages": "[TODO: Translate] Scroll pages", + "jumpAlphabet": "[TODO: Translate] Jump alphabet bar", + "prevNext": "[TODO: Translate] Previous / next model", + "deleteEntry": "[TODO: Translate] Delete", + "cycleMedia": "[TODO: Translate] Cycle media ([ / ] in showcase gallery)", + "swipeTouch": "[TODO: Translate] Cycle media on touch devices", + "closeViewer": "[TODO: Translate] Close viewer" + } }, "updateVlogs": { "title": "最新更新", diff --git a/locales/zh-TW.json b/locales/zh-TW.json index a3b57afc..882744a1 100644 --- a/locales/zh-TW.json +++ b/locales/zh-TW.json @@ -117,6 +117,18 @@ "contextMenu": { "title": "右鍵選單", "content": "右鍵點擊任一模型卡片可開啟更多操作選單。" + }, + "marqueeSelect": { + "title": "[TODO: Translate] Drag to Select", + "content": "[TODO: Translate] Hold the left mouse button on an empty area of the grid and drag to draw a marquee that selects multiple cards at once." + }, + "dragToSidebar": { + "title": "[TODO: Translate] Organize by Dragging", + "content": "[TODO: Translate] Drag a model card onto a folder in the sidebar to move the file there. This also works with multiple selected cards in bulk mode." + }, + "contextMenus": { + "title": "[TODO: Translate] More Context Menus", + "content": "[TODO: Translate] In bulk mode, right-click a selected card for bulk actions. Right-click an empty area of the page for global actions like update checks and managing excluded models." } } }, @@ -1629,7 +1641,7 @@ "addPlaceholder": "輸入或點擊下方建議", "editWord": "編輯觸發詞", "editPlaceholder": "編輯觸發詞", - "copyWord": "複製觸發詞", + "copyOrEditWord": "[TODO: Translate] Click to copy, double-click to edit", "deleteWord": "刪除觸發詞", "suggestions": { "noSuggestions": "無可用建議", @@ -1954,10 +1966,48 @@ "tabs": { "gettingStarted": "快速開始", "updateVlogs": "更新影片", - "documentation": "文件" + "documentation": "文件", + "shortcuts": "[TODO: Translate] Shortcuts" }, "gettingStarted": { - "title": "LoRA 管理器快速開始" + "title": "LoRA 管理器快速開始", + "replayTutorial": "[TODO: Translate] Replay Tutorial" + }, + "shortcuts": { + "title": "[TODO: Translate] Keyboard & Mouse Shortcuts", + "groups": { + "general": "[TODO: Translate] General", + "selection": "[TODO: Translate] Selection & Bulk Mode", + "navigation": "[TODO: Translate] Navigation", + "modelModal": "[TODO: Translate] Model / Recipe Modal", + "mediaViewer": "[TODO: Translate] Media Viewer / Showcase" + }, + "keys": { + "click": "[TODO: Translate] Click", + "drag": "[TODO: Translate] Drag", + "rightClick": "[TODO: Translate] Right-click", + "letter": "[TODO: Translate] Letter", + "swipe": "[TODO: Translate] Swipe" + }, + "entries": { + "focusSearch": "[TODO: Translate] Focus search", + "closeModal": "[TODO: Translate] Close modal / panel", + "openShortcuts": "[TODO: Translate] Open this shortcuts panel", + "toggleBulkMode": "[TODO: Translate] Toggle bulk mode", + "selectAll": "[TODO: Translate] Select all visible models", + "rangeSelect": "[TODO: Translate] Range select", + "marqueeSelect": "[TODO: Translate] Marquee-select cards (on empty grid area)", + "exitBulkMode": "[TODO: Translate] Exit bulk mode", + "bulkActions": "[TODO: Translate] On selected card: bulk actions menu", + "globalActions": "[TODO: Translate] On empty page area: global actions menu (update check, manage excluded models)", + "scrollPages": "[TODO: Translate] Scroll pages", + "jumpAlphabet": "[TODO: Translate] Jump alphabet bar", + "prevNext": "[TODO: Translate] Previous / next model", + "deleteEntry": "[TODO: Translate] Delete", + "cycleMedia": "[TODO: Translate] Cycle media ([ / ] in showcase gallery)", + "swipeTouch": "[TODO: Translate] Cycle media on touch devices", + "closeViewer": "[TODO: Translate] Close viewer" + } }, "updateVlogs": { "title": "最新更新", diff --git a/static/css/components/modal/help-modal.css b/static/css/components/modal/help-modal.css index d66eaea6..40c26f9a 100644 --- a/static/css/components/modal/help-modal.css +++ b/static/css/components/modal/help-modal.css @@ -304,4 +304,87 @@ /* Dark theme adjustments */ [data-theme="dark"] .video-container { background-color: var(--surface-hover); -} \ No newline at end of file +} +/* Replay tutorial button styles */ +.help-actions { + margin-top: var(--space-3); +} + +.replay-tutorial-btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 20px; + border-radius: var(--border-radius-sm); + font-weight: 500; + cursor: pointer; + transition: var(--transition-base); + background-color: var(--lora-accent); + color: white; + border: none; +} + +.replay-tutorial-btn:hover { + background-color: oklch(from var(--lora-accent) l c h / 85%); +} + +/* Shortcuts tab styles */ +.shortcuts-section { + margin-bottom: var(--space-3); +} + +.shortcuts-section h4 { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: var(--space-1); +} + +.shortcuts-list { + list-style-type: none; + padding-left: var(--space-3); +} + +.shortcuts-list li { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: var(--space-1); +} + +.shortcut-keys { + display: inline-flex; + align-items: center; + gap: 2px; + flex-shrink: 0; + min-width: 150px; +} + +.shortcut-sep { + color: var(--text-muted); + font-size: 0.75rem; + margin: 0 1px; +} + +.shortcuts-list kbd { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 4px; + font-family: inherit; + font-size: 0.68rem; + font-weight: 500; + color: var(--text-muted); + /* Subtle tint derived from text color so it adapts to both light & dark themes */ + background: color-mix(in oklch, var(--text-muted) 12%, transparent); + border: 1px solid color-mix(in oklch, var(--text-muted) 25%, transparent); + border-radius: var(--border-radius-xs, 3px); + line-height: 1; +} + +.shortcut-description { + font-size: 0.9em; + opacity: 0.85; +} diff --git a/static/js/components/shared/ModelCard.js b/static/js/components/shared/ModelCard.js index 59d3495a..fd0f9a20 100644 --- a/static/js/components/shared/ModelCard.js +++ b/static/js/components/shared/ModelCard.js @@ -607,9 +607,11 @@ export function createModelCard(model, modelType) { sendTitle = translate('modelCard.actions.sendToWorkflow', {}, 'Send to ComfyUI (Click: Append, Shift+Click: Replace)'); copyTitle = translate('modelCard.actions.copyLoRASyntax', {}, 'Copy LoRA Syntax'); } else if (modelType === MODEL_TYPES.CHECKPOINT) { + // Checkpoint send sets the widget value directly; no append/replace modes. sendTitle = translate('modelCard.actions.sendCheckpointToWorkflow', {}, 'Send to ComfyUI'); copyTitle = translate('modelCard.actions.copyCheckpointName', {}, 'Copy checkpoint name'); } else if (modelType === MODEL_TYPES.EMBEDDING) { + // Embedding send always appends to the prompt; no replace mode. sendTitle = translate('modelCard.actions.sendEmbeddingToWorkflow', {}, 'Send to ComfyUI'); copyTitle = translate('modelCard.actions.copyEmbeddingName', {}, 'Copy embedding name'); } else { diff --git a/static/js/components/shared/TriggerWords.js b/static/js/components/shared/TriggerWords.js index 65accb53..c318ee48 100644 --- a/static/js/components/shared/TriggerWords.js +++ b/static/js/components/shared/TriggerWords.js @@ -227,7 +227,7 @@ export function renderTriggerWords(words, filePath) { const escapedWord = escapeHtml(word); const escapedAttr = escapeAttribute(word); return ` -
+
${escapedWord} @@ -455,7 +455,7 @@ function resetTriggerWordsUIState(section) { // Restore click-to-copy functionality tag.removeEventListener('click', startEditTriggerWord); setupDisplayTriggerWordTag(tag); - tag.title = translate('modals.model.triggerWords.copyWord'); + tag.title = translate('modals.model.triggerWords.copyOrEditWord'); // Show copy icon, hide delete button if (copyIcon) copyIcon.style.display = ''; @@ -503,7 +503,7 @@ function createTriggerWordTag(word, isEditMode = false) { const tag = document.createElement('div'); tag.className = 'trigger-word-tag'; tag.dataset.word = word; - tag.title = translate(isEditMode ? 'modals.model.triggerWords.editWord' : 'modals.model.triggerWords.copyWord'); + tag.title = translate(isEditMode ? 'modals.model.triggerWords.editWord' : 'modals.model.triggerWords.copyOrEditWord'); const escapedWord = escapeHtml(word); tag.innerHTML = ` @@ -537,7 +537,7 @@ function setupDisplayTriggerWordTag(tag) { tag.addEventListener('click', handleDisplayTriggerWordClick); tag.addEventListener('dblclick', handleDisplayTriggerWordDoubleClick); - tag.title = translate('modals.model.triggerWords.copyWord'); + tag.title = translate('modals.model.triggerWords.copyOrEditWord'); } /** diff --git a/static/js/managers/HelpManager.js b/static/js/managers/HelpManager.js index 807b3432..bd33dadc 100644 --- a/static/js/managers/HelpManager.js +++ b/static/js/managers/HelpManager.js @@ -1,4 +1,5 @@ import { getStorageItem, setStorageItem } from '../utils/storageHelpers.js'; +import { onboardingManager } from './OnboardingManager.js'; /** * Manages help modal functionality and tutorial update notifications @@ -55,31 +56,78 @@ export class HelpManager { const tabButtons = document.querySelectorAll('.help-tabs .tab-btn'); tabButtons.forEach(button => { button.addEventListener('click', (event) => { - // Remove active class from all buttons and panes - document.querySelectorAll('.help-tabs .tab-btn').forEach(btn => { - btn.classList.remove('active'); - }); - document.querySelectorAll('.help-content .tab-pane').forEach(pane => { - pane.classList.remove('active'); - }); - - // Add active class to clicked button - event.currentTarget.classList.add('active'); - - // Show corresponding tab content - const tabId = event.currentTarget.getAttribute('data-tab'); - document.getElementById(tabId).classList.add('active'); + this.activateHelpTab(event.currentTarget.getAttribute('data-tab')); }); }); + + // Replay tutorial button in the Getting Started tab + const replayTutorialBtn = document.getElementById('replayTutorialBtn'); + if (replayTutorialBtn) { + replayTutorialBtn.addEventListener('click', () => { + // Close the help modal, then restart the onboarding tutorial + if (window.modalManager) { + window.modalManager.closeModal('helpModal'); + } + onboardingManager.reset(); + onboardingManager.startTutorial(); + }); + } + + // Global "?" shortcut opens the help modal on the Shortcuts tab + document.addEventListener('keydown', (event) => { + if (event.key !== '?') return; + if (this.isTypingContext(event.target)) return; + if (window.modalManager?.isAnyModalOpen()) return; + + event.preventDefault(); + this.openHelpModal('shortcuts'); + }); + } + + /** + * Check if the event target is a text entry context where "?" is literal input + */ + isTypingContext(target) { + if (!(target instanceof Element)) return false; + + const tagName = target.tagName?.toLowerCase(); + return target.isContentEditable || tagName === 'input' || tagName === 'textarea' || tagName === 'select'; + } + + /** + * Activate a specific help modal tab by its data-tab id + * @param {string} tabId - The tab id (matches data-tab and pane element id) + */ + activateHelpTab(tabId) { + const tabButton = document.querySelector(`.help-tabs .tab-btn[data-tab="${tabId}"]`); + const tabPane = document.getElementById(tabId); + if (!tabButton || !tabPane) return; + + // Remove active class from all buttons and panes + document.querySelectorAll('.help-tabs .tab-btn').forEach(btn => { + btn.classList.remove('active'); + }); + document.querySelectorAll('.help-content .tab-pane').forEach(pane => { + pane.classList.remove('active'); + }); + + // Activate the requested tab + tabButton.classList.add('active'); + tabPane.classList.add('active'); } /** * Open the help modal + * @param {string} [tabId] - Optional tab id to activate after opening */ - openHelpModal() { + openHelpModal(tabId) { // Use modalManager to open the help modal if (window.modalManager) { window.modalManager.toggleModal('helpModal'); + + if (tabId) { + this.activateHelpTab(tabId); + } // Add visual indicator to Documentation tab if there's new content this.updateDocumentationTabIndicator(); diff --git a/static/js/managers/OnboardingManager.js b/static/js/managers/OnboardingManager.js index f5805dfc..1c3905c9 100644 --- a/static/js/managers/OnboardingManager.js +++ b/static/js/managers/OnboardingManager.js @@ -43,7 +43,7 @@ export class OnboardingManager { { target: '.controls .action-buttons [data-action="bulk"]', title: () => translate('onboarding.steps.bulk.title', {}, 'Bulk Operations'), - content: () => translate('onboarding.steps.bulk.content', {}, 'Enter bulk mode by clicking this button or pressing B. Select multiple models and perform batch operations. Use Ctrl+A to select all visible models.'), + content: () => translate('onboarding.steps.bulk.content', {}, 'Enter bulk mode by clicking this button or pressing B to select multiple models and perform batch operations.
• Ctrl/Cmd+A select all visible models, Shift+Click select a range.
• Esc or clicking an empty area exits bulk mode.'), position: 'bottom' }, { @@ -71,10 +71,30 @@ export class OnboardingManager { position: 'top', customPosition: { top: '20%', left: '50%' } }, + { + target: '.card-grid', + title: () => translate('onboarding.steps.marqueeSelect.title', {}, 'Drag to Select'), + content: () => translate('onboarding.steps.marqueeSelect.content', {}, 'Hold the left mouse button on an empty area of the grid and drag to draw a marquee that selects multiple cards at once.'), + position: 'top', + customPosition: { top: '20%', left: '50%' } + }, + { + target: '#folderSidebar', + title: () => translate('onboarding.steps.dragToSidebar.title', {}, 'Organize by Dragging'), + content: () => translate('onboarding.steps.dragToSidebar.content', {}, 'Drag a model card onto a folder in the sidebar to move the file there. This also works with multiple selected cards in bulk mode.'), + position: 'right' + }, { target: '.card-grid', title: () => translate('onboarding.steps.contextMenu.title', {}, 'Context Menu'), - content: () => translate('onboarding.steps.contextMenu.content', {}, 'Right-click any model card for a context menu with additional actions.'), + content: () => translate('onboarding.steps.contextMenu.content', {}, 'Right-click any model card for a context menu with card actions like moving, deleting, or editing metadata.'), + position: 'top', + customPosition: { top: '20%', left: '50%' } + }, + { + target: '.card-grid', + title: () => translate('onboarding.steps.contextMenus.title', {}, 'More Context Menus'), + content: () => translate('onboarding.steps.contextMenus.content', {}, 'In bulk mode, right-click a selected card for bulk actions. Right-click an empty area of the page for global actions like update checks and managing excluded models.'), position: 'top', customPosition: { top: '20%', left: '50%' } } diff --git a/templates/components/modals/help_modal.html b/templates/components/modals/help_modal.html index 084c735c..3d9f2e13 100644 --- a/templates/components/modals/help_modal.html +++ b/templates/components/modals/help_modal.html @@ -10,6 +10,7 @@ +
@@ -39,6 +40,12 @@
  • Recipe System: Create, save and share your perfect combinations
    • +
    + +
    @@ -136,6 +143,108 @@ + +
    +

    {{ t('help.shortcuts.title') }}

    + +
    +

    {{ t('help.shortcuts.groups.general') }}

    +
      +
    • + Ctrl/Cmd+F + {{ t('help.shortcuts.entries.focusSearch') }} +
      • +
    • + Esc + {{ t('help.shortcuts.entries.closeModal') }} +
      • +
    • + ? + {{ t('help.shortcuts.entries.openShortcuts') }} +
      • +
    +
    + +
    +

    {{ t('help.shortcuts.groups.selection') }}

    +
      +
    • + B + {{ t('help.shortcuts.entries.toggleBulkMode') }} +
      • +
    • + Ctrl/Cmd+A + {{ t('help.shortcuts.entries.selectAll') }} +
      • +
    • + Shift+{{ t('help.shortcuts.keys.click') }} + {{ t('help.shortcuts.entries.rangeSelect') }} +
      • +
    • + {{ t('help.shortcuts.keys.drag') }} + {{ t('help.shortcuts.entries.marqueeSelect') }} +
      • +
    • + Esc + {{ t('help.shortcuts.entries.exitBulkMode') }} +
      • +
    • + {{ t('help.shortcuts.keys.rightClick') }} + {{ t('help.shortcuts.entries.bulkActions') }} +
      • +
    • + {{ t('help.shortcuts.keys.rightClick') }} + {{ t('help.shortcuts.entries.globalActions') }} +
      • +
    +
    + +
    +

    {{ t('help.shortcuts.groups.navigation') }}

    +
      +
    • + PageUp/PageDown/Home/End + {{ t('help.shortcuts.entries.scrollPages') }} +
      • +
    • + Alt+{{ t('help.shortcuts.keys.letter') }} + {{ t('help.shortcuts.entries.jumpAlphabet') }} +
      • +
    +
    + +
    +

    {{ t('help.shortcuts.groups.modelModal') }}

    +
      +
    • + ←/→ + {{ t('help.shortcuts.entries.prevNext') }} +
      • +
    • + Delete + {{ t('help.shortcuts.entries.deleteEntry') }} +
      • +
    +
    + +
    +

    {{ t('help.shortcuts.groups.mediaViewer') }}

    +
      +
    • + ←/→/[/] + {{ t('help.shortcuts.entries.cycleMedia') }} +
      • +
    • + {{ t('help.shortcuts.keys.swipe') }} + {{ t('help.shortcuts.entries.swipeTouch') }} +
      • +
    • + Esc + {{ t('help.shortcuts.entries.closeViewer') }} +
      • +
    +
    +