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

Improve mobile conversations design

Browse source
This commit is contained in:
augier 2015-09-04 15:51:46 +02:00
parent ac6e9fd7c7
commit 44d71c3905
13 changed files with 35 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -27,7 +27,7 @@ app.views.Conversations = Backbone.View.extend({
cBadge = $("#conversations-link .badge");
if(conv.hasClass("unread") ){
var unreadCount = parseInt(conv.find(".unread_message_count").text(), 10);
var unreadCount = parseInt(conv.find(".unread-message-count").text(), 10);
if(cBadge.text() !== "") {
cBadge.text().replace(/\d+/, function(num){
@ -40,7 +40,7 @@ app.views.Conversations = Backbone.View.extend({
});
}
conv.removeClass("unread");
conv.find(".unread_message_count").remove();
conv.find(".unread-message-count").remove();
var pos = $("#first_unread").offset().top - 50;
$("html").animate({scrollTop:pos});

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

@ -74,9 +74,8 @@
}
.last_author { color: $text-dark-grey; }
.message_count, .unread_message_count {
.message-count, .unread-message-count {
margin-left: 3px;
float: right;
font-size: 12px;
font-weight: normal;
}
@ -251,7 +250,3 @@
input#contact_ids { box-shadow: none; }
label { font-weight: bold; }
}
.badge-important {
background-color: $brand-danger;
}

1
app/assets/stylesheets/header.scss
View file

@ -124,7 +124,6 @@ header > .dark-header > nav {
.nav-badge {
margin-bottom: -2px;
.badge {
background-color: $brand-danger;
position: absolute;
right: 10px;
top: 10px;

10
app/assets/stylesheets/mobile/conversations.scss
View file

@ -1,11 +1,9 @@
.conversations-title { margin: 0 0 20px 0; }
.conversation {
.conversation_participants {
padding: 1rem 1.2rem;
h3 {
margin: 0px;
}
h3 { margin: 0; }
.delete_conversation {
font-size: 2rem;
@ -56,3 +54,7 @@
margin-top: 40px;
}
}
.subject { padding: 0 10px; }
.message-count, .unread-message-count { margin: 10px 2px; }

27
app/assets/stylesheets/mobile/mobile.scss
View file

@ -46,6 +46,8 @@ h3 { margin-top: 0; }
border-radius: 4px;
}
.badge-important { background-color: $red; }
.stream_element,
.comments {
overflow: auto;
@ -529,31 +531,6 @@ select {
margin-bottom: 5px;
}
.message_count {
border-radius: 2px 2px 2px 2px;
float: right;
margin: 10px 10px 1px 5px;
padding: 0 2px 1px;
position: relative;
background-color: #999;
color: #eee;
font-size: 10px;
line-height: 12px;
}
.unread_message_count {
border-radius: 2px 2px 2px 2px;
float: right;
margin: 10px 2px 1px 5px;
padding: 0 2px 1px;
position: relative;
background-color: #B11;
color: #EEE;
font-size: 10px;
line-height: 12px;
}
.last_author {
position: relative;
margin: 10px 10px 2px;

5
app/assets/stylesheets/new_styles/_base.scss
View file

@ -84,3 +84,8 @@ a.tag { word-break: break-all; }
padding : 0;
}
}
/* badge color */
.badge-important {
background-color: $red;
}

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

@ -258,7 +258,7 @@ ul.comments li form p, ul.show_comments li form p, div.likes li form p, div.disl
padding-left: 0;
}
.stream_element.conversation .message_count {
.stream_element.conversation .message-count {
right: auto;
left: 10px;
}

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

@ -16,7 +16,7 @@
<li>
<a href="/notifications" title="{{t "header.notifications"}}" class="notifications-link nav-badge">
<i class="entypo-bell"></i>
<span class="badge {{#unless current_user.notifications_count}} hidden {{/unless}}">
<span class="badge badge-important {{#unless current_user.notifications_count}} hidden {{/unless}}">
{{current_user.notifications_count}}
</span>
</a>
@ -24,7 +24,7 @@
<li>
<a href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge">
<i class="entypo-mail"></i>
<span class="badge {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
<span class="badge badge-important {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
{{current_user.unread_messages_count}}
</span>
</a>
@ -43,7 +43,7 @@
<li class="dropdown" id="notification-dropdown">
<a id="notifications-link" href="/notifications" title="{{t "header.notifications"}}" class="notifications-link nav-badge hidden-sm hidden-xs" role="button" data-toggle="dropdown" aria-expanded="false" data-target="#">
<i class="entypo-bell"></i>
<span class="badge {{#unless current_user.notifications_count}} hidden {{/unless}}">
<span class="badge badge-important {{#unless current_user.notifications_count}} hidden {{/unless}}">
{{current_user.notifications_count}}
</span>
</a>
@ -76,7 +76,7 @@
<li>
<a id="conversations-link" href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge hidden-sm hidden-xs">
<i class="entypo-mail"></i>
<span class="badge {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
<span class="badge badge-important {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
{{current_user.unread_messages_count}}
</span>
</a>

4
app/views/conversations/_conversation.haml
View file

@ -16,10 +16,10 @@
= other_participants.count - 1
.bg
.badge.badge-default.message_count
.badge.badge-default.message-count.pull-right
= conversation.messages.size
- if visibility.unread > 0
.badge.badge-important.unread_message_count
.badge.badge-important.unread-message-count.pull-right
= visibility.unread
.subject
%div{ :class => direction_for(conversation.subject) }

4
app/views/conversations/_conversation_subject.haml
View file

@ -1,8 +1,8 @@
.subject
.badge.badge-default.message_count
.badge.badge-default.message-count.pull-right
= conversation.messages.size
- if unread_count > 0
.badge.badge-important.unread_message_count
.badge.badge-important.unread-message-count.pull-right
= unread_count
%div{ :class => direction_for(conversation.subject) }

10
app/views/conversations/index.mobile.haml
View file

@ -2,8 +2,9 @@
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
.right
= link_to t('.new_conversation'), new_conversation_path, class: 'btn btn-default'
.clearfix.conversations-title
%h3= t(".inbox")
= link_to t(".new_conversation"), new_conversation_path, class: "btn btn-default pull-right"
- flash.each do |name, msg|
%div{ id: "flash_#{name}", class: "expose" }
@ -11,9 +12,6 @@
.stream
%p{ class: "conversation_#{name}" }= msg
%h3
= t('.inbox')
#conversation_inbox
.stream.conversations
- if @visibilities.count > 0
@ -21,7 +19,7 @@
- else
.no-messages
%i
= t('.no_messages')
= t(".no_messages")
= will_paginate @visibilities, previous_label: "&laquo;", next_label: "&raquo;", inner_window: 1, outer_window: 0,
renderer: WillPaginate::ActionView::BootstrapLinkRenderer

4
app/views/layouts/_header.mobile.haml
View file

@ -10,7 +10,7 @@
= link_to notifications_path, class: "badge-link", id: "notification-badge" do
%i.entypo-bell
- if current_user.unread_notifications.size > 0
%span.badge{id: "notification"}
%span.badge.badge-important#notification
= current_user.unread_notifications.size
-# Conversations
@ -18,7 +18,7 @@
= link_to conversations_path, class: "badge-link", id: "conversations-badge" do
%i.diaspora-custom-mail
- if current_user.unread_message_count > 0
%span.badge{id: "conversation"}
%span.badge.badge-important#conversation
= current_user.unread_message_count
-# Publisher

8
spec/javascripts/app/views/conversations_view_spec.js
View file

@ -15,16 +15,16 @@ describe("app.views.Conversations", function(){
});
it("removes the unread message counter from the conversation", function() {
expect($(".conversation-wrapper > .conversation.selected .unread_message_count").length).toEqual(1);
expect($(".conversation-wrapper > .conversation.selected .unread-message-count").length).toEqual(1);
new app.views.Conversations();
expect($(".conversation-wrapper > .conversation.selected .unread_message_count").length).toEqual(0);
expect($(".conversation-wrapper > .conversation.selected .unread-message-count").length).toEqual(0);
});
it("decreases the unread message count in the header", function() {
var badge = "<div id=\"conversations-link\"><div class=\"badge\">3</div></div>";
$("header").append(badge);
expect($("#conversations-link .badge").text().trim()).toEqual("3");
expect($(".conversation-wrapper > .conversation .unread_message_count").text().trim()).toEqual("1");
expect($(".conversation-wrapper > .conversation .unread-message-count").text().trim()).toEqual("1");
new app.views.Conversations();
expect($("#conversations-link .badge").text().trim()).toEqual("2");
});
@ -33,7 +33,7 @@ describe("app.views.Conversations", function(){
var badge = "<div id=\"conversations-link\"><div class=\"badge\">1</div></div>";
$("header").append(badge);
expect($("#conversations-link .badge").text().trim()).toEqual("1");
expect($(".conversation-wrapper > .conversation.selected .unread_message_count").text().trim()).toEqual("1");
expect($(".conversation-wrapper > .conversation.selected .unread-message-count").text().trim()).toEqual("1");
new app.views.Conversations();
expect($("#conversations-link .badge").text().trim()).toEqual("0");
expect($("#conversations-link .badge")).toHaveClass("hidden");