mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Group online users into dropdown menu when more than 3
This commit is contained in:
parent
34c8f22dd7
commit
7446572ed9
3 changed files with 59 additions and 11 deletions
|
@ -57,15 +57,34 @@ header.toolbar.toolbar-header(ng-cloak, ng-hide="state.loading")
|
|||
ng-show="onlineUsersArray.length > 0"
|
||||
ng-controller="OnlineUsersController"
|
||||
)
|
||||
span.online-user(
|
||||
ng-repeat="user in onlineUsersArray",
|
||||
ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }",
|
||||
popover="{{ user.name }}"
|
||||
popover-placement="bottom"
|
||||
popover-append-to-body="true"
|
||||
popover-trigger="mouseenter"
|
||||
ng-click="gotoUser(user)"
|
||||
) {{ user.name.slice(0,1) }}
|
||||
span(ng-if="onlineUsersArray.length < 4")
|
||||
span.online-user(
|
||||
ng-repeat="user in onlineUsersArray",
|
||||
ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }",
|
||||
popover="{{ user.name }}"
|
||||
popover-placement="bottom"
|
||||
popover-append-to-body="true"
|
||||
popover-trigger="mouseenter"
|
||||
ng-click="gotoUser(user)"
|
||||
) {{ user.name.slice(0,1) }}
|
||||
|
||||
span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4")
|
||||
span.online-user.online-user-multi(
|
||||
dropdown-toggle,
|
||||
tooltip="#{translate('connected_users')}",
|
||||
tooltip-placement="left"
|
||||
)
|
||||
strong {{ onlineUsersArray.length }}
|
||||
i.fa.fa-fw.fa-user
|
||||
ul.dropdown-menu.pull-right
|
||||
li.dropdown-header #{translate('connected_users')}
|
||||
li(ng-repeat="user in onlineUsersArray")
|
||||
a(href, ng-click="gotoUser(user)")
|
||||
span.online-user(
|
||||
ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }"
|
||||
) {{ user.name.slice(0,1) }}
|
||||
| {{ user.name }}
|
||||
|
||||
|
||||
a.btn.btn-full-height(
|
||||
href,
|
||||
|
|
|
@ -56,7 +56,11 @@ define [
|
|||
user.doc = @ide.fileTreeManager.findEntityById(user.doc_id)
|
||||
|
||||
if user.name?.trim().length == 0
|
||||
user.name = user.email
|
||||
user.name = user.email.trim()
|
||||
|
||||
user.initial = user.name?[0]
|
||||
if !user.initial or user.initial == " "
|
||||
user.initial = "?"
|
||||
|
||||
@$scope.onlineUsersArray.push user
|
||||
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
@online-user-color: rgb(0, 170, 255);
|
||||
|
||||
.online-users {
|
||||
.online-user {
|
||||
background-color: rgb(0, 170, 255);
|
||||
background-color: @online-user-color;
|
||||
width: 24px;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
|
@ -11,4 +13,27 @@
|
|||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.online-user-multi {
|
||||
width: auto;
|
||||
min-width: 24px;
|
||||
padding-left: 8px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
a {
|
||||
// Override toolbar link styles
|
||||
display: block;
|
||||
padding: 4px 10px 5px;
|
||||
margin: 1px 2px;
|
||||
color: @text-color;
|
||||
&:hover, &:active {
|
||||
color: @text-color;
|
||||
background-color: @gray-lightest;
|
||||
text-shadow: none;
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue