Use entypo icons on mobile posts
This commit is contained in:
augier
Augier
parent
ed4b2a2c4b
commit
f917757b5b
15 changed files with 82 additions and 152 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 764 B |
Binary file not shown.
|
Before Width: | Height: | Size: 761 B |
|
|
@ -56,7 +56,7 @@ $(document).ready(function(){
|
|||
});
|
||||
|
||||
/* Heart toggle */
|
||||
$(".like_action", ".stream").bind("tap click", function(evt){
|
||||
$(".like-action", ".stream").bind("tap click", function(evt){
|
||||
evt.preventDefault();
|
||||
var link = $(this),
|
||||
likeCounter = $(this).closest(".stream_element").find("like_count"),
|
||||
|
|
@ -99,7 +99,7 @@ $(document).ready(function(){
|
|||
});
|
||||
|
||||
/* Reshare */
|
||||
$(".reshare_action", ".stream").bind("tap click", function(evt){
|
||||
$(".reshare-action", ".stream").bind("tap click", function(evt){
|
||||
evt.preventDefault();
|
||||
|
||||
var link = $(this),
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ $(document).ready(function() {
|
|||
var bottomBar = toggleReactionsLink.closest(".bottom_bar").first(),
|
||||
commentsContainer = commentsContainerLazy(bottomBar),
|
||||
existingCommentsContainer = commentsContainer(),
|
||||
commentActionLink = bottomBar.find("a.comment_action");
|
||||
commentActionLink = bottomBar.find("a.comment-action");
|
||||
if (existingCommentsContainer.length > 0) {
|
||||
showLoadedComments(toggleReactionsLink, existingCommentsContainer, commentActionLink);
|
||||
} else {
|
||||
|
|
@ -73,7 +73,7 @@ $(document).ready(function() {
|
|||
};
|
||||
}
|
||||
|
||||
$(".stream").on("tap click", "a.comment_action", function(evt) {
|
||||
$(".stream").on("tap click", "a.comment-action", function(evt) {
|
||||
evt.preventDefault();
|
||||
showCommentBox(this);
|
||||
var bottomBar = $(this).closest(".bottom_bar").first();
|
||||
|
|
@ -157,7 +157,7 @@ $(document).ready(function() {
|
|||
function handleCommentShowing(form, bottomBar) {
|
||||
var formContainer = form.parent();
|
||||
formContainer.remove();
|
||||
var commentActionLink = bottomBar.find("a.comment_action").first();
|
||||
var commentActionLink = bottomBar.find("a.comment-action").first();
|
||||
commentActionLink.addClass("inactive");
|
||||
var toggleReactionsLink = bottomBar.find(".show_comments").first();
|
||||
showComments(toggleReactionsLink);
|
||||
|
|
|
|||
51
app/assets/stylesheets/mobile/comments.scss
Normal file
51
app/assets/stylesheets/mobile/comments.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
.bottom_bar {
|
||||
border-radius: 0 0 5px 5px;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 8px 10px 10px;
|
||||
background: $background-grey;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid $border-grey;
|
||||
min-height: 22px;
|
||||
|
||||
> a, .show_comments {
|
||||
@include transition(color);
|
||||
color: $text-grey;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.show_comments {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
a.show_comments.active:not(.bottom_collapse) {
|
||||
color: $text;
|
||||
padding-right: 14px;
|
||||
background: {
|
||||
image: image-url("mobile/arrow_down_small.png");
|
||||
position: center right;
|
||||
repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.floater {
|
||||
top: -5px;
|
||||
float: right;
|
||||
height: 28px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
[class^="entypo"] {
|
||||
height: 90%;
|
||||
margin: 0 4px;
|
||||
color: $text-grey;
|
||||
font-size: 24px;
|
||||
&:hover, &:active, &:focus{ text-decoration: none; }
|
||||
&:last-child { margin-right: 1px; }
|
||||
&.entypo-reshare.active { color: $blue; }
|
||||
&.entypo-heart.active { color: $red; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
@import "mobile/conversations";
|
||||
@import "mobile/settings";
|
||||
@import "mobile/stream_element";
|
||||
@import "mobile/comments";
|
||||
|
||||
a {
|
||||
color: #2489ce;
|
||||
|
|
@ -369,87 +370,6 @@ h3 { margin-top: 0; }
|
|||
float: right;
|
||||
}
|
||||
|
||||
.bottom_bar {
|
||||
border-radius: 0 0 5px 5px;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding-top: 8px;
|
||||
background: $background-grey;
|
||||
|
||||
margin: {
|
||||
top: 10px; };
|
||||
|
||||
border: {
|
||||
top: 1px solid $border-grey;
|
||||
};
|
||||
|
||||
min-height: 22px;
|
||||
|
||||
> a,
|
||||
.show_comments {
|
||||
@include transition(color);
|
||||
color: $text-grey;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.show_comments {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
a.show_comments {
|
||||
color: $text-grey;
|
||||
|
||||
&.active:not(.bottom_collapse) {
|
||||
color: #444;
|
||||
padding: {
|
||||
right: 14px;
|
||||
}
|
||||
background: {
|
||||
image: image-url("mobile/arrow_down_small.png");
|
||||
position: center right;
|
||||
repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#bottom_bar_tabs {
|
||||
display: table;
|
||||
width: 100%;
|
||||
text: {
|
||||
align: center;
|
||||
}
|
||||
border: {
|
||||
bottom: 1px solid #ccc;
|
||||
}
|
||||
font: {
|
||||
size: 28px;
|
||||
}
|
||||
color: #ccc;
|
||||
|
||||
.tab {
|
||||
display: table-cell;
|
||||
position:relative;
|
||||
top: -5px;
|
||||
|
||||
border: {
|
||||
right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.floater {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.photo_area {
|
||||
border-radius: 3px;
|
||||
text-align: center; }
|
||||
|
|
@ -476,27 +396,6 @@ h3 { margin-top: 0; }
|
|||
}
|
||||
}
|
||||
|
||||
.reshare_action {
|
||||
background-image: image-url("mobile/reshare_mobile.png");
|
||||
&.active {
|
||||
background-image: image-url("mobile/reshare_mobile_active.png");
|
||||
}
|
||||
}
|
||||
|
||||
.like_action {
|
||||
background-image: image-url("mobile/heart_mobile_grey.png");
|
||||
&.active {
|
||||
background-image: image-url("mobile/heart_mobile_red.png");
|
||||
}
|
||||
}
|
||||
|
||||
.comment_action.image_link {
|
||||
background-image: image-url("mobile/pencil_mobile_grey_active.png");
|
||||
&.inactive {
|
||||
background-image: image-url("mobile/pencil_mobile_grey.png");
|
||||
}
|
||||
}
|
||||
|
||||
#new_status_message {
|
||||
margin: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,41 +1,40 @@
|
|||
module MobileHelper
|
||||
def aspect_select_options(aspects, selected)
|
||||
selected_id = selected == :all ? "" : selected.id
|
||||
'<option value="" >All</option>\n'.html_safe + options_from_collection_for_select(aspects, "id", "name", selected_id)
|
||||
end
|
||||
|
||||
def mobile_reshare_icon(post)
|
||||
if (post.public? || reshare?(post)) && (user_signed_in? && post.author != current_user.person)
|
||||
absolute_root = reshare?(post) ? post.absolute_root : post
|
||||
|
||||
if absolute_root && absolute_root.author != current_user.person
|
||||
reshare = Reshare.where(:author_id => current_user.person_id,
|
||||
:root_guid => absolute_root.guid).first
|
||||
reshare = Reshare.where(author_id: current_user.person_id,
|
||||
root_guid: absolute_root.guid).first
|
||||
klass = reshare.present? ? "active" : "inactive"
|
||||
link_to '', reshares_path(:root_guid => absolute_root.guid), :title => t('reshares.reshare.reshare_confirmation', :author => absolute_root.author_name), :class => "image_link reshare_action #{klass}"
|
||||
link_to "", reshares_path(root_guid: absolute_root.guid),
|
||||
title: t("reshares.reshare.reshare_confirmation", author: absolute_root.author_name),
|
||||
class: "entypo-reshare reshare-action #{klass}"
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
def mobile_like_icon(post)
|
||||
if current_user && current_user.liked?(post)
|
||||
link_to '', post_like_path(post.id, current_user.like_for(post).id), :class => "image_link like_action active"
|
||||
link_to "", post_like_path(post.id, current_user.like_for(post).id), class: "entypo-heart like-action active"
|
||||
else
|
||||
link_to '', post_likes_path(post.id), :class => "image_link like_action inactive"
|
||||
link_to "", post_likes_path(post.id), class: "entypo-heart like-action inactive"
|
||||
end
|
||||
end
|
||||
|
||||
def mobile_comment_icon(post)
|
||||
link_to '', new_post_comment_path(post), :class => "image_link comment_action inactive"
|
||||
link_to "", new_post_comment_path(post), class: "entypo-comment comment-action inactive"
|
||||
end
|
||||
|
||||
def reactions_link(post)
|
||||
reactions_count = post.comments_count + post.likes_count
|
||||
if reactions_count > 0
|
||||
link_to "#{t('reactions', :count => reactions_count)}", post_comments_path(post, :format => "mobile"), :class => 'show_comments'
|
||||
link_to "#{t('reactions', count: reactions_count)}",
|
||||
post_comments_path(post, format: "mobile"),
|
||||
class: "show_comments"
|
||||
else
|
||||
html = "<span class='show_comments'>"
|
||||
html << "#{t('reactions', :count => reactions_count)}"
|
||||
html << "#{t('reactions', count: reactions_count)}"
|
||||
html << "</span>"
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Feature: Viewing my activity on the steam mobile page
|
|||
And I should not see "Hello! I am #newhere"
|
||||
|
||||
Scenario: Show post on my activity
|
||||
When I click on selector "a.image_link.like_action.inactive"
|
||||
When I click on selector "a.like-action.inactive"
|
||||
And I open the drawer
|
||||
And I follow "My activity"
|
||||
Then I should see "My activity"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ Feature: Browsing Diaspora as a logged out user mobile
|
|||
Given a user named "Bob Jones" with email "bob@bob.bob"
|
||||
And "bob@bob.bob" has a public post with text "public stuff"
|
||||
And I sign in as "bob@bob.bob"
|
||||
And I click on selector "a.image_link.comment_action.inactive"
|
||||
And I click on selector "a.comment-action.inactive"
|
||||
And I fill in the following:
|
||||
| text | this also |
|
||||
And I press "Comment"
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ Feature: Not safe for work
|
|||
And I toggle all nsfw posts
|
||||
And I follow "Reshare"
|
||||
And I confirm the alert
|
||||
Then I should see a "a.image_link.reshare_action.active"
|
||||
Then I should see a "a.reshare-action.active"
|
||||
|
||||
When I go to the home page
|
||||
Then I should not see "Sexy Senators Gone Wild!"
|
||||
|
|
@ -59,7 +59,7 @@ Feature: Not safe for work
|
|||
And I toggle all nsfw posts
|
||||
And I follow "Reshare"
|
||||
And I confirm the alert
|
||||
Then I should see a "a.image_link.reshare_action.active"
|
||||
Then I should see a "a.reshare-action.active"
|
||||
|
||||
When I go to the home page
|
||||
Then I should not see "Sexy Senators Gone Wild!"
|
||||
|
|
@ -73,7 +73,7 @@ Feature: Not safe for work
|
|||
And I toggle all nsfw posts
|
||||
And I follow "Reshare"
|
||||
And I confirm the alert
|
||||
Then I should see a "a.image_link.reshare_action.active"
|
||||
Then I should see a "a.reshare-action.active"
|
||||
|
||||
When I go to the home page
|
||||
Then I should not see "Sexy Senators Gone Wild!"
|
||||
|
|
|
|||
|
|
@ -16,15 +16,15 @@ Feature: reactions mobile post
|
|||
Scenario: like on a mobile post
|
||||
When I should see "No reactions" within ".show_comments"
|
||||
And I click on selector "span.show_comments"
|
||||
And I click on selector "a.image_link.like_action.inactive"
|
||||
Then I should see a "a.image_link.like_action.active"
|
||||
And I click on selector "a.like-action.inactive"
|
||||
Then I should see a "a.like-action.active"
|
||||
When I go to the stream page
|
||||
And I should see "1 reaction" within ".show_comments"
|
||||
And I click on selector "a.show_comments"
|
||||
Then I should see "1" within ".like_count"
|
||||
|
||||
Scenario: comment and delete a mobile post
|
||||
When I click on selector "a.image_link.comment_action.inactive"
|
||||
When I click on selector "a.comment-action.inactive"
|
||||
And I fill in the following:
|
||||
| text | is that a poodle? |
|
||||
And I press "Comment"
|
||||
|
|
@ -33,7 +33,7 @@ Feature: reactions mobile post
|
|||
And I should see "1 reaction" within ".show_comments"
|
||||
And I click on selector "a.show_comments"
|
||||
And I should see "1" within ".comment_count"
|
||||
When I click on selector "a.image_link.comment_action"
|
||||
When I click on selector "a.comment-action"
|
||||
And I click on selector "a.remove"
|
||||
And I confirm the alert
|
||||
Then I should not see "1 reaction" within ".show_comments"
|
||||
|
|
|
|||
|
|
@ -16,18 +16,18 @@ Feature: resharing from the mobile
|
|||
And I sign in as "alice@alice.alice"
|
||||
|
||||
Scenario: Resharing a post from a single post page
|
||||
And I click on selector "a.image_link.reshare_action.inactive"
|
||||
And I click on selector "a.reshare-action.inactive"
|
||||
And I confirm the alert
|
||||
Then I should see a "a.image_link.reshare_action.active"
|
||||
Then I should see a "a.reshare-action.active"
|
||||
When I go to the stream page
|
||||
Then I should see "Reshared via" within ".reshare_via"
|
||||
|
||||
Scenario: Resharing a post from a single post page that is reshared
|
||||
Given the post with text "reshare this!" is reshared by "eve@eve.eve"
|
||||
And a user with email "alice@alice.alice" is connected with "eve@eve.eve"
|
||||
And I click on the first selector "a.image_link.reshare_action.inactive"
|
||||
And I click on the first selector "a.reshare-action.inactive"
|
||||
And I confirm the alert
|
||||
Then I should see a "a.image_link.reshare_action.active"
|
||||
Then I should see a "a.reshare-action.active"
|
||||
When I go to the stream page
|
||||
Then I should see "Reshared via" within ".reshare_via"
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
# Copyright (c) 2010-2011, Diaspora Inc. This file is
|
||||
# licensed under the Affero General Public License version 3 or later. See
|
||||
# the COPYRIGHT file.
|
||||
|
||||
require 'spec_helper'
|
||||
|
||||
describe MobileHelper, :type => :helper do
|
||||
|
||||
describe "#aspect_select_options" do
|
||||
it "adds an all option to the list of aspects" do
|
||||
# options_from_collection_for_select(@aspects, "id", "name", @aspect.id)
|
||||
|
||||
n = FactoryGirl.create(:aspect)
|
||||
|
||||
options = aspect_select_options([n], n).split('\n')
|
||||
expect(options.first).to match(/All/)
|
||||
end
|
||||
end
|
||||
end
|
||||
Loading…
Reference in a new issue