Commit 20e16264 authored by Steffen van Bergerem's avatar Steffen van Bergerem

add permalinks for comments

parent dae69f95
......@@ -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.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.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";
},
};
......@@ -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)
......
......@@ -159,6 +159,12 @@
@include opacity(0.3);
}
}
>.highlighted {
border-left: 3px solid $blue;
padding-left: 3px;
}
.controls {
@include transition(opacity);
@include opacity(0);
......
.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%;
}
}
}
}
<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>
......@@ -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
......@@ -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
......@@ -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_drop