bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-12 21:38:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

Move labels and handles to presentational

Browse Source
This commit is contained in:
Franc Camps-Febrer
2019-01-04 15:59:04 +01:00
parent ecdb5c6e44
commit 9fad640fbe
5 changed files with 72 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Timeline.jsx
View File

@@ -8,9 +8,9 @@ import { formatterWithYear, parseDate } from '../js/utilities';
import TimelineHeader from './presentational/TimelineHeader';
import TimelineAxis from './TimelineAxis.jsx';
import TimelineClip from './presentational/TimelineClip';
import TimelineHandles from './TimelineHandles.jsx';
import TimelineHandles from './presentational/TimelineHandles.js';
import TimelineZoomControls from './TimelineZoomControls.jsx';
import TimelineLabels from './TimelineLabels.jsx';
import TimelineLabels from './presentational/TimelineLabels.js';
import TimelineMarkers from './TimelineMarkers.jsx'
import TimelineEvents from './TimelineEvents.jsx';
import TimelineCategories from './TimelineCategories.jsx';

25
src/components/TimelineHandles.jsx
View File

@@ -1,25 +0,0 @@
import React from 'react';
class TimelineHandles extends React.Component {
render() {
const dims = this.props.dims;
return (
<g className="time-controls-inline">
<g transform={`translate(${dims.margin_left + 20}, 62)`} onClick={() => this.props.onMoveTime('backwards')}>
<circle r="15">
</circle>
<path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(270)"></path>
</g>
<g transform={`translate(${dims.width - dims.width_controls - 20}, 62)`} onClick={() => this.props.onMoveTime('forward')}>
<circle r="15">
</circle>
<path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(90)"></path>
</g>
</g>
)
}
}
export default TimelineHandles;

21
src/components/TimelineLabels.jsx
View File

@@ -1,21 +0,0 @@
import React from 'react';
import { formatterWithYear } from '../js/utilities';
const TimelineLabels = ({ dims, timelabels }) => {
return (
<g>
<line class="axisBoundaries" x1={dims.margin_left} x2={dims.margin_left} y1="10" y2="20"></line>
<line class="axisBoundaries" x1={dims.width - dims.width_controls} x2={dims.width - dims.width_controls} y1="10" y2="20"></line>
<text class="timeLabel0 timeLabel" x="5" y="15">
{formatterWithYear(timelabels[0])}
</text>
<text class="timelabelF timeLabel" x={dims.width - dims.width_controls - 5} y="15" style={{ textAnchor: 'end' }}>
{formatterWithYear(timelabels[1])}
</text>
</g>
)
}
export default TimelineLabels;

26
src/components/presentational/TimelineHandles.js Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
const TimelineHandles = ({ dims, onMoveTime }) => {
return (
<g className="time-controls-inline">
<g
transform={`translate(${dims.margin_left + 20}, 62)`}
onClick={() => this.props.onMoveTime('backwards')}
>
<circle r="15"></circle>
<path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(270)"></path>
</g>
<g
transform={`translate(${dims.width - dims.width_controls - 20}, 62)`}
onClick={() => this.props.onMoveTime('forward')}
>
<circle r="15"></circle>
<path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(90)"></path>
</g>
</g>
)
}
export default TimelineHandles;

44
src/components/presentational/TimelineLabels.js Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import { formatterWithYear } from '../js/utilities';
const TimelineLabels = ({ dims, timelabels }) => {
return (
<g>
<line
class="axisBoundaries"
x1={dims.margin_left}
x2={dims.margin_left}
y1="10"
y2="20"
>
</line>
<line
class="axisBoundaries"
x1={dims.width - dims.width_controls}
x2={dims.width - dims.width_controls}
y1="10"
y2="20"
>
</line>
<text
class="timeLabel0 timeLabel"
x="5"
y="15"
>
{formatterWithYear(timelabels[0])}
</text>
<text
class="timelabelF timeLabel"
x={dims.width - dims.width_controls - 5}
y="15"
style={{ textAnchor: 'end' }}
>
{formatterWithYear(timelabels[1])}
</text>
</g>
)
}
export default TimelineLabels;