Skip to content

Commit 3c07878

Browse files
ShGKmeShGKme
committed
refactor(title-bar): remove unneeded container for user menu
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
1 parent 9076ccb commit 3c07878

1 file changed

Lines changed: 116 additions & 121 deletions

File tree

‎src/talk/renderer/TitleBar/components/UserMenu.vue‎

Lines changed: 116 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ import type { UserStatusStatusType } from '../../UserStatus/userStatus.types.ts'
88
99
import { t } from '@nextcloud/l10n'
1010
import { generateUrl } from '@nextcloud/router'
11+
import { spawnDialog } from '@nextcloud/vue/functions/dialog'
1112
import { storeToRefs } from 'pinia'
12-
import { ref, useTemplateRef, watch } from 'vue'
13+
import { ref, watch } from 'vue'
1314
import NcAvatar from '@nextcloud/vue/components/NcAvatar'
1415
import NcPopover from '@nextcloud/vue/components/NcPopover'
1516
import NcUserStatusIcon from '@nextcloud/vue/components/NcUserStatusIcon'
@@ -39,8 +40,6 @@ const serverUrlShort = serverUrl.replace(/^https?:\/\//, '')
3940
const theming = appData.capabilities.theming
4041
4142
const isOpen = ref(false)
42-
const userMenuContainer = useTemplateRef('userMenuContainer')
43-
const isUserStatusDialogOpen = ref(false)
4443
const userStatusSubMenuOpen = ref(false)
4544
4645
// Close the submenu before opening the menu
@@ -64,143 +63,139 @@ function handleUserStatusChange(status: UserStatusStatusType) {
6463
userStatusStore.saveUserStatus({ ...userStatus.value!, status })
6564
userStatusSubMenuOpen.value = false
6665
}
66+
67+
/**
68+
* Open the user status dialog
69+
*/
70+
function openUserStatusDialog() {
71+
spawnDialog(UserStatusDialog)
72+
}
6773
</script>
6874

6975
<template>
70-
<div ref="userMenuContainer" class="user-menu">
71-
<NcPopover
72-
v-if="userMenuContainer"
73-
v-model:shown="isOpen"
74-
:container="userMenuContainer"
75-
:popperHideTriggers="(triggers: string[]) => [...triggers, 'click']"
76-
:triggers="[]"
77-
noAutoFocus>
78-
<template #trigger="{ attrs }">
79-
<div class="user-menu__trigger">
80-
<!-- Floating-Vue doesn't support open on span[role=button] - opening manually -->
81-
<NcAvatar
82-
class="user-menu__avatar"
83-
:user="user.id"
84-
:preloadedUserStatus="userStatus"
85-
:displayName="user['display-name']"
86-
:size="32"
87-
disableMenu
88-
disableTooltip
89-
v-bind="attrs"
90-
tabindex="0"
91-
role="button"
92-
@click="isOpen = !isOpen"
93-
@keydown.space="isOpen = !isOpen"
94-
@keydown.enter="isOpen = !isOpen" />
95-
</div>
96-
</template>
97-
98-
<template #default>
99-
<UiMenu aria-label="Settings menu" class="user-menu__menu">
100-
<template v-if="userStatusSubMenuOpen">
101-
<UiMenuItem tag="button" @click.stop="userStatusSubMenuOpen = false">
102-
<template #icon>
103-
<IconChevronLeft :size="20" />
104-
</template>
105-
{{ t('talk_desktop', 'Back') }}
106-
</UiMenuItem>
107-
<UiMenuItem
108-
v-for="status in availableUserStatusStatusTypes"
109-
:key="status"
110-
tag="button"
111-
@click.stop="handleUserStatusChange(status)">
76+
<NcPopover
77+
v-model:shown="isOpen"
78+
:popperHideTriggers="(triggers: string[]) => [...triggers, 'click']"
79+
:triggers="[]"
80+
noAutoFocus>
81+
<template #trigger="{ attrs }">
82+
<div class="user-menu__trigger">
83+
<!-- Floating-Vue doesn't support open on span[role=button] - opening manually -->
84+
<NcAvatar
85+
class="user-menu__avatar"
86+
:user="user.id"
87+
:preloadedUserStatus="userStatus"
88+
:displayName="user['display-name']"
89+
:size="32"
90+
disableMenu
91+
disableTooltip
92+
v-bind="attrs"
93+
tabindex="0"
94+
role="button"
95+
@click="isOpen = !isOpen"
96+
@keydown.space="isOpen = !isOpen"
97+
@keydown.enter="isOpen = !isOpen" />
98+
</div>
99+
</template>
100+
101+
<template #default>
102+
<UiMenu aria-label="Settings menu" class="user-menu__menu">
103+
<template v-if="userStatusSubMenuOpen">
104+
<UiMenuItem tag="button" @click.stop="userStatusSubMenuOpen = false">
105+
<template #icon>
106+
<IconChevronLeft :size="20" />
107+
</template>
108+
{{ t('talk_desktop', 'Back') }}
109+
</UiMenuItem>
110+
<UiMenuItem
111+
v-for="status in availableUserStatusStatusTypes"
112+
:key="status"
113+
tag="button"
114+
@click.stop="handleUserStatusChange(status)">
115+
<template #icon>
116+
<NcUserStatusIcon :status="status" />
117+
</template>
118+
{{ userStatusTranslations[status] }}
119+
<!-- @vue-expect-error This menu can only be open from a button with v-if="userStatus", but in Vue 2 we cannot add type assertion -->
120+
<template v-if="status === userStatus.status" #actionIcon>
121+
<IconCheck :size="20" />
122+
</template>
123+
</UiMenuItem>
124+
</template>
125+
126+
<template v-else>
127+
<UiMenuItem
128+
tag="a"
129+
:href="userProfileLink"
130+
target="_blank">
131+
<strong>{{ user['display-name'] }}</strong>
132+
<div>
133+
{{ t('talk_desktop', 'View profile') }}
134+
</div>
135+
</UiMenuItem>
136+
137+
<UiMenuSeparator />
138+
139+
<UiMenuItem tag="a" :href="serverUrl" target="_blank">
140+
<template #icon>
141+
<ThemeLogo :size="24" />
142+
</template>
143+
<span class="user-menu__server">
144+
<span>{{ theming.name }}</span>
145+
<em>{{ serverUrlShort }}</em>
146+
</span>
147+
</UiMenuItem>
148+
149+
<UiMenuSeparator />
150+
151+
<template v-if="userStatus">
152+
<UiMenuItem tag="button" @click.stop="userStatusSubMenuOpen = true">
112153
<template #icon>
113-
<NcUserStatusIcon :status="status" />
154+
<NcUserStatusIcon :status="userStatus.status" />
114155
</template>
115-
{{ userStatusTranslations[status] }}
116-
<!-- @vue-expect-error This menu can only be open from a button with v-if="userStatus", but in Vue 2 we cannot add type assertion -->
117-
<template v-if="status === userStatus.status" #actionIcon>
118-
<IconCheck :size="20" />
156+
{{ userStatusTranslations[userStatus.status] }}
157+
<template #actionIcon>
158+
<IconChevronRight :size="20" />
119159
</template>
120160
</UiMenuItem>
121-
</template>
122-
123-
<template v-else>
124-
<UiMenuItem
125-
tag="a"
126-
:href="userProfileLink"
127-
target="_blank">
128-
<strong>{{ user['display-name'] }}</strong>
129-
<div>
130-
{{ t('talk_desktop', 'View profile') }}
131-
</div>
132-
</UiMenuItem>
133-
134-
<UiMenuSeparator />
135-
136-
<UiMenuItem tag="a" :href="serverUrl" target="_blank">
161+
<UiMenuItem key="custom-status" tag="button" @click="openUserStatusDialog">
137162
<template #icon>
138-
<ThemeLogo :size="24" />
163+
<span v-if="userStatus.icon" style="font-size: 20px">
164+
{{ userStatus.icon }}
165+
</span>
166+
<IconEmoticonOutline v-else :size="20" />
167+
</template>
168+
{{ userStatus.message || t('talk_desktop', 'Set custom status') }}
169+
<template v-if="userStatus.message" #actionIcon>
170+
<IconPencilOutline :size="20" />
139171
</template>
140-
<span class="user-menu__server">
141-
<span>{{ theming.name }}</span>
142-
<em>{{ serverUrlShort }}</em>
143-
</span>
144172
</UiMenuItem>
145173

146174
<UiMenuSeparator />
175+
</template>
147176

148-
<template v-if="userStatus">
149-
<UiMenuItem tag="button" @click.stop="userStatusSubMenuOpen = true">
150-
<template #icon>
151-
<NcUserStatusIcon :status="userStatus.status" />
152-
</template>
153-
{{ userStatusTranslations[userStatus.status] }}
154-
<template #actionIcon>
155-
<IconChevronRight :size="20" />
156-
</template>
157-
</UiMenuItem>
158-
<UiMenuItem key="custom-status" tag="button" @click="isUserStatusDialogOpen = true">
159-
<template #icon>
160-
<span v-if="userStatus.icon" style="font-size: 20px">
161-
{{ userStatus.icon }}
162-
</span>
163-
<IconEmoticonOutline v-else :size="20" />
164-
</template>
165-
{{ userStatus.message || t('talk_desktop', 'Set custom status') }}
166-
<template v-if="userStatus.message" #actionIcon>
167-
<IconPencilOutline :size="20" />
168-
</template>
169-
</UiMenuItem>
170-
171-
<UiMenuSeparator />
177+
<UiMenuItem tag="button" @click="logout">
178+
<template #icon>
179+
<IconLogout :size="20" />
172180
</template>
181+
{{ t('talk_desktop', 'Log out') }}
182+
</UiMenuItem>
173183

174-
<UiMenuItem tag="button" @click="logout">
175-
<template #icon>
176-
<IconLogout :size="20" />
177-
</template>
178-
{{ t('talk_desktop', 'Log out') }}
179-
</UiMenuItem>
180-
181-
<UiMenuSeparator />
184+
<UiMenuSeparator />
182185

183-
<UiMenuItem tag="button" @click="quit">
184-
<template #icon>
185-
<IconPower :size="20" />
186-
</template>
187-
{{ t('talk_desktop', 'Quit') }}
188-
</UiMenuItem>
189-
</template>
190-
</UiMenu>
191-
</template>
192-
</NcPopover>
193-
194-
<UserStatusDialog v-if="isUserStatusDialogOpen" @close="isUserStatusDialogOpen = false" />
195-
</div>
186+
<UiMenuItem tag="button" @click="quit">
187+
<template #icon>
188+
<IconPower :size="20" />
189+
</template>
190+
{{ t('talk_desktop', 'Quit') }}
191+
</UiMenuItem>
192+
</template>
193+
</UiMenu>
194+
</template>
195+
</NcPopover>
196196
</template>
197197

198198
<style scoped>
199-
200-
.user-menu :deep(.v-popper--theme-dropdown.v-popper__popper .v-popper__inner) {
201-
border-radius: var(--border-radius-large);
202-
}
203-
204199
.user-menu__trigger {
205200
display: flex;
206201
align-items: center;

0 commit comments

Comments
 (0)