Roster page UI

www/team/app-team.less

@@ -2,6 +2,8 @@
 @import (reference) '../../customize/src/less2/include/drive.less';
 @import (reference) '../../customize/src/less2/include/messenger.less';
 @import (reference) '../../customize/src/less2/include/sidebar-layout.less';
+@import (reference) "../../customize/src/less2/include/tools.less";
+
 
 &.cp-app-team {
     .framework_min_main(
@@ -14,6 +16,8 @@
     .messenger_main();
     .sidebar-layout_main();
 
+    @roster-bg-color: #efefef;
+
     #cp-sidebarlayout-container {
         div#cp-sidebarlayout-rightside.cp-rightside-drive {
             padding: 0;
@@ -41,6 +45,43 @@
         .cp-team-avatar {
             .avatar_main(300px);
         }
+        .cp-team-roster {
+            .avatar_main(50px);
+            .cp-team-roster-member {
+                display: flex;
+                align-items: center;
+                margin: 5px;
+                padding: 2px;
+                max-width: 500px;
+                background-color: @roster-bg-color;
+                &:hover {
+                    background-color: darken(@roster-bg-color, 5%);
+                }
+                .cp-avatar {
+                    margin-right: 10px;
+                }
+                .cp-team-member-name {
+                    flex: 1;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    .tools_unselectable();
+                }
+                .cp-team-member-actions {
+                    .fa {
+                        height: 25px;
+                        width: 25px;
+                        display: inline-flex;
+                        justify-content: center;
+                        align-items: center;
+                        cursor: pointer;
+                        &:hover {
+                            background-color: darken(@roster-bg-color, 10%);
+                        }
+                    }
+                }
+            }
+        }
     }
 }
 

www/team/inner.js

@@ -447,7 +447,9 @@ define([
             name,
             actions
         ];
-        var div = h('div.cp-team-roster-member', content);
+        var div = h('div.cp-team-roster-member', {
+            title: data.displayName
+        }, content);
         if (data.profile) {
             $(div).dblclick(function (e) {
                 e.preventDefault();