diff options
Diffstat (limited to 'core/src/views/UnifiedSearch.vue')
| -rw-r--r-- | core/src/views/UnifiedSearch.vue | 76 |
1 files changed, 28 insertions, 48 deletions
diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue index a07860c7e79..103e47b0425 100644 --- a/core/src/views/UnifiedSearch.vue +++ b/core/src/views/UnifiedSearch.vue @@ -3,16 +3,14 @@ - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> - <div class="header-menu unified-search-menu"> - <NcButton v-show="!showLocalSearch" - class="header-menu__trigger" + <div class="unified-search-menu"> + <NcHeaderButton v-show="!showLocalSearch" :aria-label="t('core', 'Unified search')" - type="tertiary-no-background" @click="toggleUnifiedSearch"> <template #icon> - <Magnify class="header-menu__trigger-icon" :size="20" /> + <NcIconSvgWrapper :path="mdiMagnify" /> </template> - </NcButton> + </NcHeaderButton> <UnifiedSearchLocalSearchBar v-if="supportsLocalSearch" :open.sync="showLocalSearch" :query.sync="queryText" @@ -24,25 +22,24 @@ </template> <script lang="ts"> +import { mdiMagnify } from '@mdi/js' import { emit, subscribe } from '@nextcloud/event-bus' -import { translate } from '@nextcloud/l10n' +import { t } from '@nextcloud/l10n' import { useBrowserLocation } from '@vueuse/core' +import debounce from 'debounce' import { defineComponent } from 'vue' - -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import Magnify from 'vue-material-design-icons/Magnify.vue' +import NcHeaderButton from '@nextcloud/vue/components/NcHeaderButton' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' import UnifiedSearchModal from '../components/UnifiedSearch/UnifiedSearchModal.vue' import UnifiedSearchLocalSearchBar from '../components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue' - -import debounce from 'debounce' -import logger from '../logger' +import logger from '../logger.js' export default defineComponent({ name: 'UnifiedSearch', components: { - NcButton, - Magnify, + NcHeaderButton, + NcIconSvgWrapper, UnifiedSearchModal, UnifiedSearchLocalSearchBar, }, @@ -52,7 +49,9 @@ export default defineComponent({ return { currentLocation, - t: translate, + + mdiMagnify, + t, } }, @@ -80,7 +79,7 @@ export default defineComponent({ */ supportsLocalSearch() { // TODO: Make this an API - const providerPaths = ['/settings/users', '/apps/files', '/apps/deck', '/settings/apps'] + const providerPaths = ['/settings/users', '/apps/deck', '/settings/apps'] return providerPaths.some((path) => this.currentLocation.pathname?.includes?.(path)) }, }, @@ -97,7 +96,9 @@ export default defineComponent({ mounted() { // register keyboard listener for search shortcut - window.addEventListener('keydown', this.onKeyDown) + if (window.OCP.Accessibility.disableKeyboardShortcuts() === false) { + window.addEventListener('keydown', this.onKeyDown) + } // Allow external reset of the search / close local search subscribe('nextcloud:unified-search:reset', () => { @@ -128,12 +129,12 @@ export default defineComponent({ * @param event The keyboard event */ onKeyDown(event: KeyboardEvent) { - if (event.ctrlKey && event.code === 'KeyF') { + if (event.ctrlKey && event.key === 'f') { // only handle search if not already open - in this case the browser native search should be used if (!this.showLocalSearch && !this.showUnifiedSearch) { - this.toggleUnifiedSearch() event.preventDefault() } + this.toggleUnifiedSearch() } }, @@ -142,9 +143,10 @@ export default defineComponent({ */ toggleUnifiedSearch() { if (this.supportsLocalSearch) { - this.showLocalSearch = true + this.showLocalSearch = !this.showLocalSearch } else { - this.openModal() + this.showUnifiedSearch = !this.showUnifiedSearch + this.showLocalSearch = false } }, @@ -172,31 +174,9 @@ export default defineComponent({ <style lang="scss" scoped> // this is needed to allow us overriding component styles (focus-visible) -#header { - .header-menu { - display: flex; - align-items: center; - justify-content: center; - - &__trigger { - height: var(--header-height); - width: var(--header-height) !important; - - &:focus-visible { - // align with other header menu entries - outline: none !important; - box-shadow: none !important; - } - - &:not(:hover,:focus,:focus-visible) { - opacity: .85; - } - - &-icon { - // ensure the icon has the correct color - color: var(--color-background-plain-text) !important; - } - } - } +.unified-search-menu { + display: flex; + align-items: center; + justify-content: center; } </style> |