aboutsummaryrefslogtreecommitdiffstats
path: root/core/src
diff options
context:
space:
mode:
Diffstat (limited to 'core/src')
-rw-r--r--core/src/OC/dialogs.js2
-rw-r--r--core/src/components/AppMenuIcon.vue18
-rw-r--r--core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue4
-rw-r--r--core/src/components/UnifiedSearch/UnifiedSearchModal.vue4
-rw-r--r--core/src/components/login/PasswordLessLoginForm.vue2
-rw-r--r--core/src/views/AccountMenu.vue46
-rw-r--r--core/src/views/ContactsMenu.vue29
-rw-r--r--core/src/views/PublicPageUserMenu.vue2
8 files changed, 62 insertions, 45 deletions
diff --git a/core/src/OC/dialogs.js b/core/src/OC/dialogs.js
index 5c5e8cf5887..5c6934e67a2 100644
--- a/core/src/OC/dialogs.js
+++ b/core/src/OC/dialogs.js
@@ -9,7 +9,7 @@ import _ from 'underscore'
import $ from 'jquery'
import IconMove from '@mdi/svg/svg/folder-move.svg?raw'
-import IconCopy from '@mdi/svg/svg/folder-multiple.svg?raw'
+import IconCopy from '@mdi/svg/svg/folder-multiple-outline.svg?raw'
import OC from './index.js'
import { DialogBuilder, FilePickerType, getFilePickerBuilder, spawnDialog } from '@nextcloud/dialogs'
diff --git a/core/src/components/AppMenuIcon.vue b/core/src/components/AppMenuIcon.vue
index f2cee75e644..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/Circle.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/UnifiedSearchLocalSearchBar.vue b/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
index 1860c54e1ff..171eada8a06 100644
--- a/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
+++ b/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
@@ -32,7 +32,7 @@
{{ t('core', 'Search everywhere') }}
</template>
<template #icon>
- <NcIconSvgWrapper :path="mdiCloudSearch" />
+ <NcIconSvgWrapper :path="mdiCloudSearchOutline" />
</template>
</NcButton>
</div>
@@ -41,7 +41,7 @@
<script lang="ts" setup>
import type { ComponentPublicInstance } from 'vue'
-import { mdiCloudSearch, mdiClose } from '@mdi/js'
+import { mdiCloudSearchOutline, mdiClose } from '@mdi/js'
import { translate as t } from '@nextcloud/l10n'
import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
import { useElementSize } from '@vueuse/core'
diff --git a/core/src/components/UnifiedSearch/UnifiedSearchModal.vue b/core/src/components/UnifiedSearch/UnifiedSearchModal.vue
index 744c8e604fa..002606f058b 100644
--- a/core/src/components/UnifiedSearch/UnifiedSearchModal.vue
+++ b/core/src/components/UnifiedSearch/UnifiedSearchModal.vue
@@ -159,8 +159,8 @@ import debounce from 'debounce'
import { unifiedSearchLogger } from '../../logger'
import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import IconAccountGroup from 'vue-material-design-icons/AccountGroup.vue'
-import IconCalendarRange from 'vue-material-design-icons/CalendarRange.vue'
+import IconAccountGroup from 'vue-material-design-icons/AccountGroupOutline.vue'
+import IconCalendarRange from 'vue-material-design-icons/CalendarRangeOutline.vue'
import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
import IconFilter from 'vue-material-design-icons/Filter.vue'
import IconListBox from 'vue-material-design-icons/ListBox.vue'
diff --git a/core/src/components/login/PasswordLessLoginForm.vue b/core/src/components/login/PasswordLessLoginForm.vue
index bbca2ebf31d..bc4d25bf70f 100644
--- a/core/src/components/login/PasswordLessLoginForm.vue
+++ b/core/src/components/login/PasswordLessLoginForm.vue
@@ -57,7 +57,7 @@ import {
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
import NcTextField from '@nextcloud/vue/components/NcTextField'
-import InformationIcon from 'vue-material-design-icons/Information.vue'
+import InformationIcon from 'vue-material-design-icons/InformationOutline.vue'
import LoginButton from './LoginButton.vue'
import LockOpenIcon from 'vue-material-design-icons/LockOpen.vue'
import logger from '../../logger'
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 292e2bbcd29..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,39 +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 Contacts from 'vue-material-design-icons/Contacts.vue'
import debounce from 'debounce'
-import { getCurrentUser } from '@nextcloud/auth'
-import { generateUrl } from '@nextcloud/router'
-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 { translate as t } from '@nextcloud/l10n'
+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/PublicPageUserMenu.vue b/core/src/views/PublicPageUserMenu.vue
index ff6f4090b2a..7bd6521e7aa 100644
--- a/core/src/views/PublicPageUserMenu.vue
+++ b/core/src/views/PublicPageUserMenu.vue
@@ -48,7 +48,7 @@ import { t } from '@nextcloud/l10n'
import NcAvatar from '@nextcloud/vue/components/NcAvatar'
import NcHeaderMenu from '@nextcloud/vue/components/NcHeaderMenu'
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
-import IconAccount from 'vue-material-design-icons/Account.vue'
+import IconAccount from 'vue-material-design-icons/AccountOutline.vue'
import AccountMenuEntry from '../components/AccountMenu/AccountMenuEntry.vue'
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-02 12:17:53 +0000