Improve the management of the contacts visibility settings in an aspect
This commit is contained in:
flaburgan
parent
3251fce3d6
commit
3df0fdc09b
8 changed files with 208 additions and 222 deletions
|
|
@ -40,6 +40,7 @@
|
||||||
* Collapse aspect list and tag followings list when switching to other views [#4462](https://github.com/diaspora/diaspora/pull/4462)
|
* 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)
|
* 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)
|
* 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
|
# 0.2.0.0
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@
|
||||||
@import 'help'
|
@import 'help'
|
||||||
@import 'profile'
|
@import 'profile'
|
||||||
@import 'publisher'
|
@import 'publisher'
|
||||||
|
@import 'facebox'
|
||||||
|
|
||||||
/* ====== media ====== */
|
/* ====== media ====== */
|
||||||
.media
|
.media
|
||||||
|
|
@ -624,9 +625,6 @@ input[type="search"]
|
||||||
:-webkit-appearance textfield
|
:-webkit-appearance textfield
|
||||||
:-moz-appearance textfield
|
:-moz-appearance textfield
|
||||||
|
|
||||||
.facebox_content
|
|
||||||
:display none
|
|
||||||
|
|
||||||
#photo_edit_options
|
#photo_edit_options
|
||||||
:display none
|
:display none
|
||||||
|
|
||||||
|
|
@ -740,125 +738,6 @@ ul#request_result
|
||||||
:bottom 2.5em
|
:bottom 2.5em
|
||||||
:padding 0
|
: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
|
#signup_field
|
||||||
:margin
|
:margin
|
||||||
:top -200px
|
:top -200px
|
||||||
|
|
@ -1097,63 +976,6 @@ ul#press_logos
|
||||||
#inner_account_delete
|
#inner_account_delete
|
||||||
:width 810px
|
: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
|
.icons-monotone_email_letter_round
|
||||||
:height 128px
|
:height 128px
|
||||||
:width 128px
|
:width 128px
|
||||||
|
|
@ -1468,9 +1290,6 @@ ul#press_logos
|
||||||
:font
|
:font
|
||||||
:size 12px
|
:size 12px
|
||||||
|
|
||||||
#contact_visibility_padlock:hover
|
|
||||||
@include opacity(0.7)
|
|
||||||
|
|
||||||
.side_stream
|
.side_stream
|
||||||
.stream_element
|
.stream_element
|
||||||
:padding 10px 0
|
:padding 10px 0
|
||||||
|
|
@ -1676,10 +1495,6 @@ h1.tag
|
||||||
&:active
|
&:active
|
||||||
@include linear-gradient(darken(#D9FFA9,20%),darken(#B9E68A,20%))
|
@include linear-gradient(darken(#D9FFA9,20%),darken(#B9E68A,20%))
|
||||||
|
|
||||||
#facebox
|
|
||||||
input[type='text'], input.text
|
|
||||||
:width 98%
|
|
||||||
|
|
||||||
#client-application-image
|
#client-application-image
|
||||||
:max-width 100%
|
:max-width 100%
|
||||||
|
|
||||||
|
|
@ -1984,27 +1799,6 @@ a.toggle_selector
|
||||||
:text-align center
|
:text-align center
|
||||||
:margin 5px 0
|
: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
|
#no_contacts
|
||||||
:text-align center
|
:text-align center
|
||||||
:padding 10px
|
:padding 10px
|
||||||
|
|
|
||||||
184
app/assets/stylesheets/facebox.css.scss
Normal file
184
app/assets/stylesheets/facebox.css.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -40,4 +40,17 @@ module AspectsHelper
|
||||||
remove_from_aspect_button(membership.id, aspect.id, person.id)
|
remove_from_aspect_button(membership.id, aspect.id, person.id)
|
||||||
end
|
end
|
||||||
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
|
||||||
|
padlock = content_tag(:div, nil, id: "contact_visibility_padlock", class: icon);
|
||||||
|
link_to "#{t('.visibility')} #{padlock}".html_safe, aspect_toggle_contact_visibility_path(@aspect),
|
||||||
|
class: 'contact_visibility_link button', title: title, method: :put, remote: true;
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -17,16 +17,8 @@
|
||||||
- if @contacts.count > 0
|
- if @contacts.count > 0
|
||||||
= render 'shared/contact_list', :aspect => @aspect, :contacts => @contacts
|
= render 'shared/contact_list', :aspect => @aspect, :contacts => @contacts
|
||||||
|
|
||||||
%br
|
|
||||||
.bottom_submit_section
|
.bottom_submit_section
|
||||||
= button_to t('delete'), @aspect, :method => "delete", :data => { :confirm => t('.confirm_remove_aspect') }, :class => 'button delete'
|
= button_to t('delete'), @aspect, :method => "delete", :data => { :confirm => t('.confirm_remove_aspect') }, :class => 'button delete'
|
||||||
- if @aspect.contacts_visible
|
= aspect_visibility_link(@aspect)
|
||||||
= 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
|
|
||||||
|
|
||||||
= submit_tag t('.done'), :class => 'button creation', :rel => 'close'
|
= submit_tag t('.done'), :class => 'button creation', :rel => 'close'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,15 @@
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
var padlockImg = $("#contact_visibility_padlock");
|
var padlockImg = $("#contact_visibility_padlock");
|
||||||
|
var linkText = $(".contact_visibility_link");
|
||||||
|
|
||||||
if (padlockImg.hasClass('icons-padlock-open')) {
|
if (padlockImg.hasClass('icons-padlock-open')) {
|
||||||
padlockImg.removeClass('icons-padlock-open');
|
padlockImg.removeClass('icons-padlock-open');
|
||||||
padlockImg.addClass('icons-padlock-closed');
|
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 {
|
} else {
|
||||||
padlockImg.removeClass('icons-padlock-closed');
|
padlockImg.removeClass('icons-padlock-closed');
|
||||||
padlockImg.addClass('icons-padlock-open');
|
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') %>");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@
|
||||||
|
|
||||||
|
|
||||||
.contact_list_controls
|
.contact_list_controls
|
||||||
= search_field_tag :contact_search, "", :id => "contact_list_search", :class => 'contact_list_search', :results => 5, :placeholder => t('.all_contacts')
|
= 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)
|
= t('contacts', count: @aspect_contacts_count)
|
||||||
|
|
||||||
.contact_list.searchable
|
.contact_list.searchable
|
||||||
%ul.contacts
|
%ul.contacts
|
||||||
|
|
|
||||||
|
|
@ -159,10 +159,11 @@ en:
|
||||||
remove_aspect: "Delete this aspect"
|
remove_aspect: "Delete this aspect"
|
||||||
confirm_remove_aspect: "Are you sure you want to delete this aspect?"
|
confirm_remove_aspect: "Are you sure you want to delete this aspect?"
|
||||||
add_existing: "Add an existing contact"
|
add_existing: "Add an existing contact"
|
||||||
|
visibility: "Visibility"
|
||||||
done: "Done"
|
done: "Done"
|
||||||
rename: "rename"
|
rename: "rename"
|
||||||
aspect_list_is_visible: "aspect list is visible to others in aspect"
|
aspect_list_is_visible: "Contacts in this aspect are able to see each other."
|
||||||
aspect_list_is_not_visible: "aspect list is hidden to others in aspect"
|
aspect_list_is_not_visible: "Contacts in this aspect are not able to see each other."
|
||||||
update: "update"
|
update: "update"
|
||||||
updating: "updating"
|
updating: "updating"
|
||||||
aspect_contacts:
|
aspect_contacts:
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue