Move dependency drop target into image

In preparation for #937 and other potential uses of drag&drop
This commit is contained in:
Eric Allen 2010-03-07 16:21:23 -05:00
parent 9591d29e73
commit ec68e04f27
7 changed files with 378 additions and 11 deletions

View file

@ -122,7 +122,9 @@ module TodosHelper
unless @todo.completed? unless @todo.completed?
image_tag('grip.png', :width => '7', :height => '16', :border => '0', image_tag('grip.png', :width => '7', :height => '16', :border => '0',
:title => 'Drag onto another action to make it depend on that action', :title => 'Drag onto another action to make it depend on that action',
:class => 'grip') :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
end end

View file

@ -0,0 +1,179 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="744.09448819"
height="1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.47pre4 r22446"
sodipodi:docname="predecessor.svg"
inkscape:export-filename="/Users/epall/code/tracks/public/images/add_successor_on.png"
inkscape:export-xdpi="9.6245861"
inkscape:export-ydpi="9.6245861">
<defs
id="defs4">
<linearGradient
id="linearGradient5258">
<stop
style="stop-color:#28343c;stop-opacity:1;"
offset="0"
id="stop5260" />
<stop
style="stop-color:#0096ff;stop-opacity:1;"
offset="1"
id="stop5262" />
</linearGradient>
<marker
inkscape:stockid="TriangleOutM"
orient="auto"
refY="0.0"
refX="0.0"
id="TriangleOutM"
style="overflow:visible">
<path
id="path3768"
d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none"
transform="scale(0.4)" />
</marker>
<marker
inkscape:stockid="TriangleOutS"
orient="auto"
refY="0.0"
refX="0.0"
id="TriangleOutS"
style="overflow:visible">
<path
id="path3771"
d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none"
transform="scale(0.2)" />
</marker>
<marker
inkscape:stockid="Arrow2Mend"
orient="auto"
refY="0.0"
refX="0.0"
id="Arrow2Mend"
style="overflow:visible;">
<path
id="path3649"
style="font-size:12.0;fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;"
d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
transform="scale(0.6) rotate(180) translate(0,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Mend"
orient="auto"
refY="0.0"
refX="0.0"
id="Arrow1Mend"
style="overflow:visible;">
<path
id="path3631"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none;"
transform="scale(0.4) rotate(180) translate(10,0)" />
</marker>
<marker
inkscape:stockid="TriangleOutL"
orient="auto"
refY="0.0"
refX="0.0"
id="TriangleOutL"
style="overflow:visible">
<path
id="path3765"
d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none"
transform="scale(0.8)" />
</marker>
<inkscape:path-effect
effect="spiro"
id="path-effect2826"
is_visible="true" />
<inkscape:path-effect
effect="spiro"
id="path-effect2822"
is_visible="true" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="29.11825 : 616.44767 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="744.09448 : 526.18109 : 1"
inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
id="perspective10" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient5258"
id="linearGradient5264"
x1="142.18495"
y1="261.65085"
x2="142.54144"
y2="174.1613"
gradientUnits="userSpaceOnUse" />
<filter
inkscape:collect="always"
id="filter5282">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.63631671"
id="feGaussianBlur5284" />
</filter>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.3579107"
inkscape:cx="109.12131"
inkscape:cy="846.66442"
inkscape:document-units="px"
inkscape:current-layer="g5238"
showgrid="false"
inkscape:window-width="675"
inkscape:window-height="547"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g5238"
transform="translate(-23.335007,-4.8042662)"
style="fill:none;stroke:#ff0000;stroke-width:0.7;stroke-miterlimit:4;stroke-dasharray:none">
<path
id="path5244"
style="fill:url(#linearGradient5264);fill-opacity:1;stroke:#3a3a3a;stroke-width:4;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;filter:url(#filter5282)"
d="m 124.05478,198.95569 25.59428,-0.003 -38.08971,39.75365 -36.022918,-39.75365 23.518346,0.003 0,-11.2623 c 0,-11.56985 3.814362,-23.72799 12.843752,-32.8125 9.02939,-9.08451 22.71756,-14.28125 39.34375,-14.28125 15.89659,0 28.81237,4.90636 36.875,13.9375 8.06263,9.03114 10.40625,20.50418 10.40625,30.9375 l 0,97.6875 -25,0 0,-97.6875 c 0,-6.68688 -1.49995,-11.41088 -4.0625,-14.28125 -2.56255,-2.87037 -7.00817,-5.59375 -18.21875,-5.59375 -11.69655,0 -17.86524,3.15497 -21.59375,6.90625 -3.72851,3.75128 -5.59375,8.92322 -5.59375,15.1875 l 0,11.2623 z"
sodipodi:nodetypes="ccccccscsccccssscc"
transform="matrix(-1,0,0,1,274.05996,0)" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.1 KiB

175
artwork/predecessor.svg Normal file
View file

@ -0,0 +1,175 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="744.09448819"
height="1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.47pre4 r22446"
sodipodi:docname="predecessor.svg">
<defs
id="defs4">
<linearGradient
id="linearGradient5258">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop5260" />
<stop
style="stop-color:#ececec;stop-opacity:1;"
offset="1"
id="stop5262" />
</linearGradient>
<marker
inkscape:stockid="TriangleOutM"
orient="auto"
refY="0.0"
refX="0.0"
id="TriangleOutM"
style="overflow:visible">
<path
id="path3768"
d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none"
transform="scale(0.4)" />
</marker>
<marker
inkscape:stockid="TriangleOutS"
orient="auto"
refY="0.0"
refX="0.0"
id="TriangleOutS"
style="overflow:visible">
<path
id="path3771"
d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none"
transform="scale(0.2)" />
</marker>
<marker
inkscape:stockid="Arrow2Mend"
orient="auto"
refY="0.0"
refX="0.0"
id="Arrow2Mend"
style="overflow:visible;">
<path
id="path3649"
style="font-size:12.0;fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;"
d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
transform="scale(0.6) rotate(180) translate(0,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Mend"
orient="auto"
refY="0.0"
refX="0.0"
id="Arrow1Mend"
style="overflow:visible;">
<path
id="path3631"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none;"
transform="scale(0.4) rotate(180) translate(10,0)" />
</marker>
<marker
inkscape:stockid="TriangleOutL"
orient="auto"
refY="0.0"
refX="0.0"
id="TriangleOutL"
style="overflow:visible">
<path
id="path3765"
d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none"
transform="scale(0.8)" />
</marker>
<inkscape:path-effect
effect="spiro"
id="path-effect2826"
is_visible="true" />
<inkscape:path-effect
effect="spiro"
id="path-effect2822"
is_visible="true" />
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="29.11825 : 616.44767 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="744.09448 : 526.18109 : 1"
inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
id="perspective10" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient5258"
id="linearGradient5264"
x1="142.54144"
y1="285.28931"
x2="142.54144"
y2="174.1613"
gradientUnits="userSpaceOnUse" />
<filter
inkscape:collect="always"
id="filter5282">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.63631671"
id="feGaussianBlur5284" />
</filter>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.51319034"
inkscape:cx="156.62969"
inkscape:cy="949.8091"
inkscape:document-units="px"
inkscape:current-layer="g5238"
showgrid="false"
inkscape:window-width="675"
inkscape:window-height="547"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g5238"
transform="translate(-23.335007,-4.8042662)"
style="fill:none;stroke:#ff0000;stroke-width:0.7;stroke-miterlimit:4;stroke-dasharray:none">
<path
id="path5244"
style="fill:url(#linearGradient5264);stroke:#3a3a3a;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none;marker-start:none;stroke-opacity:1;fill-opacity:1;filter:url(#filter5282)"
d="m 124.05478,198.95569 25.59428,-0.003 -38.08971,39.75365 -36.022918,-39.75365 23.518346,0.003 0,-11.2623 c 0,-11.56985 3.814362,-23.72799 12.843752,-32.8125 9.02939,-9.08451 22.71756,-14.28125 39.34375,-14.28125 15.89659,0 28.81237,4.90636 36.875,13.9375 8.06263,9.03114 10.40625,20.50418 10.40625,30.9375 l 0,97.6875 -25,0 0,-97.6875 c 0,-6.68688 -1.49995,-11.41088 -4.0625,-14.28125 -2.56255,-2.87037 -7.00817,-5.59375 -18.21875,-5.59375 -11.69655,0 -17.86524,3.15497 -21.59375,6.90625 -3.72851,3.75128 -5.59375,8.92322 -5.59375,15.1875 l 0,11.2623 z"
sodipodi:nodetypes="ccccccscsccccssscc" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 801 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 794 B

View file

@ -209,7 +209,7 @@ function enable_rich_interaction(){
/* Drag & Drop for successor/predecessor */ /* Drag & Drop for successor/predecessor */
function drop_todo(evt, ui) { function drop_todo(evt, ui) {
dragged_todo = ui.draggable[0].id.split('_')[2]; 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(); ui.draggable.hide();
$(this).block({message: null}); $(this).block({message: null});
$.post('/todos/add_predecessor', $.post('/todos/add_predecessor',
@ -217,11 +217,14 @@ function enable_rich_interaction(){
null, 'script'); null, 'script');
} }
$('.item-show').draggable({handle: '.grip', revert: 'invalid'}); $('.item-show').draggable({handle: '.grip',
$('.item-show').droppable({ revert: 'invalid',
drop: drop_todo, start: function() {$('.successor_target').show();},
hoverClass: 'hover' stop: function() {$('.successor_target').hide();}});
});
$('.successor_target').droppable({drop: drop_todo,
tolerance: 'pointer',
hoverClass: 'hover'});
/* Reset auto updater */ /* Reset auto updater */
field_touched = false; field_touched = false;

View file

@ -939,9 +939,17 @@ div.message {
cursor: move; cursor: move;
} }
.hover { .successor_target {
background: #EAEAEA; background-image:url("../images/add_successor_off.png");
font-weight: bold; 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 */ /* Error message styles */