mirror of
https://github.com/TracksApp/tracks.git
synced 2025-12-17 15:50:13 +01:00
Move dependency drop target into image
In preparation for #937 and other potential uses of drag&drop
This commit is contained in:
Eric Allen
parent
9591d29e73
commit
ec68e04f27
7 changed files with 378 additions and 11 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
179
artwork/add_successor_on.svg
Normal file
179
artwork/add_successor_on.svg
Normal 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
175
artwork/predecessor.svg
Normal 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 |
BIN
public/images/add_successor_off.png
Normal file
BIN
public/images/add_successor_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 801 B |
BIN
public/images/add_successor_on.png
Normal file
BIN
public/images/add_successor_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 794 B |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue