From ec68e04f2723682c5d4ab1aa08dbeb49cacf15ad Mon Sep 17 00:00:00 2001 From: Eric Allen Date: Sun, 7 Mar 2010 16:21:23 -0500 Subject: [PATCH] Move dependency drop target into image In preparation for #937 and other potential uses of drag&drop --- app/helpers/todos_helper.rb | 6 +- artwork/add_successor_on.svg | 179 ++++++++++++++++++++++++++++ artwork/predecessor.svg | 175 +++++++++++++++++++++++++++ public/images/add_successor_off.png | Bin 0 -> 801 bytes public/images/add_successor_on.png | Bin 0 -> 794 bytes public/javascripts/application.js | 15 ++- public/stylesheets/standard.css | 14 ++- 7 files changed, 378 insertions(+), 11 deletions(-) create mode 100644 artwork/add_successor_on.svg create mode 100644 artwork/predecessor.svg create mode 100644 public/images/add_successor_off.png create mode 100644 public/images/add_successor_on.png diff --git a/app/helpers/todos_helper.rb b/app/helpers/todos_helper.rb index d8fe0a51..57331e01 100644 --- a/app/helpers/todos_helper.rb +++ b/app/helpers/todos_helper.rb @@ -121,8 +121,10 @@ module TodosHelper def grip_span unless @todo.completed? image_tag('grip.png', :width => '7', :height => '16', :border => '0', - :title => 'Drag onto another action to make it depend on that action', - :class => 'grip') + :title => 'Drag onto another action to make it depend on that action', + :class => 'grip') + + image_tag('blank.png', :width => 16, :height => 16, :border => 0, + :title => "Drop an action to make it depend on this action", :class => 'successor_target') end end diff --git a/artwork/add_successor_on.svg b/artwork/add_successor_on.svg new file mode 100644 index 00000000..b7b3165c --- /dev/null +++ b/artwork/add_successor_on.svg @@ -0,0 +1,179 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/artwork/predecessor.svg b/artwork/predecessor.svg new file mode 100644 index 00000000..75e1ea1a --- /dev/null +++ b/artwork/predecessor.svg @@ -0,0 +1,175 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/public/images/add_successor_off.png b/public/images/add_successor_off.png new file mode 100644 index 0000000000000000000000000000000000000000..183f1326da59fb9ce8dfc4de71f365f9c1e3dad6 GIT binary patch literal 801 zcmV++1K#|JP)A_TU&dEb1w4v{O4RQ_k3<{?vtzz{)F`O^mzOG z`)>>k4BU>#BFA>^5qk^um1XlS?|jYcmjiXs;m7n5siYcEaH z+*VcfLM#?bjE#*&L!nSO6bfCQo}PXKU=skSq9|t_$Eg!SuuLZNdVYTXk!4vK0GOSf zeZRG}b-%T>H5v|w&qX4U#uKqzF4q}`0o%5-rfGgH6biZOAE{I-RbOBK&Fl3>6-5bh z&RYl}@1&GAWsDJB*HJ7MA%qYB>c+>%uc@kf#qD+n7-KC52L~0-xt}pMGdVeVX<}kR ztFbH#x~?Oe%}UcWT~f-NX__AcfqW83NQ=< zLI~Kl4MK=ZO1V8aIC!^MEYjxY=Bs|cADnZf)9H=f-Q9-^3kz>4V+^{kqg*cI_|jw6 z*Vi|PhKBA4A!uV`Zzqt3ASzjS`MtPt|k+S#Jx-=V-iBX zD2no8e}A6?K#gTtFbo5^Tn?Ob{K@k2@`uC2!$`b`(W1 f(&@DPuLa--f+vKa3jVpwx}gdBNaMgZL5u;Go3lJoHJ+6nX`N@YQ)ln-}Uo* zlPB*(gb)CL#oG?Hnx4wNrl)#|&Al#GQVmy8e&sb&mtS1J_!8yd56Gsrw#xY2b$jIC z#=~-O^#apd1=s)>;3{TO_2t=U&1ld0Dd~6TdhbUQWs!etj2aQgm$ngD>N-N&E% zl7lDosS88J$~iNN)uH;bNU3djBs~jvek>zt$q$iOAzSX@)?&l{ne98GSt^H+X90?Msh1*A=)5X%MFb=4d}3 z-1qe1o7L+!A7PfxHGe~xl!}9XW#r84SkJAqLYSOc1#m45I3}oG_;nn3{`lU&lJy%g1;6Xg+aZ$A+aRpFFvd`MDfgQo)1+ z2pi1S@h3tE8xte^4bDm`h-E+sXX3!ZmcQi5p#PPc1TIlJ?g)EW5HU!FBYz#L5dYSI Y?{CsPln#@-BLDyZ07*qoM6N<$f&*G*_W%F@ literal 0 HcmV?d00001 diff --git a/public/javascripts/application.js b/public/javascripts/application.js index 51d31fae..0fa72903 100644 --- a/public/javascripts/application.js +++ b/public/javascripts/application.js @@ -209,7 +209,7 @@ function enable_rich_interaction(){ /* Drag & Drop for successor/predecessor */ function drop_todo(evt, ui) { dragged_todo = ui.draggable[0].id.split('_')[2]; - dropped_todo = this.id.split('_')[2]; + dropped_todo = $(this).parents('.item-show').get(0).id.split('_')[2]; ui.draggable.hide(); $(this).block({message: null}); $.post('/todos/add_predecessor', @@ -217,11 +217,14 @@ function enable_rich_interaction(){ null, 'script'); } - $('.item-show').draggable({handle: '.grip', revert: 'invalid'}); - $('.item-show').droppable({ - drop: drop_todo, - hoverClass: 'hover' - }); + $('.item-show').draggable({handle: '.grip', + revert: 'invalid', + start: function() {$('.successor_target').show();}, + stop: function() {$('.successor_target').hide();}}); + + $('.successor_target').droppable({drop: drop_todo, + tolerance: 'pointer', + hoverClass: 'hover'}); /* Reset auto updater */ field_touched = false; diff --git a/public/stylesheets/standard.css b/public/stylesheets/standard.css index c32a167a..58148f63 100644 --- a/public/stylesheets/standard.css +++ b/public/stylesheets/standard.css @@ -939,9 +939,17 @@ div.message { cursor: move; } -.hover { - background: #EAEAEA; - font-weight: bold; +.successor_target { + background-image:url("../images/add_successor_off.png"); + background-repeat: no-repeat; + background-position: center right; + display: none; +} + +.successor_target.hover { + background-image:url("../images/add_successor_on.png"); + background-repeat: no-repeat; + background-position: center right; } /* Error message styles */