nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use entypo for post control icons

Browse source
This commit is contained in:
Steffen van Bergerem 2015-03-12 02:44:34 +01:00
parent e99fe86ca0
commit cb30ffc368
19 changed files with 102 additions and 240 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/app/views/conversations_view.js
View file

@ -19,6 +19,7 @@ app.views.Conversations = Backbone.View.extend({
setupConversation: function() { setupConversation: function() {
app.helpers.timeago($(this.el)); app.helpers.timeago($(this.el));
$('.control-icons a').tooltip({placement: 'bottom'});
var conv = $('.conversation-wrapper .stream_element.selected'), var conv = $('.conversation-wrapper .stream_element.selected'),
cBadge = $('#conversations_badge .badge_count'); cBadge = $('#conversations_badge .badge_count');

2
app/assets/javascripts/app/views/photo_view.js
View file

@ -10,7 +10,7 @@ app.views.Photo = app.views.Base.extend({
"click .remove_post": "destroyModel" "click .remove_post": "destroyModel"
}, },
tooltipSelector : ".block_user, .delete", tooltipSelector : ".control-icons a",
initialize : function() { initialize : function() {
$(this.el).attr("id", this.model.get("guid")); $(this.el).attr("id", this.model.get("guid"));

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

@ -1,12 +1,12 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
app.views.SinglePostCommentStream = app.views.CommentStream.extend({ app.views.SinglePostCommentStream = app.views.CommentStream.extend({
tooltipSelector: "time, .controls a", tooltipSelector: "time, .control-icons a",
initialize: function(){ initialize: function(){
$(window).on('hashchange',this.highlightPermalinkComment); $(window).on('hashchange',this.highlightPermalinkComment);
}, },
highlightPermalinkComment: function() { highlightPermalinkComment: function() {
if(document.location.hash){ if(document.location.hash){
var element = $(document.location.hash); var element = $(document.location.hash);

2
app/assets/javascripts/app/views/single-post-viewer/single_post_moderation.js
View file

@ -1,6 +1,8 @@
app.views.SinglePostModeration = app.views.Feedback.extend({ app.views.SinglePostModeration = app.views.Feedback.extend({
templateName: "single-post-viewer/single-post-moderation", templateName: "single-post-viewer/single-post-moderation",
className: 'control-icons',
events: function() { events: function() {
return _.defaults({ return _.defaults({
"click .remove_post": "destroyModel", "click .remove_post": "destroyModel",

2
app/assets/stylesheets/application.scss
View file

@ -22,8 +22,6 @@
/* login */ /* login */
@import 'new_styles/login'; @import 'new_styles/login';
@import 'new_styles/registration'; @import 'new_styles/registration';
@import 'new_styles/landing';
@import 'new_styles/forms'; @import 'new_styles/forms';
/* navs */ /* navs */

11
app/assets/stylesheets/conversations.scss
View file

@ -127,15 +127,10 @@
padding: 5px; padding: 5px;
line-height: 0px; line-height: 0px;
a.close_conversation { .hide_conversation, .delete_conversation {
display: block; display: block;
margin-top: 10px; margin-top: 25px;
float: right; margin-left: 10px;
.icons-deletelabel {
height: 14px;
width: 14px;
}
} }
.avatar { .avatar {

46
app/assets/stylesheets/new_styles/_interactions.scss
View file

@ -1,5 +1,34 @@
.control-icons {
a {
margin-right: 5px;
&:hover { text-decoration: none; }
i.entypo {
color: $text-grey;
font-size: $font-size-text;
line-height: $line-height;
vertical-align: top;
&:hover { color: $text; }
&.cross { font-size: $line-height; }
}
&.hide_conversation i {
font-size: $line-height*1.5;
}
&.delete_conversation i {
font-size: $font-size-text*1.5;
}
&.destroy_participation i {
color: $black;
&:hover { color: $text-dark-grey; }
}
}
}
.stream_container, #single-post-interactions { .stream_container, #single-post-interactions {
.controls { .control-icons {
z-index: 6; z-index: 6;
float: right; float: right;
@ -10,15 +39,6 @@
.destroy_participation, .destroy_participation,
.post_report { .post_report {
display: inline-block; display: inline-block;
.icons-create_participation,
.icons-deletelabel,
.icons-destroy_participation,
.icons-ignoreuser,
.icons-report {
height: 14px;
width: 14px;
}
} }
& > a:hover { & > a:hover {
@ -27,13 +47,13 @@
} }
.stream_element, .comment, .photo, .stream_element:hover .comment { .stream_element, .comment, .photo, .stream_element:hover .comment {
.controls > a { .control-icons > a {
@include transition(opacity); @include transition(opacity);
opacity: 0; opacity: 0;
} }
&:hover .controls { &:hover .control-icons {
& > a { opacity: 0.3; } & > a { opacity: 0.8; }
& > a:hover { opacity: 1; } & > a:hover { opacity: 1; }
} }
} }

113
app/assets/stylesheets/new_styles/_landing.scss
View file

@ -1,113 +0,0 @@
/* le declarations */
#landing {
overflow : hidden;
position : absolute;
min-height : 100%;
width : 100%;
top : 0;
left : 0;
background : {
color : #fff;
}
#sign_up {
text-align:center;
position : relative;
z-index : 20;
border-bottom: 1px solid #ccc;
padding-bottom:50px;
form {
label.control-label { width : 80px !important; text-align:right; }
.controls { margin-left : 100px; }
input[type='submit'] {
@include transition(background);
box-shadow: 0 0 0 0;
font-size:1.2em;
background : #99CC00;
color : #fff;
text-shadow : 0 -1px 0 #669900;
border : 1px solid $border-dark-grey;
&:hover {
background : desaturate(#99CC00, 15%);
}
&:active {
box-shadow: 0 0 0 0;
background : darken(rgb(255, 77, 54), 2%);
}
}
}
}
#invites {
margin : 20px 0;
}
#footer {
position : absolute;
bottom : 0;
left : 0;
width : 100%;
padding : 10px 0;
color : #333;
text-align : center;
}
#landing_banner {
.container {
position:relative;
}
text-align:center;
padding:50px;
margin-bottom:50px;
color:#ccc;
background:#222;
h2 {
font-weight:100;
}
.landing-logo {
margin-bottom:15px;
height:60px;
}
.landing-banner-right {
position:absolute;
right:0;
a {
color:#ccc;
font-size:1.2em;
font-weight:100;
padding:5px 10px;
}
}
.login-button {
border-radius: 3px;
border:1px solid #666;
background:#111;
&:hover {
background:#222;
border:1px solid $border-dark-grey;
text-decoration:none;
}
}
}
#steps {
text-align: center;
p {
color: $text-dark-grey;
}
}
}

19
app/assets/stylesheets/photo.scss
View file

@ -1,19 +0,0 @@
.photo {
.controls:first-child {
.control_icon {
@include transition(opacity);
opacity: 0;
}
}
&:hover {
.controls:first-child {
.control_icon {
opacity: 0.3;
}
.control_icon:hover {
opacity: 1;
}
}
}
}

4
app/assets/stylesheets/rtl.scss
View file

@ -251,10 +251,6 @@ ul.comments li form p, ul.show_comments li form p, div.likes li form p, div.disl
right: 35px; right: 35px;
} }
ul.comments li.posted .controls .delete {
float: left
}
.stream .stream_element time { .stream .stream_element time {
right: auto; right: auto;
left: 20px; left: 20px;

20
app/assets/stylesheets/single-post-view.scss
View file

@ -47,7 +47,7 @@
#single-post-moderation { #single-post-moderation {
margin-left: 5px; margin-left: 5px;
> div.info { > div.control-icons {
display: inline-block; display: inline-block;
} }
} }
@ -94,24 +94,6 @@
} }
} }
} }
#single-post-moderation {
a:hover {
text-decoration: none;
}
i {
padding-right: 5px;
vertical-align: top;
&:hover {
color: #424242;
}
}
a.post_report > i {
font-size: $font-size-text;
}
i.cross {
font-size: 20px;
}
}
} }
#body { #body {

13
app/assets/stylesheets/stream_element.scss
View file

@ -5,7 +5,7 @@
} }
&.deleting { &.deleting {
> .media { opacity: 0.3; } > .media { opacity: 0.3; }
.controls { display: none !important; } .control-icons { display: none !important; }
} }
} }
@ -15,17 +15,16 @@
> .bd { > .bd {
position: relative; position: relative;
overflow: inherit; overflow: inherit;
> .controls { > .control-icons {
border-radius: 4px;
padding-left: 5px;
position: absolute; position: absolute;
right: 6px; right: 6px;
top: 1px;
width: 15px;
height: 15px;
text-align: center; text-align: center;
line-height: 15px; top: 1px;
} }
} }
&:hover > .bd > .controls { background: #fff; } &:hover > .bd > .control-icons { background: #fff; }
} }
.thumbnail { .thumbnail {
height: 200px; height: 200px;

8
app/assets/templates/comment_tpl.jst.hbs
View file

@ -6,15 +6,15 @@
</div> </div>
<div class="bd"> <div class="bd">
<div class="controls"> <div class="control-icons">
{{#if loggedIn}} {{#if loggedIn}}
{{#if canRemove}} {{#if canRemove}}
<a href="#" class="delete comment_delete" title="{{t "delete"}}"> <a href="#" class="delete comment_delete" title="{{t "delete"}}">
<div alt="Deletelabel" class="icons-deletelabel" /> <i class="entypo trash"></i>
<a/> <a/>
{{else}} {{else}}
<a href="#" data-type="comment" class="comment_report" title="{{t "report.name"}}"> <a href="#" data-type="comment" class="comment_report" title="{{t "report.name"}}">
<div class="icons-report"/> <i class="entypo warning"></i>
</a> </a>
{{/if}} {{/if}}
{{/if}} {{/if}}
@ -29,7 +29,7 @@
<div class="collapsible comment-content"> <div class="collapsible comment-content">
{{{text}}} {{{text}}}
</div> </div>
<div class="info"> <div class="info">
<a href="/posts/{{parent.id}}#{{guid}}" class="permalink_comment"> <a href="/posts/{{parent.id}}#{{guid}}" class="permalink_comment">
<time class="timeago" data-original-title="{{{localTime created_at}}}" datetime="{{created_at}}"/> <time class="timeago" data-original-title="{{{localTime created_at}}}" datetime="{{created_at}}"/>

26
app/assets/templates/photo_tpl.jst.hbs
View file

@ -1,22 +1,22 @@
<div class="media span4"> <div class="media span4">
<div class="bd"> <div class="bd">
{{#if loggedIn}} {{#if loggedIn}}
<div class="controls"> <div class="control-icons">
{{#unless authorIsCurrentUser}} {{#if authorIsCurrentUser}}
<a href="#" rel="nofollow" data-type="post" class="post_report" title="{{t "report.name"}}"> <a href="#" rel="nofollow" class="delete remove_post" title="{{t "delete"}}">
<div class="icons-report control_icon"/> <i class="entypo trash"></i>
</a>
<a href="#" rel="nofollow" class="block_user" title="{{t "ignore"}}">
<div class="icons-ignoreuser control_icon"></div>
</a>
<a href="#" rel="nofollow" class="delete hide_post" title="{{t "stream.hide"}}">
<div class="icons-deletelabel delete control_icon"/>
</a> </a>
{{else}} {{else}}
<a href="#" rel="nofollow" class="delete remove_post" title="{{t "delete"}}"> <a href="#" rel="nofollow" data-type="post" class="post_report" title="{{t "report.name"}}">
<div class="icons-deletelabel delete control_icon"/> <i class="entypo warning"></i>
</a> </a>
{{/unless}} <a href="#" rel="nofollow" class="block_user" title="{{t "ignore"}}">
<i class="entypo block"></i>
</a>
<a href="#" rel="nofollow" class="delete hide_post" title="{{t "stream.hide"}}">
<i class="entypo cross"></i>
</a>
{{/if}}
</div> </div>
{{/if}} {{/if}}

10
app/assets/templates/single-post-viewer/single-post-moderation_tpl.jst.hbs
View file

@ -2,18 +2,18 @@
{{#if loggedIn}} {{#if loggedIn}}
{{#if authorIsCurrentUser}} {{#if authorIsCurrentUser}}
<a href="#" class="remove_post" title="{{t "delete"}}"> <a href="#" class="remove_post" title="{{t "delete"}}">
<i class="entypo gray cross"></i> <i class="entypo trash"></i>
</a> </a>
{{else}} {{else}}
<a href="#" data-type="post" class="post_report" title="{{t "report.name"}}"> <a href="#" data-type="post" class="post_report" title="{{t "report.name"}}">
<i class="entypo gray">&#x21;</i> <i class="entypo warning"></i>
</a> </a>
<a href="#" data-type="post" class="block_user" title="{{t "ignore"}}"> <a href="#" data-type="post" class="block_user" title="{{t "ignore"}}">
<i class="entypo gray">&#128683;</i> <i class="entypo block"></i>
</a> </a>
<a href="#" data-type="post" class="hide_post" title="{{t "stream.hide"}}"> <a href="#" data-type="post" class="hide_post" title="{{t "stream.hide"}}">
<i class="entypo gray cross"></i> <i class="entypo cross"></i>
</a> </a>
{{/if}} {{/if}}
{{/if}} {{/if}}
</div> </div>

24
app/assets/templates/stream-element_tpl.jst.hbs
View file

@ -8,31 +8,31 @@
<div class="bd"> <div class="bd">
{{#if loggedIn}} {{#if loggedIn}}
<div class="controls"> <div class="control-icons">
{{#unless authorIsCurrentUser}} {{#if authorIsCurrentUser}}
<a href="#" rel="nofollow" class="delete remove_post" title="{{t "delete"}}">
<i class="entypo trash"></i>
</a>
{{else}}
<a href="#" rel="nofollow" data-type="post" class="post_report" title="{{t "report.name"}}"> <a href="#" rel="nofollow" data-type="post" class="post_report" title="{{t "report.name"}}">
<div class="icons-report control_icon"/> <i class="entypo warning"></i>
</a> </a>
<a href="#" rel="nofollow" class="block_user" title="{{t "ignore"}}"> <a href="#" rel="nofollow" class="block_user" title="{{t "ignore"}}">
<div class="icons-ignoreuser control_icon"></div> <i class="entypo block"></i>
</a> </a>
{{#if participation}} {{#if participation}}
<a href="#" rel="nofollow" class="destroy_participation" title="{{t "stream.disable_post_notifications"}}"> <a href="#" rel="nofollow" class="destroy_participation" title="{{t "stream.disable_post_notifications"}}">
<div class="icons-destroy_participation control_icon"></div> <i class="entypo bell"></i>
</a> </a>
{{else}} {{else}}
<a href="#" rel="nofollow" class="create_participation" title="{{t "stream.enable_post_notifications"}}"> <a href="#" rel="nofollow" class="create_participation" title="{{t "stream.enable_post_notifications"}}">
<div class="icons-create_participation control_icon"></div> <i class="entypo bell"></i>
</a> </a>
{{/if}} {{/if}}
<a href="#" rel="nofollow" class="delete hide_post" title="{{t "stream.hide"}}"> <a href="#" rel="nofollow" class="delete hide_post" title="{{t "stream.hide"}}">
<div class="icons-deletelabel delete control_icon"/> <i class="entypo cross"></i>
</a> </a>
{{else}} {{/if}}
<a href="#" rel="nofollow" class="delete remove_post" title="{{t "delete"}}">
<div class="icons-deletelabel delete control_icon"/>
</a>
{{/unless}}
</div> </div>
{{/if}} {{/if}}

31
app/views/conversations/_show.haml
View file

@ -3,21 +3,22 @@
-# the COPYRIGHT file. -# the COPYRIGHT file.
.conversation_participants .conversation_participants
- if conversation.participants.count > 1 .control-icons.pull-right
= link_to(content_tag(:div, nil, :class => 'icons-deletelabel'), - if conversation.participants.count > 1
conversation_visibility_path(conversation), = link_to(content_tag(:i, nil, :class => 'entypo cross'),
:method => 'delete', conversation_visibility_path(conversation),
:data => { :confirm => "#{t('.hide')}?" }, :method => 'delete',
:title => t('.hide'), :data => { :confirm => "#{t('.hide')}?" },
:class => 'close_conversation') :title => t('.hide'),
- else :class => 'hide_conversation')
= link_to(content_tag(:div, nil, :class => 'icons-deletelabel'), - else
conversation_visibility_path(conversation), = link_to(content_tag(:i, nil, :class => 'entypo trash'),
:method => 'delete', conversation_visibility_path(conversation),
:data => { :confirm => "#{t('.delete')}?" }, :method => 'delete',
:title => t('.delete'), :data => { :confirm => "#{t('.delete')}?" },
:class => 'close_conversation') :title => t('.delete'),
:class => 'delete_conversation')
%h3{ :class => direction_for(conversation.subject) } %h3{ :class => direction_for(conversation.subject) }
= conversation.subject = conversation.subject

2
features/desktop/logged_out_browsing.feature
View file

@ -12,7 +12,7 @@ Feature: Browsing Diaspora as a logged out user
Scenario: Visiting a profile page Scenario: Visiting a profile page
When I am on "bob@bob.bob"'s page When I am on "bob@bob.bob"'s page
Then I should see "public stuff" within "body" Then I should see "public stuff" within "body"
And page should not have ".media .controls" And page should not have ".media .control-icons"
Scenario: Visiting a post show page Scenario: Visiting a post show page
When I view "bob@bob.bob"'s first post When I view "bob@bob.bob"'s first post

4
features/step_definitions/custom_web_steps.rb
View file

@ -89,7 +89,7 @@ end
When /^I prepare the deletion of the first post$/ do When /^I prepare the deletion of the first post$/ do
within(find('.stream .stream_element')) do within(find('.stream .stream_element')) do
ctrl = find('.controls') ctrl = find('.control-icons')
ctrl.hover ctrl.hover
ctrl.find('.remove_post').click ctrl.find('.remove_post').click
end end
@ -102,7 +102,7 @@ end
When /^I click to delete the first comment$/ do When /^I click to delete the first comment$/ do
within("div.comment", match: :first) do within("div.comment", match: :first) do
find(".controls").hover find(".control-icons").hover
find(".comment_delete", visible: false).click # TODO: hax to check what's failing on Travis find(".comment_delete", visible: false).click # TODO: hax to check what's failing on Travis
end end
end end