mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-02 14:27:40 +00:00
7b68b19f11
## Summary Automated initial change, cleaned up manually. Please check the screenshot changes. Includes a11y updates to icon buttons. Doesn't hit the buttons in Desktop. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
Vue
<template>
|
|
<SidebarIcon
|
|
icon="icon-[lucide--keyboard]"
|
|
:label="$t('shortcuts.shortcuts')"
|
|
:tooltip="tooltipText"
|
|
:selected="isShortcutsPanelVisible"
|
|
@click="toggleShortcutsPanel"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import { useTelemetry } from '@/platform/telemetry'
|
|
import { useCommandStore } from '@/stores/commandStore'
|
|
import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
|
|
|
|
import SidebarIcon from './SidebarIcon.vue'
|
|
|
|
const { t } = useI18n()
|
|
const bottomPanelStore = useBottomPanelStore()
|
|
const commandStore = useCommandStore()
|
|
const command = commandStore.getCommand('Workspace.ToggleBottomPanel.Shortcuts')
|
|
const { formatKeySequence } = commandStore
|
|
|
|
const isShortcutsPanelVisible = computed(
|
|
() => bottomPanelStore.activePanel === 'shortcuts'
|
|
)
|
|
|
|
const tooltipText = computed(
|
|
() => `${t('shortcuts.keyboardShortcuts')} (${formatKeySequence(command)})`
|
|
)
|
|
|
|
/**
|
|
* Toggle keyboard shortcuts panel and track UI button click.
|
|
*/
|
|
const toggleShortcutsPanel = () => {
|
|
useTelemetry()?.trackUiButtonClicked({
|
|
button_id: 'sidebar_shortcuts_panel_toggled'
|
|
})
|
|
bottomPanelStore.togglePanel('shortcuts')
|
|
}
|
|
</script>
|