mapcomplete/UI/Base/ScrollableFullScreen.ts

38 lines
1.3 KiB
TypeScript
Raw Normal View History

2021-01-08 02:13:44 +01:00
import {UIElement} from "../UIElement";
import Svg from "../../Svg";
import State from "../../State";
import Combine from "./Combine";
2021-01-08 16:49:42 +01:00
import Ornament from "./Ornament";
2021-01-08 02:13:44 +01:00
/**
* Wraps some contents into a panel that scrolls the content _under_ the title
*/
2021-01-09 00:03:21 +01:00
export default class ScrollableFullScreen extends UIElement {
2021-01-08 02:13:44 +01:00
private _component: Combine;
2021-01-09 00:03:21 +01:00
2021-01-08 02:13:44 +01:00
constructor(title: UIElement, content: UIElement) {
super();
const returnToTheMap = Svg.back_svg().onClick(() => {
State.state.fullScreenMessage.setData(undefined);
State.state.selectedElement.setData(undefined);
}).SetClass("only-on-mobile")
.SetClass("featureinfobox-back-to-the-map")
2021-01-08 16:49:42 +01:00
title.SetClass("featureinfobox-title")
2021-01-09 00:03:21 +01:00
const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
2021-01-08 02:13:44 +01:00
this._component = new Combine([
new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"),
2021-01-09 00:03:21 +01:00
new Combine(["<span>",content,"</span>", ornament]).SetClass("featureinfobox-content"),
2021-01-08 16:49:42 +01:00
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
2021-01-08 02:13:44 +01:00
])
this.SetClass("featureinfobox");
2021-01-09 00:03:21 +01:00
2021-01-08 02:13:44 +01:00
}
2021-01-09 00:03:21 +01:00
2021-01-08 02:13:44 +01:00
InnerRender(): string {
return this._component.Render();
}
}