add permalinks for comments
This commit is contained in:
Steffen van Bergerem
parent
dae69f9558
commit
20e1626453
10 changed files with 379 additions and 244 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
281
app/assets/stylesheets/stream_element.css.scss
Normal file
281
app/assets/stylesheets/stream_element.css.scss
Normal file
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 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}}
|
||||
|
||||
<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>
|
||||
{{/if}}
|
||||
|
||||
{{#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>
|
||||
</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_dropdown").should be_visible
|
||||
end
|
||||
|
|
|
|||
Loading…
Reference in a new issue