From 1833edfd67606278a754e2d36c8dd3aa7d118fd5 Mon Sep 17 00:00:00 2001 From: flaburgan Date: Sun, 3 Nov 2013 17:28:13 -0800 Subject: [PATCH] Add actions to contacts/index.html page --- .../icons/monotone_close_exit_delete.png | Bin 725 -> 773 bytes app/assets/stylesheets/application.css.sass | 76 +----- app/assets/stylesheets/aspects.css.scss | 240 ++++++++++++++++++ app/assets/stylesheets/facebox.css.scss | 152 ----------- app/assets/stylesheets/sidebar.css.scss | 9 +- app/assets/templates/aspect_tpl.jst.hbs | 2 +- app/helpers/aspects_helper.rb | 10 +- app/helpers/contacts_helper.rb | 10 +- .../aspects/toggle_contact_visibility.js.erb | 2 +- app/views/contacts/_aspect_listings.haml | 1 - app/views/contacts/_contact.html.haml | 4 +- app/views/contacts/index.html.haml | 18 +- config/locales/diaspora/en.yml | 3 +- features/desktop/contacts.feature | 2 +- features/desktop/manages_aspects.feature | 6 +- .../desktop/stops_following_users.feature | 2 +- 16 files changed, 282 insertions(+), 255 deletions(-) create mode 100644 app/assets/stylesheets/aspects.css.scss diff --git a/app/assets/images/icons/monotone_close_exit_delete.png b/app/assets/images/icons/monotone_close_exit_delete.png index 6de9eb18db1a4e1b465fe891561921a439909492..097fe640c0cb40baa7d4f9416d6a891b973a91f5 100644 GIT binary patch literal 773 zcmV+g1N!`lP)bL&B)%U~bLI42w_V)UY z9jD(tJ)MMd83}|;8k+WgadB}SV+`nO=5jet*s`9ghVhq5l8XreObAd(aur?Q4O!On z`T2SE(kPe9d8}yklgPP)DFwn9P)PzRNkA9_Oes*#-C!j0`TrOI1S=MM!Z>$WMFm7+ zu{GT^j|5Q!K@>sJ^|F;ntZ!+2P2Ay496RWGMYJ=bZQ4mEiOmjayI$BR0fNtBihX6o0IX?D$Sy}o0Af0}@wY^=q zURU?Mzprol@%VV#*5>9|8KBa2U1{64SBTH&dsHYCZeonF<2cg6{{HP>8yh=ywY6`W zlF4tcXJ&5Mw!LstDpg^Oky9$6J3T!g=4#=kqLNS=~)7E%yOHXiKFYs)lh$7z0U`;YKo< zMgs!_HHK;a!IVNc5?NbcUsvn>{&rbWc0H=Iru}NubE6nzoaLd&8lI`dZFn0zQ{QsLI9nS1Jy8&V)6K^m$S3xc^_Xz zes^#%RNUL^KP(m}%C0ML&Zo@k>ZPTHg`XH>_q_WL9d`>9W)udB00000NkvXXu0mjf Dd1p+p literal 725 zcmV;`0xJE9P)#qo<=H+xK0f#1aZoli{e9qx}en`@PC)6$g0BCAz zs_#dmk#{dI*P+>zWQ^A>!+5p3yIVsD!L_TDDit;2IFEJ9`c4>g5ypTp2Ev%DndWiW zah`2&Z|m2BRVo$LiN)S3oHr05fGGvS7!bw)QwoR>Ae_6QX!PA*p#UH|@%SUkd4qO! zK{OseG;RArRuqsG1vJxaI?3b*uBuIia|lPHPXVBi)iW zER&hlP4m)Y7%-8|t{xm5=>9<9jjSkO+4kwe@^WumU?P>uF(De5QcyMRERjkr6^ljX z&gke;CYya&EEbjC{{Bhf@q8hS0TTjl`u+K~z}v&an}o4u%P-;aGzQY?2f17hudS`g z!ARt;(6p15uSk|*c7FcwDuZpw%6-hSy@5jZ)+5)Gi zr+X~h{)PyFNHls_tJU=0KwwO0+OewZZhCNVwp=c=U?lQdRunM2-m~1?oWCs)0OUk6 z`Ghd$G9em)P-stR+Gk8@6H^MRVbp`6&`U1F55hUb5{W{`wUH!ADwRrVBo?bEoP&I2 zsau1RDFwng1j6C>g+jsX2y3ZaF6$A;+0;z)RN)*Xj6wQ+dZ1g@MLdys@qBB`{!?zp z=WuUkCR{%`$)DHjt4-IHIp-U;&$qX?v-1fd .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; + } + } +} diff --git a/app/assets/stylesheets/facebox.css.scss b/app/assets/stylesheets/facebox.css.scss index 1ad19fd7b..18b07f2a3 100644 --- a/app/assets/stylesheets/facebox.css.scss +++ b/app/assets/stylesheets/facebox.css.scss @@ -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; - } - } - } -} diff --git a/app/assets/stylesheets/sidebar.css.scss b/app/assets/stylesheets/sidebar.css.scss index 82799f657..b458ad8dd 100644 --- a/app/assets/stylesheets/sidebar.css.scss +++ b/app/assets/stylesheets/sidebar.css.scss @@ -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 { diff --git a/app/assets/templates/aspect_tpl.jst.hbs b/app/assets/templates/aspect_tpl.jst.hbs index 2965181d1..bd3acf7ea 100644 --- a/app/assets/templates/aspect_tpl.jst.hbs +++ b/app/assets/templates/aspect_tpl.jst.hbs @@ -1,4 +1,4 @@ - + {{#if selected}}
{{else}} diff --git a/app/helpers/aspects_helper.rb b/app/helpers/aspects_helper.rb index 6d52afa2f..a4260ebe4 100644 --- a/app/helpers/aspects_helper.rb +++ b/app/helpers/aspects_helper.rb @@ -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 diff --git a/app/helpers/contacts_helper.rb b/app/helpers/contacts_helper.rb index 2fa9c9beb..cd7ffe32b 100644 --- a/app/helpers/contacts_helper.rb +++ b/app/helpers/contacts_helper.rb @@ -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 diff --git a/app/views/aspects/toggle_contact_visibility.js.erb b/app/views/aspects/toggle_contact_visibility.js.erb index 59485f737..1470cadb1 100644 --- a/app/views/aspects/toggle_contact_visibility.js.erb +++ b/app/views/aspects/toggle_contact_visibility.js.erb @@ -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')) { diff --git a/app/views/contacts/_aspect_listings.haml b/app/views/contacts/_aspect_listings.haml index 1b479e3a8..c78e8eec8 100644 --- a/app/views/contacts/_aspect_listings.haml +++ b/app/views/contacts/_aspect_listings.haml @@ -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 diff --git a/app/views/contacts/_contact.html.haml b/app/views/contacts/_contact.html.haml index 79797990c..60ab71c5b 100644 --- a/app/views/contacts/_contact.html.haml +++ b/app/views/contacts/_contact.html.haml @@ -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 diff --git a/app/views/contacts/index.html.haml b/app/views/contacts/index.html.haml index fa0e678c0..5ffdc67b4 100644 --- a/app/views/contacts/index.html.haml +++ b/app/views/contacts/index.html.haml @@ -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 diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml index b8fb52e22..968ca2d6c 100644 --- a/config/locales/diaspora/en.yml +++ b/config/locales/diaspora/en.yml @@ -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." diff --git a/features/desktop/contacts.feature b/features/desktop/contacts.feature index 3e4817495..9e59a9c93 100644 --- a/features/desktop/contacts.feature +++ b/features/desktop/contacts.feature @@ -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 diff --git a/features/desktop/manages_aspects.feature b/features/desktop/manages_aspects.feature index 492a569e2..c5c8b2640 100644 --- a/features/desktop/manages_aspects.feature +++ b/features/desktop/manages_aspects.feature @@ -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 diff --git a/features/desktop/stops_following_users.feature b/features/desktop/stops_following_users.feature index 27c5e2552..30a5b97af 100644 --- a/features/desktop/stops_following_users.feature +++ b/features/desktop/stops_following_users.feature @@ -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"