Improve room leader

- Use i18n - Better leader user info handling - Better leader status handling - Reuse CSS for status colors - Use color classes - Animate show/hide header
RocketChat · Jul 27, 2017 · 41ada40 · 41ada40
1 parent c7604e2
commit 41ada40
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 80 deletions.
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -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",

diff --git a/packages/rocketchat-theme/client/imports/base.css b/packages/rocketchat-theme/client/imports/base.css
@@ -2606,6 +2606,12 @@ label.required::after {
 	&.selectable .message {
 		cursor: pointer;
 	}
+
+	&.has-leader {
+		& .wrapper {
+			padding-top: 57px;
+		}
+	}
 }
 
 .ticks-bar {
@@ -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;
+		}
+	}
 }
-
diff --git a/packages/rocketchat-theme/server/colors.less b/packages/rocketchat-theme/server/colors.less
@@ -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,
@@ -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,
@@ -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,
@@ -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 {

diff --git a/packages/rocketchat-ui/client/views/app/room.html b/packages/rocketchat-ui/client/views/app/room.html
@@ -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>
@@ -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">

diff --git a/packages/rocketchat-ui/client/views/app/room.js b/packages/rocketchat-ui/client/views/app/room.js
@@ -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: { name: 1, status: 1, username: 1 }}) || {};
+			return {
+				...roles.u,
+				name: leader.name || leader.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() {
@@ -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';
+		}
 	}
 });
 
@@ -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) {
@@ -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);
@@ -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');