Improve current editor listing in Nextcloud header

Signed-off-by: Julius Härtl <jus@bitgrid.net>

3 files changed, 102 insertions, 19 deletions

diff --git a/css/viewer/odfviewer.css b/css/viewer/odfviewer.scss
index bc7f0435..ac6cb4c7 100644
--- a/css/viewer/odfviewer.css
+++ b/css/viewer/odfviewer.scss
@@ -44,7 +44,31 @@
   z-index:110;
 }
 
-.richdocuments-avatar {
+#editors-menu {
+  min-width: 200px;
+}
+
+#editors-menu ul li {
+  display: flex;
+  padding: 3px;
+
+  div.label {
+    padding: 6px;
+    flex-grow: 1;
+
+    .icon-play-next {
+      opacity: .5;
+      display: inline-block;
+      padding-left: 10px;
+      vertical-align: top;
+    }
+  }
+  .icon-close {
+    padding: 8px;
+  }
+}
+
+#richdocuments-avatars > .richdocuments-avatar {
   float: right;
   border-radius: 50%;
   margin: 8px;
@@ -52,7 +76,7 @@
   box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
   position: relative;
 }
-.richdocuments-avatar.read-only {
+#richdocuments-avatars > .richdocuments-avatar.read-only {
   opacity: 0.8;
 }
 
diff --git a/js/documents.js b/js/documents.js
index a8ca33ed..08c9bd46 100644
--- a/js/documents.js
+++ b/js/documents.js
@@ -117,6 +117,18 @@ $.widget('oc.documentOverlay', {
 	}
 });
 
+/**
+ * Type definitions for WOPI Post message objects
+ *
+ * @typedef {Object} View
+ * @property {Number} ViewId
+ * @property {string} UserName
+ * @property {string} UserId
+ * @property {Number} Color
+ * @property {Boolean} ReadOnly
+ * @property {Boolean} IsCurrentView
+ */
+
 // Polyfill for Number.isInteger
 // FIXME: Remove once Nextcloud 15 is the minimum required version
 // since es6-shim is shipped for that
@@ -176,42 +188,89 @@ var documentsMain = {
 			documentsMain.UI.mainTitle = parent.document.title;
 
 			//Add the avatar toolbar if possible
+			var avatarList = $('<div id="richdocuments-avatars">');
+			avatarList.on('click', function() {
+				parent.$('#editors-menu').toggle();
+			});
 			var headerRight = parent.$('#header .header-right');
-			headerRight.prepend($('<div id="richdocuments-avatars">'));
+			headerRight.prepend(avatarList);
+
 			this.addVersionSidebarEvents();
 		},
 
+		/**
+		 * @param {View} view
+		 * @private
+		 */
+		_userEntry: function(view) {
+			var entry = $('<li></li>');
+			entry.append(this._avatarForView(view));
+
+			var label = $('<div class="label"></div>');
+			label.text(view.UserName);
+			if (view.ReadOnly === '1') {
+				label.text(view.UserName + ' ' + t('richdocuments', '(read only)'));
+
+			}
+			label.click(function() {
+				documentsMain.WOPIPostMessage($('#loleafletframe')[0], 'Action_FollowUser', {ViewId: view.ViewId, Follow: true});
+			});
+			entry.append(label);
+
+			if (view.ReadOnly !== '1' && !view.IsCurrentView) {
+				var removeButton = $('<div class="icon-close" title="Remove user"/>');
+				removeButton.click(function() {
+					documentsMain.WOPIPostMessage($('#loleafletframe')[0], 'Action_RemoveView', {ViewId: view.ViewId});
+				});
+				entry.append(removeButton)
+			}
+			return entry;
+		},
+
+		_avatarForView: function(view) {
+			var avatarContainer = $('<div class="richdocuments-avatar"><div class="avatar" title="' + view.UserName + '" data-user="' + view.UserId + '"></div></div>');
+			var avatar = avatarContainer.find('.avatar');
+			if (view.ReadOnly === '1') {
+				avatarContainer.addClass('read-only');
+				$(avatar).attr('title', view.UserName + ' ' + t('richdocuments', '(read only)'));
+			} else {
+				$(avatar).attr('title', view.UserName);
+			}
+			$(avatar).avatar(view.UserId, 32);
+			if (parent.OC.currentUser !== null && view.UserId !== '') {
+				//$(avatar).contactsMenu(view.UserId, 0, avatarContainer);
+			}
+			return avatarContainer;
+		},
+
 		renderAvatars: function() {
 			var avatardiv = parent.$('#header .header-right #richdocuments-avatars');
 			avatardiv.empty();
+			var popover = $('<div id="editors-menu" class="menu"><ul></ul></div>');
+
 			var users = [];
 			// Add new avatars
+			var i = 0;
 			for (var viewId in this.views) {
+				/**
+				 * @type {View}
+				 */
 				var view = this.views[viewId];
+				view.UserName = view.UserName !== '' ? view.UserName : t('richdocuments', 'Guest');
+				popover.find('ul').append(this._userEntry(view))
+
 				if (view.UserId === parent.OC.currentUser) {
 					continue;
 				}
 				if (view.UserId !== "" && users.indexOf(view.UserId) > -1) {
 					continue;
 				}
-				var userName = view.UserName !== '' ? view.UserName : t('richdocuments', 'Guest');
 				users.push(view.UserId);
-				var avatarContainer = $('<div class="richdocuments-avatar"><div class="avatar" title="' + view.UserName + '" data-user="' + view.UserId + '"></div></div>');
-				var avatar = avatarContainer.find('.avatar');
-				avatardiv.append(avatarContainer);
-				if (view.ReadOnly === '1') {
-					avatarContainer.addClass('read-only');
-					$(avatar).attr('title', userName + ' ' + t('richdocuments', '(read only)'));
-				} else {
-					$(avatar).attr('title', userName);
-				}
-
-				$(avatar).avatar(view.UserId, 32);
-				if (parent.OC.currentUser !== null && view.UserId !== '') {
-					$(avatar).contactsMenu(view.UserId, 0, avatarContainer);
+				if (i++ < 3) {
+					avatardiv.append(this._avatarForView(view));
 				}
 			};
-			parent.$('.richdocuments-avatar .avatar').tooltip({placement: 'bottom', container: '#header'});
+			avatardiv.append(popover)
 		},
 
 		showViewer: function(fileId, title){
diff --git a/templates/admin.php b/templates/admin.php
index 98142e59..b006d967 100644
--- a/templates/admin.php
+++ b/templates/admin.php
@@ -12,7 +12,7 @@ script('files', 'jquery.fileupload');
 			title="<?php p($l->t('Open documentation'));?>"
 			href="https://nextcloud.github.io/richdocuments/app_settings"></a>
 	</h2>
-	
+
 	<br/>
 	<label for="wopi_url"><?php p($l->t('Collabora Online server')) ?></label>
 	<input type="text" name="wopi_url" id="wopi_url" value="<?php p($_['wopi_url'])?>" style="width: 300px; display: block;">