bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-13 05:48:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

Nicer arrows on timeline when zoomed in

Browse Source
This commit is contained in:
Lachlan Kermode
2022-03-06 21:43:13 -05:00
parent a84fd55e62
commit c1c3c1a2db
3 changed files with 51 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/time/atoms/Handles.js
View File

@@ -3,35 +3,34 @@ import React from "react";
const TimelineHandles = ({ dims, onMoveTime }) => {
const transform = "scale(1.5,1.5)";
const size = 45;
return null;
// return (
// <g className="time-controls-inline">
// <g
// transform={`translate(${dims.marginLeft - 20}, ${
// dims.contentHeight - 10
// })`}
// onClick={() => onMoveTime("backwards")}
// >
// <circle r={size} />
// <path
// d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"
// transform={`rotate(270) ${transform}`}
// />
// </g>
// <g
// transform={`translate(${dims.width - dims.width_controls + 20}, ${
// dims.contentHeight - 10
// })`}
// onClick={() => onMoveTime("forward")}
// >
// <circle r={size} />
// <path
// d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"
// transform={`rotate(90) ${transform}`}
// />
// </g>
// </g>
// );
return (
<g className="time-controls-inline">
<g
transform={`translate(${dims.marginLeft - 20}, ${
dims.contentHeight - 10
})`}
onClick={() => onMoveTime("backwards")}
>
<circle r={size} />
<path
d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"
transform={`rotate(270) ${transform}`}
/>
</g>
<g
transform={`translate(${dims.width - dims.width_controls + 20}, ${
dims.contentHeight - 10
})`}
onClick={() => onMoveTime("forward")}
>
<circle r={size} />
<path
d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"
transform={`rotate(90) ${transform}`}
/>
</g>
</g>
);
};
export default TimelineHandles;