Merge pull request #737 from nextcloud/fix/minor-title-bar-adjustments

fix(UserMenu): minor visual issues

src/talk/renderer/assets/overrides.css

@@ -18,3 +18,13 @@ body {
 	margin-top: var(--header-height) !important;
 	border-radius: 0 !important;
 }
+
+/* Remove Nextcloud header specific focus-visible style */
+#header {
+	.button-vue,
+	[role=button] {
+		&:focus-visible::after {
+			content: none !important;
+		}
+	}
+}

src/talk/renderer/components/ThemeLogo.vue

@@ -9,7 +9,7 @@ import { appData } from '../../../app/AppData.js'
 
 const props = defineProps({
 	size: {
-		type: Number,
+		type: [Number, String],
 		default: 20,
 	},
 })
@@ -40,7 +40,7 @@ const cssVars = computed(() => ({
 	width: var(--ThemeLogo-size);
 	height: var(--ThemeLogo-size);
 	background-color: var(--ThemeLogo-background-color);
-	padding: 15%;
+	padding: 10%;
 }
 
 .theme-logo__img {

src/talk/renderer/components/UiMenuItem.vue

@@ -76,10 +76,11 @@ defineProps({
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 20px
+	width: 24px;
 }
 
 .menu-item__text {
 	flex: 1;
+	word-break: break-word;
 }
 </style>

src/talk/renderer/components/UserMenu.vue

@@ -4,7 +4,7 @@
 -->
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 
 import { translate as t } from '@nextcloud/l10n'
@@ -45,10 +45,18 @@ const serverUrl = appData.serverUrl
 const serverUrlShort = serverUrl.replace(/^https?:\/\//, '')
 const theming = appData.capabilities.theming
 
+const isOpen = ref(false)
 const userMenuContainer = ref(null)
 const isUserStatusDialogOpen = ref(false)
 const userStatusSubMenuOpen = ref(false)
 
+// Close the submenu before opening the menu
+watch(isOpen, () => {
+	if (isOpen.value) {
+		userStatusSubMenuOpen.value = false
+	}
+})
+
 const userProfileLink = computed(() => generateUrl('/u/{userid}', { userid: props.user.id }))
 
 /**
@@ -64,22 +72,30 @@ function handleUserStatusChange(status) {
 <template>
 	<div ref="userMenuContainer" class="user-menu">
 		<NcPopover v-if="userMenuContainer"
+			:shown.sync="isOpen"
 			:container="userMenuContainer"
 			:popper-hide-triggers="triggers => [...triggers, 'click']"
+			:triggers="[]"
 			no-auto-focus>
 			<template #trigger="{ attrs }">
-				<button class="user-menu__trigger unstyled-button" v-bind="attrs">
+				<div class="user-menu__trigger">
+					<!-- Floating-Vue doesn't support open on span[role=button] - opening manually -->
 					<NcAvatar class="user-menu__avatar"
 						:user="user.id"
 						:display-name="user['display-name']"
 						:size="32"
 						disable-tooltip
-						tabindex="0" />
-				</button>
+						v-bind="attrs"
+						tabindex="0"
+						role="button"
+						@click.native="isOpen = !isOpen"
+						@keydown.space.native="isOpen = !isOpen"
+						@keydown.enter.native="isOpen = !isOpen" />
+				</div>
 			</template>
 
 			<template #default>
-				<UiMenu aria-label="Settings menu">
+				<UiMenu aria-label="Settings menu" class="user-menu__menu">
 					<template v-if="userStatusSubMenuOpen">
 						<UiMenuItem tag="button" @click.native.stop="userStatusSubMenuOpen = false">
 							<template #icon>
@@ -167,35 +183,6 @@ function handleUserStatusChange(status) {
 </template>
 
 <style scoped>
-.unstyled-button {
-	cursor: pointer;
-}
-
-.unstyled-button,
-.unstyled-button:active,
-.unstyled-button:hover,
-.unstyled-button:focus {
-	background: unset;
-	border: none;
-	padding: 0;
-	margin: 0;
-}
-
-/*
-	NcPopover is a wrapper around Dropdown from floating-vue.
-  But any NcPopover component added to the web-pages globally changes default floating-vue styles.
-
-  - It is impossible to changes styles of inner block with NcPopover component (no props for that)
-  - It is impossible to use default Dropdown from floating-vue (styles are overrided globally)
-
-  So, let's re-override these styles...
-  Better options:
-  - Fix NcPopover
-  - Create a new Dropdown using renderless components from floating-vue
-*/
-.user-menu :deep(.v-popper--theme-dropdown.v-popper__popper) {
-	margin: -2px 5px 0 0;
-}
 
 .user-menu :deep(.v-popper--theme-dropdown.v-popper__popper .v-popper__inner) {
 	border-radius: var(--border-radius-large);
@@ -204,29 +191,28 @@ function handleUserStatusChange(status) {
 .user-menu__trigger {
 	display: flex;
 	align-items: center;
-	margin: 0 !important; /* Re-define server default styles */
 }
 
 .user-menu__avatar {
 	box-sizing: content-box;
 }
 
-.user-menu__server {
-	display: flex;
-	flex-direction: column;
+.user-menu__trigger:hover,
+.user-menu__trigger:active,
+.user-menu__trigger:focus,
+.user-menu__trigger:focus-visible {
+	.user-menu__avatar {
+		outline: 2px solid var(--color-main-text);
+		box-shadow: 0 0 0 4px var(--color-main-background);
+	}
 }
 
-.user-menu__trigger:hover .user-menu__avatar,
-.user-menu__trigger:active .user-menu__avatar,
-.user-menu__trigger:focus .user-menu__avatar {
-	border: 2px solid var(--color-primary-text)
+.user-menu__menu {
+	max-width: 300px;
 }
 
-.user-menu__wrapper {
-	/*margin: 0 4px;*/
-	padding: 8px;
-	/*background-color: var(--color-main-background);*/
-	/*border-radius: var(--border-radius-large);*/
-	/*box-shadow: 0 1px 5px var(--color-box-shadow);*/
+.user-menu__server {
+	display: flex;
+	flex-direction: column;
 }
 </style>