mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-04 07:00:23 +00:00
feat: add default keybindings for toggle mode and assets panel (#8593)
## Summary Add default keyboard shortcuts for mode toggle and assets panel access. ## Changes - **Ctrl+Shift+A**: Toggle between Simple Mode and Graph Mode (`Comfy.ToggleLinear`) - **A**: Open/toggle assets panel (`Workspace.ToggleSidebarTab.assets`) - Show keybinding in ModeToggle button tooltip (e.g. "Simple Mode (Ctrl+Shift+A)") ## Keybinding Rationale - `A` follows the existing pattern: `w` (workflows), `n` (node-lib), `m` (model-lib) - `Ctrl+Shift+A` chosen because: - Ctrl+Shift is the standard modifier pattern for toggle commands - "A" mnemonic for "App mode" - Does not conflict with existing keybindings ## Testing - Verified typecheck passes - Verified lint passes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Tooltips now show dynamic keyboard shortcut suffixes for mode and tab controls. * Added keyboard shortcut: A — toggles the assets sidebar. * Added keyboard shortcut: Ctrl+Shift+A — toggles linear mode. * **Localization** * Added a localized shortcut suffix template so displayed shortcuts respect translations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8593-feat-add-default-keybindings-for-toggle-mode-and-assets-panel-2fc6d73d36508172bd6ed3378f43de55) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
@@ -1,10 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import { t } from '@/i18n'
|
||||
import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
|
||||
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
||||
import { useCommandStore } from '@/stores/commandStore'
|
||||
|
||||
const canvasStore = useCanvasStore()
|
||||
const keybindingStore = useKeybindingStore()
|
||||
|
||||
const keybindingSuffix = computed(() => {
|
||||
const shortcut = keybindingStore
|
||||
.getKeybindingByCommandId('Comfy.ToggleLinear')
|
||||
?.combo.toString()
|
||||
return shortcut ? t('g.shortcutSuffix', { shortcut }) : ''
|
||||
})
|
||||
|
||||
function toggleLinearMode() {
|
||||
useCommandStore().execute('Comfy.ToggleLinear', {
|
||||
metadata: { source: 'button' }
|
||||
@@ -18,7 +30,7 @@ function toggleLinearMode() {
|
||||
>
|
||||
<Button
|
||||
v-tooltip="{
|
||||
value: t('linearMode.linearMode'),
|
||||
value: t('linearMode.linearMode') + keybindingSuffix,
|
||||
showDelay: 300,
|
||||
hideDelay: 300
|
||||
}"
|
||||
@@ -30,7 +42,7 @@ function toggleLinearMode() {
|
||||
</Button>
|
||||
<Button
|
||||
v-tooltip="{
|
||||
value: t('linearMode.graphMode'),
|
||||
value: t('linearMode.graphMode') + keybindingSuffix,
|
||||
showDelay: 300,
|
||||
hideDelay: 300
|
||||
}"
|
||||
|
||||
@@ -66,6 +66,7 @@ import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPa
|
||||
import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
|
||||
import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
|
||||
import { useFeatureFlags } from '@/composables/useFeatureFlags'
|
||||
import { t } from '@/i18n'
|
||||
import { isCloud } from '@/platform/distribution/types'
|
||||
import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
@@ -151,10 +152,10 @@ const onTabClick = async (item: SidebarTabExtension) => {
|
||||
|
||||
const keybindingStore = useKeybindingStore()
|
||||
const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
|
||||
const keybinding = keybindingStore.getKeybindingByCommandId(
|
||||
`Workspace.ToggleSidebarTab.${tab.id}`
|
||||
)
|
||||
return keybinding ? ` (${keybinding.combo.toString()})` : ''
|
||||
const shortcut = keybindingStore
|
||||
.getKeybindingByCommandId(`Workspace.ToggleSidebarTab.${tab.id}`)
|
||||
?.combo.toString()
|
||||
return shortcut ? t('g.shortcutSuffix', { shortcut }) : ''
|
||||
}
|
||||
|
||||
const isOverflowing = ref(false)
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"g": {
|
||||
"shortcutSuffix": " ({shortcut})",
|
||||
"user": "User",
|
||||
"you": "You",
|
||||
"currentUser": "Current user",
|
||||
|
||||
@@ -48,6 +48,20 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
|
||||
},
|
||||
commandId: 'Workspace.ToggleSidebarTab.model-library'
|
||||
},
|
||||
{
|
||||
combo: {
|
||||
key: 'a'
|
||||
},
|
||||
commandId: 'Workspace.ToggleSidebarTab.assets'
|
||||
},
|
||||
{
|
||||
combo: {
|
||||
ctrl: true,
|
||||
shift: true,
|
||||
key: 'a'
|
||||
},
|
||||
commandId: 'Comfy.ToggleLinear'
|
||||
},
|
||||
{
|
||||
combo: {
|
||||
key: 's',
|
||||
|
||||
Reference in New Issue
Block a user