Implement presence indicators

client/components/users/avatar.jade

@@ -1,7 +0,0 @@
-template(name="userAvatar")
-  .member(class="{{class}} {{# if draggable }}js-member{{else}}js-member-on-card-menu{{/if}}"
-    title="{{userData.profile.name}} ({{userData.username}})")
-    +avatar(user=userData size=size)
-    if showBadges
-      span.member-status(class="{{# if userData.profile.status}}active{{/if}}")
-      span.member-type(class=memberType)

client/components/users/headerButtons.js

@@ -1,5 +0,0 @@
-Template.headerUserBar.events({
-  'click .js-sign-in': Popup.open('signup'),
-  'click .js-log-in': Popup.open('login'),
-  'click .js-open-header-member-menu': Popup.open('memberMenu')
-});

client/components/users/router.js

@@ -1,4 +1,3 @@
-
 _.each(['signIn', 'signUp', 'resetPwd',
   'forgotPwd', 'enrollAccount', 'changePwd'], function(routeName) {
   AccountsTemplates.configureRoute(routeName, {

client/components/users/userAvatar.jade

@@ -0,0 +1,23 @@
+template(name="userAvatar")
+  .member(class="{{class}} {{# if draggable }}js-member{{else}}js-member-on-card-menu{{/if}}"
+    title="{{userData.profile.name}} ({{userData.username}})")
+    +avatar(user=userData size=size)
+    if showStatus
+      span.member-presence-status(class=presenceStatusClassName)
+      span.member-type(class=memberType)
+
+
+template(name="userPopup")
+  .board-member-menu
+    .mini-profile-info
+      +userAvatar(user=user)
+        .info
+          h3.bottom
+            a.js-profile(href="{{ pathFor route='Profile' username=user.username }}")= user.profile.name
+            p.quiet.bottom @{{ user.username }}
+
+template(name="memberName")
+  a.inline-object.js-show-mem-menu(href="{{ pathFor route='Profile' username=user.username }}")
+    = user.profile.name
+    if username
+      | ({{ user.username }})

client/components/users/userAvatar.js

@@ -9,19 +9,14 @@ Template.userAvatar.helpers({
     var userId = this.userId || this.user._id;
     var user = Users.findOne(userId);
     return user && user.isBoardAdmin() ? 'admin' : 'normal';
-  }
-});
-
-Template.setLanguagePopup.helpers({
-  languages: function() {
-    return _.map(TAPi18n.getLanguages(), function(lang, tag) {
-      return {
-        tag: tag,
-        name: lang.name
-      };
-    });
   },
-  isCurrentLanguage: function() {
-    return this.tag === TAPi18n.getLanguage();
+  presenceStatusClassName: function() {
+    var userPresence = Presences.findOne({ userId: this.user._id });
+    if (! userPresence)
+      return 'disconnected';
+    else if (Session.equals('currentBoard', userPresence.state.currentBoardId))
+      return 'active';
+    else
+      return 'idle';
   }
 });

client/components/users/userAvatar.styl

@@ -38,16 +38,17 @@ avatar-radius = 50%
       max-width: 100%
       max-height: 100%
 
-  .member-status
+  .member-presence-status
     background-color: #b3b3b3
     border: 1px solid #fff
     border-radius: 50%
-    height: 8px
+    height: 7px
     width: @height
     position: absolute
-    right: 0px
-    bottom: 0px
+    right: -1px
+    bottom: -1px
     border: 1px solid white
+    z-index: 15
 
     &.active
       background: #64c464

client/components/users/userForm.styl

@@ -7,7 +7,6 @@
   img
     width: 275px
 
-
 .at-form
   margin: auto
   width: 275px

client/components/users/userHeader.jade

@@ -8,11 +8,6 @@ template(name="headerUserBar")
         = currentUser.username
     +userAvatar(user=currentUser)
 
-template(name="memberHeader")
-  a.header-member.js-open-header-member-menu
-    span= currentUser.profile.name
-    +userAvatar(user=currentUser size="small")
-
 template(name="memberMenuPopup")
   ul.pop-over-list
     li: a(href="{{pathFor route='Profile' username=currentUser.username}}") {{_ 'profile'}}
@@ -21,3 +16,12 @@ template(name="memberMenuPopup")
   hr
   ul.pop-over-list
     li: a.js-logout {{_ 'log-out'}}
+
+template(name="setLanguagePopup")
+  ul.pop-over-list
+    each languages
+      li(class="{{# if isCurrentLanguage}}active{{/if}}")
+        a.js-set-language
+          = name
+          if isCurrentLanguage
+            i.fa.fa-check

client/components/users/userHeader.js

@@ -0,0 +1,39 @@
+Template.headerUserBar.events({
+  'click .js-open-header-member-menu': Popup.open('memberMenu')
+});
+
+Template.setLanguagePopup.helpers({
+  languages: function() {
+    return _.map(TAPi18n.getLanguages(), function(lang, tag) {
+      return {
+        tag: tag,
+        name: lang.name
+      };
+    });
+  },
+  isCurrentLanguage: function() {
+    return this.tag === TAPi18n.getLanguage();
+  }
+});
+
+Template.memberMenuPopup.events({
+  'click .js-language': Popup.open('setLanguage'),
+  'click .js-logout': function(evt) {
+    evt.preventDefault();
+
+    Meteor.logout(function() {
+      Router.go('Home');
+    });
+  }
+});
+
+Template.setLanguagePopup.events({
+  'click .js-set-language': function(evt) {
+    Users.update(Meteor.userId(), {
+      $set: {
+        'profile.language': this.tag
+      }
+    });
+    evt.preventDefault();
+  }
+});

client/components/users/userProfile.html

@@ -1,18 +1,3 @@
-<template name="setLanguagePopup">
-<ul class="pop-over-list">
-    {{#each languages}}
-        <li class="{{# if isCurrentLanguage}}active{{/if}}">
-            <a class="js-set-language">
-                {{name}}
-                {{# if isCurrentLanguage}}
-                    <span class="icon-sm fa fa-check"></span>
-                {{/if}}
-            </a>
-        </li>
-    {{/each}}
-</ul>
-</template>
-
 <template name='profile'>
     {{ # if profile }}
         <div class="tabbed-pane-header">
@@ -92,27 +77,3 @@
         {{ /if }}
     {{ /if }}
 </template>
-
-<template name="userPopup">
-    <div class="board-member-menu">
-        <div class="mini-profile-info">
-            {{> userAvatar user=user}}
-            <div class="info">
-                <h3 class="bottom" style="margin-right: 40px;">
-                    <a class="js-profile" href="{{ pathFor route='Profile' username=user.username }}">{{ user.profile.name }}</a>
-                </h3>
-                <p class="quiet bottom">@{{ user.username }}</p>
-            </div>
-        </div>
-    </div>
-</template>
-
-
-<template name="memberName">
-    <a class="inline-object js-show-mem-menu" href="{{ pathFor route='Profile' username=user.username }}">
-        {{ user.profile.name }}
-        {{# if username }}
-            ({{ user.username }})
-        {{ /if }}
-    </a>
-</template>

client/components/users/userProfile.js

@@ -1,25 +1,3 @@
-Template.memberMenuPopup.events({
-  'click .js-language': Popup.open('setLanguage'),
-  'click .js-logout': function(evt) {
-    evt.preventDefault();
-
-    Meteor.logout(function() {
-      Router.go('Home');
-    });
-  }
-});
-
-Template.setLanguagePopup.events({
-  'click .js-set-language': function(evt) {
-    Users.update(Meteor.userId(), {
-      $set: {
-        'profile.language': this.tag
-      }
-    });
-    evt.preventDefault();
-  }
-});
-
 Template.profileEditForm.events({
   'click .js-edit-profile': function() {
     Session.set('ProfileEditForm', true);