style. also, made sense of aspect-edit.js
This commit is contained in:
danielvincent
parent
69528b95a3
commit
e1f4e12b8f
3 changed files with 102 additions and 95 deletions
|
|
@ -10,7 +10,7 @@
|
|||
%h2
|
||||
Manage aspects
|
||||
.right
|
||||
= link_to(t('.add_a_new_aspect'), "#add_aspect_pane", :class => "new_aspect add_aspect_button button", :title => t('.add_a_new_aspect'))
|
||||
= link_to("+ #{t('.add_a_new_aspect')}", "#add_aspect_pane", :class => "new_aspect add_aspect_button button", :title => t('.add_a_new_aspect'))
|
||||
|
||||
.span-4.append-1.last
|
||||
%h3=t('.requests')
|
||||
|
|
@ -21,10 +21,8 @@
|
|||
%li.grey No new requests
|
||||
- else
|
||||
- for request in @remote_requests
|
||||
%li.requested_person{:id => request.person.id, :request_id => request.id}
|
||||
%li.person.request{:data=>{:guid=>request.id, :person_id=>request.person.id}}
|
||||
= person_image_tag(request.person)
|
||||
.name
|
||||
= request.person.real_name
|
||||
|
||||
%h3 Remove from Aspect
|
||||
.aspect_remove
|
||||
|
|
@ -36,32 +34,34 @@
|
|||
.span-19.last
|
||||
%ul#aspect_list
|
||||
- for aspect in @aspects
|
||||
%li.aspect
|
||||
%li.aspect{:data=>{:guid=>aspect.id}}
|
||||
|
||||
.aspect_name
|
||||
%span.edit_name_field
|
||||
%h3{:contenteditable => true}= aspect.name
|
||||
%h3{:contenteditable=>true}
|
||||
= aspect.name
|
||||
%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{:id => aspect.id}
|
||||
%ul.dropzone{:data=>{:aspect_id=>aspect.id}}
|
||||
|
||||
-if aspect.people.size < 1
|
||||
%li.grey Drag to add people
|
||||
|
||||
-else
|
||||
-for person in aspect.people
|
||||
|
||||
%li.person{:id => person.id, :class => person.id, :from_aspect_id => aspect.id}
|
||||
%li.person{:data=>{:guid=>person.id, :aspect_id=>aspect.id}}
|
||||
.delete
|
||||
.x
|
||||
X
|
||||
.circle
|
||||
= person_image_tag(person)
|
||||
|
||||
|
||||
|
||||
.fancybox_content
|
||||
%div{:id => "add_request_pane_#{aspect.id}"}
|
||||
= render "requests/new_request", :aspect => aspect
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
*/
|
||||
|
||||
function decrementRequestsCounter() {
|
||||
var $new_requests = $(".new_requests"),
|
||||
request_html = $new_requests.html(),
|
||||
old_request_count = request_html.match(/\d+/);
|
||||
var $new_requests = $(".new_requests");
|
||||
var request_html = $new_requests.html();
|
||||
var old_request_count = request_html.match(/\d+/);
|
||||
|
||||
if( old_request_count == 1 ) {
|
||||
$new_requests.html(
|
||||
|
|
@ -19,112 +19,84 @@ function decrementRequestsCounter() {
|
|||
}
|
||||
}
|
||||
|
||||
// Dragging person between aspects
|
||||
$(function() {
|
||||
// Multiple classes here won't work
|
||||
$("ul .person").draggable({
|
||||
revert: true
|
||||
});
|
||||
$("ul .person").draggable({ revert: true });
|
||||
$("ul .requested_person").draggable({ revert: true });
|
||||
|
||||
$("ul .requested_person").draggable({
|
||||
revert: true
|
||||
});
|
||||
|
||||
$(".aspect ul").droppable({
|
||||
$(".aspect ul.dropzone").droppable({
|
||||
hoverClass: 'active',
|
||||
drop: function(event, ui) {
|
||||
|
||||
if ($(ui.draggable[0]).hasClass('requested_person')){
|
||||
var dropzone = $(this);
|
||||
var person = ui.draggable;
|
||||
|
||||
if( person.hasClass('request') ){
|
||||
$.ajax({
|
||||
type: "DELETE",
|
||||
url: "/requests/" + ui.draggable[0].getAttribute('request_id') ,
|
||||
data: {"accept" : true , "aspect_id" : $(this)[0].id },
|
||||
url: "/requests/" + person.attr('data-guid'),
|
||||
data: {"accept" : true, "aspect_id" : dropzone.attr('data-aspect_id') },
|
||||
success: function(data){
|
||||
decrementRequestsCounter();
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
var dropzone = $(this)[0];
|
||||
|
||||
if ($(this)[0].id == ui.draggable[0].getAttribute('from_aspect_id')){
|
||||
ui.draggable.css('background','none');
|
||||
} else {
|
||||
ui.draggable.css('background','none');
|
||||
$.ajax({
|
||||
url: "/aspects/move_friend/",
|
||||
data: {"friend_id" : ui.draggable[0].id,
|
||||
"from" : ui.draggable[0].getAttribute('from_aspect_id'),
|
||||
"to" : { "to" : dropzone.id }},
|
||||
success: function(data){
|
||||
ui.draggable.attr('from_aspect_id', dropzone.id);
|
||||
ui.draggable.css('background','none');
|
||||
}});
|
||||
|
||||
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'));
|
||||
}});
|
||||
}
|
||||
$(this).closest("ul").append(ui.draggable);
|
||||
|
||||
$(this).closest("ul").append(person);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$(".aspect_remove ul").droppable({
|
||||
hoverClass: 'active',
|
||||
drop: function(event, ui) {
|
||||
if ($( "." + ui.draggable[0].id).length == 1) {
|
||||
|
||||
var person = ui.draggable;
|
||||
|
||||
if ( person.attr('data-guid').length == 1 ) {
|
||||
alert("You can not remove the person from the last aspect");
|
||||
|
||||
} else {
|
||||
if (!$(ui.draggable[0]).hasClass('requested_person')){
|
||||
var aspect = ui.draggable[0].getAttribute('from_aspect_id')
|
||||
var person_id = ui.draggable[0].id
|
||||
if( !person.hasClass('request') ){
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/aspects/remove_from_aspect",
|
||||
data:{
|
||||
'friend_id' : person_id,
|
||||
'aspect_id' : aspect
|
||||
}
|
||||
'friend_id' : person.attr('data-guid'),
|
||||
'aspect_id' : person.attr('data-aspect_id') }
|
||||
});
|
||||
}
|
||||
$(ui.draggable[0]).fadeOut('slow');
|
||||
$(ui.draggable[0]).remove();
|
||||
person.fadeOut('slow', $(this).remove());
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$(".aspect h3").live( 'focus', function() {
|
||||
|
||||
var $this = $(this),
|
||||
id = $this.closest("li").children("ul").attr("id"),
|
||||
link = "/aspects/"+ id;
|
||||
|
||||
$this.keypress(function(e) {
|
||||
if (e.which == 13) {
|
||||
e.preventDefault();
|
||||
$this.blur();
|
||||
|
||||
//save changes
|
||||
$.ajax({
|
||||
type: "PUT",
|
||||
url: link,
|
||||
data: {"aspect" : {"name" : $this.text() }}
|
||||
});
|
||||
}
|
||||
//update all other aspect links
|
||||
$this.keyup(function(e) {
|
||||
$("#aspect_nav a[href='"+link+"']").text($this.text());
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
//deletion
|
||||
// Person deletion
|
||||
$(".delete").live("click", function() {
|
||||
|
||||
var person = $(this).closest("li.person");
|
||||
request_id = person.attr("request_id");
|
||||
|
||||
if (request_id){
|
||||
if( confirm("Remove this person from all aspects?") ){
|
||||
if (person.hasClass('request')){
|
||||
|
||||
if( confirm("Ignore request?") ){
|
||||
var request_id = person.attr("data-guid");
|
||||
|
||||
$.ajax({
|
||||
type: "DELETE",
|
||||
url: "/requests/" + request_id,
|
||||
|
|
@ -135,9 +107,9 @@ $(".delete").live("click", function() {
|
|||
}
|
||||
|
||||
} else {
|
||||
if( confirm("Remove this person from all aspects?") ){
|
||||
|
||||
var person_id = $(this).closest("li.person").attr('id');
|
||||
if( confirm("Remove this person from all aspects?") ){
|
||||
var person_id = $(this).closest("li.person").attr('data-guid');
|
||||
|
||||
$.ajax({
|
||||
type: "DELETE",
|
||||
|
|
@ -150,3 +122,29 @@ $(".delete").live("click", function() {
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
// Editing aspect name
|
||||
$(".aspect h3").live('focus', function() {
|
||||
|
||||
var $this = $(this);
|
||||
var id = $this.closest("li.aspect").attr("data-guid");
|
||||
var link = "/aspects/"+ id;
|
||||
|
||||
$this.keypress(function(e) {
|
||||
if (e.which == 13) {
|
||||
e.preventDefault();
|
||||
$this.blur();
|
||||
|
||||
//save changes
|
||||
$.ajax({
|
||||
type: "PUT",
|
||||
url: link,
|
||||
data: {"aspect" : {"name" : $this.text() }}
|
||||
});
|
||||
}
|
||||
//update all other aspect links
|
||||
$this.keyup(function(e) {
|
||||
$("#aspect_nav a[href='"+link+"']").text($this.text());
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -903,13 +903,7 @@ h1.big_text
|
|||
:padding 2px
|
||||
|
||||
|
||||
.aspect,
|
||||
.requests,
|
||||
.remove,
|
||||
.aspect_remove
|
||||
:list
|
||||
:style none
|
||||
|
||||
.aspect
|
||||
h3
|
||||
:display inline-block
|
||||
|
||||
|
|
@ -944,7 +938,11 @@ h1.big_text
|
|||
&:last-child
|
||||
:margin
|
||||
:right 0
|
||||
|
||||
.aspect,
|
||||
.requests,
|
||||
.aspect_remove
|
||||
:list
|
||||
:style none
|
||||
.grey
|
||||
:color #999
|
||||
:cursor default
|
||||
|
|
@ -954,25 +952,27 @@ h1.big_text
|
|||
:min-height 20px
|
||||
:margin 0
|
||||
:bottom 25px
|
||||
:background
|
||||
:color #efefef
|
||||
:border 1px solid #ccc
|
||||
|
||||
:-webkit-border-radius 10px
|
||||
:-moz-border-radius 10px
|
||||
:border-radius 10px
|
||||
|
||||
:list
|
||||
:style none
|
||||
:padding 15px
|
||||
:border 2px dashed #ccc
|
||||
|
||||
&.active
|
||||
:background
|
||||
:color #fafafa
|
||||
:color rgba(255,252,127,0.2)
|
||||
|
||||
.person,
|
||||
.requested_person
|
||||
.person
|
||||
:display inline-block
|
||||
:cursor move
|
||||
:z-index 10
|
||||
:position relative
|
||||
:padding 0
|
||||
:margin 0
|
||||
:margin 5px
|
||||
|
||||
:color #eee
|
||||
|
||||
|
|
@ -980,6 +980,7 @@ h1.big_text
|
|||
:height 70px
|
||||
:width 70px
|
||||
:border-radius 5px
|
||||
:-webkit-box-shadow 0 1px 2px #999
|
||||
|
||||
&:hover
|
||||
.delete
|
||||
|
|
@ -1034,6 +1035,10 @@ h1.big_text
|
|||
:color rgba(208,49,43,1)
|
||||
|
||||
|
||||
.requests
|
||||
ul.dropzone
|
||||
:border 2px solid #ccc
|
||||
|
||||
ul#settings_nav
|
||||
:display inline
|
||||
:list
|
||||
|
|
@ -1152,6 +1157,10 @@ header
|
|||
|
||||
h2
|
||||
:display inline
|
||||
|
||||
.right
|
||||
:margin
|
||||
:top 10px
|
||||
|
||||
.modal_title_bar
|
||||
:width 100%
|
||||
|
|
|
|||
Loading…
Reference in a new issue