Commit cb30ffc3 authored by Steffen van Bergerem's avatar Steffen van Bergerem

Use entypo for post control icons

parent e99fe86c
......@@ -19,6 +19,7 @@ app.views.Conversations = Backbone.View.extend({
setupConversation: function() {
app.helpers.timeago($(this.el));
$('.control-icons a').tooltip({placement: 'bottom'});
var conv = $('.conversation-wrapper .stream_element.selected'),
cBadge = $('#conversations_badge .badge_count');
......
......@@ -10,7 +10,7 @@ app.views.Photo = app.views.Base.extend({
"click .remove_post": "destroyModel"
},
tooltipSelector : ".block_user, .delete",
tooltipSelector : ".control-icons a",
initialize : function() {
$(this.el).attr("id", this.model.get("guid"));
......
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
app.views.SinglePostCommentStream = app.views.CommentStream.extend({
tooltipSelector: "time, .controls a",
tooltipSelector: "time, .control-icons a",
initialize: function(){
$(window).on('hashchange',this.highlightPermalinkComment);
},
highlightPermalinkComment: function() {
if(document.location.hash){
var element = $(document.location.hash);
......
app.views.SinglePostModeration = app.views.Feedback.extend({
templateName: "single-post-viewer/single-post-moderation",
className: 'control-icons',
events: function() {
return _.defaults({
"click .remove_post": "destroyModel",
......
......@@ -22,8 +22,6 @@
/* login */
@import 'new_styles/login';
@import 'new_styles/registration';
@import 'new_styles/landing';
@import 'new_styles/forms';
/* navs */
......
......@@ -127,15 +127,10 @@
padding: 5px;
line-height: 0px;
a.close_conversation {
.hide_conversation, .delete_conversation {
display: block;
margin-top: 10px;
float: right;
.icons-deletelabel {
height: 14px;
width: 14px;
}
margin-top: 25px;
margin-left: 10px;
}
.avatar {
......
.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 {
.controls {
.control-icons {
z-index: 6;
float: right;
......@@ -10,15 +39,6 @@
.destroy_participation,
.post_report {
display: inline-block;
.icons-create_participation,
.icons-deletelabel,
.icons-destroy_participation,
.icons-ignoreuser,
.icons-report {
height: 14px;
width: 14px;
}
}
& > a:hover {
......@@ -27,13 +47,13 @@
}
.stream_element, .comment, .photo, .stream_element:hover .comment {
.controls > a {
.control-icons > a {
@include transition(opacity);
opacity: 0;
}
&:hover .controls {
& > a { opacity: 0.3; }
&:hover .control-icons {
& > a { opacity: 0.8; }
& > a:hover { opacity: 1; }
}
}
......
/* 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;
}
}
}
.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;
}
}
}
}
......@@ -251,10 +251,6 @@ ul.comments li form p, ul.show_comments li form p, div.likes li form p, div.disl
right: 35px;
}
ul.comments li.posted .controls .delete {
float: left
}
.stream .stream_element time {
right: auto;
left: 20px;
......
......@@ -47,7 +47,7 @@
#single-post-moderation {
margin-left: 5px;
> div.info {
> div.control-icons {
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 {
......
......@@ -5,7 +5,7 @@
}
&.deleting {
> .media { opacity: 0.3; }
.controls { display: none !important; }
.control-icons { display: none !important; }
}
}
......@@ -15,17 +15,16 @@
> .bd {
position: relative;
overflow: inherit;
> .controls {
> .control-icons {
border-radius: 4px;
padding-left: 5px;
position: absolute;
right: 6px;
top: 1px;
width: 15px;
height: 15px;
text-align: center;
line-height: 15px;
top: 1px;
}
}
&:hover > .bd > .controls { background: #fff; }
&:hover > .bd > .control-icons { background: #fff; }
}
.thumbnail {
height: 200px;
......
......@@ -6,15 +6,15 @@
</div>
<div class="bd">
<div class="controls">
<div class="control-icons">
{{#if loggedIn}}
{{#if canRemove}}
<a href="#" class="delete comment_delete" title="{{t "delete"}}">
<div alt="Deletelabel" class="icons-deletelabel" />
<i class="entypo trash"></i>
<a/>
{{else}}
<a href="#" data-type="comment" class="comment_report" title="{{t "report.name"}}">
<div class="icons-report"/>
<i class="entypo warning"></i>
</a>
{{/if}}
{{/if}}
......@@ -29,7 +29,7 @@
<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}}"/>
......
<div class="media span4">
<div class="bd">
{{#if loggedIn}}
<div class="controls">
{{#unless authorIsCurrentUser}}
<div class="control-icons">
{{#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"}}">
<div class="icons-report control_icon"/>
<i class="entypo warning"></i>
</a>
<a href="#" rel="nofollow" class="block_user" title="{{t "ignore"}}">
<div class="icons-ignoreuser control_icon"></div>
<i class="entypo block"></i>
</a>
<a href="#" rel="nofollow" class="delete hide_post" title="{{t "stream.hide"}}">
<div class="icons-deletelabel delete control_icon"/>
</a>
{{else}}
<a href="#" rel="nofollow" class="delete remove_post" title="{{t "delete"}}">
<div class="icons-deletelabel delete control_icon"/>
<i class="entypo cross"></i>
</a>
{{/unless}}
{{/if}}
</div>
{{/if}}
......
......@@ -2,18 +2,18 @@
{{#if loggedIn}}
{{#if authorIsCurrentUser}}
<a href="#" class="remove_post" title="{{t "delete"}}">
<i class="entypo gray cross"></i>
<i class="entypo trash"></i>
</a>
{{else}}
<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 href="#" data-type="post" class="block_user" title="{{t "ignore"}}">
<i class="entypo gray">&#128683;</i>
<i class="entypo block"></i>
</a>
<a href="#" data-type="post" class="hide_post" title="{{t "stream.hide"}}">
<i class="entypo gray cross"></i>
<i class="entypo cross"></i>
</a>
{{/if}}
{{/if}}
</div>
\ No newline at end of file
</div>
......@@ -8,31 +8,31 @@
<div class="bd">
{{#if loggedIn}}
<div class="controls">
{{#unless authorIsCurrentUser}}
<div class="control-icons">
{{#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"}}">
<div class="icons-report control_icon"/>
<i class="entypo warning"></i>
</a>
<a href="#" rel="nofollow" class="block_user" title="{{t "ignore"}}">
<div class="icons-ignoreuser control_icon"></div>
<i class="entypo block"></i>
</a>
{{#if participation}}
<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>
{{else}}
<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>
{{/if}}
<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>
{{else}}
<a href="#" rel="nofollow" class="delete remove_post" title="{{t "delete"}}">
<div class="icons-deletelabel delete control_icon"/>
</a>
{{/unless}}
{{/if}}
</div>
{{/if}}
......
......@@ -3,21 +3,22 @@
-# the COPYRIGHT file.
.conversation_participants
- if conversation.participants.count > 1
= link_to(content_tag(:div, nil, :class => 'icons-deletelabel'),
conversation_visibility_path(conversation),
:method => 'delete',
:data => { :confirm => "#{t('.hide')}?" },
:title => t('.hide'),
:class => 'close_conversation')
- else
= link_to(content_tag(:div, nil, :class => 'icons-deletelabel'),
conversation_visibility_path(conversation),
:method => 'delete',
:data => { :confirm => "#{t('.delete')}?" },
:title => t('.delete'),
:class => 'close_conversation')
.control-icons.pull-right
- if conversation.participants.count > 1
= link_to(content_tag(:i, nil, :class => 'entypo cross'),
conversation_visibility_path(conversation),
:method => 'delete',
:data => { :confirm => "#{t('.hide')}?" },
:title => t('.hide'),
:class => 'hide_conversation')
- else
= link_to(content_tag(:i, nil, :class => 'entypo trash'),
conversation_visibility_path(conversation),
:method => 'delete',
:data => { :confirm => "#{t('.delete')}?" },
:title => t('.delete'),
:class => 'delete_conversation')
%h3{ :class => direction_for(conversation.subject) }
= conversation.subject
......
......@@ -12,7 +12,7 @@ Feature: Browsing Diaspora as a logged out user
Scenario: Visiting a profile page
When I am on "bob@bob.bob"'s page
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
When I view "bob@bob.bob"'s first post
......
......@@ -89,7 +89,7 @@ end
When /^I prepare the deletion of the first post$/ do
within(find('.stream .stream_element')) do
ctrl = find('.controls')
ctrl = find('.control-icons')
ctrl.hover
ctrl.find('.remove_post').click
end
......@@ -102,7 +102,7 @@ end
When /^I click to delete the first comment$/ 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
end
end
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment