midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Css tweaks

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-07 04:50:12 +01:00
parent 489c6fc3c0
commit 701ce3e89a
23 changed files with 1220 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

18
UI/BigComponents/FullWelcomePaneWithTabs.ts
View file

@ -1,6 +1,6 @@
import {UIElement} from "../UIElement";
import State from "../../State";
import WelcomeMessage from "./WelcomeMessage";
import ThemeIntroductionPanel from "./ThemeIntroductionPanel";
import * as personal from "../../assets/themes/personalLayout/personalLayout.json";
import PersonalLayersPanel from "./PersonalLayersPanel";
import Svg from "../../Svg";
@ -15,6 +15,8 @@ import {TabbedComponent} from "../Base/TabbedComponent";
import {UIEventSource} from "../../Logic/UIEventSource";
import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
import UserDetails from "../../Logic/Osm/OsmConnection";
import {FixedUiElement} from "../Base/FixedUiElement";
import CombinedInputElement from "../Input/CombinedInputElement";
export default class FullWelcomePaneWithTabs extends UIElement {
private readonly _layoutToUse: UIEventSource<LayoutConfig>;
@ -27,9 +29,9 @@ export default class FullWelcomePaneWithTabs extends UIElement {
this._layoutToUse = State.state.layoutToUse;
this._userDetails = State.state.osmConnection.userDetails;
const layoutToUse = this._layoutToUse.data;
let welcome: UIElement = new WelcomeMessage();
let welcome: UIElement = new ThemeIntroductionPanel();
if (layoutToUse.id === personal.id) {
welcome = new PersonalLayersPanel();
}
@ -66,10 +68,18 @@ export default class FullWelcomePaneWithTabs extends UIElement {
}
);
this._component = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab)
const tabbedPart = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab)
.ListenTo(this._userDetails);
const backButton = new Combine([
new Combine([Translations.t.general.returnToTheMap.Clone().SetClass("to-the-map")])
.SetClass("to-the-map-inner")
]).SetClass("only-on-mobile")
.onClick(() => State.state.fullScreenMessage.setData(undefined));
tabbedPart.SetStyle("overflow-y: auto; max-height: calc( 100vh - 4em);display:block;")
this._component = new Combine([tabbedPart, backButton]).SetStyle("width:100%;");
}
InnerRender(): string {

25
UI/BigComponents/WelcomeMessage.ts → UI/BigComponents/ThemeIntroductionPanel.ts
View file

@ -4,15 +4,16 @@ import State from "../../State";
import Combine from "../Base/Combine";
import LanguagePicker from "../LanguagePicker";
import Translations from "../i18n/Translations";
import {VariableUiElement} from "../Base/VariableUIElement";
export default class WelcomeMessage extends UIElement {
export default class ThemeIntroductionPanel extends UIElement {
private languagePicker: UIElement;
private readonly description: UIElement;
private readonly plzLogIn: UIElement;
private readonly welcomeBack: UIElement;
private readonly tail: UIElement;
private readonly loginStatus: UIElement;
constructor() {
@ -32,20 +33,24 @@ export default class WelcomeMessage extends UIElement {
});
this.welcomeBack = Translations.t.general.welcomeBack;
this.tail = layout.descriptionTail;
this.loginStatus = new VariableUiElement(
State.state.osmConnection.userDetails.map(
userdetails => {
if (State.state.featureSwitchUserbadge.data) {
return "";
}
return (userdetails.loggedIn ? this.welcomeBack : this.plzLogIn).Render();
}
)
)
}
InnerRender(): string {
let loginStatus = undefined;
if (State.state.featureSwitchUserbadge.data) {
loginStatus = (State.state.osmConnection.userDetails.data.loggedIn ? this.welcomeBack :
this.plzLogIn);
}
return new Combine([
this.description,
"<br/><br/>",
loginStatus,
this.loginStatus,
this.tail,
"<br/>",
this.languagePicker