Skip to content

Commit

Permalink
Fix #9176 Make Map Views tool progress bar more evident (#9187) (#9221)
Browse files Browse the repository at this point in the history
  • Loading branch information
@allyoucanmap
allyoucanmap committed Jun 14, 2023
1 parent ea6c7b0 commit 084361f
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 15 deletions.
33 changes: 27 additions & 6 deletions web/client/components/mapviews/MapViewsProgressBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,42 @@
*/

import React from 'react';
import tooltip from '../misc/enhancers/tooltip';

const MapViewsProgressBarTick = tooltip(({
left,
active,
...props
}) => {
return (
<div
{...props}
className={`ms-map-view-progress-tick${active ? ' active' : ''}`}
style={{ left }}
/>
);
});

function MapViewsProgressBar({
play,
progress,
segments,
totalLength
totalLength,
onSelect,
currentIndex
}) {
return (
<div className="ms-map-view-progress-container">
<div className={`ms-map-view-progress-container${play ? ' playing' : ''}`}>
<div className="ms-map-view-progress-bar" style={{ width: `${progress}%` }}></div>
{segments
?.map((duration, idx) => (
<div
?.map(({ duration, view }, idx) => (
<MapViewsProgressBarTick
key={idx}
className="ms-map-view-progress-tick"
style={{ left: `${Math.round(duration / totalLength * 100)}%` }}
tooltip={view?.title}
active={idx <= currentIndex}
tooltipPosition="bottom"
left={`${Math.round(duration / totalLength * 100)}%`}
onClick={() => onSelect(view)}
/>)
)}
</div>
Expand Down
14 changes: 11 additions & 3 deletions web/client/components/mapviews/MapViewsSupport.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,11 @@ const useMapViewsNavigation = ({
const [play, setPlay] = useState(false);
const [navigationProgress, setNavigationProgress] = useState(0);
const viewsTimeTotalLength = computeDurationSum(views);
const viewsTimeSegments = views.map((view, idx) => computeDurationSum(views.filter((vw, jdx) => jdx < idx)));
const viewsTimeSegments = views.map((view, idx) => ({ view, duration: computeDurationSum(views.filter((vw, jdx) => jdx < idx)) }));

useEffect(() => {
if (!play) {
setNavigationProgress(Math.round((viewsTimeSegments[currentIndex] ?? 0) / viewsTimeTotalLength * 100));
setNavigationProgress(Math.round((viewsTimeSegments?.[currentIndex]?.duration ?? 0) / viewsTimeTotalLength * 100));
}
}, [currentIndex, play]);

Expand All @@ -94,7 +94,7 @@ const useMapViewsNavigation = ({
if (play) {
let startTime = Date.now();
let index = currentIndex === -1 ? 0 : currentIndex;
let initialDelta = viewsTimeSegments[index];
let initialDelta = viewsTimeSegments?.[index]?.duration;
let mainStartTime = startTime;
let currentView = views[index >= views.length ? 0 : index];
onInit(currentView);
Expand Down Expand Up @@ -408,9 +408,17 @@ function MapViewsSupport({
<div className="ms-map-views" onClick={(event) => event.stopPropagation()}>
<div className="ms-map-views-wrapper">
<MapViewsProgressBar
play={play}
currentIndex={currentIndex}
progress={navigationProgress}
segments={viewsTimeSegments}
totalLength={viewsTimeTotalLength}
onSelect={view => {
if (play) {
setPlay(false);
}
handleSelectView(view);
}}
/>
<div className="ms-map-views-header">
{(selected?.description && !expanded) ?
Expand Down
51 changes: 50 additions & 1 deletion web/client/components/mapviews/__tests__/MapViewsProgressBar-test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import MapViewsProgressBar from '../MapViewsProgressBar';
import expect from 'expect';
import { Simulate } from 'react-dom/test-utils';

describe('MapViewsProgressBar component', () => {
beforeEach((done) => {
Expand Down Expand Up @@ -39,7 +40,7 @@ describe('MapViewsProgressBar component', () => {
});
it('should display ticks based on segments and totalLength props', () => {
ReactDOM.render(<MapViewsProgressBar
segments={[0, 2000, 4000, 5000]}
segments={[{ duration: 0 }, { duration: 2000 }, { duration: 4000 }, { duration: 5000 }]}
totalLength={10000}
/>, document.getElementById("container"));
const tickNodes = [...document.querySelectorAll('.ms-map-view-progress-tick')];
Expand All @@ -51,4 +52,52 @@ describe('MapViewsProgressBar component', () => {
'50%'
]);
});
it('should display tooltip on tick', () => {
ReactDOM.render(<MapViewsProgressBar
segments={[
{ duration: 0, view: { title: 'Title 01' } },
{ duration: 2000, view: { title: 'Title 02' } },
{ duration: 4000, view: { title: 'Title 03' } },
{ duration: 5000, view: { title: 'Title 04' } }
]}
totalLength={10000}
/>, document.getElementById("container"));
const tickNodes = [...document.querySelectorAll('.ms-map-view-progress-tick')];
expect(tickNodes.length).toBeTruthy(4);
Simulate.mouseOver(tickNodes[0]);
const tooltipInner = document.querySelector('.tooltip-inner');
expect(tooltipInner.innerText).toBe('Title 01');
});
it('should trigger on select by clicking on tick', (done) => {
ReactDOM.render(<MapViewsProgressBar
segments={[
{ duration: 0, view: { title: 'Title 01' } },
{ duration: 2000, view: { title: 'Title 02' } },
{ duration: 4000, view: { title: 'Title 03' } },
{ duration: 5000, view: { title: 'Title 04' } }
]}
totalLength={10000}
onSelect={(view) => {
expect(view).toEqual({ title: 'Title 01' });
done();
}}
/>, document.getElementById("container"));
const tickNodes = [...document.querySelectorAll('.ms-map-view-progress-tick')];
expect(tickNodes.length).toBeTruthy(4);
Simulate.click(tickNodes[0]);
});
it('should apply active class to tick with index less and equal to the current one', () => {
ReactDOM.render(<MapViewsProgressBar
currentIndex={2}
segments={[
{ duration: 0, view: { title: 'Title 01' } },
{ duration: 2000, view: { title: 'Title 02' } },
{ duration: 4000, view: { title: 'Title 03' } },
{ duration: 5000, view: { title: 'Title 04' } }
]}
totalLength={10000}
/>, document.getElementById("container"));
const tickNodes = [...document.querySelectorAll('.active')];
expect(tickNodes.length).toBeTruthy(3);
});
});
38 changes: 33 additions & 5 deletions web/client/themes/default/less/map-views.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,28 @@

.ms-map-view-progress-container {
.background-color-var(@theme-vars[main-variant-bg]);
.border-bottom-color-var(@theme-vars[main-border-color]);
&.playing {
.ms-map-view-progress-bar {
.background-color-var(@theme-vars[success]);
}
.ms-map-view-progress-tick {
.border-color-var(@theme-vars[success]);
.background-color-var(@theme-vars[success-contrast]);
}
}
.ms-map-view-progress-bar {
.background-color-var(@theme-vars[primary]);
}
.ms-map-view-progress-tick {
.background-color-var(@theme-vars[main-variant-color]);
.border-color-var(@theme-vars[primary]);
.background-color-var(@theme-vars[primary-contrast]);
&:not(.active) {
.border-color-var(@theme-vars[main-border-color]);
&:hover {
.border-color-var(@theme-vars[main-color]);
}
}
}
}
}
Expand Down Expand Up @@ -326,16 +343,27 @@
}
.ms-map-view-progress-container {
width: 100%;
height: 4px;
font-size: 8px;
height: 1em;
position: relative;
border-bottom: 0.125em solid transparent;
overflow: hidden;
.ms-map-view-progress-bar {
height: 4px;
height: 1em;
transition: 0.3s width;
opacity: 0.5;
}
.ms-map-view-progress-tick {
top: 0;
position: absolute;
width: 1px;
height: 100%;
cursor: pointer;
width: 1em;
height: 1em;
border-radius: 50%;
transition: 0.3s all;
border: 0.25em solid transparent;
& + .ms-map-view-progress-tick {
transform: translateX(-50%);
}
}
}

0 comments on commit 084361f

Please sign in to comment.