Merge pull request #9196 from RocketChat/hotfix/room-icon

Fix: Rooms and users are using different avatar style
RocketChat · Dec 20, 2017 · 57fe089 · 57fe089
2 parents a783469 + 07ca35a
commit 57fe089
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 18 deletions.
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
@@ -29,6 +29,10 @@
 				margin: 0 auto;
 			}
 
+			&__room-type {
+				height: var(--sidebar-item-big-height);
+			}
+
 			&__user-thumb {
 				width: var(--sidebar-item-big-thumb-size);
 				height: var(--sidebar-item-big-thumb-size);
@@ -108,6 +112,18 @@
 	&__icon {
 		font-size: 1rem;
 		fill: currentColor;
+		display: flex;
+		align-items: center;
+	}
+
+	&__room-type {
+		left: 4px;
+		font-size: 1rem;
+		fill: currentColor;
+		display: flex;
+		align-items: center;
+		position: absolute;
+		height: var(--sidebar-item-height);
 	}
 
 	&__user-thumb {
@@ -119,7 +135,7 @@
 		position: absolute;
 
 		top: 50%;
-		left: 10px;
+		left: 8px;
 
 		width: var(--sidebar-item-user-status-size);
 		height: var(--sidebar-item-user-status-size);

diff --git a/packages/rocketchat-ui-account/client/avatar/avatar.js b/packages/rocketchat-ui-account/client/avatar/avatar.js
@@ -11,6 +11,11 @@ Template.avatar.helpers({
 				return;
 			}
 			Session.get(`avatar_random_${ username }`);
+
+			if (this.roomIcon) {
+				username = `@${ username }`;
+			}
+
 			url = getAvatarUrlFromUsername(username);
 		}
 		return `background-image:url(${ url });`;

diff --git a/packages/rocketchat-ui-sidenav/client/sidebarItem.html b/packages/rocketchat-ui-sidenav/client/sidebarItem.html
@@ -3,20 +3,17 @@
 		{{#if statusClass}}
 			<div class="sidebar-item__user-status sidebar-item__user-status--{{statusClass}}"></div>
 		{{/if}}
+		{{#if icon}}
+			<div class="{{#if isRoom}}sidebar-item__room-type{{else}}sidebar-item__icon{{/if}}">
+				{{> icon block="sidebar-item__icon" icon=icon}}
+			</div>
+		{{/if}}
 		<a class="sidebar-item__link" href="{{#if route}}{{route}}{{else}}{{pathFor pathSection group=pathGroup}}{{/if}}" title="{{name}}">
-			{{#if icon}}
-				<div class="sidebar-item__picture" style="{{#if isRoom}}{{colorStyle}}{{/if}}">
-					{{> icon block="sidebar-item__icon" icon=icon}}
+			<div class="sidebar-item__picture">
+				<div class="sidebar-item__user-thumb">
+					{{> avatar username=username roomIcon=icon}}
 				</div>
-			{{else}}
-				{{#if avatar}}
-					<div class="sidebar-item__picture">
-						<div class="sidebar-item__user-thumb">
-							{{> avatar username=username}}
-						</div>
-					</div>
-				{{/if}}
-			{{/if}}
+			</div>
 			<div class="sidebar-item__body">
 				<div class="sidebar-item__message">
 					<div class="sidebar-item__message-top">

diff --git a/server/startup/avatar.js b/server/startup/avatar.js
@@ -75,12 +75,8 @@ Meteor.startup(function() {
 					initials = username;
 				} else {
 					color = RocketChat.getAvatarColor(username);
-					username = username.replace(/[^A-Za-z0-9]/g, '.').replace(/\.+/g, '.').replace(/(^\.)|(\.$)/g, '');
 
-					const usernameParts = username.split('.');
-
-					initials = usernameParts.length > 1 ? _.first(usernameParts)[0] + _.last(usernameParts)[0] : username.replace(/[^A-Za-z0-9]/g, '').substr(0, 2);
-					initials = initials.toUpperCase();
+					initials = username.replace(/[^A-Za-z0-9]/g, '').substr(0, 1).toUpperCase();
 				}
 
 				const svg = `<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" pointer-events=\"none\" width=\"50\" height=\"50\">\n<rect height="50" width="50" fill=\"${ color }\"/>\n<text text-anchor=\"middle\" y=\"50%\" x=\"50%\" dy=\"0.36em\" pointer-events=\"auto\" fill=\"#ffffff\" font-family=\"Helvetica, Arial, Lucida Grande, sans-serif\" font-weight="400" font-size="28">\n${ initials }\n</text>\n</svg>`;