diff --git a/Changelog.md b/Changelog.md
index 7391d1be8fd719f30dec53d8daa35d006989ca64..41133592f8ef1e7fe90a1bdcc80ab6b63c59b7b9 100644
--- a/Changelog.md
+++ b/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
diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js
index 5bd99b54f7e2a294880bf9b80f0f8415ada817ec..b4a746a29cc8dc0ff033d559621bb823ab80dbfc 100644
--- a/app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js
+++ b/app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js
@@ -1,9 +1,25 @@
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) {
diff --git a/app/assets/javascripts/app/views/stream/shortcuts.js b/app/assets/javascripts/app/views/stream/shortcuts.js
index 1df9c729f366c73d1ca64e00078185aa312cfc77..11f39e2b73a61c86c0e36417a1b07cfd28dff312 100644
--- a/app/assets/javascripts/app/views/stream/shortcuts.js
+++ b/app/assets/javascripts/app/views/stream/shortcuts.js
@@ -1,7 +1,6 @@
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";
},
};
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index fff92719bea97934d53f950dbac6ca60b0b0d7f0..fcfe3b56f7550643de3f4c6a88d2450187142c4e 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/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)
diff --git a/app/assets/stylesheets/single-post-view.css.scss b/app/assets/stylesheets/single-post-view.css.scss
index 4f867804622573b7dc580757093b878902ac4856..da421b1ce74a483165c4614e60b679ce941659c5 100644
--- a/app/assets/stylesheets/single-post-view.css.scss
+++ b/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);
diff --git a/app/assets/stylesheets/stream_element.css.scss b/app/assets/stylesheets/stream_element.css.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a3b2bc3e0cd78f50a47e9fcb9acd1330dc87999a
--- /dev/null
+++ b/app/assets/stylesheets/stream_element.css.scss
@@ -0,0 +1,281 @@
+.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%;
+ }
+ }
+ }
+}
diff --git a/app/assets/templates/comment_tpl.jst.hbs b/app/assets/templates/comment_tpl.jst.hbs
index d1dfdfdbe29259cac4d452e1bb0285c04e2fdd99..e87eb2eeb35626f60915d58805ee65d46d1baf6d 100644
--- a/app/assets/templates/comment_tpl.jst.hbs
+++ b/app/assets/templates/comment_tpl.jst.hbs
@@ -1,29 +1,33 @@
-<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>
diff --git a/features/desktop/comments.feature b/features/desktop/comments.feature
index 6a25a261a86f57743fe5d21bf6ddd00d289fc992..9d1e3dbf5ad3ec1d63c629ab67915be7a1292d3c 100644
--- a/features/desktop/comments.feature
+++ b/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
diff --git a/features/step_definitions/comment_steps.rb b/features/step_definitions/comment_steps.rb
index 4569a92ebd05464a4279c85e384838d532d69d91..c8ee0084f05a1a37c97e3f6a452e84e52df186ac 100644
--- a/features/step_definitions/comment_steps.rb
+++ b/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
+
diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb
index 0c282b02106674a50c1130621b7e8e59bae9fdf9..e092c6bc1fbbabf9a58eb2831302a97169e8807a 100644
--- a/features/step_definitions/custom_web_steps.rb
+++ b/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