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

Redesign contacts page

Browse source
This commit is contained in:
Steffen van Bergerem 2014-08-24 13:40:03 +02:00
parent e3dc82bdcd
commit 6461135bfd
23 changed files with 269 additions and 342 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/assets/javascripts/app/router.js
View file

@ -1,6 +1,7 @@
app.Router = Backbone.Router.extend({
routes: {
"help": "help",
"contacts": "contacts",
//new hotness
"posts/:id": "singlePost",
@ -37,6 +38,10 @@ app.Router = Backbone.Router.extend({
app.help.render();
},
contacts: function() {
app.contacts = new app.views.Contacts();
},
singlePost : function(id) {
this.renderPage(function(){ return new app.pages.SinglePostViewer({ id: id })});
},

47
app/assets/javascripts/app/views/contacts_view.js Normal file
View file

@ -0,0 +1,47 @@
app.views.Contacts = Backbone.View.extend({
el: "#contacts_container",
events: {
"click #contacts_visibility_toggle" : "toggleContactVisibility",
"click #change_aspect_name" : "showNameChangeForm"
},
initialize: function() {
this.visibility_toggle = $("#contacts_visibility_toggle .entypo");
$("#people_stream.contacts .header .entypo").tooltip({ 'placement': 'bottom'});
$(".contact_remove-from-aspect").tooltip();
$(document).on('ajax:success', 'form.edit_aspect', this.updateAspectName);
},
toggleContactVisibility: function() {
if (this.visibility_toggle.hasClass("lock-open")) {
this.visibility_toggle.removeClass("lock-open")
.addClass("lock")
.tooltip("destroy")
.removeAttr("data-original-title")
.attr("title", Diaspora.I18n.t("aspects.edit.aspect_list_is_not_visible"))
.tooltip();
}
else {
this.visibility_toggle.removeClass("lock")
.addClass("lock-open")
.tooltip("destroy")
.removeAttr("data-original-title")
.attr("title", Diaspora.I18n.t("aspects.edit.aspect_list_is_visible"))
.tooltip();
}
},
showNameChangeForm: function() {
$(".header > h3").hide();
$(".header > #aspect_name_form").show();
},
updateAspectName: function(evt,data,status,xhr){
$(".header #aspect_name").text(data['name']);
$("#aspect_nav [data-aspect-id='"+data['id']+"'] .name").text(data['name']);
$(".header > #aspect_name_form").hide();
$(".header > h3").show();
}
});

156
app/assets/stylesheets/contacts.css.scss
View file

@ -1,121 +1,53 @@
#section_header {
h3 {
border-bottom: 1px solid $border-grey;
}
}
#people_stream {
.bd {
font-size: 13px;
line-height: 19.5px;
}
.btn-group {
margin-top: 5px;
.caret {
margin-top: 8px;
}
.text {
text-shadow: none;
}
}
.info {
font-size: 11px;
line-height: 16.5px;
}
.stream_element {
border-bottom: 1px solid $border-grey;
.icons-monotone_close_exit_delete {
margin-top: 8px;
}
.media {
margin: 10px;
}
}
}
#people_stream.contacts {
.stream_element {
padding: 10px;
min-height: 30px;
.media { overflow: visible; }
.float-right {
top: 16px;
a {
@include opacity(1);
&:hover {
@include opacity(0.6);
#contacts_container {
#people_stream.contacts {
.header {
border-bottom: 1px solid $border-grey;
margin-top: 10px;
min-height: 53px;
#change_aspect_name { cursor: pointer; }
#aspect_name_form {
display: none;
form { margin: 0px; }
input {
margin-bottom: 0px;
margin-top: 10px;
}
.btn { margin-top: 10px; }
}
a {
text-decoration: none;
margin-right: 25px;
}
.entypo {
font-size: 24.5px;
line-height: 40px;
color: lighten($black,75%);
&:hover { color: $black; }
}
.btn { margin-top: 8px; }
}
.contact_remove-from-aspect {
text-decoration: none;
.entypo {
font-size: 20px;
line-height: 50px;
margin: 10px;
color: lighten($black,75%);
&:hover { color: $black; }
}
}
.info { margin-top: -2px; }
}
.avatar {
height: 30px;
width: 30px;
}
.icons-monotone_close_exit_delete {
height: 14px;
width: 14px;
}
.no_contacts {
text-align: center;
margin-top: 50px;
.no_contacts {
text-align: center;
margin-top: 50px;
}
}
}
#community_spotlight {
.avatar {
width: 140px;
height: 140px;
}
.user_card {
@include border-radius(3px);
@include box-shadow(0,1px,5px,#ccc);
border: 1px solid #ccc;
display: inline-block;
margin-bottom: 15px;
margin-right: 10px;
min-height: 220px;
padding: 10px 10px 30px 10px;
position: relative;
vertical-align: top;
width: 140px;
h4 {
margin-bottom: 0px;
padding-bottom: 2px;
}
.add_user_to_aspect {
bottom: 10px;
right: 10px;
position: absolute;
}
.dropdown {
width: 100%;
}
.tags {
color: $text-grey;
}
}
#aspect_nav {
li.aspect > a { padding-left: 30px; }
li.new_aspect > a { padding-left: 30px; }
}
#no_contacts {

6
app/assets/stylesheets/new-templates.css.scss
View file

@ -9,8 +9,7 @@
@import 'sprites';
@import 'new_styles/base';
@import 'new_styles/viewer_nav';
@import 'buttons';
@import 'new_styles/buttons';
/* font overrides */
@import 'new_styles/typography';
@ -22,6 +21,9 @@
@import 'new_styles/forms';
/* navs */
@import 'new_styles/navs';
/* profile and settings pages */
@import 'new_styles/settings';

0
app/assets/stylesheets/buttons.css.scss → app/assets/stylesheets/new_styles/_buttons.css.scss
View file

14
app/assets/stylesheets/new_styles/_navs.scss Normal file
View file

@ -0,0 +1,14 @@
.nav.nav-tabs{
li > a {
color: $text-dark-grey;
.entypo {
color: $text-dark-grey;
margin-right: 5px;
}
}
li.active > a {
background-color: $background-grey;
color: $black;
.entypo { color: $black; }
}
}

18
app/assets/stylesheets/new_styles/_viewer_nav.scss
View file

@ -1,18 +0,0 @@
@import '../mixins';
body.idle {
#post-nav {
@include opacity(0);
.nav-arrow{
&.right {
margin-right: -40px;
}
&.left {
margin-left: -40px;
}
}
}
}

10
app/assets/stylesheets/notifications.css.scss
View file

@ -1,18 +1,8 @@
#notifications_container {
.nav.nav-tabs{
li > a {
color: $text-dark-grey;
.entypo {
color: $text-dark-grey;
margin-right: 5px;
}
.badge.badge-default { display: none; }
}
li.active > a {
background-color: $background-grey;
color: $black;
.entypo { color: $black; }
}
}
.stream {

34
app/assets/stylesheets/people.css.scss
View file

@ -1,17 +1,29 @@
#people_search {
#people_stream {
.stream_element {
border-bottom: 1px solid $border-grey;
padding-right: 10px;
.avatar {
width: 50px;
height: 50px;
}
.info { font-size: 11px; }
}
}
#search_title {
.term { font-weight: 700; }
small { margin-left: 15px; }
}
}
#people_stream {
.media, .media-body {
overflow: visible;
}
.stream_element.media {
border-bottom: 1px solid $border-grey;
padding: 10px;
margin: 0px;
font-size: 13px;
line-height: 16px;
min-height: 50px;
.avatar {
width: 50px;
height: 50px;
}
.btn-group.aspect_membership_dropdown { margin: 12px 0; }
.thats_you {
line-height: 50px;
margin-right: 20px;
}
.info { font-size: 11px; }
}
}

1
app/controllers/contacts_controller.rb
View file

@ -5,6 +5,7 @@
class ContactsController < ApplicationController
before_action :authenticate_user!
layout ->(c) { request.format == :mobile ? "application" : "with_header_with_footer" }
use_bootstrap_for :index, :spotlight
def index

7
app/helpers/contacts_helper.rb
View file

@ -3,7 +3,7 @@ module ContactsHelper
membership = contact.aspect_memberships.where(:aspect_id => @aspect.id).first unless @aspect.nil?
if membership
link_to(content_tag(:div, nil, :class => 'icons-monotone_close_exit_delete'),
link_to(content_tag(:i, nil, :class => 'entypo circled-cross'),
{ :controller => "aspect_memberships",
:action => 'destroy',
:id => membership.id
@ -24,12 +24,11 @@ module ContactsHelper
def start_a_conversation_link(aspect, contacts_size)
suggested_limit = 16
conv_opts = { class: "btn conversation_button", rel: "facebox"}
conv_opts = { class: "conversation_button", rel: "facebox"}
conv_opts[:title] = t('.many_people_are_you_sure', suggested_limit: suggested_limit) if contacts_size > suggested_limit
link_to new_conversation_path(aspect_id: aspect.id, name: aspect.name), conv_opts do
concat t('.start_a_conversation')
concat content_tag(:span, nil, class: "icons-mail")
content_tag(:i, nil, :class => 'entypo mail', :title => t('contacts.index.start_a_conversation'))
end
end
end

24
app/views/aspects/edit.html.haml
View file

@ -1,24 +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.
#aspect_edit_pane
#facebox_header{:data=>{:guid=>@aspect.id}}
%h3#aspect_name_title
%span.name= @aspect
%span.tiny_text
= link_to t('.rename'), '#', :id => 'rename_aspect_link'
#aspect_name_edit.hidden
= form_for @aspect, :remote => true do |aspect|
= aspect.text_field :name, :maxlength => 20
= aspect.submit t('.update'), 'data-disable-with' => t('.updating'), :class => 'btn'
- if @contacts.count > 0
= render 'shared/contact_list', :aspect => @aspect, :contacts => @contacts
.bottom_submit_section
= button_to t('delete'), @aspect, :method => "delete", :data => { :confirm => t('.confirm_remove_aspect') }, :class => 'btn delete'
= aspect_visibility_link(@aspect)
= submit_tag t('.done'), :class => 'btn creation', :rel => 'close'

15
app/views/aspects/toggle_contact_visibility.js.erb
View file

@ -1,15 +0,0 @@
$(document).ready(function() {
var padlockImg = $(".contact_visibility_padlock");
var linkText = $(".contact_visibility_link");
if (padlockImg.hasClass('icons-padlock-open')) {
padlockImg.removeClass('icons-padlock-open');
padlockImg.addClass('icons-padlock-closed');
linkText.attr('title', "<%= t('aspects.edit.aspect_list_is_not_visible') %>");
} else {
padlockImg.removeClass('icons-padlock-closed');
padlockImg.addClass('icons-padlock-open');
linkText.attr('title', "<%= t('aspects.edit.aspect_list_is_visible') %>");
}
});

13
app/views/community_spotlight/_user.html.haml
View file

@ -1,13 +0,0 @@
.user_card
= person_image_link(person, :size => :thumb_large)
%h4
= person.name
.tags
- person.tags.each do |tag|
= link_to "##{tag}", tag_path(:name => tag.name)
.add_user_to_aspect
= render :partial => 'people/relationship_action',
:locals => { :person => person, :contact => current_user.contact_for(person),
:current_user => current_user }

57
app/views/contacts/_aspect_listings.haml
View file

@ -1,36 +1,31 @@
-# Copyright (c) 2010-2011, Diaspora Inc. This file is
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
#aspect_nav
%ul.nav.nav-tabs.nav-stacked
%li.all_contacts{:class => ("active" if params["set"] == "all")}
%a{:href => contacts_path(:set => "all")}
= t('contacts.index.all_contacts')
.badge.badge-default.pull-right
= all_contacts_count
%ul#aspect_nav
%li.all_aspects{:class => ("active" if params["set"] != "all" && params["set"] != "only_sharing" && !@spotlight)}
%a.home_selector.hoverable{:href => contacts_path, :class => ("sub_selected" if params["a_id"])}
= t('contacts.index.my_contacts')
.label.pull-right
= my_contacts_count
%ul.sub_nav#aspects_list
- all_aspects.each do |aspect|
%li.hoverable{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)}
.label.pull-right
%li.all_aspects{:class => ("active" if !params["set"] && !params["a_id"] && !@spotlight)}
%a{:href => contacts_path}
= t('contacts.index.my_contacts')
.badge.badge-default.pull-right
= my_contacts_count
- all_aspects.each do |aspect|
%li.aspect{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)}
%a{:href => contacts_path(:a_id => aspect.id)}
.badge.badge-default.pull-right
= aspect.contacts.size
.icons-check_yes_ok{:class => ("selected" if params["a_id"].to_i == aspect.id) }
%a.selectable{:href => contacts_path(:a_id => aspect.id)}
.name
= aspect
%li.hoverable
= link_to t('aspects.aspect_listings.add_an_aspect'), new_aspect_path, :class => "selectable new_aspect", :rel => "facebox"
%li.new_aspect
%a{:href => new_aspect_path, :rel => "facebox"}
= t('aspects.aspect_listings.add_an_aspect')
%li.all_contacts{:class => ("active" if params["set"] == "all" || params["set"] == "only_sharing")}
%a.home_selector.hoverable{:href => contacts_path(:set => "all"), :class => ("sub_selected" if params["set"] == "only_sharing")}
= t('contacts.index.all_contacts')
.label.pull-right
= all_contacts_count
%ul.sub_nav
%li.hoverable{:class => ("active" if params["set"] == "only_sharing")}
.icons-check_yes_ok{:class => ("invisible" if params["set"] == "only_sharing")}
%a.selectable{:href => contacts_path(:set => "only_sharing")}
= t('contacts.index.only_sharing_with_me')
.label.pull-right
= only_sharing_count
%li.only_sharing{:class => ("active" if params["set"] == "only_sharing")}
%a{:href => contacts_path(:set => "only_sharing")}
= t('contacts.index.only_sharing_with_me')
.badge.badge-default.pull-right
= only_sharing_count

21
app/views/contacts/_contact.html.haml
View file

@ -1,10 +1,11 @@
.stream_element{:id => contact.person_id}
.media
.pull-right
= contact_aspect_dropdown(contact)
.img
= person_image_link(contact.person, :size => :thumb_small)
.bd
= person_link(contact.person)
.info
= contact.person_diaspora_handle
.media.stream_element{:id => contact.person_id}
.pull-right
= contact_aspect_dropdown(contact)
.media-object.pull-left
= person_image_link(contact.person, :size => :thumb_small)
.media-body
= person_link(contact.person)
.info.diaspora_handle
= contact.person_diaspora_handle
.info.tags
= Diaspora::Taggable.format_tags(contact.person.profile.tag_string)

32
app/views/contacts/_header.html.haml Normal file
View file

@ -0,0 +1,32 @@
.header
- if @aspect
#aspect_control.pull-right
- if @contacts_size > 0 && @contacts_size < 20
= start_a_conversation_link(@aspect, @contacts_size)
= link_to aspect_toggle_contact_visibility_path(@aspect), id: "contacts_visibility_toggle", method: :put, remote: true do
-if @aspect.contacts_visible?
%i.entypo.lock-open{:title => t('aspects.edit.aspect_list_is_visible')}
-else
%i.entypo.lock{:title => t('aspects.edit.aspect_list_is_not_visible')}
= link_to @aspect, method: "delete", data: { confirm: t('aspects.edit.confirm_remove_aspect') }, class: 'delete' do
%i.entypo.trash{:title => t('delete')}
%h3
%span#aspect_name
= @aspect.name
%span#change_aspect_name
%i.entypo.pencil{:title => t('aspects.edit.rename')}
#aspect_name_form
= form_for @aspect, :remote => true do |aspect|
= aspect.text_field :name, :maxlength => 20
= aspect.submit t('aspects.edit.update'), 'data-disable-with' => t('aspects.edit.updating'), :class => "btn green"
- else
%h3
- case params["set"]
- when "only_sharing"
= t('contacts.index.only_sharing_with_me')
- when "all"
= t('contacts.index.all_contacts')
- else
= t('contacts.index.my_contacts')

7
app/views/contacts/_sidebar.html.haml Normal file
View file

@ -0,0 +1,7 @@
%h3
= t('contacts.index.title')
= render 'contacts/aspect_listings'
- if AppConfig.settings.community_spotlight.enable?
%hr
.text-center.spotlight
= link_to t('contacts.spotlight.community_spotlight'), community_spotlight_path, :class => "element_selector"

62
app/views/contacts/index.html.haml
View file

@ -1,49 +1,31 @@
-# Copyright (c) 2010-2011, Diaspora Inc. This file is
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
- content_for :page_title do
= t('.title')
- content_for :head do
= javascript_include_tag :people
.row
.span12
#section_header
%h3
= t('.title')
.container-fluid#contacts_container
.row-fluid
.span3
= render 'contacts/sidebar'
.row
= render 'shared/contact_sidebar'
.span9
#people_stream.stream.contacts
= render 'contacts/header'
.span9
#people_stream.stream.contacts
- if @aspect
#aspect_controls
- if @contacts_size > 0 && @contacts_size < 20
= start_a_conversation_link(@aspect, @contacts_size)
= link_to edit_aspect_path(@aspect), rel: "facebox", class: "btn" do
= t('aspects.edit.manage')
%span.modify_aspect
= aspect_visibility_link(@aspect)
= link_to @aspect, method: "delete", data: { confirm: t('aspects.edit.confirm_remove_aspect') }, class: 'btn delete' do
= t('delete')
%span.icons-monotone_close_exit_delete
- if @contacts_size > 0
= render @contacts
- if @contacts_size > 0
= render @contacts
= will_paginate @contacts
- else
.no_contacts
%h3
= t('.no_contacts')
%p
- if @aspect
!= t('.no_contacts_message_with_aspect',
:community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path),
:add_to_aspect_link => link_to(t('.add_to_aspect_link', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox"))
- else
!= t('.no_contacts_message',
:community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path))
= will_paginate @contacts
- else
.no_contacts
%h3
= t('.no_contacts')
%p
- if @aspect
!= t('.no_contacts_message_with_aspect',
:community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path),
:add_to_aspect_link => link_to(t('.add_to_aspect_link', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox"))
- else
!= t('.no_contacts_message',
:community_spotlight => link_to(t('.community_spotlight'), community_spotlight_path))

39
app/views/contacts/spotlight.haml
View file

@ -1,31 +1,28 @@
-# Copyright (c) 2010-2011, Diaspora Inc. This file is
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
- content_for :page_title do
= t('contacts.spotlight.community_spotlight')
- content_for :head do
= javascript_include_tag :people
.row
.span12
#section_header
%h3
= t('contacts.index.title')
.row
= render 'shared/contact_sidebar'
.container-fluid#contacts_container
.row-fluid
.span3
= render 'contacts/sidebar'
.span9
- if AppConfig.settings.community_spotlight.suggest_email.present?
.right
= link_to t('contacts.spotlight.suggest_member'), "mailto:#{AppConfig.settings.community_spotlight.suggest_email}", :class => "button"
.span9
#people_stream.stream.contacts
.header
- if AppConfig.settings.community_spotlight.suggest_email.present?
.pull-right
= link_to t('contacts.spotlight.suggest_member'), "mailto:#{AppConfig.settings.community_spotlight.suggest_email}", :class => "btn btn-default"
%h3
= t('contacts.spotlight.community_spotlight')
%h3
= t('contacts.spotlight.community_spotlight')
#community_spotlight
- unless @people.blank?
- @people.each do |person|
= render 'people/person', :person => person, :contact => current_user.contact_for(person)
#community_spotlight
- unless @people.blank?
- @people.each do |person|
= render 'community_spotlight/user', :person => person
-# if @contacts_size > 0
= render @contacts

27
app/views/people/_person.html.haml
View file

@ -1,20 +1,13 @@
-# Copyright (c) 2010-2011, Diaspora Inc. This file is
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
.stream_element{:id => person.id}
%div{:style => "float:right;margin-top:2px;"}
.media.stream_element{:id => person.id}
.pull-right
= render :partial => 'people/relationship_action',
:locals => { :person => person, :contact => contact,
:current_user => current_user }
.media
.img
= person_image_link(person)
.bd
=person_link(person)
.info
= Diaspora::Taggable.format_tags(person.profile.tag_string)
.media-object.pull-left
= person_image_link(person)
.media-body
= person_link(person)
.info.diaspora_handle
= person.diaspora_handle
.info.tags
= Diaspora::Taggable.format_tags(person.profile.tag_string)

3
app/views/people/_relationship_action.haml
View file

@ -3,4 +3,5 @@
- contact ||= Contact.new(:person => person)
= aspect_membership_dropdown(contact, person, 'right')
-else
= t('people.person.thats_you')
%span.thats_you
= t('people.person.thats_you')

13
app/views/shared/_contact_sidebar.html.haml
View file

@ -1,13 +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.
#leftNavBar.span3
= render 'contacts/aspect_listings'
- if AppConfig.settings.community_spotlight.enable?
%hr
%ul.left_nav
%li{:class => ("active" if @spotlight)}
= link_to t('contacts.spotlight.community_spotlight'), community_spotlight_path, :class => "element_selector"