Work on the card activities and comments

This commit also introduces a new CSSEvents object that is used to
abstract vendor specifics events related to CSS transitions and
animations.

Fixes #183.
Fixes #179.

client/components/activities/activities.jade

@@ -1,8 +1,113 @@
 template(name="activities")
-  .js-sidebar-activities
+  .activities.js-sidebar-activities
     //- We should use Template.dynamic here but there is a bug with
     //- blaze-components: https://github.com/peerlibrary/meteor-blaze-components/issues/30
     if $eq mode "board"
       +boardActivities
     else
       +cardActivities
+
+template(name="boardActivities")
+  each currentBoard.activities
+    .activity
+      +userAvatar(userId=user._id)
+      p.activity-desc
+        +memberName(user=user)
+
+        if($eq activityType 'createBoard')
+          | {{_ 'activity-created' boardLabel}}.
+
+        if($eq activityType 'createList')
+          | {{_ 'activity-added' list.title boardLabel}}.
+
+        if($eq activityType 'archivedList')
+          | {{_ 'activity-archived' list.title}}.
+
+        if($eq activityType 'createCard')
+          | {{{_ 'activity-added' cardLink boardLabel}}}.
+
+        if($eq activityType 'archivedCard')
+          | {{{_ 'activity-archived' cardLink}}}.
+
+        if($eq activityType 'restoredCard')
+          | {{{_ 'activity-sent' cardLink boardLabel}}}.
+
+        if($eq activityType 'moveCard')
+          | {{{_ 'activity-moved' cardLink oldList.title list.title}}}.
+
+        if($eq activityType 'addBoardMember')
+          | {{{_ 'activity-added' memberLink boardLabel}}}.
+
+        if($eq activityType 'removeBoardMember')
+          | {{{_ 'activity-excluded' memberLink boardLabel}}}.
+
+        if($eq activityType 'joinMember')
+          if($eq currentUser._id member._id)
+            | {{{_ 'activity-joined' cardLink}}}.
+          else
+            | {{{_ 'activity-added' memberLink cardLink}}}.
+
+        if($eq activityType 'unjoinMember')
+          if($eq currentUser._id member._id)
+            | {{{_ 'activity-unjoined' cardLink}}}.
+          else
+            | {{{_ 'activity-removed' memberLink cardLink}}}.
+
+        if($eq activityType 'addComment')
+          | {{{_ 'activity-on' cardLink}}}
+          a.activity-comment(href="{{ card.absoluteUrl }}")
+            +viewer
+              = comment.text
+
+        if($eq activityType 'addAttachment')
+          | {{{_ 'activity-attached' attachmentLink cardLink}}}.
+
+        span.activity-meta {{ moment createdAt }}
+
+template(name="cardActivities")
+  each currentCard.activities
+    .activity
+      +userAvatar(userId=user._id)
+      p.activity-desc
+        +memberName(user=user)
+        if($eq activityType 'createCard')
+          | {{_ 'activity-added' cardLabel list.title}}.
+        if($eq activityType 'joinMember')
+          if($eq currentUser._id member._id)
+            | {{_ 'activity-joined' cardLabel}}.
+          else
+            | {{{_ 'activity-added' cardLabel memberLink}}}.
+        if($eq activityType 'unjoinMember')
+          if($eq currentUser._id member._id)
+            | {{_ 'activity-unjoined' cardLabel}}.
+          else
+            | {{{_ 'activity-removed' cardLabel memberLink}}}.
+        if($eq activityType 'archivedCard')
+          | {{_ 'activity-archived' cardLabel}}.
+        if($eq activityType 'restoredCard')
+          | {{_ 'activity-sent' cardLabel boardLabel}}.
+        if($eq activityType 'moveCard')
+          | {{_ 'activity-moved' cardLabel oldList.title list.title}}.
+        if($eq activityType 'addAttachment')
+          | {{{_ 'activity-attached' attachmentLink cardLabel}}}.
+          if attachment.isImage
+            img.attachment-image-preview(src=attachment.url)
+
+        if($eq activityType 'addComment')
+          +inlinedForm(classNames='js-edit-comment')
+            +editor(autofocus=true)
+              = comment.text
+            .edit-controls
+              button.primary(type="submit") {{_ 'edit'}}
+          else
+            .activity-comment
+              +viewer
+                = comment.text
+            span.activity-meta
+              | {{ moment createdAt }} -
+              a.js-open-inlined-form {{_ "edit"}}
+              = ' - '
+              a.js-delete-comment {{_ "delete"}}
+
+        else
+          span.activity-meta {{ moment createdAt }}

client/components/activities/activities.js

@@ -49,10 +49,6 @@ BlazeComponent.extendComponent({
     return TAPi18n.__('this-board');
   },
 
-  cardLabel: function() {
-    return TAPi18n.__('this-card');
-  },
-
   cardLink: function() {
     var card = this.currentData().card();
     return Blaze.toHTML(HTML.A({
@@ -75,3 +71,35 @@ BlazeComponent.extendComponent({
     }, attachment.name()));
   }
 }).register('activities');
+
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'cardActivities';
+  },
+
+  cardLabel: function() {
+    return TAPi18n.__('this-card');
+  },
+
+  events: function() {
+    return [{
+      // XXX We should use Popup.afterConfirmation here
+      'click .js-delete-comment': function() {
+        var commentId = this.currentData().commentId;
+        CardComments.remove(commentId);
+      },
+      'submit .js-edit-comment': function(evt) {
+        evt.preventDefault();
+        var commentText = this.currentComponent().getValue();
+        var commentId = Template.parentData().commentId;
+        if ($.trim(commentText)) {
+          CardComments.update(commentId, {
+            $set: {
+              text: commentText
+            }
+          });
+        }
+      }
+    }];
+  }
+}).register('cardActivities');

client/components/activities/activities.styl

@@ -0,0 +1,28 @@
+.activities
+  clear: both
+
+  .activity
+    margin: 6px 0
+    display: flex
+
+    .member
+      width: 24px
+      height: @width
+
+    .activity-desc
+      flex: 1
+      align-self: center
+      margin: 0
+
+      .activity-comment
+        display: block
+        border-radius: 3px
+        background: white
+        text-decoration: none
+        box-shadow: 0 1px 2px rgba(0,0,0,.2)
+        margin-top: 5px
+        padding: 5px
+
+      .activity-meta
+        font-size: 0.8em
+        color: darken(white, 40%)

client/components/activities/comments.jade

@@ -0,0 +1,8 @@
+template(name="commentForm")
+  .new-comment.js-new-comment(
+    class="{{#if commentFormIsOpen}}is-open{{/if}}")
+    +userAvatar(userId=currentUser._id)
+    form.js-new-comment-form
+      +editor(class="js-new-comment-input")
+      .add-controls
+        button.primary.confirm.clear.js-add-comment(type="submit") {{_ 'comment'}}

client/components/activities/comments.js

@@ -0,0 +1,49 @@
+var commentFormIsOpen = new ReactiveVar(false);
+
+Template.commentForm.helpers({
+  commentFormIsOpen: function() {
+    return commentFormIsOpen.get();
+  }
+});
+
+Template.commentForm.events({
+  'click .js-new-comment:not(.focus)': function() {
+    commentFormIsOpen.set(true);
+  },
+  'submit .js-new-comment-form': function(evt, tpl) {
+    var input = tpl.$('.js-new-comment-input');
+    if ($.trim(input.val())) {
+      CardComments.insert({
+        boardId: this.boardId,
+        cardId: this._id,
+        text: input.val()
+      });
+      input.val('');
+      input.blur();
+      commentFormIsOpen.set(false);
+      Tracker.flush();
+      autosize.update(input);
+    }
+    evt.preventDefault();
+  },
+  // Pressing Ctrl+Enter should submit the form
+  'keydown form textarea': function(evt, tpl) {
+    if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
+      tpl.find('button[type=submit]').click();
+    }
+  }
+});
+
+Template.commentForm.onDestroyed(function() {
+  commentFormIsOpen.set(false);
+});
+
+EscapeActions.register('inlinedForm',
+  function() {
+    commentFormIsOpen.set(false);
+    $('.js-new-comment-input').blur();
+  },
+  function() { return commentFormIsOpen.get(); }, {
+    noClickEscapeOn: '.js-new-comment'
+  }
+);

client/components/activities/comments.styl

@@ -8,15 +8,15 @@
     top: 1px
     left: -38px
 
-  &.focus
+  &.is-open
     .member
       opacity: 1
 
     .helper
       display: inline-block
 
-    .new-comment-input
-      min-height: 108px
+    textarea
+      min-height: 100px
       color: #4d4d4d
       cursor: auto
       overflow: hidden
@@ -25,22 +25,22 @@
   .too-long
     margin-top: 8px
 
-.new-comment-input
-  background-color: #fff
-  border: 0
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
-  color: #8c8c8c
-  height: 36px
-  margin: 4px 4px 6px 0
-  padding: 9px 11px
-  width: 100%
-
-  &:hover,
-  &:focus
+  textarea
     background-color: #fff
-    box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
     border: 0
-    cursor: pointer
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
+    color: #8c8c8c
+    height: 36px
+    margin: 4px 4px 6px 0
+    padding: 9px 11px
+    width: 100%
 
-  &:focus
-    cursor: auto
+    &:hover,
+    &:is-open
+      background-color: #fff
+      box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
+      border: 0
+      cursor: pointer
+
+    &:is-open
+      cursor: auto

client/components/activities/events.js

@@ -1,30 +0,0 @@
-Template.cardActivities.events({
-  'click .js-edit-action': function(evt) {
-    var $this = $(evt.currentTarget);
-    var container = $this.parents('.phenom-comment');
-
-    // open and focus
-    container.addClass('editing');
-    container.find('textarea').focus();
-  },
-  'click .js-confirm-delete-action': function() {
-    CardComments.remove(this._id);
-  },
-  'submit form': function(evt) {
-    var $this = $(evt.currentTarget);
-    var container = $this.parents('.phenom-comment');
-    var text = container.find('textarea');
-
-    if ($.trim(text.val())) {
-      CardComments.update(this._id, {
-        $set: {
-          text: text.val()
-        }
-      });
-
-      // reset editing class
-      $('.editing').removeClass('editing');
-    }
-    evt.preventDefault();
-  }
-});

client/components/activities/templates.html

@@ -1,154 +0,0 @@
-<template name="boardActivities">
-    {{# each currentBoard.activities }}
-        <div class="phenom phenom-action clearfix phenom-other">
-            {{> userAvatar userId=user._id}}
-            <div class="phenom-desc">
-                {{ > memberName user=user }}
-
-                {{# if $eq activityType 'createBoard' }}
-                    {{_ 'activity-created' boardLabel}}.
-                {{ /if }}
-
-                {{# if $eq activityType 'createList' }}
-                    {{_ 'activity-added' list.title boardLabel}}.
-                {{ /if }}
-
-                {{# if $eq activityType 'archivedList' }}
-                    {{_ 'activity-archived' list.title}}.
-                {{ /if }}
-
-                {{# if $eq activityType 'createCard' }}
-                    {{{_ 'activity-added' cardLink boardLabel}}}.
-                {{ /if }}
-
-                {{# if $eq activityType 'archivedCard' }}
-                    {{{_ 'activity-archived' cardLink}}}.
-                {{ /if }}
-
-                {{# if $eq activityType 'restoredCard' }}
-                    {{{_ 'activity-sent' cardLink boardLabel}}}.
-                {{ /if }}
-
-                {{# if $eq activityType 'moveCard' }}
-                    {{{_ 'activity-moved' cardLink oldList.title list.title}}}.
-                {{ /if }}
-
-                {{# if $eq activityType 'addBoardMember' }}
-                    {{{_ 'activity-added' memberLink boardLabel}}}.
-                {{ /if }}
-
-                {{# if $eq activityType 'removeBoardMember' }}
-                    {{{_ 'activity-excluded' memberLink boardLabel}}}.
-                {{ /if }}
-
-                {{# if $eq activityType 'joinMember' }}
-                    {{# if $eq currentUser._id member._id }}
-                        {{{_ 'activity-joined' cardLink}}}.
-                    {{ else }}
-                        {{{_ 'activity-added' memberLink cardLink}}}.
-                    {{/if}}
-                {{ /if }}
-
-                {{# if $eq activityType 'unjoinMember' }}
-                    {{# if $eq currentUser._id member._id }}
-                        {{{_ 'activity-unjoined' cardLink}}}.
-                    {{ else }}
-                        {{{_ 'activity-removed' memberLink cardLink}}}.
-                    {{/if}}
-                {{ /if }}
-
-                {{# if $eq activityType 'addComment' }}
-                    <div class="phenom-desc">
-                    {{{_ 'activity-on' cardLink}}}
-                        <div class="action-comment markeddown">
-                            <a href="{{ card.absoluteUrl }}" class="current-comment show tdn">
-                                <p>{{#viewer}}{{ comment.text }}{{/viewer}}</p>
-                            </a>
-                        </div>
-                    </div>
-                {{ /if }}
-
-                {{# if $eq activityType 'addAttachment' }}
-                    <div class="phenom-desc">
-                        {{{_ 'activity-attached' attachmentLink cardLink}}}.
-                    </div>
-                {{ /if }}
-            </div>
-            <p class="phenom-meta quiet">
-                <span class="date js-hide-on-sending">
-                    {{ moment createdAt }}
-                </span>
-            </p>
-        </div>
-    {{ /each }}
-</template>
-
-<template name="cardActivities">
-    {{# each currentCard.comments }}
-        <div class="phenom phenom-action clearfix phenom-comment">
-            {{> userAvatar userId=user._id}}
-            <form>
-                <div class="phenom-desc">
-                    {{ > memberName user=user }}
-                    <div class="action-comment markeddown">
-                        <div class="current-comment">
-                          {{#viewer}}{{ text }}{{/viewer}}
-                        </div>
-                        <textarea class="js-text" tabindex="1">{{ text }}</textarea>
-                    </div>
-                </div>
-                <div class="edit-controls clearfix">
-                    <input type="submit" class="primary confirm js-save-edit" value="{{_ 'save'}}" tabindex="2">
-                </div>
-            </form>
-            <p class="phenom-meta quiet">
-                <span class="date js-hide-on-sending">{{ moment createdAt }}</span>
-                {{# if currentUser }}
-                    <span class="js-hide-on-sending">
-                        - <a href="#" class="js-edit-action">{{_ "edit"}}</a>
-                        - <a href="#" class="js-confirm-delete-action">{{_ "delete"}}</a>
-                    </span>
-                {{/ if }}
-            </p>
-        </div>
-    {{/each}}
-
-    {{# each currentCard.activities }}
-        <div class="phenom phenom-action clearfix phenom-other">
-            {{> userAvatar userId=user._id size="extra-small" class="creator js-show-mem-menu" }}
-            {{ > memberName user=user }}
-            {{# if $eq activityType 'createCard' }}
-                {{_ 'activity-added' cardLabel list.title}}.
-            {{ /if }}
-            {{# if $eq activityType 'joinMember' }}
-                {{# if $eq currentUser._id member._id }}
-                    {{_ 'activity-joined' cardLabel}}.
-                {{ else }}
-                    {{{_ 'activity-added' cardLabel memberLink}}}.
-                {{/if}}
-            {{/if}}
-            {{# if $eq activityType 'unjoinMember' }}
-                {{# if $eq currentUser._id member._id }}
-                    {{_ 'activity-unjoined' cardLabel}}.
-                {{ else }}
-                    {{{_ 'activity-removed' cardLabel memberLink}}}.
-                {{/if}}
-            {{ /if }}
-            {{# if $eq activityType 'archivedCard' }}
-                {{_ 'activity-archived' cardLabel}}.
-            {{ /if }}
-            {{# if $eq activityType 'restoredCard' }}
-                {{_ 'activity-sent' cardLabel boardLabel}}.
-            {{/ if }}
-            {{# if $eq activityType 'moveCard' }}
-                {{_ 'activity-moved' cardLabel oldList.title list.title}}.
-            {{/ if }}
-            {{# if $eq activityType 'addAttachment' }}
-                {{{_ 'activity-attached' attachmentLink cardLabel}}}.
-                {{# if attachment.isImage }}
-                    <img src="{{ attachment.url }}" class="attachment-image-preview">
-                {{/if}}
-            {{/ if}}
-        </div>
-    {{/each}}
-</template>