diff --git a/Changelog.md b/Changelog.md index 904149582..b3f31c494 100644 --- a/Changelog.md +++ b/Changelog.md @@ -40,6 +40,7 @@ * Collapse aspect list and tag followings list when switching to other views [#4462](https://github.com/diaspora/diaspora/pull/4462) * Highlight current stream in left sidebar [#4445](https://github.com/diaspora/diaspora/pull/4445) * Added ignore user icon [#4417](https://github.com/diaspora/diaspora/pull/4417) +* Improve the management of the contacts visibility settings in an aspect [#4567](https://github.com/diaspora/diaspora/pull/4567) # 0.2.0.0 diff --git a/app/assets/javascripts/aspect-edit-pane.js b/app/assets/javascripts/aspect-edit-pane.js index 26aa42a5d..01b15896a 100644 --- a/app/assets/javascripts/aspect-edit-pane.js +++ b/app/assets/javascripts/aspect-edit-pane.js @@ -71,6 +71,9 @@ _.extend(app.tmp.ContactAspectsBox.prototype, { .addClass('added') .attr('data-membership_id', membership_id) // just to be sure... .data('membership_id', membership_id); + + el.find('div').removeClass('icons-monotone_plus_add_round') + .addClass('icons-monotone_check_yes'); }, removeFromAspect: function(evt) { @@ -97,6 +100,9 @@ _.extend(app.tmp.ContactAspectsBox.prototype, { .addClass('add') .removeAttr('data-membership_id') .removeData('membership_id'); + + el.find('div').removeClass('icons-monotone_check_yes') + .addClass('icons-monotone_plus_add_round'); }, _displayError: function(msg_id, contact_el) { diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index d48cdc25a..05f216e7b 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -13,6 +13,7 @@ @import 'help' @import 'profile' @import 'publisher' +@import 'facebox' /* ====== media ====== */ .media @@ -624,9 +625,6 @@ input[type="search"] :-webkit-appearance textfield :-moz-appearance textfield -.facebox_content - :display none - #photo_edit_options :display none @@ -740,125 +738,6 @@ ul#request_result :bottom 2.5em :padding 0 -.contact_list_controls - :height 30px - :margin - :bottom 5px - :vertical-align middle - :position relative - -#contact_list_search - :width 200px - :margin - :top 0 - :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 0 - :padding 5px - :right 0 - - > .contact - @include border-radius(3px) - @include box-shadow(0, 1px, 5px, #ccc) - :background - :color #fff - :float left - :overflow-x hidden - :overflow-y hidden - - :position relative - :display inline-block - - &.hidden - :display none - - :height 50px - :width 170px - - :margin - :bottom 5px - :right 5px - - :padding 5px - :border 1px solid $border-dark-grey - - > .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 - #signup_field :margin :top -200px @@ -1097,63 +976,6 @@ ul#press_logos #inner_account_delete :width 810px -#aspect_edit_pane - :width 810px - .person_tiles - .tile - @include border-radius(2px) - - :padding 6px - :left 65px - :margin 3px - :left 0 - :display inline-block - :width 126px - :height 50px - - :border 1px solid #eee - - :position relative - - img - :position absolute - :left 6px - - &.larger - :width 650px - -#facebox_header - :position relative - :padding - :bottom 10px - - .right - :z-index 3 - :right 1em - :top 14px - :color #ccc - - img - :vertical - :align top - :position relative - :top 0px - - h3, - h4 - .description - :margin - :top 0px - - .tiny_text - :font - :size 11px - :weight normal - -#aspect_edit_controls - :margin - :top 8px - .icons-monotone_email_letter_round :height 128px :width 128px @@ -1468,9 +1290,6 @@ ul#press_logos :font :size 12px -#contact_visibility_padlock:hover - @include opacity(0.7) - .side_stream .stream_element :padding 10px 0 @@ -1676,10 +1495,6 @@ h1.tag &:active @include linear-gradient(darken(#D9FFA9,20%),darken(#B9E68A,20%)) -#facebox - input[type='text'], input.text - :width 98% - #client-application-image :max-width 100% @@ -1984,27 +1799,6 @@ a.toggle_selector :text-align center :margin 5px 0 -.bottom_submit_section - :overflow hidden - :display block - :position relative - :text-align right - - form - :float left - :display inline-block - .creation - :float right - - .icons-padlock-open, - .icons-padlock-closed - :float left - :height 16px - :width 16px - :margin - :left 4px - :top 2px - #no_contacts :text-align center :padding 10px diff --git a/app/assets/stylesheets/facebox.css.scss b/app/assets/stylesheets/facebox.css.scss new file mode 100644 index 000000000..1ad19fd7b --- /dev/null +++ b/app/assets/stylesheets/facebox.css.scss @@ -0,0 +1,184 @@ +.facebox_content { display: none; } + +#facebox { + input[type='text'], input.text { width: 98%; } +} + +#facebox_header { + position: relative; + padding-bottom: 10px; + + .right { + z-index: 3; + right: 1em; + top: 14px; + color: #ccc; + + img { + vertical-align: top; + position: relative; + top: 0px; + } + } + + h3, h4 { + .description { margin-top: 0px; } + } + + .tiny_text { + font-size: 11px; + 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/helpers/aspects_helper.rb b/app/helpers/aspects_helper.rb index f146d8e1a..6d52afa2f 100644 --- a/app/helpers/aspects_helper.rb +++ b/app/helpers/aspects_helper.rb @@ -40,4 +40,19 @@ module AspectsHelper remove_from_aspect_button(membership.id, aspect.id, person.id) end end + + def aspect_visibility_link(aspect) + if aspect.contacts_visible? + icon = 'icons-padlock-open' + title = t('.aspect_list_is_visible') + else + icon = 'icons-padlock-closed' + title = t('.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) + end + end end diff --git a/app/views/aspects/edit.html.haml b/app/views/aspects/edit.html.haml index 102b4cc30..59610fd95 100644 --- a/app/views/aspects/edit.html.haml +++ b/app/views/aspects/edit.html.haml @@ -17,16 +17,8 @@ - if @contacts.count > 0 = render 'shared/contact_list', :aspect => @aspect, :contacts => @contacts - %br .bottom_submit_section = button_to t('delete'), @aspect, :method => "delete", :data => { :confirm => t('.confirm_remove_aspect') }, :class => 'button delete' - - if @aspect.contacts_visible - = link_to content_tag(:div, nil, :class => 'icons-padlock-open', :id => "contact_visibility_padlock", :title => t('.aspect_list_is_visible')), - aspect_toggle_contact_visibility_path(@aspect), :class => 'contact_visibility_link', :method => :put, :remote => true - - - else - = link_to content_tag(:div, nil, :class => 'icons-padlock-closed', :id => "contact_visibility_padlock", :title => t('.aspect_list_is_not_visible')), - aspect_toggle_contact_visibility_path(@aspect), :class => 'contact_visibility_link', :method => :put, :remote => true - + = aspect_visibility_link(@aspect) = submit_tag t('.done'), :class => 'button creation', :rel => 'close' diff --git a/app/views/aspects/toggle_contact_visibility.js.erb b/app/views/aspects/toggle_contact_visibility.js.erb index fe1ae5e2e..59485f737 100644 --- a/app/views/aspects/toggle_contact_visibility.js.erb +++ b/app/views/aspects/toggle_contact_visibility.js.erb @@ -1,14 +1,15 @@ $(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'); - padlockImg.attr('title', "<%= t('aspects.edit.aspect_list_is_not_visible') %>"); + linkText.attr('title', "<%= t('aspects.edit.aspect_list_is_not_visible') %>"); } else { padlockImg.removeClass('icons-padlock-closed'); padlockImg.addClass('icons-padlock-open'); - padlockImg.attr('title', "<%= t('aspects.edit..aspect_list_is_visible') %>"); + linkText.attr('title', "<%= t('aspects.edit.aspect_list_is_visible') %>"); } }); diff --git a/app/views/shared/_contact_list.html.haml b/app/views/shared/_contact_list.html.haml index d75bdda9a..8324da0d3 100644 --- a/app/views/shared/_contact_list.html.haml +++ b/app/views/shared/_contact_list.html.haml @@ -4,8 +4,8 @@ .contact_list_controls - = search_field_tag :contact_search, "", :id => "contact_list_search", :class => 'contact_list_search', :results => 5, :placeholder => t('.all_contacts') - = t('contacts', :count =>@aspect_contacts_count) + = search_field_tag :contact_search, "", id: "contact_list_search", class: 'contact_list_search', results: 5, placeholder: t('.all_contacts') + = t('contacts', count: @aspect_contacts_count) .contact_list.searchable %ul.contacts diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml index d0c67a54c..b8fb52e22 100644 --- a/config/locales/diaspora/en.yml +++ b/config/locales/diaspora/en.yml @@ -159,10 +159,11 @@ 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" done: "Done" rename: "rename" - aspect_list_is_visible: "aspect list is visible to others in aspect" - aspect_list_is_not_visible: "aspect list is hidden to others in aspect" + aspect_list_is_visible: "Contacts in this aspect are able to see each other." + aspect_list_is_not_visible: "Contacts in this aspect are not able to see each other." update: "update" updating: "updating" aspect_contacts: