diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue index d64f247..4fd7feb 100644 --- a/frontend/src/components/HeaderMain.vue +++ b/frontend/src/components/HeaderMain.vue @@ -19,6 +19,12 @@ /> {{ store.prefs.searchHotkey }} +
+ Order + 1 + 2 + 3 +
@@ -32,18 +38,30 @@ import { useMainStore } from '@/stores/main' import { useSsoAuthStore } from '@/stores/ssoAuth' import ContextMenu from '@imengyu/vue3-context-menu' import { showAuthIframe } from 'paskia' -import { ref } from 'vue' +import { computed, onMounted, onUnmounted, ref } from 'vue' import DiskSpace from './DiskSpace.vue' const store = useMainStore() const ssoStore = useSsoAuthStore() const search = ref() +const textInputFocused = ref(false) const props = defineProps<{ path: Array query: string }>() +const isInputElement = (el: Element | null): boolean => { + if (!el || !(el instanceof HTMLElement)) return false + return el instanceof HTMLInputElement +} + +const updateTextInputFocused = () => { + textInputFocused.value = isInputElement(document.activeElement) +} + +const showSortHints = computed(() => !textInputFocused.value) + const clearSearch = (ev: Event) => { const input = search.value if (input) { @@ -158,6 +176,17 @@ defineExpose({ toggleSearchInput, clearSearch }) + +onMounted(() => { + updateTextInputFocused() + window.addEventListener('focusin', updateTextInputFocused) + window.addEventListener('focusout', updateTextInputFocused) +}) + +onUnmounted(() => { + window.removeEventListener('focusin', updateTextInputFocused) + window.removeEventListener('focusout', updateTextInputFocused) +})