Merge pull request #683 from nextcloud/fix/separate-menu-and-user-menu

fix(app): improve user menu design

src/shared/globals/globals.js

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { ref } from 'vue'
+
 import { loadState } from '@nextcloud/initial-state'
 import { translate, translatePlural } from '@nextcloud/l10n'
 
@@ -108,6 +110,7 @@ const OCA = {
 			getDesktopMediaSource,
 			runWithAbsoluteWebroot,
 			enabledAbsoluteWebroot: false,
+			talkRouter: ref(null),
 		},
 	},
 }

src/talk/renderer/DesktopHeader.vue

@@ -17,6 +17,10 @@
 
 			<div class="spacer" />
 
+			<div class="header__item" data-theme-dark>
+				<MainMenu />
+			</div>
+
 			<div class="header__item">
 				<UserMenu :user="user" @logout="logout" />
 			</div>
@@ -25,6 +29,7 @@
 </template>
 
 <script>
+import MainMenu from './components/MainMenu.vue'
 import UserMenu from './components/UserMenu.vue'
 import { appData } from '../../app/AppData.js'
 import { useUserStatusStore } from './UserStatus/userStatus.store.js'
@@ -34,6 +39,7 @@ export default {
 	name: 'DesktopHeader',
 
 	components: {
+		MainMenu,
 		UserMenu,
 	},
 

src/talk/renderer/UserStatus/components/UserStatusForm.vue

@@ -115,7 +115,10 @@ const revertStatus = async () => {
 		</NcButton>
 
 		<div class="user-status-form__buttons">
-			<NcButton type="primary" :disabled="!isDirty" @click="save">
+			<NcButton type="primary"
+				wide
+				:disabled="!isDirty"
+				@click="save">
 				{{ t('talk_desktop', 'Set user status') }}
 			</NcButton>
 		</div>

src/talk/renderer/components/MainMenu.vue

@@ -0,0 +1,69 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+  -->
+
+<script setup>
+import { computed } from 'vue'
+
+import MdiReload from 'vue-material-design-icons/Reload.vue'
+import MdiWeb from 'vue-material-design-icons/Web.vue'
+import MdiBug from 'vue-material-design-icons/Bug.vue'
+import MdiInformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import MdiMenu from 'vue-material-design-icons/Menu.vue'
+
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+
+import { t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+
+const packageInfo = window.TALK_DESKTOP.packageInfo
+const talkRouter = window.OCA.Talk.Desktop.talkRouter
+const talkWebLink = computed(() => generateUrl(talkRouter.value?.currentRoute?.fullPath ?? ''))
+const showHelp = () => window.TALK_DESKTOP.showHelp()
+const reload = () => window.location.reload()
+</script>
+
+<template>
+	<NcActions :aria-label="t('talk_desktop', 'Menu')"
+		type="tertiary-no-background"
+		container="body">
+		<template #icon>
+			<MdiMenu :size="20" />
+		</template>
+
+		<NcActionLink :href="talkWebLink" target="_blank">
+			<template #icon>
+				<MdiWeb :size="20" />
+			</template>
+			{{ t('talk_desktop', 'Open in Web-Browser') }}
+		</NcActionLink>
+
+		<NcActionSeparator />
+
+		<NcActionButton @click="reload">
+			<template #icon>
+				<MdiReload :size="20" />
+			</template>
+			{{ t('talk_desktop', 'Force reload') }}
+		</NcActionButton>
+		<NcActionLink :href="packageInfo.bugs" target="_blank">
+			<template #icon>
+				<MdiBug />
+			</template>
+			{{ t('talk_desktop', 'Report a bug') }}
+		</NcActionLink>
+
+		<NcActionSeparator />
+
+		<NcActionButton @click="showHelp">
+			<template #icon>
+				<MdiInformationOutline :size="20" />
+			</template>
+			{{ t('talk_desktop', 'About') }}
+		</NcActionButton>
+	</NcActions>
+</template>

src/talk/renderer/components/ThemeLogo.vue

@@ -0,0 +1,49 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+  -->
+
+<script setup>
+import { computed } from 'vue'
+import { appData } from '../../../app/AppData.js'
+
+const props = defineProps({
+	size: {
+		type: Number,
+		default: 20,
+	},
+})
+
+const theming = appData.capabilities.theming
+const logoUrl = theming.logo
+const primaryColor = theming.color
+
+const cssVars = computed(() => ({
+	'--ThemeLogo-size': typeof props.size === 'number' ? `${props.size}px` : props.size,
+	'--ThemeLogo-background-color': primaryColor,
+}))
+</script>
+
+<template>
+	<span class="theme-logo" :style="cssVars">
+		<img class="theme-logo__img" :src="logoUrl" alt="">
+	</span>
+</template>
+
+<style scoped lang="scss">
+.theme-logo {
+	display: flex;
+	align-items: stretch;
+	justify-content: center;
+	aspect-ratio: 1 / 1;
+	border-radius: var(--border-radius);
+	width: var(--ThemeLogo-size);
+	height: var(--ThemeLogo-size);
+	background-color: var(--ThemeLogo-background-color);
+	padding: 15%;
+}
+
+.theme-logo__img {
+	max-width: 100%;
+}
+</style>

src/talk/renderer/components/UiMenuItem.vue

@@ -6,11 +6,16 @@
 <template>
 	<li class="menu-item">
 		<component :is="tag" class="menu-item__action unstyled-action" v-bind="$attrs">
-			<span v-if="$slots.icon" class="menu-item__icon">
-				<slot name="icon" />
-			</span>
-			<span class="menu-item__text">
-				<slot />
+			<span class="menu-item__action-content">
+				<span v-if="$slots.icon" class="menu-item__icon">
+					<slot name="icon" />
+				</span>
+				<span class="menu-item__text">
+					<slot />
+				</span>
+				<span v-if="$slots['action-icon']" class="menu-item__action-icon">
+					<slot name="action-icon" />
+				</span>
 			</span>
 		</component>
 	</li>
@@ -51,15 +56,14 @@ export default {
 .menu-item__action {
 	--menu-item-icon-size: 20px;
 	--menu-item-gap: calc((var(--default-clickable-area) - var(--menu-item-icon-size)) / 2);
-	display: flex;
-	align-items: center;
 	border: none;
 	border-radius: 6px; /* Same as NcActionButton */
+	display: block;
 	min-height: var(--default-clickable-area);
 	padding: .5em var(--menu-item-gap);
+	text-align: left;
 	font-weight: normal;
 	width: 100%;
-	gap: var(--menu-item-gap);
 	/* Override default global button styles */
 	margin: 0 !important;
 }
@@ -70,10 +74,20 @@ export default {
 	background-color: var(--color-background-hover);
 }
 
+.menu-item__action-content {
+	display: flex;
+	align-items: center;
+	gap: var(--menu-item-gap);
+}
+
 .menu-item__icon {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 20px
 }
+
+.menu-item__text {
+	flex: 1;
+}
 </style>

src/talk/renderer/components/UiMenuSeparator.vue

@@ -0,0 +1,15 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<li class="menu-item-separator" />
+</template>
+
+<style scoped lang="scss">
+.menu-item-separator {
+	border-top: 1px solid var(--color-border-dark);
+	margin: 2px 0;
+}
+</style>