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

Merge pull request #4570 from Flaburgan/contacts-refactor

Browse source 
Add actions to contacts/index.html page
This commit is contained in:
Fabian Rodriguez 2013-11-16 12:27:39 -08:00
commit b1590b73af
16 changed files with 282 additions and 255 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/icons/monotone_close_exit_delete.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 725 B

After

Width:  |  Height:  |  Size: 773 B

76
app/assets/stylesheets/application.css.sass
View file

@ -14,6 +14,7 @@
@import 'profile'
@import 'publisher'
@import 'facebox'
@import 'aspects'
/* ====== media ====== */
.media
@ -1731,81 +1732,6 @@ a.toggle_selector
&:hover
:color $link-grey
.no_contacts
:position relative
:text-align center
:top 50px
#people_stream.contacts
.stream_element
:padding 10px
:min-height 30px
.right
:top 16px
a
@include opacity(0.3)
&:hover
@include opacity(1)
.from
:position relative
a
:color rgb(85,80,80)
.content
:padding
:left 40px
.info
:margin
:top -2px
.avatar
:height 30px
:width 30px
.icons-monotone_close_exit_delete
:height 20px
:width 20px
#aspect_controls
@include border-radius(2px)
:background
:color #fafafa
:border 1px solid #ccc
:padding 10px
:min-height 23px
.conversation_button
:float right
#selected_aspect_contacts
.avatar
:height 32px
:width 32px
:margin
:bottom -2px
.stream-faces
a:hover
:text-decoration none
#view_all_contacts_link
@include border-radius(2px)
:display block
:padding 5px
:border 1px dotted #aaa
:text-align center
:margin 5px 0
#no_contacts
:text-align center
:padding 10px
:background
:color #eee
:color $text-dark-grey
.cubbies_collage
:position absolute
:right 50px

240
app/assets/stylesheets/aspects.css.scss Normal file
View file

@ -0,0 +1,240 @@
/* -- Used in contacts/index.html.haml -- */
#aspect_controls {
@include border-radius(2px);
background-color: #fafafa;
border: 1px solid #ccc;
padding: 10px;
min-height: 23px;
.button, .button_to {
margin-right: 5px;
}
.button_to { display: inline-block; }
.contact_visibility_padlock,
.modify_aspect,
.icons-mail,
.icons-monotone_close_exit_delete {
margin-left: 4px;
margin-bottom: -2px;
display: inline-block;
}
.icons-mail {
width: 16px;
height: 13px;
margin-bottom: -1px;
}
}
.contact_visibility_padlock {
height: 16px;
width: 16px;
/* -- To remove when the facebox will be deleted -- */
display: inline-block;
margin-left: 4px;
margin-bottom: -2px;
}
#people_stream.contacts {
.stream_element {
padding: 10px;
min-height: 30px;
.float-right {
top: 16px;
a {
@include opacity(1);
&:hover {
@include opacity(0.6);
}
}
}
.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;
}
}
#selected_aspect_contacts .avatar {
height: 32px;
width: 32px;
margin-bottom: -2px;
}
.stream-faces a:hover { text-decoration: none; }
#view_all_contacts_link {
@include border-radius(2px);
display: block;
padding: 5px;
border: 1px dotted #aaa;
text-align: center;
margin: 5px 0px;
}
#no_contacts {
text-align: center;
padding: 10px;
background-color: #eee;
color: $text-dark-grey;
}
/* -- Used in aspects/edit.haml and in contacts/sharing.haml -- */
#aspect_edit_controls { margin-top: 8px; }
#aspect_edit_pane {
width: 772px;
.contact_list_controls {
height: 30px;
margin-bottom: 5px;
}
#contact_list_search {
width: 200px;
margin-top: 0px;
float: right;
}
.contact_list,
.aspect_list {
@include border-radius(3px);
height: 300px;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid #bbb;
background-color: rgb(252,252,252);
.avatar {
float: left;
height: 50px;
width: 50px;
margin-right: 10px !important;
}
.button.share {
padding-right: 20px;
.right {
right: 8px;
top: 3px;
}
}
.icons-monotone_plus_add_round,
.icons-monotone_check_yes {
height: 20px;
width: 20px;
}
& > .contacts {
margin: 0px;
padding: 5px;
padding-right: 0px;
& > .contact {
@include border-radius(3px);
@include box-shadow(0, 1px, 5px, #ccc);
position: relative;
display: inline-block;
float: left;
height: 50px;
width: 170px;
overflow-x: hidden;
overflow-y: hidden;
margin-bottom: 5px;
margin-right: 5px;
padding: 5px;
background-color: #fff;
border: 1px solid $border-dark-grey;
&.hidden { display: none; }
& > .name { white-space: nowrap; }
&.remote_friend { width: 285px; }
a.button {
@include box-shadow(0,0,0);
border-bottom: none;
min-width: auto;
float: right;
padding: 2px 4px;
margin-top: 5px;
&.added { @include linear-gradient(rgb(158,255,153), rgb(92,199,86)); }
&.added.remove {
@include linear-gradient(rgb(255,153,153), rgb(199,86,86));
&:active { @include linear-gradient(rgb(199,119,119), rgb(130,55,55)); }
}
}
}
}
}
.aspect_list {
height: 300px;
max-height: 300px;
.name { left: 1em; }
ul > li {
padding: 1em;
height: 1em;
.right {
top: 2px;
right: 1em;
}
}
}
.person_tiles .tile {
@include border-radius(2px);
padding: 6px;
padding-left: 65px;
margin: 3px;
margin-left: 0px;
display: inline-block;
width: 126px;
height: 50px;
border: 1px solid #eee;
position: relative;
img {
position: absolute;
left: 6px;
}
}
&.larger { width: 650px; }
.bottom_submit_section {
margin-top: 12px;
form {
display: inline-block;
}
.creation {
float: right;
}
}
}

152
app/assets/stylesheets/facebox.css.scss
View file

@ -30,155 +30,3 @@
font-weight: normal;
}
}
#aspect_edit_controls { margin-top: 8px; }
/* -- Used in aspects/edit.haml and in contacts/sharing.haml -- */
#aspect_edit_pane {
width: 772px;
.contact_list_controls {
height: 30px;
margin-bottom: 5px;
}
#contact_list_search {
width: 200px;
margin-top: 0px;
float: right;
}
.contact_list,
.aspect_list {
@include border-radius(3px);
height: 300px;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid #bbb;
background-color: rgb(252,252,252);
.avatar {
float: left;
height: 50px;
width: 50px;
margin-right: 10px !important;
}
.button.share {
padding-right: 20px;
.right {
right: 8px;
top: 3px;
}
}
.icons-monotone_plus_add_round,
.icons-monotone_check_yes {
height: 20px;
width: 20px;
}
& > .contacts {
margin: 0px;
padding: 5px;
padding-right: 0px;
& > .contact {
@include border-radius(3px);
@include box-shadow(0, 1px, 5px, #ccc);
position: relative;
display: inline-block;
float: left;
height: 50px;
width: 170px;
overflow-x: hidden;
overflow-y: hidden;
margin-bottom: 5px;
margin-right: 5px;
padding: 5px;
background-color: #fff;
border: 1px solid $border-dark-grey;
&.hidden { display: none; }
& > .name { white-space: nowrap; }
&.remote_friend { width: 285px; }
a.button {
@include box-shadow(0,0,0);
border-bottom: none;
min-width: auto;
float: right;
padding: 2px 4px;
margin-top: 5px;
&.added { @include linear-gradient(rgb(158,255,153), rgb(92,199,86)); }
&.added.remove {
@include linear-gradient(rgb(255,153,153), rgb(199,86,86));
&:active { @include linear-gradient(rgb(199,119,119), rgb(130,55,55)); }
}
}
}
}
}
.aspect_list {
height: 300px;
max-height: 300px;
.name { left: 1em; }
ul > li {
padding: 1em;
height: 1em;
.right {
top: 2px;
right: 1em;
}
}
}
.person_tiles .tile {
@include border-radius(2px);
padding: 6px;
padding-left: 65px;
margin: 3px;
margin-left: 0px;
display: inline-block;
width: 126px;
height: 50px;
border: 1px solid #eee;
position: relative;
img {
position: absolute;
left: 6px;
}
}
&.larger { width: 650px; }
.bottom_submit_section {
margin-top: 12px;
form {
display: inline-block;
}
.creation {
float: right;
}
.contact_visibility_link {
margin-left: 5px;
#contact_visibility_padlock {
display: inline-block;
height: 16px;
width: 16px;
margin-left: 4px;
margin-bottom: -2px;
}
}
}
}

9
app/assets/stylesheets/sidebar.css.scss
View file

@ -91,10 +91,13 @@ $bluebg: #e7f2f7;
.selected + a {
color: #333333;
}
}
.modify_aspect {
background: url("icons/pencil.png") no-repeat;
}
.modify_aspect {
background: url("icons/pencil.png") no-repeat;
width: 12px;
height: 12px;
display: inline-block;
}
#tags_list {

2
app/assets/templates/aspect_tpl.jst.hbs
View file

@ -1,4 +1,4 @@
<a href="/aspects/{{id}}/edit" class="action modify_aspect" rel="facebox"></a>
<a href="/contacts?a_id={{id}}" class="action modify_aspect"></a>
{{#if selected}}
<div class="icons-check_yes_ok selected"></div>
{{else}}

8
app/helpers/aspects_helper.rb
View file

@ -44,15 +44,15 @@ module AspectsHelper
def aspect_visibility_link(aspect)
if aspect.contacts_visible?
icon = 'icons-padlock-open'
title = t('.aspect_list_is_visible')
title = t('aspects.edit.aspect_list_is_visible');
else
icon = 'icons-padlock-closed'
title = t('.aspect_list_is_not_visible')
title = t('aspects.edit.aspect_list_is_not_visible');
end
link_to aspect_toggle_contact_visibility_path(@aspect), class: 'contact_visibility_link button', title: title, method: :put, remote: true do
concat t('.visibility')
concat content_tag(:div, nil, id: "contact_visibility_padlock", class: icon)
concat t('aspects.edit.set_visibility')
concat content_tag(:span, nil, class: "contact_visibility_padlock " + icon)
end
end
end

10
app/helpers/contacts_helper.rb
View file

@ -24,8 +24,12 @@ module ContactsHelper
def start_a_conversation_link(aspect, contacts_size)
suggested_limit = 16
conv_opts = { :class => "button conversation_button", :rel => "facebox"}
conv_opts[:title] = t('.many_people_are_you_sure', :suggested_limit => suggested_limit) if contacts_size > suggested_limit
link_to t('.start_a_conversation'), new_conversation_path(:aspect_id => aspect.id, :name => aspect.name), conv_opts
conv_opts = { class: "button 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")
end
end
end

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

@ -1,6 +1,6 @@
$(document).ready(function() {
var padlockImg = $("#contact_visibility_padlock");
var padlockImg = $(".contact_visibility_padlock");
var linkText = $(".contact_visibility_link");
if (padlockImg.hasClass('icons-padlock-open')) {

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

@ -14,7 +14,6 @@
%li.hoverable{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)}
.item_count
= aspect.contacts.size
%a.action.modify_aspect{:href => "/aspects/#{aspect.id}/edit", :rel => "facebox"}
.icons-check_yes_ok{:class => ("selected" if params["a_id"].to_i == aspect.id) }
%a.selectable{:href => contacts_path(:a_id => aspect.id)}
= aspect

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

@ -1,7 +1,7 @@
.stream_element{:id => contact.person_id}
.float-right
= contact_aspect_dropdown(contact)
.media
.float-right
= contact_aspect_dropdown(contact)
.img
= person_image_link(contact.person, :size => :thumb_small)
.bd

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

@ -16,13 +16,19 @@
.span-18.last
#people_stream.stream.contacts
- if @contacts_size > 0
- if @aspect
#aspect_controls
- if @contacts_size < 20
= start_a_conversation_link(@aspect, @contacts_size)
= link_to t('.add_to_aspect', :name => @aspect.name), edit_aspect_path(@aspect), :rel => "facebox"
- if @aspect
#aspect_controls
- if @contacts_size > 0 && @contacts_size < 20 #TODO Fla: why 20? Technical restriction? We already warn the user if > 16
= start_a_conversation_link(@aspect, @contacts_size)
= link_to edit_aspect_path(@aspect), rel: "facebox", class: "button" 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: 'button delete' do
= t('delete')
%span.icons-monotone_close_exit_delete
- if @contacts_size > 0
= render @contacts
= will_paginate @contacts

3
config/locales/diaspora/en.yml
View file

@ -159,7 +159,8 @@ en:
remove_aspect: "Delete this aspect"
confirm_remove_aspect: "Are you sure you want to delete this aspect?"
add_existing: "Add an existing contact"
visibility: "Visibility"
set_visibility: "Set visibility"
manage: "Manage"
done: "Done"
rename: "rename"
aspect_list_is_visible: "Contacts in this aspect are able to see each other."

2
features/desktop/contacts.feature
View file

@ -30,7 +30,7 @@ Feature: show contacts
And I add the person to my "Unicorns" aspect
And I am on the contacts page
And I follow "Unicorns"
And I follow "add contacts to Unicorns"
And I follow "Manage"
And I press the first "a.contact_visibility_link" in the modal window
And I press "Done" in the modal window
And I sign out

6
features/desktop/manages_aspects.feature
View file

@ -29,16 +29,16 @@ Feature: User manages contacts
And I press "Delete" in the modal window
And I confirm the alert
Then I should be on the contacts page
And I should not see "People" within "#aspect_nav"
And I should not see "People" within "#aspects_list"
Scenario: deleting an aspect from homepage
Given I am signed in
And I have an aspect called "People"
When I am on the aspects page
And I click on "People" aspect edit icon
And I press "Delete" in the modal window
And I follow "Delete" within "#aspect_controls"
And I confirm the alert
Then I should be on the aspects page
Then I should be on the contacts page
And I should not see "People" within "#aspects_list"
Scenario: Editing the aspect memberships of a contact from the aspect edit facebox

2
features/desktop/stops_following_users.feature
View file

@ -32,7 +32,7 @@ Feature: Unfollowing
And I go to the contacts page
And I follow "Besties"
And I follow "add contacts to Besties"
And I follow "Manage"
And I press the first ".added" within "#facebox .contact_list ul > li:first-child"