archive-gh-me/mapillary-js
1
0
Fork 0
mirror of https://github.com/mapillary/mapillary-js.git synced 2026-02-01 14:33:45 +00:00
Code Issues Projects Releases Wiki Activity

Use flexbox to position sequence buttons.

Browse Source
This commit is contained in:
Oscar Lorentzon 2016-06-02 14:13:31 +02:00
parent 63c9c7e3d2
commit de89e93c99
2 changed files with 51 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/component/sequence/SequenceDOMRenderer.ts
View File

@ -40,7 +40,7 @@ export class SequenceDOMRenderer {
let arrows: vd.VNode[] = this._createSequenceArrows(nextKey, prevKey, node, configuration, interaction, navigator);
let containerProperties: vd.createProperties = {
style: { height: "30px", width: "100px" },
style: { height: "30px", width: "117px" },
};
return vd.h("div.SequenceContainer", containerProperties, arrows.concat([playingButton]));
@ -62,10 +62,7 @@ export class SequenceDOMRenderer {
let buttonProperties: vd.createProperties = {
onclick: onclick,
style: {
height: "100%",
left: "33%",
position: "absolute",
width: "34%",
},
};
@ -91,10 +88,7 @@ export class SequenceDOMRenderer {
onmouseenter: (e: MouseEvent): void => { interaction.mouseEnterDirection$.onNext(EdgeDirection.Next); },
onmouseleave: (e: MouseEvent): void => { interaction.mouseLeaveDirection$.onNext(EdgeDirection.Next); },
style: {
height: "100%",
left: "67%",
position: "absolute",
width: "33%",
},
};
@ -105,15 +99,12 @@ export class SequenceDOMRenderer {
onmouseenter: (e: MouseEvent): void => { interaction.mouseEnterDirection$.onNext(EdgeDirection.Prev); },
onmouseleave: (e: MouseEvent): void => { interaction.mouseLeaveDirection$.onNext(EdgeDirection.Prev); },
style: {
height: "100%",
left: "0%",
position: "absolute",
width: "33%",
},
};
let nextClass: string = this._getStepClassName(nextKey, configuration.highlightKey);
let prevClass: string = this._getStepClassName(prevKey, configuration.highlightKey);
let nextClass: string = this._getStepClassName(EdgeDirection.Next, nextKey, configuration.highlightKey);
let prevClass: string = this._getStepClassName(EdgeDirection.Prev, prevKey, configuration.highlightKey);
let nextIcon: vd.VNode = vd.h("span", { textContent: "n" }, []);
let prevIcon: vd.VNode = vd.h("span", { textContent: "p" }, []);
@ -124,12 +115,20 @@ export class SequenceDOMRenderer {
];
}
private _getStepClassName(key: string, highlightKey: string): string {
if (highlightKey != null && highlightKey === key) {
return "SequenceStepHighlight";
private _getStepClassName(direction: EdgeDirection, key: string, highlightKey: string): string {
let className: string = direction === EdgeDirection.Next ?
"SequenceStepNext" :
"SequenceStepPrev";
if (key == null) {
return className + "Disabled";
}
return key != null ? "SequenceStep" : "SequenceStepDisabled";
if (highlightKey != null && highlightKey === key) {
return className + "Highlight";
}
return className;
}
}

38
styles/SequenceComponent.css
View File

@ -3,25 +3,53 @@
left: 50%;
top: 20px;
transform: translate(-50%, 0);
display: flex;
}
.SequenceStep,
.SequencePlay {
.SequenceStepPrev,
.SequenceStepPrevDisabled,
.SequenceStepPrevHighlight,
.SequenceStepNext,
.SequenceStepNextDisabled,
.SequenceStepNextHighlight,
.SequencePlay,
.SequencePlayDisabled {
background: lightgray;
flex: auto;
}
.SequenceStep:hover,
.SequenceStepPrev,
.SequenceStepPrevDisabled,
.SequenceStepPrevHighlight {
order: 0;
}
.SequenceStepNext,
.SequenceStepNextDisabled,
.SequenceStepNextHighlight {
order: 2;
}
.SequencePlay,
.SequencePlayDisabled {
order: 1;
}
.SequenceStepPrev:hover,
.SequenceStepNext:hover,
.SequencePlay:hover {
cursor: pointer;
cursor: hand;
background: darkgray;
}
.SequenceStepDisabled,
.SequenceStepPrevDisabled,
.SequenceStepNextDisabled,
.SequencePlayDisabled {
background: dimgray;
}
.SequenceStepHighlight {
.SequenceStepPrevHighlight,
.SequenceStepNextHighlight {
background: darkgray;
}