Skip to content

Commit

Permalink
Merge pull request #46880 from nextcloud/fix/account-menu
Browse files Browse the repository at this point in the history 
fix: Make account menu follow the design (use nextcloud-vue components)
  • Loading branch information
@susnux
susnux authored Aug 6, 2024
2 parents 119543e + f7dd3c5 commit f1cc819
Show file tree
Hide file tree
Showing 18 changed files with 359 additions and 402 deletions.
74 changes: 26 additions & 48 deletions apps/user_status/src/UserStatus.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,42 @@
-->

<template>
<component :is="inline ? 'div' : 'li'">
<!-- User Status = Status modal toggle -->
<button v-if="!inline"
<Fragment>
<NcListItem v-if="!inline"
class="user-status-menu-item"
@click.stop="openModal">
<NcUserStatusIcon class="user-status-icon"
:status="statusType"
aria-hidden="true" />
{{ visibleMessage }}
</button>

<!-- Dashboard Status -->
<NcButton v-else
compact
:name="visibleMessage"
@click.stop="openModal">
<template #icon>
<NcUserStatusIcon class="user-status-icon"
:status="statusType"
aria-hidden="true" />
</template>
{{ visibleMessage }}
</NcButton>

</NcListItem>

<div v-else>
<!-- Dashboard Status -->
<NcButton @click.stop="openModal">
<template #icon>
<NcUserStatusIcon class="user-status-icon"
:status="statusType"
aria-hidden="true" />
</template>
{{ visibleMessage }}
</NcButton>
</div>
<!-- Status management modal -->
<SetStatusModal v-if="isModalOpen"
:inline="inline"
@close="closeModal" />
</component>
</Fragment>
</template>

<script>
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
import { Fragment } from 'vue-frag'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
import debounce from 'debounce'

Expand All @@ -46,7 +50,9 @@ export default {
name: 'UserStatus',

components: {
Fragment,
NcButton,
NcListItem,
NcUserStatusIcon,
SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal.vue'),
},
Expand Down Expand Up @@ -166,40 +172,12 @@ export default {
</script>

<style lang="scss" scoped>
.user-status-menu-item {
// Ensure the maxcontrast color is set for the background
--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));

width: auto;
min-width: 44px;
height: 44px;
margin: 0;
border: 0;
border-radius: var(--border-radius-pill);
background-color: var(--color-main-background-blur);
font-size: inherit;
font-weight: normal;

-webkit-backdrop-filter: var(--background-blur);
backdrop-filter: var(--background-blur);

&:active,
&:hover,
&:focus-visible {
background-color: var(--color-background-hover);
}
&:focus-visible {
box-shadow: 0 0 0 4px var(--color-main-background) !important;
outline: 2px solid var(--color-main-text) !important;
}
}

.user-status-icon {
width: 16px;
height: 16px;
margin-right: 10px;
width: 20px;
height: 20px;
margin: calc((var(--default-clickable-area) - 20px) / 2); // 20px icon size
opacity: 1 !important;
background-size: 16px;
background-size: 20px;
vertical-align: middle !important;
}
</style>
58 changes: 36 additions & 22 deletions ...src/components/UserMenu/UserMenuEntry.vue → ...mponents/AccountMenu/AccountMenuEntry.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,39 @@
-->

<template>
<li :id="id"
class="menu-entry">
<a v-if="href"
:href="href"
:class="{ active }"
@click.exact="handleClick">
<NcLoadingIcon v-if="loading"
class="menu-entry__loading-icon"
:size="18" />
<img v-else :src="cachedIcon" alt="">
{{ name }}
</a>
<button v-else>
<img :src="cachedIcon" alt="">
{{ name }}
</button>
</li>
<NcListItem :id="href ? undefined : id"
:anchor-id="id"
:active="active"
class="account-menu-entry"
compact
:href="href"
:name="name"
target="_self">
<template #icon>
<img class="account-menu-entry__icon"
:class="{ 'account-menu-entry__icon--active': active }"
:src="iconSource"
alt="">
</template>
<template v-if="loading" #indicator>
<NcLoadingIcon />
</template>
</NcListItem>
</template>

<script>
import { loadState } from '@nextcloud/initial-state'

import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'

const versionHash = loadState('core', 'versionHash', '')

export default {
name: 'UserMenuEntry',
name: 'AccountMenuEntry',

components: {
NcListItem,
NcLoadingIcon,
},

Expand Down Expand Up @@ -67,7 +70,7 @@ export default {
},

computed: {
cachedIcon() {
iconSource() {
return `${this.icon}?v=${versionHash}`
},
},
Expand All @@ -81,9 +84,20 @@ export default {
</script>

<style lang="scss" scoped>
.menu-entry {
&__loading-icon {
margin-right: 8px;
.account-menu-entry {
&__icon {
height: 16px;
width: 16px;
margin: calc((var(--default-clickable-area) - 16px) / 2); // 16px icon size
filter: var(--background-invert-if-dark);

&--active {
filter: var(--primary-invert-if-dark);
}
}

:deep(.list-item-content__main) {
width: fit-content;
}
}
</style>
85 changes: 31 additions & 54 deletions ...ponents/UserMenu/ProfileUserMenuEntry.vue → ...s/AccountMenu/AccountMenuProfileEntry.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,38 @@
-->

<template>
<li :id="id"
class="menu-entry">
<component :is="profileEnabled ? 'a' : 'span'"
class="menu-entry__wrapper"
:class="{
active,
'menu-entry__wrapper--link': profileEnabled,
}"
:href="profileEnabled ? href : undefined"
@click.exact="handleClick">
<span class="menu-entry__content">
<span class="menu-entry__displayname">{{ displayName }}</span>
<NcLoadingIcon v-if="loading" :size="18" />
</span>
<span v-if="profileEnabled">{{ name }}</span>
</component>
</li>
<NcListItem :id="profileEnabled ? undefined : id"
:anchor-id="id"
:active="active"
compact
:href="profileEnabled ? href : undefined"
:name="displayName"
target="_self">
<template v-if="profileEnabled" #subname>
{{ name }}
</template>
<template v-if="loading" #indicator>
<NcLoadingIcon />
</template>
</NcListItem>
</template>

<script>
<script lang="ts">
import { loadState } from '@nextcloud/initial-state'
import { getCurrentUser } from '@nextcloud/auth'
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
import { defineComponent } from 'vue'

import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'

const { profileEnabled } = loadState('user_status', 'profileEnabled', false)
const { profileEnabled } = loadState('user_status', 'profileEnabled', { profileEnabled: false })

export default {
name: 'ProfileUserMenuEntry',
export default defineComponent({
name: 'AccountMenuProfileEntry',

components: {
NcListItem,
NcLoadingIcon,
},

Expand All @@ -58,10 +58,15 @@ export default {
},
},

data() {
setup() {
return {
profileEnabled,
displayName: getCurrentUser().displayName,
displayName: getCurrentUser()!.displayName,
}
},

data() {
return {
loading: false,
}
},
Expand All @@ -83,41 +88,13 @@ export default {
}
},

handleProfileEnabledUpdate(profileEnabled) {
handleProfileEnabledUpdate(profileEnabled: boolean) {
this.profileEnabled = profileEnabled
},

handleDisplayNameUpdate(displayName) {
handleDisplayNameUpdate(displayName: string) {
this.displayName = displayName
},
},
}
})
</script>

<style lang="scss" scoped>
.menu-entry {
&__wrapper {
box-sizing: border-box;
display: inline-flex;
flex-direction: column;
align-items: flex-start !important;
padding: 10px 12px 5px 12px !important;
height: var(--header-menu-item-height);
color: var(--color-text-maxcontrast);

&--link {
height: calc(var(--header-menu-item-height) * 1.5) !important;
color: var(--color-main-text);
}
}

&__content {
display: inline-flex;
gap: 0 10px;
}

&__displayname {
font-weight: bold;
}
}
</style>
4 changes: 2 additions & 2 deletions core/src/components/UserMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@

import Vue from 'vue'

import UserMenu from '../views/UserMenu.vue'
import AccountMenu from '../views/AccountMenu.vue'

export const setUp = () => {
const mountPoint = document.getElementById('user-menu')
if (mountPoint) {
// eslint-disable-next-line no-new
new Vue({
el: mountPoint,
render: h => h(UserMenu),
render: h => h(AccountMenu),
})
}
}
Loading

0 comments on commit f1cc819

Please sign in to comment.