Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve room leader #7578

Merged
merged 2 commits into from
Jul 27, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions packages/rocketchat-authorization/client/usersNameChanged.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/* globals RoomRoles */
Meteor.startup(function() {
RocketChat.Notifications.onLogged('Users:NameChanged', function({_id, name}) {
RoomRoles.update({
'u._id': _id
}, {
$set: {
'u.name': name
}
}, {
multi: true
});
});
});
1 change: 1 addition & 0 deletions packages/rocketchat-authorization/package.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ Package.onUse(function(api) {
api.addFiles('client/requiresPermission.html', ['client']);

api.addFiles('client/route.js', ['client']);
api.addFiles('client/usersNameChanged.js', ['client']);

// views
api.addFiles('client/views/permissions.html', ['client']);
Expand Down
1 change: 1 addition & 0 deletions packages/rocketchat-i18n/i18n/en.i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,6 +316,7 @@
"Chat_button": "Chat button",
"Chat_closed": "Chat closed",
"Chat_closed_successfully": "Chat closed successfully",
"Chat_Now": "Chat Now",
"Chat_window": "Chat window",
"Chatops_Enabled": "Enable Chatops",
"Chatops_Title": "Chatops Panel",
Expand Down
15 changes: 13 additions & 2 deletions packages/rocketchat-lib/server/methods/getRoomRoles.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
Meteor.methods({
getRoomRoles(rid) {

check(rid, String);

if (!Meteor.userId() && RocketChat.settings.get('Accounts_AllowAnonymousRead') === false) {
Expand All @@ -20,7 +19,19 @@ Meteor.methods({
}
};

const UI_Use_Real_Name = RocketChat.settings.get('UI_Use_Real_Name') === true;

const roles = RocketChat.models.Roles.find({ scope: 'Subscriptions', description: { $exists: 1, $ne: '' } }).fetch();
return RocketChat.models.Subscriptions.findByRoomIdAndRoles(rid, _.pluck(roles, '_id'), options).fetch();
const subscriptions = RocketChat.models.Subscriptions.findByRoomIdAndRoles(rid, _.pluck(roles, '_id'), options).fetch();

if (!UI_Use_Real_Name) {
return subscriptions;
} else {
return subscriptions.map(subscription => {
const user = RocketChat.models.Users.findOneById(subscription.u._id);
subscription.u.name = user && user.name;
return subscription;
});
}
}
});
76 changes: 34 additions & 42 deletions packages/rocketchat-theme/client/imports/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -2606,6 +2606,12 @@ label.required::after {
&.selectable .message {
cursor: pointer;
}

&.has-leader {
& .wrapper {
padding-top: 57px;
}
}
}

.ticks-bar {
Expand Down Expand Up @@ -4970,52 +4976,38 @@ a + br.only-after-a {
color: #555555;
}

.room-leader-container {
height: 54px;
}

.room-leader {
position: fixed;
top: 60px;
left: 0;
z-index: 1;
background: #ffffff;
width: calc(100% - 40px);
color: #555555;
border-bottom: solid 1px #eaeaea;
height: 54px;
}

.room-leader .thumb {
top: 6px;
}

.room-leader .right {
position: absolute;
top: 10px;
left: 70px;
}
height: 57px;
left: 0;
right: 0;
z-index: 2;
border-bottom: 1px solid;
padding-bottom: 8px;
transition: transform 0.15s cubic-bezier(0.5, 0, 0.1, 1), visibility 0.15s cubic-bezier(0.5, 0, 0.1, 1);
visibility: visible;

.leader-status .status-text {
text-transform: capitalize;
padding-left: 15px;
font-size: 14px;
}
&.animated-hidden {
transform: translateY(-100%);
visibility: hidden;
}

.leader-status .color-ball {
width: 10px;
height: 10px;
position: absolute;
border-radius: 5px;
margin-top: 5px;
background: grey;
}
& .leader-name {
font-size: 18px;
}

.leader-status .color-ball.online {
background: green;
}
& .leader-status {
& .status-text {
padding-left: 15px;
font-size: 14px;
}

.leader-info .leader-name {
font-size: 18px;
& .color-ball {
width: 10px;
height: 10px;
position: absolute;
border-radius: 5px;
margin-top: 5px;
}
}
}

16 changes: 16 additions & 0 deletions packages/rocketchat-theme/server/colors.less
Original file line number Diff line number Diff line change
Expand Up @@ -762,6 +762,10 @@ i.status-online {
color: @status-online;
}

.status-bg-online {
background-color: @status-online;
}

.account-box .status-online .thumb::after,
.account-box .status.online::after,
.popup-user-status-online,
Expand All @@ -780,6 +784,10 @@ i.status-away {
color: @status-away;
}

.status-bg-away {
background-color: @status-away;
}

.account-box .status-away .thumb::after,
.account-box .status.away::after,
.popup-user-status-away,
Expand All @@ -793,6 +801,10 @@ i.status-busy {
color: @status-busy;
}

.status-bg-busy {
background-color: @status-busy;
}

.account-box .status-busy .thumb::after,
.account-box .status.busy::after,
.popup-user-status-busy,
Expand All @@ -806,6 +818,10 @@ i.status-offline {
color: @status-offline;
}

.status-bg-offline {
background-color: @status-offline;
}

.popup-user-status-offline,
.status-offline::after,
.user-image.status-offline .avatar::after {
Expand Down
33 changes: 14 additions & 19 deletions packages/rocketchat-ui/client/views/app/room.html
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ <h2>
</div>
{{/each}}
</div>
<div class="messages-box {{#if selectable}}selectable{{/if}} {{viewMode}}">
<div class="messages-box {{#if selectable}}selectable{{/if}} {{viewMode}} {{hasLeader}}">
<div class="ticks-bar"></div>
<button class="new-message background-primary-action-color color-content-background-color not">
<i class="icon-down-big"></i>
Expand All @@ -109,26 +109,21 @@ <h2>
</div>
</div>
{{/unless}}
{{#with roomLeader}}
<div class="room-leader message color-primary-font-color content-background-color border-component-color {{hideLeaderHeader}}">
<button class="thumb user-card-message">
{{> avatar username=username }}
</button>
<div class="leader-name">{{name}}</div>
<div class="leader-status userStatus">
<span class="color-ball status-bg-{{status}}"></span>
<span class="status-text leader-status-text">{{_ statusDisplay}}</span>
</div>
<a class="chat-now" href="{{chatNowLink}}">{{_ "Chat_Now"}}</a>
</div>
{{/with}}
<div class="wrapper {{#if hasMoreNext}}has-more-next{{/if}} {{hideUsername}} {{hideAvatar}}">
<ul aria-live="polite">
{{#if roomLeader}}
<li class="message room-leader-container">
<div class="room-leader">
<button class="thumb user-card-message">
<div class="avatar"><div class="avatar-image" style="background-image:url(/avatar/{{roomLeader.username}}?_dc=undefined);"></div></div></button>
<div class="right">
<div class="leader-info">
<div class="leader-name">{{roomLeader.name}}</div>
<div class="leader-status userStatus">
<span class="color-ball leader-status {{roomLeader.status}}"></span>
<span class="status-text leader-status-text">{{roomLeader.status}}</span>
</div>
</div>
</div>
<a class="chat-now" href="/direct/{{roomLeader.username}}">Chat Now</a>
</div>
</li>
{{/if}}
{{#if canPreview}}
{{#if hasMore}}
<li class="load-more">
Expand Down
50 changes: 31 additions & 19 deletions packages/rocketchat-ui/client/views/app/room.js
Original file line number Diff line number Diff line change
Expand Up @@ -114,15 +114,20 @@ Template.room.helpers({
},

roomLeader() {
const roles = RoomRoles.find({rid: this._id, roles: 'leader'}).fetch();
if (roles.length > 0) {
const u = roles[0].u;
if (u._id === Meteor.user()._id) { return null; }
const currUser = RocketChat.models.Users.find({ _id: u._id}).fetch();
u['status'] = currUser.length > 0 ? 'online' : 'offline';
return u;
const roles = RoomRoles.findOne({ rid: this._id, roles: 'leader', 'u._id': { $ne: Meteor.userId() } });
if (roles) {
const leader = RocketChat.models.Users.findOne({ _id: roles.u._id }, { fields: { status: 1 }}) || {};
return {
...roles.u,
name: RocketChat.settings.get('UI_Use_Real_Name') ? (roles.u.name || roles.u.username) : roles.u.username,
status: leader.status || 'offline',
statusDisplay: (status => status.charAt(0).toUpperCase() + status.slice(1))(leader.status || 'offline')
};
}
return null;
},

chatNowLink() {
return RocketChat.roomTypes.getRouteLink('d', { name: this.username });
},

roomName() {
Expand Down Expand Up @@ -272,6 +277,14 @@ Template.room.helpers({
};
});
return { buttons };
},
hideLeaderHeader() {
return Template.instance().hideLeaderHeader.get() ? 'animated-hidden' : '';
},
hasLeader() {
if (RoomRoles.findOne({ rid: this._id, roles: 'leader', 'u._id': { $ne: Meteor.userId() } }, { fields: { _id: 1 } })) {
return 'has-leader';
}
}
});

Expand All @@ -298,16 +311,6 @@ Template.room.events({
}
},

'scroll .messages-box .wrapper'() {
const $wrapper = $('.messages-box .wrapper');
if ($wrapper.scrollTop() < lastScrollTop) {
$('.room-leader').removeClass('hidden');
} else if ($wrapper.scrollTop() > $('.room-leader-container').height()) {
$('.room-leader').addClass('hidden');
}
lastScrollTop = $wrapper.scrollTop();
},

'touchstart .message'(e, t) {
const touches = e.originalEvent.touches;
if (touches && touches.length) {
Expand Down Expand Up @@ -493,7 +496,14 @@ Template.room.events({
}
},

'scroll .wrapper': _.throttle(function(e) {
'scroll .wrapper': _.throttle(function(e, t) {
if (e.target.scrollTop < lastScrollTop) {
t.hideLeaderHeader.set(false);
} else if (e.target.scrollTop > $('.room-leader').height()) {
t.hideLeaderHeader.set(true);
}
lastScrollTop = e.target.scrollTop;

if (RoomHistoryManager.isLoading(this._id) === false && RoomHistoryManager.hasMore(this._id) === true || RoomHistoryManager.hasMoreNext(this._id) === true) {
if (RoomHistoryManager.hasMore(this._id) === true && e.target.scrollTop === 0) {
return RoomHistoryManager.getMore(this._id);
Expand Down Expand Up @@ -683,6 +693,8 @@ Template.room.onCreated(function() {
this.tabBar = new RocketChatTabBar();
this.tabBar.showGroup(FlowRouter.current().route.name);

this.hideLeaderHeader = new ReactiveVar(false);

this.resetSelection = enabled => {
this.selectable.set(enabled);
$('.messages-box .message.selected').removeClass('selected');
Expand Down