diff --git a/app/views/aspects/manage.html.haml b/app/views/aspects/manage.html.haml
index 06f55724a..e067888e0 100644
--- a/app/views/aspects/manage.html.haml
+++ b/app/views/aspects/manage.html.haml
@@ -16,7 +16,7 @@
%h3=t('.requests')
.requests
- %ul.dropzone
+ %ul
- if @remote_requests.size < 1
%li No new requests
- else
@@ -44,23 +44,35 @@
%span.tip click to edit
%ul.tools
- %li= link_to t('.add_a_new_friend'), "#add_request_pane_#{aspect.id}", :class => 'add_request_button'
%li!= remove_link(aspect)
- %ul.dropzone{:data=>{:aspect_id=>aspect.id}}
+
+ %ul.people{:data=>{:aspect_id=>aspect.id}}
-for person in aspect.people
%li.person{:data=>{:guid=>person.id, :aspect_id=>aspect.id}}
.delete
.x
- X
+ = link_to "X", "#remove_person_pane", :class => "remove_person_button"
.circle
= person_image_tag(person)
- .draggable_info
- Drag to add people
+ %li.dropzone_targets
+ %span.dropzone.add_person
+ = link_to "Add person", "#add_request_pane_#{aspect.id}", :class => 'add_request_button'
+ %span.dropzone.move_person
+ = link_to "Move person", '#'
.fancybox_content
%div{:id => "add_request_pane_#{aspect.id}"}
= render "requests/new_request", :aspect => aspect
+
+ .fancybox_content
+ #remove_person_pane
+ .span-12.last
+ .modal_title_bar
+ %h4 Remove from aspect
+
+ .person
+
diff --git a/public/javascripts/aspect-edit.js b/public/javascripts/aspect-edit.js
index 8d3268d58..d31d82114 100644
--- a/public/javascripts/aspect-edit.js
+++ b/public/javascripts/aspect-edit.js
@@ -21,48 +21,62 @@ function decrementRequestsCounter() {
// Dragging person between aspects
$(function() {
- $("ul .person").draggable({
+ $(".person").draggable({
revert: true,
start: function(event,ui){
$(this).children("img").animate({'height':80, 'width':80, 'opacity':0.8},200);
- $(".draggable_info").fadeIn(100);
+ $(".dropzone").fadeIn(100);
},
stop: function(event,ui){
$(this).children("img").animate({'height':70, 'width':70, 'opacity':1},200);
- $(".draggable_info").fadeOut(100);
}
});
- $(".aspect ul.dropzone").droppable({
+ $(".dropzone", ".aspect").droppable({
hoverClass: 'active',
drop: function(event, ui) {
var dropzone = $(this);
var person = ui.draggable;
+ var aspect = dropzone.closest(".aspect");
if( person.hasClass('request') ){
$.ajax({
type: "DELETE",
url: "/requests/" + person.attr('data-guid'),
- data: {"accept" : true, "aspect_id" : dropzone.attr('data-aspect_id') },
+ data: {"accept" : true, "aspect_id" : aspect.attr('data-guid') },
success: function(data){
decrementRequestsCounter();
}
});
};
- if( dropzone.attr('data-aspect_id') != person.attr('data-aspect_id' )){
- $.ajax({
- url: "/aspects/move_friend/",
- data: {"friend_id" : person.attr('data-guid'),
- "from" : person.attr('data-aspect_id'),
- "to" : { "to" : dropzone.attr('data-aspect_id') }},
- success: function(data){
- person.attr('data-aspect_id', dropzone.attr('data-aspect_id'));
- }});
- }
+ if( aspect.attr('data-guid') != person.attr('data-aspect_id' )){
- $(this).closest("ul").append(person);
+ if( dropzone.hasClass("move_person") ){
+ $.ajax({
+ url: "/aspects/move_friend/",
+ data: {"friend_id" : person.attr('data-guid'),
+ "from" : person.attr('data-aspect_id'),
+ "to" : { "to" : aspect.attr('data-guid') }},
+ success: function(data){
+ person.attr('data-aspect_id', aspect.attr('data-guid'));
+ }});
+
+ $("ul.people li:last", aspect).before(person);
+
+ } else {
+ $.ajax({
+ url: "/aspects/add_to_aspect/",
+ data: {"friend_id" : person.attr('data-guid'),
+ "aspect_id" : aspect.attr('data-guid') },
+ success: function(data){
+ person.attr('data-aspect_id', aspect.attr('data-guid'));
+ }});
+
+ $("ul.people li:last", aspect).before(person);
+ }
+ }
}
});
@@ -87,7 +101,7 @@ $(function() {
'aspect_id' : person.attr('data-aspect_id') }
});
}
- person.fadeOut('slow', $(this).remove());
+ person.fadeOut('slow', function(){person.remove()});
}
}
});
@@ -97,6 +111,7 @@ $(function() {
// Person deletion
+
$(".delete").live("click", function() {
var person = $(this).closest("li.person");
@@ -117,17 +132,19 @@ $(".delete").live("click", function() {
} else {
- if( confirm("Remove this person from all aspects?") ){
- var person_id = $(this).closest("li.person").attr('data-guid');
+ var person_id = $(this).closest("li.person").attr('data-guid');
- $.ajax({
- type: "DELETE",
- url: "/people/" + person_id,
- success: function() {
- person.fadeOut(200);
- }
- });
- }
+
+ /*
+ $.ajax({
+ type: "DELETE",
+ url: "/people/" + person_id,
+ success: function() {
+ person.fadeOut(200);
+ }
+ });
+
+ */
}
});
diff --git a/public/javascripts/view.js b/public/javascripts/view.js
index 7e809f978..71fefc347 100644
--- a/public/javascripts/view.js
+++ b/public/javascripts/view.js
@@ -30,6 +30,7 @@ $(document).ready(function(){
$("#add_request_button").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false });
$(".invite_user_button").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false });
$(".add_request_button").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false });
+ $(".remove_person_button").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false });
$(".question_mark").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false });
$("input[type='submit']").addClass("button");
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index db0b32edc..4f7a48430 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -938,49 +938,71 @@ h1.big_text
&:last-child
:margin
:right 0
+
+ul#aspect_list
+ :list
+ :style none
+ :padding 0
+ :margin 0
+
.aspect,
.requests,
.aspect_remove
- :list
- :style none
+ :position relative
:color #999
:cursor default
:text-shadow 0 1px #fff
- ul.dropzone
- :position relative
- :min-height 20px
- :margin 0
- :bottom 25px
+ .dropzone
+ :display inline-block
+
:-webkit-border-radius 10px
:-moz-border-radius 10px
:border-radius 10px
- :list
- :style none
- :padding 15px
+ :margin 5px
:border 2px dashed #ccc
+ :height 70px
+ :max-height 70px
+ :width 70px
+ :max-width 70px
+
&.active
:background
:color rgba(255,252,127,0.2)
- .draggable_info
- :position absolute
- :display none
- :right 15px
- :bottom 10px
+ a
+ :display block
+ :height 100%
+ :padding
+ :top 12px
+ :text
+ :align center
:font
- :style italic
:size 14px
- :color #aaa
+
+ :color #999
+
+ &:hover
+ :color #666
+
+ ul
+ :list
+ :style none
+ :min-height 20px
+ :margin 0
+ :bottom 25px
+ :padding 0
+
+ li
+ :display inline-block
.person
- :display inline-block
:cursor move
:z-index 10
- :position relative
+ :top 0
:padding 0
:margin 5px
@@ -1034,8 +1056,15 @@ h1.big_text
.x
:z-index 2
:position absolute
- :top 2px
- :left 7px
+ :padding
+ :top 2px
+ :left 7px
+ a
+ :cursor default
+ :display block
+ :height 100%
+ :text-shadow none
+ :color #eee
&:hover
:cursor default