User info tab bar improvements (#2893)

* New user info animation * Better room's members list show/hide control * Remove all references to showUserInfo Session variable * Spread the new role for the user * New UI for user profile. Also unified view from room and admin
RocketChat · Apr 14, 2016 · f163c7a · f163c7a
1 parent 1767003
commit f163c7a
Show file tree

Hide file tree

Showing 21 changed files with 407 additions and 327 deletions.
diff --git a/client/routes/adminRouter.coffee b/client/routes/adminRouter.coffee
@@ -1,10 +1,6 @@
 FlowRouter.route '/admin/users',
 	name: 'admin-users'
-	triggersExit: [ ->
-		Session.set 'showUserInfo'
-	]
 	action: ->
-		Session.set 'showUserInfo'
 		RocketChat.TabBar.showGroup 'adminusers'
 		BlazeLayout.render 'main', {center: 'adminUsers'}
 

diff --git a/client/startup/defaultRoomTypes.coffee b/client/startup/defaultRoomTypes.coffee
@@ -9,7 +9,6 @@ RocketChat.roomTypes.add 'c', 10,
 		name: 'channel'
 		path: '/channel/:name'
 		action: (params, queryParams) ->
-			Session.set 'showUserInfo'
 			openRoom 'c', params.name
 			RocketChat.TabBar.showGroup 'channel'
 		link: (sub) ->
@@ -24,7 +23,6 @@ RocketChat.roomTypes.add 'd', 20,
 		name: 'direct'
 		path: '/direct/:username'
 		action: (params, queryParams) ->
-			Session.set 'showUserInfo', params.username
 			openRoom 'd', params.username
 			RocketChat.TabBar.showGroup 'directmessage'
 		link: (sub) ->
@@ -39,7 +37,6 @@ RocketChat.roomTypes.add 'p', 30,
 		name: 'group'
 		path: '/group/:name'
 		action: (params, queryParams) ->
-			Session.set 'showUserInfo'
 			openRoom 'p', params.name
 			RocketChat.TabBar.showGroup 'privategroup'
 		link: (sub) ->

diff --git a/packages/rocketchat-lib/server/methods/setAdminStatus.coffee b/packages/rocketchat-lib/server/methods/setAdminStatus.coffee
@@ -6,9 +6,9 @@ Meteor.methods
 		unless RocketChat.authz.hasPermission( Meteor.userId(), 'assign-admin-role') is true
 			throw new Meteor.Error 'not-authorized', '[methods] setAdminStatus -> Not authorized'
 
+		user = Meteor.users.findOne({ _id: userId }, { fields: { username: 1 } })
+
 		if admin
-			RocketChat.authz.addUserRoles( userId, 'admin')
+			return Meteor.call('authorization:addUserToRole', 'admin', user.username);
 		else
-			RocketChat.authz.removeUserFromRoles( userId, 'admin')
-
-		return true
+			return Meteor.call('authorization:removeUserFromRole', 'admin', user.username);
diff --git a/packages/rocketchat-livechat/client/ui.js b/packages/rocketchat-livechat/client/ui.js
@@ -7,7 +7,6 @@ RocketChat.roomTypes.add('l', 5, {
 		name: 'live',
 		path: '/live/:name',
 		action: (params/*, queryParams*/) => {
-			Session.set('showUserInfo');
 			openRoom('l', params.name);
 			RocketChat.TabBar.showGroup('livechat', 'search');
 		},

diff --git a/packages/rocketchat-slashcommands-kick/client.coffee b/packages/rocketchat-slashcommands-kick/client.coffee
@@ -3,9 +3,6 @@ RocketChat.slashCommands.add 'kick', (command, params, item) ->
 	if username is ''
 		return
 	username = username.replace('@', '')
-
-	if Session.get('showUserInfo') is username
-		Session.set('showUserInfo', null)
 ,
 	description: TAPi18n.__ 'Remove_someone_from_room'
 	params: '@username'
diff --git a/packages/rocketchat-theme/assets/stylesheets/base.less b/packages/rocketchat-theme/assets/stylesheets/base.less
@@ -2977,13 +2977,13 @@ body:not(.is-cordova) {
 }
 
 .list-view {
+	z-index: 10;
 	padding: 5px 30px 20px;
 	.list {
 		display: flex;
 		flex-flow: column nowrap;
 		position: relative;
 		width: 100%;
-		height: 100%;
 	}
 	> .status {
 		margin: 5px 0 15px;
@@ -3051,33 +3051,55 @@ body:not(.is-cordova) {
 }
 
 .user-view {
-	padding: 20px;
+	z-index: 15;
+	overflow-y: auto;
+	overflow-x: hidden;
 	.about {
 		width: 100%;
 		margin-bottom: 20px;
 	}
 	.thumb {
-		float: left;
-		width: 100px;
-		height: 100px;
+		width: 100%;
+		height: 200px;
+
+		.transition(height .4s ease);
+
+		cursor: zoom-in;
+		cursor: -moz-zoom-in;
+		cursor: -webkit-zoom-in;
+
+		&.bigger {
+			height: 350px;
+			cursor: zoom-out;
+			cursor: -moz-zoom-out;
+			cursor: -webkit-zoom-out;
+		}
+
+		.avatar {
+			border-radius: 0;
+
+			.avatar-image {
+				border-radius: 0;
+			}
+		}
 	}
 	nav {
 		margin-left: -4px;
+		padding: 0 20px;
 		.back {
 			float: right;
 		}
 	}
 	.info {
-		margin-left: 120px;
 		white-space: normal;
-		.calc(width, ~'100% - 120px');
+		padding: 0 20px;
 		h3 {
 			-webkit-user-select: text;
 			-moz-user-select: text;
 			-ms-user-select: text;
 			user-select: text;
 			font-size: 24px;
-			margin-bottom: 8px;
+			margin: 8px 0;
 			line-height: 27px;
 			text-overflow: ellipsis;
 			width: 100%;
@@ -3223,6 +3245,7 @@ body:not(.is-cordova) {
 		}
 	}
 	.edit-form {
+		padding: 20px 20px 0 20px;
 		white-space: normal;
 		h3 {
 			font-size: 24px;
@@ -4007,19 +4030,6 @@ body:not(.is-cordova) {
 }
 
 @media all and(max-width: 500px) {
-	.user-view {
-		.thumb {
-			width: 60px;
-			height: 60px;
-		}
-		.info {
-			margin-left: 75px;
-			.calc(width, ~'100% - 120px');
-			h3 {
-				font-size: 20px;
-			}
-		}
-	}
 	.messages-container {
 		.message-form {
 			> .formatting-tips {

diff --git a/packages/rocketchat-theme/assets/stylesheets/rtl.less b/packages/rocketchat-theme/assets/stylesheets/rtl.less
@@ -281,6 +281,7 @@
 	.flex-tab {
 		border-left: unset;
 		border-right: 1px solid;
+		border-right-color: @tertiary-background-color;
 		.left(0);
 		.transform(translateX(-100%));
 		.control {
@@ -380,18 +381,12 @@
 	}
 
 	.user-view {
-		.thumb {
-			float: right;
-		}
 		nav {
 			.margin-right(-4px);
 			.back {
 				float: left;
 			}
 		}
-		.info {
-			.margin-right(120px);
-		}
 		.stats {
 			li {
 				border-right: unset;

diff --git a/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less b/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
@@ -418,6 +418,7 @@ a.github-fork {
 	//background-color: @primary-background-color;
 	background-color: transparent;
 	color: @tertiary-font-color;
+
 	.custom-scroll(transparent, @custom-scrollbar-color);
 	header {
 		background-color: @primary-background-color;
@@ -884,10 +885,18 @@ a.github-fork {
 	}
 	.content {
 		.custom-scroll(transparent, #DADADA);
+
+		> div {
+			background-color: @secondary-background-color;
+		}
 	}
 }
 
 .list-view {
+	-webkit-overflow-scrolling: touch;
+	overflow-y: auto;
+	overflow-x: hidden;
+	.custom-scroll(transparent, #DADADA);
 	> .status {
 		p {
 			color: @secondary-font-color;
@@ -900,6 +909,8 @@ a.github-fork {
 }
 
 .user-view {
+	-webkit-overflow-scrolling: touch;
+	.custom-scroll(transparent, #DADADA);
 	.info {
 		h3 {
 			i.status-offline {

diff --git a/packages/rocketchat-ui-admin/admin/users/adminUserEdit.coffee b/packages/rocketchat-ui-admin/admin/users/adminUserEdit.coffee
@@ -17,16 +17,14 @@ Template.adminUserEdit.events
 		t.save()
 
 Template.adminUserEdit.onCreated ->
-	@user = this.data
+	@user = this.data.user
 
-	@cancel = =>
+	@cancel = (username) =>
 		if @user
-			RocketChat.TabBar.setTemplate 'adminUserInfo'
-			RocketChat.TabBar.setData @user
-			RocketChat.TabBar.showGroup 'adminusers-selected'
+			@data.back(username)
 		else
 			RocketChat.TabBar.closeFlex()
-			RocketChat.TabBar.showGroup 'adminusers'
+			@data.back(username)
 
 	@getUserData = =>
 		userData = { _id: @user?._id }
@@ -62,11 +60,8 @@ Template.adminUserEdit.onCreated ->
 						toastr.success t('User_updated_successfully')
 					else
 						toastr.success t('User_added_successfully')
-						@user = Meteor.users.findOne result
 
-					Meteor.subscribe 'fullUserData', userData.username, 1, =>
-						Session.set 'showUserInfo', @user._id
-						this.cancel()
+					@cancel(userData.username)
 
 				if error
 					toastr.error error.reason
diff --git a/packages/rocketchat-ui-admin/admin/users/adminUserInfo.coffee b/packages/rocketchat-ui-admin/admin/users/adminUserInfo.coffee