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

Merge pull request #4567 from Flaburgan/refactor-modify-aspect-facebox

Browse source 
Refactor modify aspect facebox
This commit is contained in:
Fabian Rodriguez 2013-11-07 17:53:43 -08:00
commit fdfe50b581
9 changed files with 216 additions and 222 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Changelog.md
View file

@ -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

6
app/assets/javascripts/aspect-edit-pane.js
View file

@ -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) {

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

@ -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

184
app/assets/stylesheets/facebox.css.scss Normal file
View 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;
}
}
}
}

15
app/helpers/aspects_helper.rb
View file

@ -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

10
app/views/aspects/edit.html.haml
View file

@ -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'

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

@ -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') %>");
}
});

4
app/views/shared/_contact_list.html.haml
View file

@ -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

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

@ -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: