diff --git a/app/assets/images/icons/monotone_close_exit_delete.png b/app/assets/images/icons/monotone_close_exit_delete.png index 6de9eb18d..097fe640c 100644 Binary files a/app/assets/images/icons/monotone_close_exit_delete.png and b/app/assets/images/icons/monotone_close_exit_delete.png differ diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index 05f216e7b..ac25683a3 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -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 diff --git a/app/assets/stylesheets/aspects.css.scss b/app/assets/stylesheets/aspects.css.scss new file mode 100644 index 000000000..52279a661 --- /dev/null +++ b/app/assets/stylesheets/aspects.css.scss @@ -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; + } + } +} 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"