refactor(command): use dialog (#352)

This commit is contained in:
QiroNT 2022-12-10 05:18:21 +08:00 committed by GitHub
parent f249087a95
commit 462e85dad0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 110 additions and 131 deletions

View file

@ -1,6 +1,7 @@
<script setup lang="ts">
setupPageHeader()
await setupI18n()
provideGlobalCommands()
// We want to trigger rerendering the page when account changes
const key = computed(() => `${currentServer.value}:${currentUser.value?.account.id || ''}`)

View file

@ -1,31 +1,21 @@
<script setup lang="ts">
import type { CommandScope, QueryIndexedCommand } from '@/composables/command'
const isMac = useIsMac()
const emit = defineEmits<{
(event: 'close'): void
}>()
const registry = useCommandRegistry()
const inputEl = $ref<HTMLInputElement>()
const resultEl = $ref<HTMLDivElement>()
let show = $ref(false)
let scopes = $ref<CommandScope[]>([])
let input = $ref('')
const scopes = $ref<CommandScope[]>([])
let input = $(commandPanelInput)
// listen to ctrl+/ on windows/linux or cmd+/ on mac
useEventListener('keydown', async (e: KeyboardEvent) => {
if (e.key === '/' && (isMac.value ? e.metaKey : e.ctrlKey)) {
e.preventDefault()
show = true
scopes = []
input = '>'
await nextTick()
onMounted(() => {
inputEl?.focus()
}
})
onKeyStroke('Escape', (e) => {
e.preventDefault()
show = false
}, { target: document })
const commandMode = $computed(() => input.startsWith('>'))
const result = $computed(() => commandMode
@ -42,7 +32,7 @@ const findItemEl = (index: number) =>
const onCommandActivate = (item: QueryIndexedCommand) => {
if (item.onActivate) {
item.onActivate()
show = false
emit('close')
}
else if (item.onComplete) {
scopes.push(item.onComplete())
@ -137,36 +127,7 @@ const onKeyDown = (e: KeyboardEvent) => {
</script>
<template>
<!-- Overlay -->
<Transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="transform opacity-0"
enter-to-class="transform opacity-100"
leave-active-class="transition duration-100 ease-in"
leave-from-class="transform opacity-100"
leave-to-class="transform opacity-0"
>
<div
v-if="show"
class="z-100 fixed inset-0 opacity-70 bg-base"
@click="show = false"
/>
</Transition>
<!-- Panel -->
<Transition
enter-active-class="transition duration-65 ease-out"
enter-from-class="transform scale-95"
enter-to-class="transform scale-100"
leave-active-class="transition duration-100 ease-in"
leave-from-class="transform scale-100"
leave-to-class="transform scale-95"
>
<div v-if="show" class="z-100 fixed inset-0 grid place-items-center pointer-events-none">
<div
class="flex flex-col w-50vw h-50vh rounded-md bg-base shadow-lg pointer-events-auto"
border="1 base"
>
<div class="flex flex-col w-50vw max-w-180 h-50vh max-h-120">
<!-- Input -->
<label class="flex mx-3 my-1 items-center">
<div mx-1 i-ri:search-line />
@ -248,6 +209,4 @@ const onKeyDown = (e: KeyboardEvent) => {
<CommandKey name="Ctrl+/" /> to activate command mode.
</div>
</div>
</div>
</Transition>
</template>

View file

@ -1,7 +0,0 @@
<script setup lang="ts">
provideGlobalCommands()
</script>
<template>
<CommandPanel />
</template>

View file

@ -1,11 +1,23 @@
<script setup lang="ts">
import {
isCommandPanelOpen,
isEditHistoryDialogOpen,
isMediaPreviewOpen,
isPreviewHelpOpen,
isPublishDialogOpen,
isSigninDialogOpen,
} from '~/composables/dialog'
const isMac = useIsMac()
// TODO: temporary, await for keybind system
// listen to ctrl+/ on windows/linux or cmd+/ on mac
useEventListener('keydown', (e: KeyboardEvent) => {
if (e.key === '/' && (isMac.value ? e.metaKey : e.ctrlKey)) {
e.preventDefault()
openCommandPanel(true)
}
})
</script>
<template>
@ -30,4 +42,7 @@ import {
<ModalDialog v-model="isEditHistoryDialogOpen">
<StatusEditPreview :edit="statusEdit" />
</ModalDialog>
<ModalDialog v-model="isCommandPanelOpen" max-w-fit flex>
<CommandPanel @close="closeCommandPanel()" />
</ModalDialog>
</template>

View file

@ -281,7 +281,7 @@ export const provideGlobalCommands = () => {
visible: () => users.value.length > 1,
name: () => t('action.switch_account'),
description: t('command.switch_account_desc'),
description: () => t('command.switch_account_desc'),
icon: 'i-ri:user-shared-line',
onComplete: () => ({

View file

@ -8,6 +8,8 @@ export const mediaPreviewIndex = ref(0)
export const statusEdit = ref<StatusEdit>()
export const dialogDraftKey = ref<string>()
export const commandPanelInput = ref('')
export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, !process.mock)
export const isZenMode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
@ -16,6 +18,7 @@ export const isPublishDialogOpen = ref(false)
export const isMediaPreviewOpen = ref(false)
export const isEditHistoryDialogOpen = ref(false)
export const isPreviewHelpOpen = ref(isFirstVisit.value)
export const isCommandPanelOpen = ref(false)
export const toggleZenMode = useToggle(isZenMode)
@ -72,3 +75,12 @@ export function openPreviewHelp() {
export function closePreviewHelp() {
isPreviewHelpOpen.value = false
}
export function openCommandPanel(isCommandMode = false) {
commandPanelInput.value = isCommandMode ? '>' : ''
isCommandPanelOpen.value = true
}
export function closeCommandPanel() {
isCommandPanelOpen.value = false
}

View file

@ -51,6 +51,5 @@
</aside>
</main>
<ModalContainer />
<CommandRoot />
</div>
</template>