mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-09-21 03:01:27 -03:00
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)
This commit is contained in:
Will Miao
@@ -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();
|
||||
|
||||
@@ -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 <span class="onboarding-shortcut">B</span>. Select multiple models and perform batch operations. Use <span class="onboarding-shortcut">Ctrl+A</span> to select all visible models.'),
|
||||
content: () => translate('onboarding.steps.bulk.content', {}, 'Enter bulk mode by clicking this button or pressing <span class="onboarding-shortcut">B</span> to select multiple models and perform batch operations.<br>• <span class="onboarding-shortcut">Ctrl/Cmd+A</span> select all visible models, <span class="onboarding-shortcut">Shift+Click</span> select a range.<br>• <span class="onboarding-shortcut">Esc</span> 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 <strong>left mouse button</strong> 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', {}, '<strong>Right-click</strong> any model card for a context menu with additional actions.'),
|
||||
content: () => translate('onboarding.steps.contextMenu.content', {}, '<strong>Right-click</strong> 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, <strong>right-click a selected card</strong> for bulk actions. <strong>Right-click an empty area</strong> of the page for global actions like update checks and managing excluded models.'),
|
||||
position: 'top',
|
||||
customPosition: { top: '20%', left: '50%' }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user