diff options
-rw-r--r-- | css/viewer/odfviewer.scss (renamed from css/viewer/odfviewer.css) | 28 | ||||
-rw-r--r-- | js/documents.js | 91 | ||||
-rw-r--r-- | templates/admin.php | 2 |
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;"> |