Focus trap contacts menu with NcHeaderMenu port

Signed-off-by: Christopher Ng <chrng8@gmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

Author: Pytal

core/css/server.css

@@ -893,160 +893,6 @@ span.ui-icon {
 	margin: 3px 7px 30px 0;
 }
 
-/* ---- CONTACTS MENU ---- */
-
-#contactsmenu {
-	.menutoggle {
-		cursor: pointer;
-		&:before {
-			background-size: 20px 20px;
-			background-repeat: no-repeat;
-			background-position-x: 3px;
-			background-position-y: 4px;
-			padding: 14px;
-			content: ' ';
-			// Force white
-			background-image: var(--original-icon-contacts-white);
-			filter: var(--background-image-invert-if-bright);
-		}
-
-		&:hover,
-		&:focus,
-		&:active {
-			opacity: 1 !important;
-		}
-	}
-
-	#contactsmenu-menu {
-		a {
-			padding: 2px;
-
-			&:focus-visible {
-				box-shadow: inset 0 0 0 2px var(--color-main-text) !important; // override rule in core/css/headers.scss #header a:focus-visible
-			}
-		}
-	}
-}
-
-#header .header-right > div#contactsmenu > .menu {
-	/* show 2.5 to 4.5 entries depending on the screen height */
-	height: calc(100vh - 50px * 3);
-	max-height: calc(50px * 6 + 2px);
-	min-height: calc(50px * 3.5);
-	width: 350px;
-
-	.emptycontent {
-		margin-top: 5vh !important;
-		margin-bottom: 2vh;
-		.icon-loading,
-		.icon-search {
-			display: inline-block;
-		}
-	}
-
-	.content {
-		/* fixed max height of the parent container without the search input */
-		height: calc(100vh - 50px * 3 - 50px);
-		max-height: calc(50px * 5);
-		min-height: calc(50px * 3.5 - 50px);
-		overflow-y: auto;
-
-		.footer {
-			text-align: center;
-
-			a {
-				display: block;
-				width: 100%;
-				padding: 12px 0;
-				opacity: .5;
-			}
-		}
-	}
-
-	.contact {
-		display: flex;
-		position: relative;
-		align-items: center;
-		padding: 3px 3px 3px 10px;
-
-		.avatar {
-			height: 32px;
-			width: 32px;
-			display: inline-block;
-		}
-
-		.body {
-			flex-grow: 1;
-			padding-left: 8px;
-
-			div {
-				position: relative;
-				width: 100%;
-			}
-
-			.full-name, .last-message {
-				/* TODO: don't use fixed width */
-				max-width: 204px;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-			.last-message, .email-address {
-				color: var(--color-text-maxcontrast);
-			}
-		}
-
-		.top-action, .second-action, .other-actions {
-			width: 16px;
-			height: 16px;
-			opacity: .5;
-			cursor: pointer;
-
-			&:not(button) {
-				padding: 14px;
-			}
-			img {
-				filter: var(--background-invert-if-dark);
-			}
-
-			&:hover,
-			&:active,
-			&:focus {
-				opacity: 1;
-			}
-		}
-
-		button.other-actions {
-			width: 44px;
-
-			&:focus {
-				border-color: transparent;
-				box-shadow: 0 0 0 2px var(--color-main-text);
-			}
-
-			&:focus-visible {
-				border-radius: var(--border-radius-pill);
-			}
-		}
-
-		/* actions menu */
-		.menu {
-			top: 47px;
-			margin-right: 13px;
-		}
-		.popovermenu::after {
-			right: 2px;
-		}
-	}
-}
-
-
-#contactsmenu-search {
-	width: calc(100% - 16px);
-	margin: 8px;
-	height: 34px;
-}
-
 /* ---- TOOLTIPS ---- */
 
 .extra-data {

core/css/server.css.map

@@ -32,7 +32,7 @@ describe('Contacts menu', function() {
 	 * @returns {Promise}
 	 */
 	function openMenu() {
-		return menu._toggleVisibility(true);
+		return menu.loadContacts();
 	}
 
 	beforeEach(function(done) {

core/css/styles.css

@@ -381,8 +381,7 @@ const ContactsMenuView = View.extend({
 
 /**
  * @param {Object} options
- * @param {jQuery} options.el
- * @param {jQuery} options.trigger
+ * @param {string} options.el
  * @class ContactsMenu
  * @memberOf OC
  */
@@ -391,12 +390,9 @@ const ContactsMenu = function(options) {
 }
 
 ContactsMenu.prototype = {
-	/** @type {jQuery} */
+	/** @type {string} */
 	$el: undefined,
 
-	/** @type {jQuery} */
-	_$trigger: undefined,
-
 	/** @type {ContactsMenuView} */
 	_view: undefined,
 
@@ -405,41 +401,19 @@ ContactsMenu.prototype = {
 
 	/**
 	 * @param {Object} options
-	 * @param {jQuery} options.el - the element to render the menu in
-	 * @param {jQuery} options.trigger - the element to click on to open the menu
+	 * @param {string} options.el - the selector of the element to render the menu in
 	 * @returns {undefined}
 	 */
 	initialize: function(options) {
-		this.$el = options.el
-		this._$trigger = options.trigger
+		this.$el = $(options.el)
 
 		this._view = new ContactsMenuView({
-			el: this.$el
+			el: this.$el,
 		})
+
 		this._view.on('search', function(searchTerm) {
-			this._loadContacts(searchTerm)
+			this.loadContacts(searchTerm)
 		}, this)
-
-		OC.registerMenu(this._$trigger, this.$el, function() {
-			this._toggleVisibility(true)
-		}.bind(this), true)
-		this.$el.on('beforeHide', function() {
-			this._toggleVisibility(false)
-		}.bind(this))
-	},
-
-	/**
-	 * @private
-	 * @param {boolean} show
-	 * @returns {Promise}
-	 */
-	_toggleVisibility: function(show) {
-		if (show) {
-			return this._loadContacts()
-		} else {
-			this.$el.html('')
-			return Promise.resolve()
-		}
 	},
 
 	/**
@@ -461,7 +435,7 @@ ContactsMenu.prototype = {
 	 * @param {string|undefined} searchTerm
 	 * @returns {undefined}
 	 */
-	_loadContacts: function(searchTerm) {
+	loadContacts: function(searchTerm) {
 		var self = this
 
 		if (!self._contactsPromise) {

core/css/styles.css.map

@@ -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>
  * @author John Molakvoæ <skjnldsv@protonmail.com>
  *
  * @license AGPL-3.0-or-later
@@ -21,16 +22,20 @@
  *
  */
 
-import $ from 'jquery'
-import OC from '../OC'
+import Vue from 'vue'
+
+import ContactsMenu from '../views/ContactsMenu.vue'
 
 /**
  * @todo move to contacts menu code https://github.com/orgs/nextcloud/projects/31#card-21213129
  */
 export const setUp = () => {
-	// eslint-disable-next-line no-new
-	new OC.ContactsMenu({
-		el: $('#contactsmenu .menu'),
-		trigger: $('#contactsmenu .menutoggle'),
-	})
+	const mountPoint = document.getElementById('contactsmenu')
+	if (mountPoint) {
+		// eslint-disable-next-line no-new
+		new Vue({
+			el: mountPoint,
+			render: h => h(ContactsMenu),
+		})
+	}
 }