Port user menu to Vue

Signed-off-by: Christopher Ng <chrng8@gmail.com>

Author: Pytal

apps/user_status/src/UserStatus.vue

@@ -26,7 +26,7 @@
 			<a v-if="!inline"
 				class="user-status-menu-item__header"
 				:href="profilePageLink"
-				@click="loadProfilePage">
+				@click.exact="loadProfilePage">
 				<div class="user-status-menu-item__header-content">
 					<div class="user-status-menu-item__header-content-displayname">{{ displayName }}</div>
 					<div v-if="!loadingProfilePage" class="user-status-menu-item__header-content-placeholder" />
@@ -234,11 +234,6 @@ export default {
 		align-items: flex-start !important;
 		color: var(--color-main-text) !important;
 
-		&:focus-visible {
-			padding: 6px 8px 1px 8px !important;
-			margin: 2px !important;
-		}
-
 		&:not([href]) {
 			height: var(--header-menu-item-height) !important;
 			color: var(--color-text-maxcontrast) !important;

apps/user_status/src/menu.js

@@ -24,42 +24,31 @@
 
 import Vue from 'vue'
 import { getRequestToken } from '@nextcloud/auth'
-import UserStatus from './UserStatus'
-import store from './store'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import { loadState } from '@nextcloud/initial-state'
+import { subscribe } from '@nextcloud/event-bus'
+
+import UserStatus from './UserStatus.vue'
+
+import store from './store/index.js'
 
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(getRequestToken())
 
 Vue.prototype.t = t
 Vue.prototype.$t = t
 
-const avatarDiv = document.getElementById('avatardiv-menu')
-const userStatusData = loadState('user_status', 'status')
-const propsData = {
-	preloadedUserStatus: {
-		message: userStatusData.message,
-		icon: userStatusData.icon,
-		status: userStatusData.status,
-	},
-	user: avatarDiv.dataset.user,
-	displayName: avatarDiv.dataset.displayname,
-	disableMenu: true,
-	disableTooltip: true,
+const mountMenu = () => {
+	const mountPoint = document.querySelector('li[data-id="user_status-menuitem"]')
+	if (mountPoint) {
+		// eslint-disable-next-line no-new
+		new Vue({
+			el: mountPoint,
+			render: h => h(UserStatus),
+			store,
+		})
+	}
 }
 
-const NcAvatarInMenu = Vue.extend(NcAvatar)
-new NcAvatarInMenu({ propsData }).$mount('#avatardiv-menu')
-
-// Register settings menu entry
-export default new Vue({
-	el: 'li[data-id="user_status-menuitem"]',
-	// eslint-disable-next-line vue/match-component-file-name
-	name: 'UserStatusRoot',
-	render: h => h(UserStatus),
-	store,
-})
+subscribe('core:user-menu:mounted', mountMenu)
 
 // Register dashboard status
 document.addEventListener('DOMContentLoaded', function() {

core/css/header.css

@@ -130,61 +130,6 @@
 			-webkit-overflow-scrolling: touch;
 			@include header-menu-height();
 		}
-
-		/* Use by the settings right menu */
-		&.settings-menu > ul {
-			padding: 4px;
-			display: flex;
-			flex-direction: column;
-			gap: 2px;
-			li {
-				a {
-					border-radius: 6px;
-					display: inline-flex;
-					align-items: center;
-					height: $header-menu-entry-height;
-					color: var(--color-main-text);
-					padding: 10px 12px;
-					box-sizing: border-box;
-					white-space: nowrap;
-					position: relative;
-					width: 100%;
-					&:hover,
-					&:focus {
-						background-color: var(--color-background-hover);
-					}
-					&:active,
-					&.active {
-						background-color: var(--color-primary-light);
-					}
-					&:focus-visible {
-						box-shadow: inset 0 0 0 2px var(--color-primary);
-						outline: none;
-					}
-					span {
-						display: inline-block;
-						padding-bottom: 0;
-						color: var(--color-main-text);
-						white-space: nowrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						max-width: 110px;
-					}
-					.icon-loading-small {
-						margin-right: 10px;
-						background-size: 16px 16px;
-					}
-					img,
-					svg {
-						opacity: .7;
-						margin-right: 10px;
-						height: 16px;
-						width: 16px;
-						filter: var(--background-invert-if-dark);
-					}
-				}
-			}
-		}
 	}
 	.logo {
 		display: inline-flex;
@@ -284,86 +229,6 @@
 	text-overflow: ellipsis;
 }
 
-/* USER MENU -----------------------------------------------------------------*/
-#settings {
-	display: inline-block;
-	height: 100%;
-	cursor: pointer;
-	flex: 0 0 auto;
-
-	/* User menu on the right */
-	#expand {
-		opacity: 1; /* override icon opacity */
-		margin-right: 12px;
-
-		&:hover,
-		&:focus,
-		&:active {
-			color: var(--color-primary-text);
-
-			#expandDisplayName,
-			.avatardiv{
-				border-radius: 50%;
-				border: 2px solid var(--color-primary-text);
-				margin: -2px;
-			}
-			.avatardiv{
-				background-color: var(--color-primary-text);
-			}
-			#expandDisplayName {
-				opacity: 1;
-			}
-		}
-
-		/* Profile picture in header */
-		.avatardiv {
-			cursor: pointer;
-			height: 32px;
-			width: 32px;
-
-			img {
-				opacity: 1;
-				cursor: pointer;
-			}
-			/* do not show display name when profile picture is present */
-			&.avatardiv-shown + #expandDisplayName {
-				display: none;
-			}
-		}
-
-		#expandDisplayName {
-			padding: 8px;
-			opacity: .6;
-			cursor: pointer;
-
-			/* full opacity for gear icon if active */
-			#body-settings & {
-				opacity: 1;
-			}
-		}
-
-		/* show triangle below user menu if active */
-		#body-settings &:before {
-			content: ' ';
-			height: 0;
-			width: 0;
-			position: absolute;
-			pointer-events: none;
-			bottom: 2px;
-			z-index: 100;
-			display: block;
-			width: 10px;
-			height: 5px;
-			border-radius: 3px;
-			background-color: var(--color-primary-text);
-		}
-	}
-
-	#expanddiv:after {
-		right: 22px;
-	}
-}
-
 /* Skip navigation links – show only on keyboard focus */
 #skip-actions {
 	position: absolute;
@@ -379,7 +244,6 @@
 	}
 }
 
-
 /* Empty content messages in the header e.g. notifications, contacts menu, … */
 header #emptycontent,
 header .emptycontent {