Port user menu to Vue

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

2 files changed, 117 insertions, 34 deletions

diff --git a/core/src/components/UserMenu.js b/core/src/components/UserMenu.js
index f82a303d1fd..e165e784422 100644
--- a/core/src/components/UserMenu.js
+++ b/core/src/components/UserMenu.js
@@ -2,6 +2,7 @@
  * @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
  *
  * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ * @author Christopher Ng <chrng8@gmail.com>
  *
  * @license AGPL-3.0-or-later
  *
@@ -20,41 +21,17 @@
  *
  */
 
-import OC from '../OC'
+import Vue from 'vue'
 
-import $ from 'jquery'
+import UserMenu from '../views/UserMenu.vue'
 
 export const setUp = () => {
-	const $menu = $('#header #settings')
-	// Using page terminoogy as below
-	const $excludedPageClasses = [
-		'user-status-menu-item__header',
-	]
-
-	// show loading feedback
-	$menu.delegate('a', 'click', event => {
-		let $page = $(event.target)
-		if (!$page.is('a')) {
-			$page = $page.closest('a')
-		}
-		if (event.which === 1 && !event.ctrlKey && !event.metaKey) {
-			if (!$excludedPageClasses.includes($page.attr('class'))) {
-				$page.find('img').remove()
-				$page.find('div').remove() // prevent odd double-clicks
-				$page.prepend($('<div></div>').addClass('icon-loading-small'))
-			}
-		} else {
-			// Close navigation when opening menu entry in
-			// a new tab
-			OC.hideMenus(() => false)
-		}
-	})
-
-	$menu.delegate('a', 'mouseup', event => {
-		if (event.which === 2) {
-			// Close navigation when opening app in
-			// a new tab via middle click
-			OC.hideMenus(() => false)
-		}
-	})
+	const mountPoint = document.getElementById('user-menu')
+	if (mountPoint) {
+		// eslint-disable-next-line no-new
+		new Vue({
+			el: mountPoint,
+			render: h => h(UserMenu),
+		})
+	}
 }
diff --git a/core/src/components/UserMenu/UserMenuEntry.vue b/core/src/components/UserMenu/UserMenuEntry.vue
new file mode 100644
index 00000000000..43f65fa9fdb
--- /dev/null
+++ b/core/src/components/UserMenu/UserMenuEntry.vue
@@ -0,0 +1,106 @@
+<!--
+  - @copyright 2023 Christopher Ng <chrng8@gmail.com>
+  -
+  - @author Christopher Ng <chrng8@gmail.com>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+-->
+
+<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>
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
+const versionHash = loadState('core', 'versionHash', '')
+
+export default {
+	name: 'UserMenuEntry',
+
+	components: {
+		NcLoadingIcon,
+	},
+
+	props: {
+		id: {
+			type: String,
+			required: true,
+		},
+		name: {
+			type: String,
+			required: true,
+		},
+		href: {
+			type: String,
+			required: true,
+		},
+		active: {
+			type: Boolean,
+			required: true,
+		},
+		icon: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			loading: false,
+		}
+	},
+
+	computed: {
+		cachedIcon() {
+			return `${this.icon}?v=${versionHash}`
+		},
+	},
+
+	methods: {
+		handleClick() {
+			this.loading = true
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.menu-entry {
+	&__loading-icon {
+		margin-right: 8px;
+	}
+}
+</style>