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 | 29 | ||||
| -rw-r--r-- | core/src/views/Login.vue | 5 | ||||
| -rw-r--r-- | core/src/views/PublicPageUserMenu.vue | 138 | ||||
| -rw-r--r-- | core/src/views/UnifiedSearch.vue | 61 |
5 files changed, 205 insertions, 74 deletions
diff --git a/core/src/views/AccountMenu.vue b/core/src/views/AccountMenu.vue index d1b4694ebc1..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 wast 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/Login.vue b/core/src/views/Login.vue index 9236d1a9d09..a6fe8442779 100644 --- a/core/src/views/Login.vue +++ b/core/src/views/Login.vue @@ -95,6 +95,8 @@ <script> import { loadState } from '@nextcloud/initial-state' +import { generateUrl } from '@nextcloud/router' + import queryString from 'query-string' import LoginForm from '../components/login/LoginForm.vue' @@ -152,8 +154,7 @@ export default { methods: { passwordResetFinished() { - this.resetPasswordTarget = '' - this.directLogin = true + window.location.href = generateUrl('login') }, }, } diff --git a/core/src/views/PublicPageUserMenu.vue b/core/src/views/PublicPageUserMenu.vue new file mode 100644 index 00000000000..7bd6521e7aa --- /dev/null +++ b/core/src/views/PublicPageUserMenu.vue @@ -0,0 +1,138 @@ +<!-- + - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later + --> +<template> + <NcHeaderMenu id="public-page-user-menu" + class="public-page-user-menu" + is-nav + :aria-label="t('core', 'User menu')" + :description="avatarDescription"> + <template #trigger> + <NcAvatar class="public-page-user-menu__avatar" + disable-menu + disable-tooltip + is-guest + :user="displayName || '?'" /> + </template> + + <!-- Privacy notice --> + <NcNoteCard class="public-page-user-menu__list-note" + :text="privacyNotice" + type="info" /> + + <ul class="public-page-user-menu__list"> + <!-- Nickname dialog --> + <AccountMenuEntry id="set-nickname" + :name="!displayName ? t('core', 'Set public name') : t('core', 'Change public name')" + href="#" + @click.prevent.stop="setNickname"> + <template #icon> + <IconAccount /> + </template> + </AccountMenuEntry> + </ul> + </NcHeaderMenu> +</template> + +<script lang="ts"> +import type { NextcloudUser } from '@nextcloud/auth' + +import '@nextcloud/dialogs/style.css' +import { defineComponent } from 'vue' +import { getGuestUser } from '@nextcloud/auth' +import { showGuestUserPrompt } from '@nextcloud/dialogs' +import { subscribe } from '@nextcloud/event-bus' +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/AccountOutline.vue' + +import AccountMenuEntry from '../components/AccountMenu/AccountMenuEntry.vue' + +export default defineComponent({ + name: 'PublicPageUserMenu', + components: { + AccountMenuEntry, + IconAccount, + NcAvatar, + NcHeaderMenu, + NcNoteCard, + }, + + setup() { + return { + t, + } + }, + + data() { + return { + displayName: getGuestUser().displayName, + } + }, + + computed: { + avatarDescription(): string { + return t('core', 'User menu') + }, + + privacyNotice(): string { + return this.displayName + ? t('core', 'You will be identified as {user} by the account owner.', { user: this.displayName }) + : t('core', 'You are currently not identified.') + }, + }, + + mounted() { + subscribe('user:info:changed', (user: NextcloudUser) => { + this.displayName = user.displayName || '' + }) + }, + + methods: { + setNickname() { + showGuestUserPrompt({ + nickname: this.displayName, + cancellable: true, + }) + }, + }, +}) +</script> + +<style scoped lang="scss"> +.public-page-user-menu { + &, * { + box-sizing: border-box; + } + + // Ensure we do not waste space, as the header menu sets a default width of 350px + :deep(.header-menu__content) { + width: fit-content !important; + } + + &__list-note { + padding-block: 5px !important; + padding-inline: 5px !important; + max-width: 300px; + margin: 5px !important; + margin-bottom: 0 !important; + } + + &__list { + display: inline-flex; + flex-direction: column; + padding-block: var(--default-grid-baseline) 0; + width: 100%; + + > :deep(li) { + box-sizing: border-box; + // basically "fit-content" + flex: 0 1; + } + } +} +</style> 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> |