Fixes to popup handling and to broken styles

This commit is contained in:
Pieter Vander Vennet 2021-02-25 02:23:26 +01:00
parent 29a0a3ee81
commit a0b909e8a6
16 changed files with 188 additions and 247 deletions

View file

@ -23,13 +23,22 @@ export default class FullWelcomePaneWithTabs extends UIElement {
private readonly _component: UIElement;
constructor(onClose: () => void) {
constructor(isShown: UIEventSource<boolean>) {
super(State.state.layoutToUse);
this._layoutToUse = State.state.layoutToUse;
this._userDetails = State.state.osmConnection.userDetails;
const layoutToUse = this._layoutToUse.data;
this._component = new ScrollableFullScreen(
() => layoutToUse.title.Clone(),
() => FullWelcomePaneWithTabs.GenerateContents(layoutToUse, State.state.osmConnection.userDetails),
isShown
)
}
private static GenerateContents(layoutToUse: LayoutConfig, userDetails: UIEventSource<UserDetails>) {
let welcome: UIElement = new ThemeIntroductionPanel();
if (layoutToUse.id === personal.id) {
welcome = new PersonalLayersPanel();
@ -58,7 +67,7 @@ export default class FullWelcomePaneWithTabs extends UIElement {
tabs.push({
header: Svg.help,
content: new VariableUiElement(this._userDetails.map(userdetails => {
content: new VariableUiElement(userDetails.map(userdetails => {
if (userdetails.csCount < Constants.userJourney.mapCompleteHelpUnlock) {
return ""
}
@ -67,15 +76,8 @@ export default class FullWelcomePaneWithTabs extends UIElement {
}
);
const tabbedPart = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab)
.ListenTo(this._userDetails);
this._component = new ScrollableFullScreen(
layoutToUse.title,
tabbedPart,
onClose
)
return new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab)
.ListenTo(userDetails);
}
InnerRender(): string {

View file

@ -6,13 +6,20 @@ import Combine from "../Base/Combine";
import {FixedUiElement} from "../Base/FixedUiElement";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
import Translations from "../i18n/Translations";
import {UIEventSource} from "../../Logic/UIEventSource";
export default class LayerControlPanel extends UIElement {
private readonly _panel: UIElement;
export default class LayerControlPanel extends ScrollableFullScreen {
constructor(isShown: UIEventSource<boolean>) {
super(LayerControlPanel.GenTitle, LayerControlPanel.GeneratePanel, isShown);
}
constructor(onClose: () => void) {
super();
private static GenTitle(): UIElement {
const title = Translations.t.general.layerSelection.title.SetClass("text-2xl break-words font-bold p-2")
return title.Clone();
}
private static GeneratePanel() {
let layerControlPanel: UIElement = new FixedUiElement("");
if (State.state.layoutToUse.data.enableBackgroundLayerSelection) {
layerControlPanel = new BackgroundSelector();
@ -28,14 +35,7 @@ export default class LayerControlPanel extends UIElement {
layerControlPanel = new Combine([layerSelection, "<br/>", layerControlPanel]);
}
const title = Translations.t.general.layerSelection.title.SetClass("text-2xl break-words font-bold p-2")
this._panel = new ScrollableFullScreen(title, layerControlPanel, onClose);
}
InnerRender(): string {
return this._panel.Render();
return layerControlPanel;
}
}