feat(user view): proliferate usage of name and avatar attrs

This involved, amongst other things, refactoring the userView directive to be a generic user-viewing directive that can be used anywhere. refs #19
blaskovicz · Apr 30, 2015 · 2db8ec5 · 2db8ec5
1 parent d682644
commit 2db8ec5
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 36 deletions.
diff --git a/frontend/controllers/SeasonManageController.coffee b/frontend/controllers/SeasonManageController.coffee
@@ -10,6 +10,8 @@ angular.module("MagicStick.controllers").controller "SeasonManageController", [
       comment: ""
       savedComment: ""
     $scope.isCurrentUser = (username) -> username is User.username
+    $scope.userLabel = (user) ->
+      user.username + if user.name? then " (#{user.name})" else ""
     $scope.seasonOwner = ->
       season?.owner?.username is User.username
     $scope.createSeasonGrouping = (groupingName) ->

diff --git a/frontend/directives/auth.coffee b/frontend/directives/auth.coffee
@@ -9,6 +9,7 @@ angular.module("MagicStick.directives").directive("auth", [
         -> User,
         ->
           $scope.username = User.username
+          $scope.avatar_url = User.avatar_url
           authed = false
           rolesRequired = attrs.auth
           if rolesRequired is ""

diff --git a/frontend/directives/userView.coffee b/frontend/directives/userView.coffee
@@ -1,11 +1,5 @@
 angular.module("MagicStick.directives").directive "userView", ->
   restrict: "E"
+  scope:
+    "user": "&"
   templateUrl: "user.html"
-  controller: [
-    "$scope"
-    "User"
-    ($scope, User) ->
-      $scope.user = User
-      $scope.logout = -> User.logout()
-  ]
-
diff --git a/frontend/scss/app.scss b/frontend/scss/app.scss
@@ -23,18 +23,38 @@
   bottom: 20%;
 }
 .avatar {
-    display: block;
-    overflow: hidden;
+  display: block;
+  overflow: hidden;
+}
+p.navbar-text.profile {
+  margin-bottom: .2em;
+  margin-top: .8em;
+  a.profile {
+    &:hover {
+      color: #4183c4;
+      img.nav-avatar {
+        border-color: #77B5F2;
+      }
+    }
+    font-weight: bold;
+    text-decoration: none;
+    img.nav-avatar {
+      border-radius: 100%;
+      border: 2px solid rgb(216, 214, 214);
+      height: 32px;
+      width: 32px;
+    }
+  }
 }
 .avatar-64 {
-    height: 64px;
-    width: 64px;
+  height: 64px;
+  width: 64px;
 }
 .avatar img {
-    display: block;
-    min-width: 100%;
-    min-height: 100%;
-    -ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */
+  display: block;
+  min-width: 100%;
+  min-height: 100%;
+  -ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */
 }
 #avatar-selector {
   cursor: pointer;
@@ -59,7 +79,54 @@ div.panel.comments {
   div.preview {
     min-height: 60px;
   }
+  img.avatar {
+    display: inline-block;
+    border-radius: 100%;
+    border: 2px solid rgb(216, 214, 214);
+    height: 32px;
+    width: 32px;
+  }
 }
 span.markdown-help {
   font-size: 10pt;
 }
+div.season-members {
+  button.btn-danger {
+    vertical-align: top;
+  }
+}
+div.user-view {
+  margin: 0 5px 0 5px;
+  display: inline-block;
+  padding: 4px;
+  border-radius: 4px;
+  width: 200px;
+  height: 40px;
+  background-color: rgb(66, 17, 82);
+  color: rgb(252, 250, 250);
+  div.left {
+    float: left;
+    width: 25%;
+    img.cell-avatar {
+      border-radius: 100%;
+      border: 2px solid #9334D3;
+      height: 32px;
+      width: 32px;
+    }
+  }
+  div.right {
+    float: right;
+    width: 75%;
+    p {
+      font-size: 10pt;
+      margin: 0;
+      text-overflow: ellipsis;
+      overflow-x: hidden;
+      white-space: nowrap;
+      &.name {
+        font-size: 8pt;
+        color: rgb(198, 186, 210);
+      }
+    }
+  }
+}
diff --git a/frontend/services/User.coffee b/frontend/services/User.coffee
@@ -52,13 +52,15 @@ angular.module("MagicStick.services").factory "User", [
             @logout() if status is 401
       parsePrincipal: (data) ->
         return unless data?
+        @avatar_url = data.avatar_url
         @roles = {}
         for role in data.roles
           @roles[role.name] = true
       logout: ->
         @loggedIn = false
         @username = ""
         @roles = {}
+        @avatar_url = null
         delete $http.defaults.headers.common['Authorization']
         localStorageService.set('currentUser', null)
         @broadcastLoginStateChange()

diff --git a/frontend/views/dashboard.html b/frontend/views/dashboard.html
@@ -1,6 +1,9 @@
 <div class="container">
   <div class="dashboard-view">
+    <div>
+      <p>Magic the Gathering League Website</p>
+      <p>This site is currently still under construction. Check out seasons above</p>
+    </div>
     <login-view></login-view>
-    <user-view></user-view>
   </div>
 </div>
diff --git a/frontend/views/season-manage.html b/frontend/views/season-manage.html
@@ -43,19 +43,19 @@ <h2><a href="/#!/seasons">Seasons</a> &gt; {{season.name}} [id: {{season.id}}]</
         </button>
       </form>
     </div>
-    <table class="table">
-      <tr ng-repeat="member in season.members">
-        <td>{{member.username}}</td>
-        <td ng-if="seasonOwner()">
-          <button
-            type="button"
-            class="btn btn-danger"
-            ng-click="removeSeasonMember(member)">
-            Remove
-          </button>
-        </td>
-      </tr>
-    </table>
+    <div class="season-members">
+      <div
+        ng-repeat="member in season.members">
+        <user-view user="member"></user-view>
+        <button
+          ng-if="seasonOwner()"
+          type="button"
+          class="btn btn-danger"
+          ng-click="removeSeasonMember(member)">
+          Remove
+        </button>
+      </div>
+    </div>
   </div>
   <div class="panel panel-default">
     <div class="panel-heading">Match Groups</div>
@@ -126,7 +126,7 @@ <h3>Members</h3>
                           id="nextMatchMember"
                           class="form-control"
                           ng-model="nextMatchMember"
-                          ng-options="user as user.username for user in season.members">
+                          ng-options="user as userLabel(user) for user in season.members">
                         </select>
                       </div>
                       <button
@@ -140,7 +140,7 @@ <h3>Members</h3>
                     <table class="table">
                       <tr ng-repeat="user_season_match in match.user_season_match">
                         <td>
-                          {{user_season_match.user_season.user.username}}
+                          <user-view user="user_season_match.user_season.user"></user-view>
                         </td>
                         <td ng-if="!seasonOwner() && !isMatchMember(match)">
                           {{
@@ -240,7 +240,7 @@ <h3>Members</h3>
     <div class="panel-body">
       <div ng-if="!comment.hidden" class="panel panel-info comment-cell" ng-repeat="comment in comments">
         <div class="header panel-heading">
-          <b>{{comment.user.username}}</b> added a comment at {{comment.created_at}}
+          <b><img class="avatar" ng-src="{{comment.user.avatar_url}}"/> {{comment.user.username}}</b> added a comment at {{comment.created_at}}
           <i
             title="Updated at {{comment.updated_at}}"
             ng-if="comment.created_at != comment.updated_at">

diff --git a/frontend/views/user.html b/frontend/views/user.html
@@ -1,3 +1,15 @@
-<div class="user-view" ng-if="user.loggedIn">
-  <span>Logged in as {{user.username}} <i><a ng-click="logout()">logout?</a></i></span>
+<div class="user-view clearfix">
+  <div class="left">
+    <img
+      class="cell-avatar"
+      ng-src="{{user().avatar_url}}"/>
+  </div>
+  <div class="right">
+    <p class="username">
+      {{user().username}}
+    </p>
+    <p class="name" ng-if="user().name != null">
+      {{user().name}}
+    </p>
+  </div>
 </div>
diff --git a/public/index.html b/public/index.html
@@ -67,7 +67,12 @@
             </li> -->
           </ul>
           <p class="navbar-text navbar-right" anon><a href="/#!/" class="navbar-link">Log in</a></p>
-          <p class="navbar-text navbar-right" auth>Logged in as <a href="/#!/profile" class="navbar-link">{{username}}</a></p>
+          <p class="navbar-text navbar-right profile" auth>
+            <a href="/#!/profile" class="navbar-link profile">
+              <img class="nav-avatar" ng-src="{{avatar_url}}"/>
+              {{username}}
+            </a>
+          </p>
         </div><!-- /.navbar-collapse -->
       </div><!-- /.container-fluid -->
     </nav>