aboutsummaryrefslogtreecommitdiffstats
path: root/core/src
diff options
context:
space:
mode:
Diffstat (limited to 'core/src')
-rw-r--r--core/src/components/AppMenuIcon.vue16
-rw-r--r--core/src/components/UnifiedSearch/UnifiedSearchModal.vue17
-rw-r--r--core/src/views/AccountMenu.vue46
-rw-r--r--core/src/views/ContactsMenu.vue22
-rw-r--r--core/src/views/UnifiedSearch.vue61
5 files changed, 74 insertions, 88 deletions
diff --git a/core/src/components/AppMenuIcon.vue b/core/src/components/AppMenuIcon.vue
index 089a2016e58..1b0d48daf8c 100644
--- a/core/src/components/AppMenuIcon.vue
+++ b/core/src/components/AppMenuIcon.vue
@@ -14,24 +14,25 @@
</template>
<script setup lang="ts">
-import type { INavigationEntry } from '../types/navigation'
+import type { INavigationEntry } from '../types/navigation.ts'
+
import { n } from '@nextcloud/l10n'
import { computed } from 'vue'
-
import IconDot from 'vue-material-design-icons/CircleOutline.vue'
const props = defineProps<{
app: INavigationEntry
}>()
-const ariaHidden = computed(() => String(props.app.unread > 0))
+// only hide if there are no unread notifications
+const ariaHidden = computed(() => !props.app.unread ? 'true' : undefined)
const ariaLabel = computed(() => {
- if (ariaHidden.value === 'true') {
- return ''
+ if (!props.app.unread) {
+ return undefined
}
- return props.app.name
- + (props.app.unread > 0 ? ` (${n('core', '{count} notification', '{count} notifications', props.app.unread, { count: props.app.unread })})` : '')
+
+ return `${props.app.name} (${n('core', '{count} notification', '{count} notifications', props.app.unread, { count: props.app.unread })})`
})
</script>
@@ -51,6 +52,7 @@ $unread-indicator-size: 10px;
height: $icon-size;
width: $icon-size;
filter: var(--background-image-invert-if-bright);
+ mask: var(--header-menu-icon-mask);
}
&__unread {
diff --git a/core/src/components/UnifiedSearch/UnifiedSearchModal.vue b/core/src/components/UnifiedSearch/UnifiedSearchModal.vue
index 002606f058b..b21c65301c4 100644
--- a/core/src/components/UnifiedSearch/UnifiedSearchModal.vue
+++ b/core/src/components/UnifiedSearch/UnifiedSearchModal.vue
@@ -129,7 +129,7 @@
v-bind="result" />
</ul>
<div class="result-footer">
- <NcButton type="tertiary-no-background" @click="loadMoreResultsForProvider(providerResult)">
+ <NcButton v-if="providerResult.results.length === providerResult.limit" type="tertiary-no-background" @click="loadMoreResultsForProvider(providerResult)">
{{ t('core', 'Load more results') }}
<template #icon>
<IconDotsHorizontal :size="20" />
@@ -367,7 +367,7 @@ export default defineComponent({
this.$refs.searchInput?.focus()
})
},
- find(query: string) {
+ find(query: string, providersToSearchOverride = null) {
if (query.length === 0) {
this.results = []
this.searching = false
@@ -382,7 +382,7 @@ export default defineComponent({
this.searching = true
const newResults = []
- const providersToSearch = this.filteredProviders.length > 0 ? this.filteredProviders : this.providers
+ const providersToSearch = providersToSearchOverride || (this.filteredProviders.length > 0 ? this.filteredProviders : this.providers)
const searchProvider = (provider) => {
const params = {
type: provider.searchFrom ?? provider.id,
@@ -424,6 +424,7 @@ export default defineComponent({
newResults.push({
...provider,
results: response.data.ocs.data.entries,
+ limit: params.limit ?? 5,
})
unifiedSearchLogger.debug('Unified search results:', { results: this.results, newResults })
@@ -513,15 +514,7 @@ export default defineComponent({
},
async loadMoreResultsForProvider(provider) {
this.providerResultLimit += 5
- // Remove all other providers from filteredProviders except the current "loadmore" provider
- this.filteredProviders = this.filteredProviders.filter(filteredProvider => filteredProvider.id === provider.id)
- // Plugin filters may have extra parameters, so we need to keep them
- // See method handlePluginFilter for more details
- if (this.filteredProviders.length > 0 && this.filteredProviders[0].isPluginFilter) {
- provider = this.filteredProviders[0]
- }
- this.addProviderFilter(provider, true)
- this.find(this.searchQuery)
+ this.find(this.searchQuery, [provider])
},
addProviderFilter(providerFilter, loadMoreResultsForProvider = false) {
unifiedSearchLogger.debug('Applying provider filter', { providerFilter, loadMoreResultsForProvider })
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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-11 13:21:53 +0000