Merge pull request #178 from asaadmahmoodspin/master

mm-1302 - Adding profile pick in LHS Header

web/react/components/sidebar_header.jsx

@@ -77,7 +77,7 @@ var NavbarDropdown = React.createClass({
             for (var i = 0; i < this.state.teams.length; i++) {
                 var domain = this.state.teams[i];
 
-                if (domain == utils.getSubDomain()) 
+                if (domain == utils.getSubDomain())
                     continue;
 
                 if (teams.length == 0)
@@ -121,10 +121,15 @@ module.exports = React.createClass({
     },
     render: function() {
         var teamName = this.props.teamName ? this.props.teamName : config.SiteName;
+        var me = UserStore.getCurrentUser()
 
         return (
             <div className="team__header theme">
-                <a className="team__name" href="/channels/town-square">{ teamName }</a>
+                <img className="user__picture" src={"/api/v1/users/" + me.id + "/image?time=" + me.update_at} />
+                <div className="header__info">
+                    <div className="user__name">@{me.username}</div>
+                    <a className="team__name" href="/channels/town-square">{ teamName }</a>
+                </div>
                 <NavbarDropdown teamType={this.props.teamType} />
             </div>
         );

web/sass-files/sass/partials/_headers.scss

@@ -75,14 +75,16 @@
 // Team Header in Sidebar
 .sidebar--left, .sidebar--menu {
 	.team__header {
-		padding: 0 15px 0 15px;
+		padding: 15px;
 		@include legacy-pie-clearfix;
 		a {
 			color: #fff;
 		}
 		.navbar-right {
 			font-size: 0.85em;
-			margin: 16px -5px 0;
+			position: absolute;
+			top: 24px;
+			right: 25px;
 			.dropdown-toggle {
 				padding: 0 10px;
 			}
@@ -100,17 +102,32 @@
 				display: inline-block;
 			}
 		}
-		.team__name {
+		.user__picture {
+			width: 36px;
+			height: 36px;
 			float: left;
-			line-height: 50px;
+			@include border-radius(36px);
+		}
+		.header__info {
+			padding-left: 42px;
+			color: #fff;
+		}
+		.team__name, .user__name {
+			display: block;
+			line-height: 18px;
 			font-weight: 600;
-			font-size: 1.2em;
+			font-size: 16px;
 			max-width: 80%;
 			overflow: hidden;
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			text-decoration: none;
 		}
+		.user__name {
+			font-size: 14px;
+			font-weight: 400;
+			color: #eee;
+		}
 		> .nav {
 			> li {
 				> a {