diff options
Diffstat (limited to 'core/src/views')
| -rw-r--r-- | core/src/views/AccountMenu.vue | 46 | ||||
| -rw-r--r-- | core/src/views/ContactsMenu.vue | 22 | ||||
| -rw-r--r-- | core/src/views/UnifiedSearch.vue | 61 |
3 files changed, 60 insertions, 69 deletions
diff --git a/core/src/views/AccountMenu.vue b/core/src/views/AccountMenu.vue index cac02129bac..5b7ead636bd 100644 --- a/core/src/views/AccountMenu.vue +++ b/core/src/views/AccountMenu.vue @@ -197,27 +197,15 @@ export default defineComponent({ } .account-menu { - :deep(button) { - // Normally header menus are slightly translucent when not active - // this is generally ok but for the avatar this is weird so fix the opacity - opacity: 1 !important; - - // The avatar is just the "icon" of the button - // So we add the focus-visible manually - &:focus-visible { - .account-menu__avatar { - border: var(--border-width-input-focused) solid var(--color-background-plain-text); - } - } - } - - // Ensure we do not waste space, as the header menu sets a default width of 350px - :deep(.header-menu__content) { - width: fit-content !important; - } - &__avatar { + --account-menu-outline: var(--border-width-input) solid color-mix(in srgb, var(--color-background-plain-text), transparent 75%); + outline: var(--account-menu-outline); + position: fixed; + // do not apply the alpha mask on the avatar div + mask: none !important; + &:hover { + --account-menu-outline: none; // Add hover styles similar to the focus-visible style border: var(--border-width-input-focused) solid var(--color-background-plain-text); } @@ -235,5 +223,25 @@ export default defineComponent({ flex: 0 1; } } + + // Ensure we do not waste space, as the header menu sets a default width of 350px + :deep(.header-menu__content) { + width: fit-content !important; + } + + :deep(button) { + // Normally header menus are slightly translucent when not active + // this is generally ok but for the avatar this is weird so fix the opacity + opacity: 1 !important; + + // The avatar is just the "icon" of the button + // So we add the focus-visible manually + &:focus-visible { + .account-menu__avatar { + --account-menu-outline: none; + border: var(--border-width-input-focused) solid var(--color-background-plain-text); + } + } + } } </style> diff --git a/core/src/views/ContactsMenu.vue b/core/src/views/ContactsMenu.vue index 9cf18b40ac7..924ddcea56b 100644 --- a/core/src/views/ContactsMenu.vue +++ b/core/src/views/ContactsMenu.vue @@ -9,7 +9,7 @@ :aria-label="t('core', 'Search contacts')" @open="handleOpen"> <template #trigger> - <Contacts class="contactsmenu__trigger-icon" :size="20" /> + <NcIconSvgWrapper class="contactsmenu__trigger-icon" :path="mdiContacts" /> </template> <div class="contactsmenu__menu"> <div class="contactsmenu__menu__input-wrapper"> @@ -27,7 +27,7 @@ </div> <NcEmptyContent v-if="error" :name="t('core', 'Could not load your contacts')"> <template #icon> - <Magnify /> + <NcIconSvgWrapper :path="mdiMagnify" /> </template> </NcEmptyContent> <NcEmptyContent v-else-if="loadingText" :name="loadingText"> @@ -37,7 +37,7 @@ </NcEmptyContent> <NcEmptyContent v-else-if="contacts.length === 0" :name="t('core', 'No contacts found')"> <template #icon> - <Magnify /> + <NcIconSvgWrapper :path="mdiMagnify" /> </template> </NcEmptyContent> <div v-else class="contactsmenu__menu__content"> @@ -62,40 +62,46 @@ </template> <script> +import { mdiContacts, mdiMagnify } from '@mdi/js' import { generateUrl } from '@nextcloud/router' import { getCurrentUser } from '@nextcloud/auth' import { t } from '@nextcloud/l10n' import axios from '@nextcloud/axios' import debounce from 'debounce' -import Contacts from 'vue-material-design-icons/ContactsOutline.vue' -import Magnify from 'vue-material-design-icons/Magnify.vue' import NcButton from '@nextcloud/vue/components/NcButton' import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent' import NcHeaderMenu from '@nextcloud/vue/components/NcHeaderMenu' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' +import NcTextField from '@nextcloud/vue/components/NcTextField' import Contact from '../components/ContactsMenu/Contact.vue' import logger from '../logger.js' import Nextcloud from '../mixins/Nextcloud.js' -import NcTextField from '@nextcloud/vue/components/NcTextField' export default { name: 'ContactsMenu', components: { Contact, - Contacts, - Magnify, NcButton, NcEmptyContent, NcHeaderMenu, + NcIconSvgWrapper, NcLoadingIcon, NcTextField, }, mixins: [Nextcloud], + setup() { + return { + mdiContacts, + mdiMagnify, + } + }, + data() { const user = getCurrentUser() return { diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue index 0dec6d5fb6e..d7b2ca634eb 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/components/NcButton' -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, } }, @@ -175,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> |