midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add ornament

Browse source
This commit is contained in:
pietervdvn 2021-01-09 00:03:21 +01:00
parent bd6f325fc1
commit 641b59bca5
3 changed files with 27 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
UI/Base/Ornament.ts
View file

@ -1,18 +1,25 @@
import {UIElement} from "../UIElement"; import {UIElement} from "../UIElement";
import {UIEventSource} from "../../Logic/UIEventSource"; import {UIEventSource} from "../../Logic/UIEventSource";
import Svg from "../../Svg"; import Svg from "../../Svg";
import State from "../../State";
export default class Ornament extends UIElement { export default class Ornament extends UIElement {
private static readonly ornamentsCount = Ornament.countOrnaments(); 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)) { constructor(index = undefined) {
super(index); super();
index = index ?? State.state.osmConnection.GetPreference("ornament");
this.ListenTo(index);
this._index = index; this._index = index;
this.SetClass("ornament") this.SetClass("ornament")
const self = this; const self = this;
this.onClick(() => { 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 { InnerRender(): string {
if(this._index.data == 0){ if(this._index.data == "0"){
return "<svg></svg>" 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`]
} }
} }

5
UI/Base/ScrollableFullScreen.ts
View file

@ -19,10 +19,11 @@ export default class ScrollableFullScreen extends UIElement{
}).SetClass("only-on-mobile") }).SetClass("only-on-mobile")
.SetClass("featureinfobox-back-to-the-map") .SetClass("featureinfobox-back-to-the-map")
title.SetClass("featureinfobox-title") title.SetClass("featureinfobox-title")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
this._component = new Combine([ this._component = new Combine([
new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"), new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"),
new Combine([content]).SetClass("featureinfobox-content"), new Combine(["<span>",content,"</span>", ornament]).SetClass("featureinfobox-content"),
new Combine([ new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
]) ])
this.SetClass("featureinfobox"); this.SetClass("featureinfobox");

7
css/fullscreenmessagebox.css
View file

@ -15,12 +15,15 @@
.fullscreenmessage-content .featureinfobox-content { .fullscreenmessage-content .featureinfobox-content {
padding: 1em; padding: 1em;
top: var(--variable-title-height); top: var(--variable-title-height);
/* 2em extra: padding from the title */
max-height: calc(100vh - var(--variable-title-height)) !important; max-height: calc(100vh - var(--variable-title-height)) !important;
display: block; min-height: calc(100vh - var(--variable-title-height)) !important;
position: absolute; position: absolute;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between
} }
.fullscreenmessage-content .featureinfobox-titlebar { .fullscreenmessage-content .featureinfobox-titlebar {