add permalinks for comments

Changelog.md

@@ -80,6 +80,7 @@ For more details see https://wiki.diasporafoundation.org/Updating
 * Add indication about markdown formatting in the publisher [#4589](https://github.com/diaspora/diaspora/pull/4589)
 * Add captcha to signup form [#4659](https://github.com/diaspora/diaspora/pull/4659)
 * Update Underscore.js 1.3.1 to 1.5.2, update Backbone.js 0.9.2 to 1.1.0 [#4662](https://github.com/diaspora/diaspora/pull/4662)
+* Add permalinks for comments [#4577](https://github.com/diaspora/diaspora/pull/4577)
 
 ## Gem updates
 * selenium-webdriver 2.34.0 -> 2.39.0

app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js

 app.views.SinglePostCommentStream = app.views.CommentStream.extend({
   tooltipSelector: "time, .controls a",
 
+  initialize: function(){
+    $(window).on('hashchange',this.highlightPermalinkComment);
+  },
+ 
+  highlightPermalinkComment: function() {
+    if(document.location.hash){
+      element=$(document.location.hash);
+      headerSize=50;
+      $(".highlighted").removeClass("highlighted");
+      element.addClass("highlighted");
+      pos=element.offset().top-headerSize;
+      $("html").animate({scrollTop:pos});
+    }
+  },
+
   postRenderTemplate: function() {
     app.views.CommentStream.prototype.postRenderTemplate.apply(this)
     this.$(".new_comment_form_wrapper").removeClass('hidden')
+    _.defer(this.highlightPermalinkComment)
   },
 
   appendComment: function(comment) {

app/assets/javascripts/app/views/stream/shortcuts.js

 app.views.StreamShortcuts = {
 
   _headerSize: 50,
-  _borderStyle: "3px solid rgb(63, 143, 186)",
 
 
   setupShortcuts : function() {
@@ -97,12 +96,10 @@ app.views.StreamShortcuts = {
   selectPost: function(element){
     //remove the selection and selected-class from all posts
     var selected=this.$('div.stream_element.loaded.shortcut_selected');
-    selected.css( "border-left", "" );
-    selected.removeClass('shortcut_selected');
+    selected.removeClass('shortcut_selected').removeClass('highlighted');
     //move to new post
     window.scrollTo(window.pageXOffset, element.offsetTop-this._headerSize);
     //add the selection and selected-class to new post
-    element.style.borderLeft=this._borderStyle;
-    element.className+=" shortcut_selected";	
+    element.className+=" shortcut_selected highlighted";	
   },
 };

app/assets/stylesheets/application.css.sass

@@ -16,6 +16,7 @@
 @import 'facebox'
 @import 'aspects'
 @import 'popover'
+@import 'stream_element'
 
 /* ====== media ====== */
 .media
@@ -154,33 +155,6 @@ ul.as-selections
   time
     :color #333 !important
 
-.stream
-  audio
-    :display block
-    :margin 5px 0
-
-  .stream_element
-    :border
-      :bottom 1px solid $border-grey
-
-    p
-      &:last-child
-        :padding-bottom 0
-        :margin-bottom 0
-
-    &:first-child
-      :border
-        :top none
-
-    ul
-      li
-        :list-style disc
-
-    .youtube-player, .vimeo-player
-      :border none
-      :height 304px
-      :width 410px
-
 #author_info
   :position relative
 
@@ -228,42 +202,6 @@ ul.as-selections
     :margin
       :bottom 10px
 
-.stream_element
-  a.author
-    :font-weight bold
-    :unicode-bidi bidi-override
-
-  .photo_attachments
-    :margin
-      :top 7px
-
-  img
-    :max-width 100%
-
-  .bd
-    > img
-      :height 30px
-      :width 30px
-      :float left
-      :margin
-        :right 10px
-
-  .stream_photo
-    :float left
-    :margin
-      :top 6px
-
-  .controls:first-child
-    .control_icon
-      @include transition(opacity)
-      @include opacity(0)
-  &:hover
-    .controls:first-child
-      .control_icon
-        @include opacity(0.3)
-      .control_icon:hover
-        @include opacity(1)
-
 .info
   :font-size smaller
 
@@ -288,12 +226,6 @@ ul.as-selections
   a:hover
     :text-decoration none
 
-.status_message_show
-  .comment_box
-    :width 653px
-    :margin
-      :bottom 5px
-
 .grey,
 .grey *
   :color $text-grey
@@ -303,9 +235,6 @@ ul.as-selections
   :font
     :weight normal
 
-.post_scope
-  :cursor default
-
 .time,
 .via
   :color #aaa
@@ -360,98 +289,6 @@ ul.as-selections
   input
     :float right
 
-.stream_element .reshare,
-.comment
-  .avatar
-    :width 30px
-    :height 30px
-
-.likes,
-.stream_element div.reshare
-  :font
-    :size 12px
-
-.comment.no-border
-  &.media
-    :border none
-    :padding 0
-
-.comment
-  &.media
-    :margin
-      :left 0
-      :right 0
-
-    :border
-      :top 1px dotted #aaa
-
-    :padding
-      :top 10px
-
-    .controls
-      .comment_delete
-        @include transition(opacity)
-        @include opacity(0)
-    &:hover
-      .controls
-        .comment_delete
-          @include opacity(0.3)
-        .comment_delete:hover
-          @include opacity(1)
-
-  .youtube-player, .vimeo-player
-    :border none
-    :height 250px
-    :width 400px
-
-  .ltr
-    ol, ul
-      :padding-left 2em
-      li
-        :padding 0px
-        :border none
-        :list-style inherit
-
-  .right
-    :right 4px
-
-.stream_element
-  .new_comment_form_wrapper
-    :width 415px
-
-.stream_element .bd
-  & > .likes, & > .comments
-    :margin-right 15px
-
-.status-message-location
-  .near-from
-    :font-size smaller
-    :color #aaa
-    :width 100%
-    :float left
-  .address
-    :font-size 11px
-    :color #bbb
-
-.stream_element .post-content .reshare
-  :border-left 2px solid $border-grey
-
-.stream_element.loaded .media .bd .feedback
-  :clear both
-
-form.new_comment
-  input
-    :display none
-
-  textarea
-    :height 21px
-    :font-size 12px
-    :width 364px
-
-  &.open
-    input
-      :display block
-
 #photo_container
   :text
     :align center
@@ -1037,56 +874,6 @@ ul#press_logos
 .public_icon, .service_icon
   :cursor pointer
 
-.stream_element
-  .subject
-    :font
-      :size 13px
-      :weight bold
-    :color #444
-    :overflow hidden
-    :white-space nowrap
-
-  .last_author
-    :font
-      :size 12px
-    :color $text-dark-grey
-
-  .collapsible
-    :overflow hidden
-    :position relative
-    p
-      :margin 0 0 0.8em
-    p:last-of-type
-      :margin 0
-
-    .expander
-      :position absolute
-      :bottom 0
-      :left 0
-      :right 0
-      :height 30px
-      :text-align center
-      :line-height 48px
-      :font-size .8em
-      :color $grey
-      :text-shadow 0 0 7px #FFF
-      :cursor pointer
-      :border-bottom 2px solid $border-grey
-      @include border-radius(0, 0, 3px, 3px)
-      @include linear-gradient(rgba(255,255,255,0) , #EEE, 0%, 95%)
-      :background-color transparent
-
-    .oembed
-      :background image-url('ajax-loader2.gif') no-repeat center center
-      :float left
-      :width 100%
-
-      .thumb
-        @include video-overlay()
-
-      iframe, .thumb img
-        :width 100%
-
 #contact_visibility_padlock:hover
   @include opacity(0.7)
 

app/assets/stylesheets/single-post-view.css.scss

@@ -159,6 +159,12 @@
       @include opacity(0.3);
     }
   }
+
+  >.highlighted {
+    border-left: 3px solid $blue;
+    padding-left: 3px;
+  }
+
   .controls {
     @include transition(opacity);
     @include opacity(0);

app/assets/stylesheets/stream_element.css.scss

+.stream {
+  audio {
+    display: block;
+    margin: 5px 0;
+  }
+
+  .stream_element {
+    border-bottom: 1px solid $border-grey;
+
+    p {
+      &:last-child {
+        padding-bottom: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    &:first-child {
+      border-top: none;
+    }
+
+    ul {
+      li {
+        list-style: disc;
+      }
+    }
+
+    .youtube-player, .vimeo-player {
+      border: none;
+      height: 304px;
+      width: 410px;
+    }
+  }
+}
+
+.stream_element {
+  a.author {
+    font-weight: bold;
+    unicode-bidi: bidi-override;
+  }
+
+  .photo_attachments {
+    margin-top: 7px;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  .bd {
+    > img {
+      height: 30px;
+      width: 30px;
+      float: left;
+      margin-right: 10px;
+    }
+  }
+
+  .info {
+    font-size: 11px;
+  }
+
+  .stream_photo {
+    float: left;
+    margin-top: 6px;
+  }
+
+  .controls:first-child {
+    .control_icon {
+      @include transition(opacity);
+      @include opacity(0);
+    }
+  }
+
+  &:hover {
+    .controls:first-child {
+      .control_icon {
+        @include opacity(0.3);
+      }
+      .control_icon:hover {
+        @include opacity(1);
+      }
+    }
+  }
+}
+
+.status_message_show {
+  .comment_box {
+    width: 653px;
+    margin-bottom: 5px;
+  }
+}
+
+.post_scope {
+  cursor: default;
+}
+
+.stream_element .reshare,
+.comment {
+  .avatar {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.likes,
+.stream_element div.reshare {
+  font-size: 12px;
+}
+
+.comment, .stream_element {
+  >.highlighted {
+    border-left: 3px solid $blue;
+    padding-left: 3px;
+  }
+}
+
+.comment.no-border {
+  &.media {
+    border: none;
+    padding: 0;
+  }
+}
+
+.comment {
+  &.media {
+    margin-left: 0;
+    margin-right: 0;
+
+    border-top: 1px dotted #aaa;
+
+    padding-top: 10px;
+
+    .controls {
+      .comment_delete {
+        @include transition(opacity);
+        @include opacity(0);
+      }
+    }
+    &:hover {
+      .controls {
+        .comment_delete {
+          @include opacity(0.3);
+        }
+        .comment_delete:hover {
+          @include opacity(1);
+        }
+      }
+    }
+  }
+
+  .youtube-player, .vimeo-player {
+    border: none;
+    height: 250px;
+    width: 400px;
+  }
+
+  .ltr {
+    ol, ul {
+      padding-left: 2em;
+      li {
+        padding: 0px;
+        border: none;
+        list-style: inherit;
+      }
+    }
+  }
+
+  .right {
+    right: 4px;
+  }
+}
+
+.stream_element {
+  .new_comment_form_wrapper {
+    width: 415px;
+  }
+}
+
+.stream_element .bd {
+  & > .likes, & > .comments {
+    margin-right: 15px;
+  }
+}
+
+.status-message-location {
+  .near-from {
+    font-size: smaller;
+    color: #aaa;
+    width: 100%;
+    float: left;
+  }
+  .address {
+    font-size: 11px;
+    color: #bbb;
+  }
+}
+
+.stream_element .post-content .reshare {
+  border-left: 2px solid $border-grey;
+}
+
+.stream_element.loaded .media .bd .feedback {
+  clear: both;
+}
+
+form.new_comment {
+  input {
+    display: none;
+  }
+
+  textarea {
+    height: 21px;
+    font-size: 12px;
+    width: 364px;
+  }
+
+  &.open {
+    input {
+      display: block;
+    }
+  }
+}
+
+.stream_element {
+  .subject {
+    font-size: 13px;
+    font-weight: bold;
+    color: #444;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .last_author {
+    font-size: 12px;
+    color: $text-dark-grey;
+  }
+
+  .collapsible {
+    overflow: hidden;
+    position: relative;
+    
+    p {
+      margin: 0 0 0.8em;
+    }
+    p:last-of-type {
+      margin: 0;
+    }
+
+    .expander {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 30px;
+      text-align: center;
+      line-height: 48px;
+      font-size: .8em;
+      color: $grey;
+      text-shadow: 0 0 7px #FFF;
+      cursor: pointer;
+      border-bottom: 2px solid $border-grey;
+      @include border-radius(0, 0, 3px, 3px);
+      @include linear-gradient(rgba(255,255,255,0) , #EEE, 0%, 95%);
+      background-color: transparent;
+    }
+
+    .oembed {
+      background: image-url('ajax-loader2.gif') no-repeat center center;
+      float: left;
+      width: 100%;
+
+      .thumb {
+        @include video-overlay();
+      }
+
+      iframe, .thumb img {
+        width: 100%;
+      }
+    }
+  }
+}

app/assets/templates/comment_tpl.jst.hbs

-<div class="img">
-  {{#linkToPerson author}}
-    {{{personImage this "small" "small"}}}
-  {{/linkToPerson}}
-</div>
+<div id="{{guid}}">
+  <div class="img">
+    {{#linkToPerson author}}
+      {{{personImage this "small" "small"}}}
+    {{/linkToPerson}}
+  </div>
 
-<div class="bd">
-  {{#if canRemove}}
-    <div class="controls">
-      <a href="#" class="delete comment_delete" title="{{t "delete"}}">
-        <div alt="Deletelabel" class="icons-deletelabel" />
-      <a/>
-    </div>
-  {{/if}}
+  <div class="bd">
+    {{#if canRemove}}
+      <div class="controls">
+        <a href="#" class="delete comment_delete" title="{{t "delete"}}">
+          <div alt="Deletelabel" class="icons-deletelabel" />
+        <a/>
+      </div>
+    {{/if}}
 
-  {{#with author}}
-    <a href="/people/{{guid}}" class="author author-name {{hovercardable this}}">
-      {{name}}
-    </a>
-  {{/with}}
+    {{#with author}}
+      <a href="/people/{{guid}}" class="author author-name {{hovercardable this}}">
+        {{name}}
+      </a>
+    {{/with}}
 
-  <div class="collapsible comment-content">
-    {{{text}}}
-  </div>
-
-  <div class="info">
-    <time class="timeago" data-original-title="{{{localTime created_at}}}" datetime="{{created_at}}"/>
+    <div class="collapsible comment-content">
+      {{{text}}}
+    </div>
+    
+    <div class="info">
+      <a href="/posts/{{parent.id}}#{{guid}}" class="permalink_comment">
+        <time class="timeago" data-original-title="{{{localTime created_at}}}" datetime="{{created_at}}"/>
+      </a>
+    </div>
   </div>
 </div>

features/desktop/comments.feature

@@ -58,3 +58,32 @@ Feature: commenting
     Then I should see "less than a minute ago" within "#comments"
     When I go to "alice@alice.alice"'s page
     Then I should see "I think thats a cat"
+
+  Scenario: permalink to comment from within a users stream
+    When I sign in as "bob@bob.bob"
+    And I am on "alice@alice.alice"'s page
+    Then I should see "Look at this dog"
+    When I comment a lot on "Look at this dog"
+    And I focus the comment field
+    And I fill in the following:
+        | text            | I think thats a cat    |
+    And I press "Comment"
+    Then I should see "I think thats a cat" within ".comment:last-child"
+    When I follow "less than a minute ago" within ".comment:last-child"
+    Then I should see "I think thats a cat" within ".comment .highlighted"
+    And I should have scrolled down
+
+  Scenario: permalink to comment from a status show page
+    When I sign in as "bob@bob.bob"
+    And I am on "alice@alice.alice"'s page
+    Then I should see "Look at this dog"
+    When I comment a lot on "Look at this dog"
+    When I focus the comment field
+    And I fill in the following:
+        | text            | I think thats a cat    |
+    And I press "Comment"
+    When I follow "less than a minute ago" within "span.details.grey"
+    Then I should see "I think thats a cat" within ".comments .comment:last-child"
+    When I follow "less than a minute ago" within ".comments .comment:last-child"
+    Then I should see "I think thats a cat" within ".comments .comment .highlighted"
+    And I should have scrolled down

features/step_definitions/comment_steps.rb

@@ -18,3 +18,13 @@ end
 When /^I make a show page comment "([^"]*)"$/ do |comment_text|
   comment_on_show_page(comment_text)
 end
+
+When /^I comment a lot on "([^"]*)"$/ do |post_text|
+  within_post(post_text) do
+    (1..10).each do |n|
+      focus_comment_box
+      make_comment(n)
+    end
+  end
+end
+

features/step_definitions/custom_web_steps.rb

@@ -206,6 +206,10 @@ And /^I scroll down$/ do
   page.execute_script("window.scrollBy(0,3000000)")
 end
 
+Then /^I should have scrolled down$/ do
+  page.evaluate_script("window.pageYOffset").should > 0
+end
+
 Then /^the notification dropdown should be visible$/ do
   find(:css, "#notification_dropdown").should be_visible
 end