mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-02-01 14:33:45 +00:00
feat: navigation component without css transforms
Fixes #177 Render navigation component arrows for sequence as well as spatial. Position arrows according to direction and sequence component. Use base64 encoded svgs rotated with svg transform to avoid more svgs in dist folder.
This commit is contained in:
Oscar Lorentzon
parent
477d33149e
commit
8c13560c49
@ -20,49 +20,81 @@ export class NavigationComponent extends Component<IComponentConfiguration> {
|
||||
|
||||
private _renderSubscription: Subscription;
|
||||
|
||||
private _dirNames: {[dir: number]: string};
|
||||
private _seqNames: { [dir: string]: string };
|
||||
private _spaTopNames: { [dir: string]: string };
|
||||
private _spaMiddleNames: { [dir: string]: string };
|
||||
private _spaBottomNames: { [dir: string]: string };
|
||||
|
||||
constructor(name: string, container: Container, navigator: Navigator) {
|
||||
super(name, container, navigator);
|
||||
|
||||
this._dirNames = {};
|
||||
this._dirNames[EdgeDirection.StepForward] = "Forward";
|
||||
this._dirNames[EdgeDirection.StepBackward] = "Backward";
|
||||
this._dirNames[EdgeDirection.StepLeft] = "Left";
|
||||
this._dirNames[EdgeDirection.StepRight] = "Right";
|
||||
this._dirNames[EdgeDirection.TurnLeft] = "Turnleft";
|
||||
this._dirNames[EdgeDirection.TurnRight] = "Turnright";
|
||||
this._dirNames[EdgeDirection.TurnU] = "Turnaround";
|
||||
this._seqNames = {};
|
||||
this._seqNames[EdgeDirection[EdgeDirection.Prev]] = "Prev";
|
||||
this._seqNames[EdgeDirection[EdgeDirection.Next]] = "Next";
|
||||
|
||||
this._spaTopNames = {};
|
||||
this._spaTopNames[EdgeDirection[EdgeDirection.TurnLeft]] = "Turnleft";
|
||||
this._spaTopNames[EdgeDirection[EdgeDirection.StepForward]] = "Forward";
|
||||
this._spaTopNames[EdgeDirection[EdgeDirection.TurnRight]] = "Turnright";
|
||||
|
||||
this._spaMiddleNames = {};
|
||||
this._spaMiddleNames[EdgeDirection[EdgeDirection.StepLeft]] = "Left";
|
||||
this._spaMiddleNames[EdgeDirection[EdgeDirection.StepRight]] = "Right";
|
||||
|
||||
this._spaBottomNames = {};
|
||||
this._spaBottomNames[EdgeDirection[EdgeDirection.TurnU]] = "Turnaround";
|
||||
this._spaBottomNames[EdgeDirection[EdgeDirection.StepBackward]] = "Backward";
|
||||
}
|
||||
|
||||
protected _activate(): void {
|
||||
this._renderSubscription = this._navigator.stateService.currentNode$
|
||||
.switchMap(
|
||||
(node: Node): Observable<IEdge[]> => {
|
||||
return node.pano ?
|
||||
Observable.of<IEdge[]>([]) :
|
||||
Observable.combineLatest<IEdge[]>(
|
||||
node.sequenceEdges$,
|
||||
node.spatialEdges$,
|
||||
(seq: IEdgeStatus, spa: IEdgeStatus): IEdge[] => {
|
||||
return seq.edges.concat(spa.edges);
|
||||
(node: Node): Observable<EdgeDirection[]> => {
|
||||
const sequenceEdges$: Observable<EdgeDirection[]> = node.sequenceEdges$
|
||||
.map(
|
||||
(status: IEdgeStatus): EdgeDirection[] => {
|
||||
return status.edges
|
||||
.map(
|
||||
(edge: IEdge): EdgeDirection => {
|
||||
return edge.data.direction;
|
||||
});
|
||||
});
|
||||
|
||||
const spatialEdges$: Observable<EdgeDirection[]> = node.pano ?
|
||||
Observable.of<EdgeDirection[]>([]) :
|
||||
node.spatialEdges$
|
||||
.map(
|
||||
(status: IEdgeStatus): EdgeDirection[] => {
|
||||
return status.edges
|
||||
.map(
|
||||
(edge: IEdge): EdgeDirection => {
|
||||
return edge.data.direction;
|
||||
});
|
||||
});
|
||||
|
||||
return Observable
|
||||
.combineLatest(
|
||||
sequenceEdges$,
|
||||
spatialEdges$)
|
||||
.map(
|
||||
([seq, spa]: [EdgeDirection[], EdgeDirection[]]): EdgeDirection[] => {
|
||||
return seq.concat(spa);
|
||||
});
|
||||
})
|
||||
.map(
|
||||
(edges: IEdge[]): IVNodeHash => {
|
||||
let btns: vd.VNode[] = [];
|
||||
(edgeDirections: EdgeDirection[]): IVNodeHash => {
|
||||
const seqs: vd.VNode[] = this._createArrowRow(this._seqNames, edgeDirections);
|
||||
const spaTops: vd.VNode[] = this._createArrowRow(this._spaTopNames, edgeDirections);
|
||||
const spaMiddles: vd.VNode[] = this._createArrowRow(this._spaMiddleNames, edgeDirections);
|
||||
const spaBottoms: vd.VNode[] = this._createArrowRow(this._spaBottomNames, edgeDirections);
|
||||
|
||||
for (let edge of edges) {
|
||||
let direction: EdgeDirection = edge.data.direction;
|
||||
let name: string = this._dirNames[direction];
|
||||
if (name == null) {
|
||||
continue;
|
||||
}
|
||||
const seqContainer: vd.VNode = vd.h(`div.NavigationSequence`, seqs);
|
||||
const spaTopContainer: vd.VNode = vd.h(`div.NavigationSpatialTop`, spaTops);
|
||||
const spaMiddleContainer: vd.VNode = vd.h(`div.NavigationSpatialMiddle`, spaMiddles);
|
||||
const spaBottomContainer: vd.VNode = vd.h(`div.NavigationSpatialBottom`, spaBottoms);
|
||||
const spaContainer: vd.VNode = vd.h(`div.NavigationSpatial`, [spaTopContainer, spaMiddleContainer, spaBottomContainer]);
|
||||
|
||||
btns.push(this._createVNode(direction, name));
|
||||
}
|
||||
|
||||
return {name: this._name, vnode: vd.h(`div.NavigationComponent`, btns)};
|
||||
return { name: this._name, vnode: vd.h(`div.NavigationContainer`, [seqContainer, spaContainer]) };
|
||||
})
|
||||
.subscribe(this._container.domRenderer.render$);
|
||||
}
|
||||
@ -75,7 +107,26 @@ export class NavigationComponent extends Component<IComponentConfiguration> {
|
||||
return {};
|
||||
}
|
||||
|
||||
private _createVNode(direction: EdgeDirection, name: string): vd.VNode {
|
||||
private _createArrowRow(arrowNames: { [dir: string]: string }, edgeDirections: EdgeDirection[]): vd.VNode[] {
|
||||
const arrows: vd.VNode[] = [];
|
||||
|
||||
for (const arrowName in arrowNames) {
|
||||
if (!(arrowNames.hasOwnProperty(arrowName))) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const direction: EdgeDirection = EdgeDirection[<keyof typeof EdgeDirection>arrowName];
|
||||
if (edgeDirections.indexOf(direction) !== -1) {
|
||||
arrows.push(this._createVNode(direction, arrowNames[arrowName], "visible"));
|
||||
} else {
|
||||
arrows.push(this._createVNode(direction, arrowNames[arrowName], "hidden"));
|
||||
}
|
||||
}
|
||||
|
||||
return arrows;
|
||||
}
|
||||
|
||||
private _createVNode(direction: EdgeDirection, name: string, visibility: string): vd.VNode {
|
||||
return vd.h(
|
||||
`span.Direction.Direction${name}`,
|
||||
{
|
||||
@ -85,6 +136,9 @@ export class NavigationComponent extends Component<IComponentConfiguration> {
|
||||
(node: Node): void => { return; },
|
||||
(error: Error): void => { console.error(error); });
|
||||
},
|
||||
style: {
|
||||
visibility: visibility,
|
||||
},
|
||||
},
|
||||
[]);
|
||||
}
|
||||
|
||||
@ -1,67 +1,63 @@
|
||||
.NavigationComponent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.NavigationSequence {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
margin-left: -36px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.NavigationSpatial {
|
||||
position: absolute;
|
||||
bottom: 18px;
|
||||
left: 50%;
|
||||
margin-left: -52px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.Direction {
|
||||
position: absolute;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
background: url(./arrow-up-white.svg);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: auto;
|
||||
margin: 0px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.DirectionForward {
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 1));
|
||||
}
|
||||
|
||||
.DirectionBackward {
|
||||
bottom: 5px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0) rotate(180deg);
|
||||
filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 1));
|
||||
}
|
||||
|
||||
.DirectionLeft {
|
||||
left: 5px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%) rotate(-90deg);
|
||||
filter: drop-shadow(-1px 0 0 rgba(0, 0, 0, 1));
|
||||
display: inline-block;
|
||||
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 1));
|
||||
}
|
||||
|
||||
.DirectionRight {
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%) rotate(90deg);
|
||||
filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 1));
|
||||
margin-left: 38px;
|
||||
}
|
||||
|
||||
.DirectionPrev,
|
||||
.DirectionLeft {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwcHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAxODAgMTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlBhZ2UtMSIgZmlsbD0ibm9uZSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDkwLDkwKSI+PGcgaWQ9ImFycm93LXVwIiBmaWxsPSIjRkZGRkZGIj48cGF0aCBkPSJNODguODg0MzgxNyw0NS43Mzc4ODA2IEM4OC4yOTk4ODUzLDQ1Ljk0OTc5MTYgODcuNzUxNTY5Miw0Ni4yODk5Mjk5IDg3LjI4MzA4NTMsNDYuNzU4NDEzOCBMMzEuMzYzMzk0NywxMDIuNjc4MTA0IEMyOS42NDYwNjE0LDEwNC4zOTU0MzggMjkuNjUxODM2MywxMDcuMTcwNDk4IDMxLjM2NzAwMzEsMTA4Ljg4NTY2NCBMNDAuNjg2NzQ1MywxMTguMjA1NDA3IEM0Mi40MDAzOTY3LDExOS45MTkwNTggNDUuMTgxMTMxMywxMTkuOTIyMTg5IDQ2Ljg5NDMwNTIsMTE4LjIwOTAxNSBMOTAuODAwOTI3Niw3NC4zMDIzOTI2IEwxMzQuNDUwNTUsMTE3Ljk1MjAxNSBDMTM2LjE2Nzg4MywxMTkuNjY5MzQ5IDEzOC45NDI5NDMsMTE5LjY2MzU3NCAxNDAuNjU4MTEsMTE3Ljk0ODQwNyBMMTQ5Ljk3Nzg1MiwxMDguNjI4NjY1IEMxNTEuNjkxNTA0LDEwNi45MTUwMTMgMTUxLjY5NDYzNSwxMDQuMTM0Mjc5IDE0OS45ODE0NjEsMTAyLjQyMTEwNSBMOTQuMDYxNzcwMSw0Ni41MDE0MTQxIEM5Mi42NTczMTA5LDQ1LjA5Njk1NDkgOTAuNTQ1NDIzMSw0NC44NDQ5NDQ1IDg4Ljg4NDM4MTcsNDUuNzM3ODgwNiBMODguODg0MzgxNyw0NS43Mzc4ODA2IFoiIGlkPSJBcnJvdyIgPjwvcGF0aD48cGF0aCBkPSJNOTAsMTcwLjEzODgxMiBDMTM0LjI1OTQ0NCwxNzAuMTM4ODEyIDE3MC4xMzg4MTIsMTM0LjI1OTQ0NCAxNzAuMTM4ODEyLDkwIEMxNzAuMTM4ODEyLDQ1Ljc0MDU1NjIgMTM0LjI1OTQ0NCw5Ljg2MTE4Nzg1IDkwLDkuODYxMTg3ODUgQzQ1Ljc0MDU1NjIsOS44NjExODc4NSA5Ljg2MTE4Nzg1LDQ1Ljc0MDU1NjIgOS44NjExODc4NSw5MCBDOS44NjExODc4NSwxMzQuMjU5NDQ0IDQ1Ljc0MDU1NjIsMTcwLjEzODgxMiA5MCwxNzAuMTM4ODEyIEw5MCwxNzAuMTM4ODEyIEw5MCwxNzAuMTM4ODEyIFogTTAsOTAgQzAsNDAuMjk0MzcyNSA0MC4yOTQzNzI1LDAgOTAsMCBDMTM5LjcwNTYyNywwIDE4MCw0MC4yOTQzNzI1IDE4MCw5MCBDMTgwLDEzOS43MDU2MjcgMTM5LjcwNTYyNywxODAgOTAsMTgwIEM0MC4yOTQzNzI1LDE4MCAwLDEzOS43MDU2MjcgMCw5MCBaIiBpZD0iQ2lyY2xlIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=");
|
||||
}
|
||||
|
||||
.DirectionNext,
|
||||
.DirectionRight {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwcHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAxODAgMTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlBhZ2UtMSIgZmlsbD0ibm9uZSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgOTAsOTApIj48ZyBpZD0iYXJyb3ctdXAiIGZpbGw9IiNGRkZGRkYiPjxwYXRoIGQ9Ik04OC44ODQzODE3LDQ1LjczNzg4MDYgQzg4LjI5OTg4NTMsNDUuOTQ5NzkxNiA4Ny43NTE1NjkyLDQ2LjI4OTkyOTkgODcuMjgzMDg1Myw0Ni43NTg0MTM4IEwzMS4zNjMzOTQ3LDEwMi42NzgxMDQgQzI5LjY0NjA2MTQsMTA0LjM5NTQzOCAyOS42NTE4MzYzLDEwNy4xNzA0OTggMzEuMzY3MDAzMSwxMDguODg1NjY0IEw0MC42ODY3NDUzLDExOC4yMDU0MDcgQzQyLjQwMDM5NjcsMTE5LjkxOTA1OCA0NS4xODExMzEzLDExOS45MjIxODkgNDYuODk0MzA1MiwxMTguMjA5MDE1IEw5MC44MDA5Mjc2LDc0LjMwMjM5MjYgTDEzNC40NTA1NSwxMTcuOTUyMDE1IEMxMzYuMTY3ODgzLDExOS42NjkzNDkgMTM4Ljk0Mjk0MywxMTkuNjYzNTc0IDE0MC42NTgxMSwxMTcuOTQ4NDA3IEwxNDkuOTc3ODUyLDEwOC42Mjg2NjUgQzE1MS42OTE1MDQsMTA2LjkxNTAxMyAxNTEuNjk0NjM1LDEwNC4xMzQyNzkgMTQ5Ljk4MTQ2MSwxMDIuNDIxMTA1IEw5NC4wNjE3NzAxLDQ2LjUwMTQxNDEgQzkyLjY1NzMxMDksNDUuMDk2OTU0OSA5MC41NDU0MjMxLDQ0Ljg0NDk0NDUgODguODg0MzgxNyw0NS43Mzc4ODA2IEw4OC44ODQzODE3LDQ1LjczNzg4MDYgWiIgaWQ9IkFycm93IiA+PC9wYXRoPjxwYXRoIGQ9Ik05MCwxNzAuMTM4ODEyIEMxMzQuMjU5NDQ0LDE3MC4xMzg4MTIgMTcwLjEzODgxMiwxMzQuMjU5NDQ0IDE3MC4xMzg4MTIsOTAgQzE3MC4xMzg4MTIsNDUuNzQwNTU2MiAxMzQuMjU5NDQ0LDkuODYxMTg3ODUgOTAsOS44NjExODc4NSBDNDUuNzQwNTU2Miw5Ljg2MTE4Nzg1IDkuODYxMTg3ODUsNDUuNzQwNTU2MiA5Ljg2MTE4Nzg1LDkwIEM5Ljg2MTE4Nzg1LDEzNC4yNTk0NDQgNDUuNzQwNTU2MiwxNzAuMTM4ODEyIDkwLDE3MC4xMzg4MTIgTDkwLDE3MC4xMzg4MTIgTDkwLDE3MC4xMzg4MTIgWiBNMCw5MCBDMCw0MC4yOTQzNzI1IDQwLjI5NDM3MjUsMCA5MCwwIEMxMzkuNzA1NjI3LDAgMTgwLDQwLjI5NDM3MjUgMTgwLDkwIEMxODAsMTM5LjcwNTYyNyAxMzkuNzA1NjI3LDE4MCA5MCwxODAgQzQwLjI5NDM3MjUsMTgwIDAsMTM5LjcwNTYyNyAwLDkwIFoiIGlkPSJDaXJjbGUiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==");
|
||||
}
|
||||
|
||||
.DirectionForward {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwcHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAxODAgMTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlBhZ2UtMSIgZmlsbD0ibm9uZSIgdHJhbnNmb3JtPSJyb3RhdGUoMCA5MCw5MCkiPjxnIGlkPSJhcnJvdy11cCIgZmlsbD0iI0ZGRkZGRiI+PHBhdGggZD0iTTg4Ljg4NDM4MTcsNDUuNzM3ODgwNiBDODguMjk5ODg1Myw0NS45NDk3OTE2IDg3Ljc1MTU2OTIsNDYuMjg5OTI5OSA4Ny4yODMwODUzLDQ2Ljc1ODQxMzggTDMxLjM2MzM5NDcsMTAyLjY3ODEwNCBDMjkuNjQ2MDYxNCwxMDQuMzk1NDM4IDI5LjY1MTgzNjMsMTA3LjE3MDQ5OCAzMS4zNjcwMDMxLDEwOC44ODU2NjQgTDQwLjY4Njc0NTMsMTE4LjIwNTQwNyBDNDIuNDAwMzk2NywxMTkuOTE5MDU4IDQ1LjE4MTEzMTMsMTE5LjkyMjE4OSA0Ni44OTQzMDUyLDExOC4yMDkwMTUgTDkwLjgwMDkyNzYsNzQuMzAyMzkyNiBMMTM0LjQ1MDU1LDExNy45NTIwMTUgQzEzNi4xNjc4ODMsMTE5LjY2OTM0OSAxMzguOTQyOTQzLDExOS42NjM1NzQgMTQwLjY1ODExLDExNy45NDg0MDcgTDE0OS45Nzc4NTIsMTA4LjYyODY2NSBDMTUxLjY5MTUwNCwxMDYuOTE1MDEzIDE1MS42OTQ2MzUsMTA0LjEzNDI3OSAxNDkuOTgxNDYxLDEwMi40MjExMDUgTDk0LjA2MTc3MDEsNDYuNTAxNDE0MSBDOTIuNjU3MzEwOSw0NS4wOTY5NTQ5IDkwLjU0NTQyMzEsNDQuODQ0OTQ0NSA4OC44ODQzODE3LDQ1LjczNzg4MDYgTDg4Ljg4NDM4MTcsNDUuNzM3ODgwNiBaIiBpZD0iQXJyb3ciID48L3BhdGg+PHBhdGggZD0iTTkwLDE3MC4xMzg4MTIgQzEzNC4yNTk0NDQsMTcwLjEzODgxMiAxNzAuMTM4ODEyLDEzNC4yNTk0NDQgMTcwLjEzODgxMiw5MCBDMTcwLjEzODgxMiw0NS43NDA1NTYyIDEzNC4yNTk0NDQsOS44NjExODc4NSA5MCw5Ljg2MTE4Nzg1IEM0NS43NDA1NTYyLDkuODYxMTg3ODUgOS44NjExODc4NSw0NS43NDA1NTYyIDkuODYxMTg3ODUsOTAgQzkuODYxMTg3ODUsMTM0LjI1OTQ0NCA0NS43NDA1NTYyLDE3MC4xMzg4MTIgOTAsMTcwLjEzODgxMiBMOTAsMTcwLjEzODgxMiBMOTAsMTcwLjEzODgxMiBaIE0wLDkwIEMwLDQwLjI5NDM3MjUgNDAuMjk0MzcyNSwwIDkwLDAgQzEzOS43MDU2MjcsMCAxODAsNDAuMjk0MzcyNSAxODAsOTAgQzE4MCwxMzkuNzA1NjI3IDEzOS43MDU2MjcsMTgwIDkwLDE4MCBDNDAuMjk0MzcyNSwxODAgMCwxMzkuNzA1NjI3IDAsOTAgWiIgaWQ9IkNpcmNsZSI+PC9wYXRoPjwvZz48L2c+PC9zdmc+");
|
||||
}
|
||||
|
||||
.DirectionBackward {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwcHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAxODAgMTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlBhZ2UtMSIgZmlsbD0ibm9uZSIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDkwLDkwKSI+PGcgaWQ9ImFycm93LXVwIiBmaWxsPSIjRkZGRkZGIj48cGF0aCBkPSJNODguODg0MzgxNyw0NS43Mzc4ODA2IEM4OC4yOTk4ODUzLDQ1Ljk0OTc5MTYgODcuNzUxNTY5Miw0Ni4yODk5Mjk5IDg3LjI4MzA4NTMsNDYuNzU4NDEzOCBMMzEuMzYzMzk0NywxMDIuNjc4MTA0IEMyOS42NDYwNjE0LDEwNC4zOTU0MzggMjkuNjUxODM2MywxMDcuMTcwNDk4IDMxLjM2NzAwMzEsMTA4Ljg4NTY2NCBMNDAuNjg2NzQ1MywxMTguMjA1NDA3IEM0Mi40MDAzOTY3LDExOS45MTkwNTggNDUuMTgxMTMxMywxMTkuOTIyMTg5IDQ2Ljg5NDMwNTIsMTE4LjIwOTAxNSBMOTAuODAwOTI3Niw3NC4zMDIzOTI2IEwxMzQuNDUwNTUsMTE3Ljk1MjAxNSBDMTM2LjE2Nzg4MywxMTkuNjY5MzQ5IDEzOC45NDI5NDMsMTE5LjY2MzU3NCAxNDAuNjU4MTEsMTE3Ljk0ODQwNyBMMTQ5Ljk3Nzg1MiwxMDguNjI4NjY1IEMxNTEuNjkxNTA0LDEwNi45MTUwMTMgMTUxLjY5NDYzNSwxMDQuMTM0Mjc5IDE0OS45ODE0NjEsMTAyLjQyMTEwNSBMOTQuMDYxNzcwMSw0Ni41MDE0MTQxIEM5Mi42NTczMTA5LDQ1LjA5Njk1NDkgOTAuNTQ1NDIzMSw0NC44NDQ5NDQ1IDg4Ljg4NDM4MTcsNDUuNzM3ODgwNiBMODguODg0MzgxNyw0NS43Mzc4ODA2IFoiIGlkPSJBcnJvdyIgPjwvcGF0aD48cGF0aCBkPSJNOTAsMTcwLjEzODgxMiBDMTM0LjI1OTQ0NCwxNzAuMTM4ODEyIDE3MC4xMzg4MTIsMTM0LjI1OTQ0NCAxNzAuMTM4ODEyLDkwIEMxNzAuMTM4ODEyLDQ1Ljc0MDU1NjIgMTM0LjI1OTQ0NCw5Ljg2MTE4Nzg1IDkwLDkuODYxMTg3ODUgQzQ1Ljc0MDU1NjIsOS44NjExODc4NSA5Ljg2MTE4Nzg1LDQ1Ljc0MDU1NjIgOS44NjExODc4NSw5MCBDOS44NjExODc4NSwxMzQuMjU5NDQ0IDQ1Ljc0MDU1NjIsMTcwLjEzODgxMiA5MCwxNzAuMTM4ODEyIEw5MCwxNzAuMTM4ODEyIEw5MCwxNzAuMTM4ODEyIFogTTAsOTAgQzAsNDAuMjk0MzcyNSA0MC4yOTQzNzI1LDAgOTAsMCBDMTM5LjcwNTYyNywwIDE4MCw0MC4yOTQzNzI1IDE4MCw5MCBDMTgwLDEzOS43MDU2MjcgMTM5LjcwNTYyNywxODAgOTAsMTgwIEM0MC4yOTQzNzI1LDE4MCAwLDEzOS43MDU2MjcgMCw5MCBaIiBpZD0iQ2lyY2xlIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=");
|
||||
}
|
||||
|
||||
.DirectionTurnleft {
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
transform: rotate(-45deg);
|
||||
filter: drop-shadow(-1px 1px 0 rgba(0, 0, 0, 1));
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwcHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAxODAgMTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlBhZ2UtMSIgZmlsbD0ibm9uZSIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDkwLDkwKSI+PGcgaWQ9ImFycm93LXVwIiBmaWxsPSIjRkZGRkZGIj48cGF0aCBkPSJNODguODg0MzgxNyw0NS43Mzc4ODA2IEM4OC4yOTk4ODUzLDQ1Ljk0OTc5MTYgODcuNzUxNTY5Miw0Ni4yODk5Mjk5IDg3LjI4MzA4NTMsNDYuNzU4NDEzOCBMMzEuMzYzMzk0NywxMDIuNjc4MTA0IEMyOS42NDYwNjE0LDEwNC4zOTU0MzggMjkuNjUxODM2MywxMDcuMTcwNDk4IDMxLjM2NzAwMzEsMTA4Ljg4NTY2NCBMNDAuNjg2NzQ1MywxMTguMjA1NDA3IEM0Mi40MDAzOTY3LDExOS45MTkwNTggNDUuMTgxMTMxMywxMTkuOTIyMTg5IDQ2Ljg5NDMwNTIsMTE4LjIwOTAxNSBMOTAuODAwOTI3Niw3NC4zMDIzOTI2IEwxMzQuNDUwNTUsMTE3Ljk1MjAxNSBDMTM2LjE2Nzg4MywxMTkuNjY5MzQ5IDEzOC45NDI5NDMsMTE5LjY2MzU3NCAxNDAuNjU4MTEsMTE3Ljk0ODQwNyBMMTQ5Ljk3Nzg1MiwxMDguNjI4NjY1IEMxNTEuNjkxNTA0LDEwNi45MTUwMTMgMTUxLjY5NDYzNSwxMDQuMTM0Mjc5IDE0OS45ODE0NjEsMTAyLjQyMTEwNSBMOTQuMDYxNzcwMSw0Ni41MDE0MTQxIEM5Mi42NTczMTA5LDQ1LjA5Njk1NDkgOTAuNTQ1NDIzMSw0NC44NDQ5NDQ1IDg4Ljg4NDM4MTcsNDUuNzM3ODgwNiBMODguODg0MzgxNyw0NS43Mzc4ODA2IFoiIGlkPSJBcnJvdyIgPjwvcGF0aD48cGF0aCBkPSJNOTAsMTcwLjEzODgxMiBDMTM0LjI1OTQ0NCwxNzAuMTM4ODEyIDE3MC4xMzg4MTIsMTM0LjI1OTQ0NCAxNzAuMTM4ODEyLDkwIEMxNzAuMTM4ODEyLDQ1Ljc0MDU1NjIgMTM0LjI1OTQ0NCw5Ljg2MTE4Nzg1IDkwLDkuODYxMTg3ODUgQzQ1Ljc0MDU1NjIsOS44NjExODc4NSA5Ljg2MTE4Nzg1LDQ1Ljc0MDU1NjIgOS44NjExODc4NSw5MCBDOS44NjExODc4NSwxMzQuMjU5NDQ0IDQ1Ljc0MDU1NjIsMTcwLjEzODgxMiA5MCwxNzAuMTM4ODEyIEw5MCwxNzAuMTM4ODEyIEw5MCwxNzAuMTM4ODEyIFogTTAsOTAgQzAsNDAuMjk0MzcyNSA0MC4yOTQzNzI1LDAgOTAsMCBDMTM5LjcwNTYyNywwIDE4MCw0MC4yOTQzNzI1IDE4MCw5MCBDMTgwLDEzOS43MDU2MjcgMTM5LjcwNTYyNywxODAgOTAsMTgwIEM0MC4yOTQzNzI1LDE4MCAwLDEzOS43MDU2MjcgMCw5MCBaIiBpZD0iQ2lyY2xlIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=");
|
||||
}
|
||||
|
||||
.DirectionTurnright {
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
transform: rotate(45deg);
|
||||
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 1));
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwcHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAxODAgMTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlBhZ2UtMSIgZmlsbD0ibm9uZSIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgOTAsOTApIj48ZyBpZD0iYXJyb3ctdXAiIGZpbGw9IiNGRkZGRkYiPjxwYXRoIGQ9Ik04OC44ODQzODE3LDQ1LjczNzg4MDYgQzg4LjI5OTg4NTMsNDUuOTQ5NzkxNiA4Ny43NTE1NjkyLDQ2LjI4OTkyOTkgODcuMjgzMDg1Myw0Ni43NTg0MTM4IEwzMS4zNjMzOTQ3LDEwMi42NzgxMDQgQzI5LjY0NjA2MTQsMTA0LjM5NTQzOCAyOS42NTE4MzYzLDEwNy4xNzA0OTggMzEuMzY3MDAzMSwxMDguODg1NjY0IEw0MC42ODY3NDUzLDExOC4yMDU0MDcgQzQyLjQwMDM5NjcsMTE5LjkxOTA1OCA0NS4xODExMzEzLDExOS45MjIxODkgNDYuODk0MzA1MiwxMTguMjA5MDE1IEw5MC44MDA5Mjc2LDc0LjMwMjM5MjYgTDEzNC40NTA1NSwxMTcuOTUyMDE1IEMxMzYuMTY3ODgzLDExOS42NjkzNDkgMTM4Ljk0Mjk0MywxMTkuNjYzNTc0IDE0MC42NTgxMSwxMTcuOTQ4NDA3IEwxNDkuOTc3ODUyLDEwOC42Mjg2NjUgQzE1MS42OTE1MDQsMTA2LjkxNTAxMyAxNTEuNjk0NjM1LDEwNC4xMzQyNzkgMTQ5Ljk4MTQ2MSwxMDIuNDIxMTA1IEw5NC4wNjE3NzAxLDQ2LjUwMTQxNDEgQzkyLjY1NzMxMDksNDUuMDk2OTU0OSA5MC41NDU0MjMxLDQ0Ljg0NDk0NDUgODguODg0MzgxNyw0NS43Mzc4ODA2IEw4OC44ODQzODE3LDQ1LjczNzg4MDYgWiIgaWQ9IkFycm93IiA+PC9wYXRoPjxwYXRoIGQ9Ik05MCwxNzAuMTM4ODEyIEMxMzQuMjU5NDQ0LDE3MC4xMzg4MTIgMTcwLjEzODgxMiwxMzQuMjU5NDQ0IDE3MC4xMzg4MTIsOTAgQzE3MC4xMzg4MTIsNDUuNzQwNTU2MiAxMzQuMjU5NDQ0LDkuODYxMTg3ODUgOTAsOS44NjExODc4NSBDNDUuNzQwNTU2Miw5Ljg2MTE4Nzg1IDkuODYxMTg3ODUsNDUuNzQwNTU2MiA5Ljg2MTE4Nzg1LDkwIEM5Ljg2MTE4Nzg1LDEzNC4yNTk0NDQgNDUuNzQwNTU2MiwxNzAuMTM4ODEyIDkwLDE3MC4xMzg4MTIgTDkwLDE3MC4xMzg4MTIgTDkwLDE3MC4xMzg4MTIgWiBNMCw5MCBDMCw0MC4yOTQzNzI1IDQwLjI5NDM3MjUsMCA5MCwwIEMxMzkuNzA1NjI3LDAgMTgwLDQwLjI5NDM3MjUgMTgwLDkwIEMxODAsMTM5LjcwNTYyNyAxMzkuNzA1NjI3LDE4MCA5MCwxODAgQzQwLjI5NDM3MjUsMTgwIDAsMTM5LjcwNTYyNyAwLDkwIFoiIGlkPSJDaXJjbGUiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==");
|
||||
}
|
||||
|
||||
.DirectionTurnaround {
|
||||
left: 5px;
|
||||
bottom: 5px;
|
||||
transform: rotate(-135deg);
|
||||
filter: drop-shadow(-1px -1px 0 rgba(0, 0, 0, 1));
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwcHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAxODAgMTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlBhZ2UtMSIgZmlsbD0ibm9uZSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEzNSA5MCw5MCkiPjxnIGlkPSJhcnJvdy11cCIgZmlsbD0iI0ZGRkZGRiI+PHBhdGggZD0iTTg4Ljg4NDM4MTcsNDUuNzM3ODgwNiBDODguMjk5ODg1Myw0NS45NDk3OTE2IDg3Ljc1MTU2OTIsNDYuMjg5OTI5OSA4Ny4yODMwODUzLDQ2Ljc1ODQxMzggTDMxLjM2MzM5NDcsMTAyLjY3ODEwNCBDMjkuNjQ2MDYxNCwxMDQuMzk1NDM4IDI5LjY1MTgzNjMsMTA3LjE3MDQ5OCAzMS4zNjcwMDMxLDEwOC44ODU2NjQgTDQwLjY4Njc0NTMsMTE4LjIwNTQwNyBDNDIuNDAwMzk2NywxMTkuOTE5MDU4IDQ1LjE4MTEzMTMsMTE5LjkyMjE4OSA0Ni44OTQzMDUyLDExOC4yMDkwMTUgTDkwLjgwMDkyNzYsNzQuMzAyMzkyNiBMMTM0LjQ1MDU1LDExNy45NTIwMTUgQzEzNi4xNjc4ODMsMTE5LjY2OTM0OSAxMzguOTQyOTQzLDExOS42NjM1NzQgMTQwLjY1ODExLDExNy45NDg0MDcgTDE0OS45Nzc4NTIsMTA4LjYyODY2NSBDMTUxLjY5MTUwNCwxMDYuOTE1MDEzIDE1MS42OTQ2MzUsMTA0LjEzNDI3OSAxNDkuOTgxNDYxLDEwMi40MjExMDUgTDk0LjA2MTc3MDEsNDYuNTAxNDE0MSBDOTIuNjU3MzEwOSw0NS4wOTY5NTQ5IDkwLjU0NTQyMzEsNDQuODQ0OTQ0NSA4OC44ODQzODE3LDQ1LjczNzg4MDYgTDg4Ljg4NDM4MTcsNDUuNzM3ODgwNiBaIiBpZD0iQXJyb3ciID48L3BhdGg+PHBhdGggZD0iTTkwLDE3MC4xMzg4MTIgQzEzNC4yNTk0NDQsMTcwLjEzODgxMiAxNzAuMTM4ODEyLDEzNC4yNTk0NDQgMTcwLjEzODgxMiw5MCBDMTcwLjEzODgxMiw0NS43NDA1NTYyIDEzNC4yNTk0NDQsOS44NjExODc4NSA5MCw5Ljg2MTE4Nzg1IEM0NS43NDA1NTYyLDkuODYxMTg3ODUgOS44NjExODc4NSw0NS43NDA1NTYyIDkuODYxMTg3ODUsOTAgQzkuODYxMTg3ODUsMTM0LjI1OTQ0NCA0NS43NDA1NTYyLDE3MC4xMzg4MTIgOTAsMTcwLjEzODgxMiBMOTAsMTcwLjEzODgxMiBMOTAsMTcwLjEzODgxMiBaIE0wLDkwIEMwLDQwLjI5NDM3MjUgNDAuMjk0MzcyNSwwIDkwLDAgQzEzOS43MDU2MjcsMCAxODAsNDAuMjk0MzcyNSAxODAsOTAgQzE4MCwxMzkuNzA1NjI3IDEzOS43MDU2MjcsMTgwIDkwLDE4MCBDNDAuMjk0MzcyNSwxODAgMCwxMzkuNzA1NjI3IDAsOTAgWiIgaWQ9IkNpcmNsZSI+PC9wYXRoPjwvZz48L2c+PC9zdmc+");
|
||||
}
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="180px" height="180px" viewBox="0 0 180 180" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" >
|
||||
<g id="arrow-up" fill="#FFFFFF">
|
||||
<g >
|
||||
<path d="M88.8843817,45.7378806 C88.2998853,45.9497916 87.7515692,46.2899299 87.2830853,46.7584138 L31.3633947,102.678104 C29.6460614,104.395438 29.6518363,107.170498 31.3670031,108.885664 L40.6867453,118.205407 C42.4003967,119.919058 45.1811313,119.922189 46.8943052,118.209015 L90.8009276,74.3023926 L134.45055,117.952015 C136.167883,119.669349 138.942943,119.663574 140.65811,117.948407 L149.977852,108.628665 C151.691504,106.915013 151.694635,104.134279 149.981461,102.421105 L94.0617701,46.5014141 C92.6573109,45.0969549 90.5454231,44.8449445 88.8843817,45.7378806 L88.8843817,45.7378806 Z" id="Arrow" ></path>
|
||||
<path d="M90,170.138812 C134.259444,170.138812 170.138812,134.259444 170.138812,90 C170.138812,45.7405562 134.259444,9.86118785 90,9.86118785 C45.7405562,9.86118785 9.86118785,45.7405562 9.86118785,90 C9.86118785,134.259444 45.7405562,170.138812 90,170.138812 L90,170.138812 L90,170.138812 Z M0,90 C0,40.2943725 40.2943725,0 90,0 C139.705627,0 180,40.2943725 180,90 C180,139.705627 139.705627,180 90,180 C40.2943725,180 0,139.705627 0,90 Z" id="Circle"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
Loading…
x
Reference in New Issue
Block a user