diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css index 1bb0547a5b958..7bbc02a0d23e6 100644 --- a/browser/css/toolbar.css +++ b/browser/css/toolbar.css @@ -22,7 +22,6 @@ } #toolbar-down *{ font-family: var(--cool-font); - max-height: 35px !important; } #tb_actionbar_item_LanguageStatus table table td:first-of-type{ min-width: max-content !important; @@ -306,10 +305,10 @@ td[id^='tb_editbar_item_sidebar']{ z-index: 1050; right: 4px; top: 0px; - width: 32px; height: 32px; background-color: transparent; - display: none; + display: flex !important; + align-items: center; } .main-nav:not(.hasnotebookbar) ~ #closebuttonwrapper { @@ -323,7 +322,7 @@ td[id^='tb_editbar_item_sidebar']{ } .main-nav:not(.hasnotebookbar) ~ #closebuttonwrapper #closebutton { - background: url('images/closedoc.svg') no-repeat center/24px !important; + background: url('images/closedoc.svg') no-repeat center/35px !important; } #closebutton:hover { @@ -1053,3 +1052,131 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */ .menu-entry-no-icon { padding-left: 42px; } + +#userListHeader { + position: fixed; + z-index: 1050; + height: 38px; + background-color: transparent; + display: flex !important; + right: 80px; + top: 5px; + align-items: center; +} + +#userListSummary { + display: flex; +} +#userListPopover { + display: none; + position: absolute; + padding: 12px 16px; + z-index: 1; + top: 40px; + left: -140px; + color: #222; + background-color: #fff; + border-radius: 3px; + filter: drop-shadow(0 1px 3px rgba(77, 77, 77, 0.5)); + min-width: 150px; + font-size: 15px; +} + +#userListHeader:hover #userListPopover { + display: block; +} + +.document-title { + justify-content: space-between; +} + +#user-avt { + width: 35px; + height: 35px; + border-radius: 100%; +} + +#userListPopover::after { + border: 10px solid transparent; + border-bottom-color: var(--color-main-background); + bottom: 100%; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + color: #f9f9f9; + right: 16px; +} + +.user-item-wrapper { + display: flex; + justify-content: flex-start; + align-items: center; + font-family: var(--loleaflet-font); + height: 32px; + padding: 6px 12px; + cursor: pointer; +} + +.user-item { + background-position: center; + background-size: cover; + background-repeat: no-repeat; + border-width: 2px; + border-style: solid; + width: 25px; + height: 25px; + border-radius: 100%; + margin-right: 5px; +} + +.user-top { + width: 32px; + height: 32px; + background-color: white; + border-radius: 100%; + margin-right: -10px; + background-size: cover; + background-repeat: no-repeat; + border-style: solid; + border-width: 2px; +} + +.follow-editor-checkbox { + margin-right: 16px; + margin-left: 7px; + border-radius: 1px; + height: 16px; + width: 16px; + box-shadow: none !important; + background-position: center; +} + +#follow-editor { + cursor: pointer; + font-family: var(--loleaflet-font); + padding: 6px 8px; +} + +.follow-editor-label::before { + border-radius: 1px; + height: 14px; + width: 14px; + box-shadow: none !important; + background-position: center; + content: ' '; + border: 1px solid #878787; +} + +@media only screen and (max-width: 600px) { + #userListSummary, + #userListHeader + { + display: none; + } +} + +#w2ui-overlay-actionbar { + top: 270px; +} diff --git a/browser/html/cool.html.m4 b/browser/html/cool.html.m4 index cadf4ec6d261a..c4e74b7511f45 100644 --- a/browser/html/cool.html.m4 +++ b/browser/html/cool.html.m4 @@ -202,6 +202,11 @@ m4_ifelse(MOBILEAPP,[true], +
+
+
+
+
diff --git a/browser/src/control/Control.UserList.js b/browser/src/control/Control.UserList.js index 4a75c4b5539ab..42220e0915dac 100644 --- a/browser/src/control/Control.UserList.js +++ b/browser/src/control/Control.UserList.js @@ -11,7 +11,8 @@ L.Control.UserList = L.Control.extend({ userLeftPopupMessage: '
' + _('%user has left') + '
', nUsers: undefined, oneUser: undefined, - noUser: undefined + noUser: undefined, + listUser: [] }, initialize: function () { @@ -84,8 +85,10 @@ L.Control.UserList = L.Control.extend({ var iconTd = L.DomUtil.create('td', 'usercolor', content); var nameTd = L.DomUtil.create('td', 'username cool-font', content); + this.options.listUser.push({viewId: viewId, userName: userName, extraInfo: extraInfo, color: color}); - if (extraInfo !== undefined && extraInfo.avatar !== undefined) { + if (extraInfo !== undefined && extraInfo.avatar !== undefined) { + this.options.listUser.push({viewId: viewId, userName: userName, extraInfo: extraInfo, color: color}); var img = L.DomUtil.create('img', 'avatar-img', iconTd); img.src = extraInfo.avatar; var altImg = L.LOUtil.getImageURL('user.svg'); @@ -101,6 +104,61 @@ L.Control.UserList = L.Control.extend({ return content; }, + findShowUser: function(id) { + var total = 0; + this.options.listUser.slice(-3).forEach(function(user) { + if (user.viewId == id) { + total += 1; + } + }); + + return total > 0; + }, + + renderUserAvatars: function() { + var self = this; + + this.options.listUser.forEach(function(user) { + if (!self.findShowUser(user.viewId)) { + $('#user-top-' + user.viewId).remove(); + } + }); + + this.options.listUser.slice(-3).forEach(function (user) { + if (!$('#user-top-' + user.viewId).length) { + $('#userListSummary').append('

'); + } + }); + this.options.listUser.forEach(function (user) { + var avatarElement = '

' + + user.userName +'
'; + if (!$('#user-' + user.viewId).length) { + $('#userListPopover').prepend(avatarElement); + } + }); + + self.renderFollowMainUserOption(); + }, + + renderFollowMainUserOption: function() { + if ($('#follow-editor').length == 0) { + $('#userListPopover').append('
' + _('Follow current editor') + '
'); + } + }, + + removeUserFromList: function(viewId) { + var index = null; + this.options.listUser.forEach(function(item, idx) { + if (item.viewId == viewId) { + index = idx; + } + }); + $('#user-top-' + viewId).remove(); + $('#user-' + viewId).remove(); + this.options.listUser.splice(index, 1); + this.renderUserAvatars(); + }, + updateUserListCount: function() { var actionbar = w2ui.actionbar; var userlistItem = actionbar && actionbar.get('userlist'); @@ -206,6 +264,7 @@ L.Control.UserList = L.Control.extend({ var newhtml = $(userlistItem.html).find('#userlist_table tbody').append(this.getUserItem(e.viewId, username, e.extraInfo, color)).parent().parent()[0].outerHTML; userlistItem.html = newhtml; this.updateUserListCount(); + this.renderUserAvatars(); } }, @@ -234,6 +293,7 @@ L.Control.UserList = L.Control.extend({ if (userlistItem !== null) { userlistItem.html = $(userlistItem.html).find('#user-' + e.viewId).remove().end()[0].outerHTML; this.updateUserListCount(); + this.removeUserFromList(e.viewId); } }, });