Add ornament
This commit is contained in:
parent
bd6f325fc1
commit
641b59bca5
3 changed files with 27 additions and 15 deletions
|
@ -1,18 +1,25 @@
|
|||
import {UIElement} from "../UIElement";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import Svg from "../../Svg";
|
||||
import State from "../../State";
|
||||
|
||||
export default class Ornament extends UIElement {
|
||||
private static readonly ornamentsCount = Ornament.countOrnaments();
|
||||
private readonly _index = new UIEventSource<number>(0)
|
||||
private readonly _index = new UIEventSource<string>("0")
|
||||
|
||||
constructor(index = new UIEventSource<number>(0)) {
|
||||
super(index);
|
||||
constructor(index = undefined) {
|
||||
super();
|
||||
index = index ?? State.state.osmConnection.GetPreference("ornament");
|
||||
this.ListenTo(index);
|
||||
this._index = index;
|
||||
this.SetClass("ornament")
|
||||
const self = this;
|
||||
this.onClick(() => {
|
||||
self._index.setData((self._index.data + 1) % (Ornament.ornamentsCount + 1));
|
||||
let c = Number(index.data);
|
||||
if(isNaN(c)){
|
||||
c = 0;
|
||||
}
|
||||
self._index.setData(""+ ((c + 1) % (Ornament.ornamentsCount + 1)));
|
||||
|
||||
})
|
||||
}
|
||||
|
@ -28,10 +35,11 @@ export default class Ornament extends UIElement {
|
|||
}
|
||||
|
||||
InnerRender(): string {
|
||||
if(this._index.data == 0){
|
||||
if(this._index.data == "0"){
|
||||
return "<svg></svg>"
|
||||
}
|
||||
return Svg.All[`Ornament-Horiz-${this._index.data - 1}.svg`]
|
||||
console.log(this._index.data)
|
||||
return Svg.All[`Ornament-Horiz-${Number(this._index.data) - 1}.svg`]
|
||||
}
|
||||
|
||||
}
|
|
@ -19,10 +19,11 @@ export default class ScrollableFullScreen extends UIElement{
|
|||
}).SetClass("only-on-mobile")
|
||||
.SetClass("featureinfobox-back-to-the-map")
|
||||
title.SetClass("featureinfobox-title")
|
||||
const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
|
||||
|
||||
this._component = new Combine([
|
||||
new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"),
|
||||
new Combine([content]).SetClass("featureinfobox-content"),
|
||||
new Combine([ new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
|
||||
new Combine(["<span>",content,"</span>", ornament]).SetClass("featureinfobox-content"),
|
||||
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
|
||||
])
|
||||
this.SetClass("featureinfobox");
|
||||
|
|
|
@ -15,12 +15,15 @@
|
|||
.fullscreenmessage-content .featureinfobox-content {
|
||||
padding: 1em;
|
||||
top: var(--variable-title-height);
|
||||
/* 2em extra: padding from the title */
|
||||
max-height: calc(100vh - var(--variable-title-height)) !important;
|
||||
display: block;
|
||||
min-height: calc(100vh - var(--variable-title-height)) !important;
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.fullscreenmessage-content .featureinfobox-titlebar {
|
||||
|
|
Loading…
Reference in a new issue