mapcomplete/UI/FullScreenMessageBoxHandler.ts

69 lines
2.3 KiB
TypeScript
Raw Normal View History

import {UIElement} from "./UIElement";
import Translations from "./i18n/Translations";
import State from "../State";
import Combine from "./Base/Combine";
/**
* Handles the full screen popup on mobile
*/
export class FullScreenMessageBox extends UIElement {
2020-09-12 23:15:17 +02:00
private readonly returnToTheMap: UIElement;
2020-11-15 14:56:20 +01:00
private _content: UIElement;
constructor(onClear: (() => void)) {
2020-11-16 01:59:30 +01:00
super(State.state.fullScreenMessage);
this.HideOnEmpty(true);
2020-06-29 03:12:44 +02:00
2020-09-12 23:15:17 +02:00
this.returnToTheMap =
new Combine([Translations.t.general.returnToTheMap.Clone().SetStyle("font-size:xx-large")])
.SetStyle("background:var(--catch-detail-color);" +
"position: fixed;" +
"z-index: 10000;" +
"bottom: 0;" +
"left: 0;" +
2020-11-16 01:59:30 +01:00
`height: var(--return-to-the-map-height);` +
2020-09-12 23:15:17 +02:00
"width: 100vw;" +
"color: var(--catch-detail-color-contrast);" +
2020-09-12 23:15:17 +02:00
"font-weight: bold;" +
"pointer-events: all;" +
"cursor: pointer;" +
"padding-top: 1.2em;" +
"text-align: center;" +
"padding-bottom: 1.2em;" +
"box-sizing:border-box")
2020-07-21 00:07:04 +02:00
.onClick(() => {
State.state.fullScreenMessage.setData(undefined);
2020-07-21 00:07:04 +02:00
onClear();
});
2020-06-29 03:12:44 +02:00
}
2020-06-29 03:12:44 +02:00
InnerRender(): string {
2020-09-12 23:15:17 +02:00
if (State.state.fullScreenMessage.data === undefined) {
return "";
}
2020-11-15 14:56:20 +01:00
this._content = State.state.fullScreenMessage.data;
2020-11-20 10:24:42 +01:00
const innerWrap = new Combine([this._content]).SetStyle(
"display: block;" +
"padding: 1em;" +
2020-11-20 10:24:42 +01:00
"padding-bottom: 6em; "
);
const uielement = new Combine([innerWrap]).SetStyle(
"display:block;" +
2020-11-16 01:59:30 +01:00
`margin-bottom: var(--return-to-the-map-height);` +
"box-sizing:border-box;" +
2020-11-16 01:59:30 +01:00
`height:calc(100vh - var(--return-to-the-map-height));` +
"overflow-y: auto;" +
"max-width:100vw;" +
"overflow-x:hidden;" +
"background:var(--background-color);" +
"color: var(--foreground-color);"
);
return new Combine([uielement, this.returnToTheMap])
2020-09-12 23:15:17 +02:00
.Render();
}
}