Derping around, bit of a dead end due to transform3d in a parent

This commit is contained in:
Pieter Vander Vennet 2021-01-22 01:03:50 +01:00
commit 81f0a21076
52 changed files with 1717 additions and 14115 deletions

View file

@ -70,7 +70,6 @@ export default class FullWelcomePaneWithTabs extends UIElement {
const tabbedPart = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab)
.ListenTo(this._userDetails);
this._component = new ScrollableFullScreen(
layoutToUse.title,

View file

@ -0,0 +1,28 @@
import {UIElement} from "../UIElement";
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
import {FixedUiElement} from "../Base/FixedUiElement";
export default class IndexText extends Combine {
constructor() {
super([
new FixedUiElement(`<img class="w-12 h-12 sm:h-24 sm:w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`)
.AddClass("flex-none m-3"),
new Combine([
Translations.t.index.title
.AddClass("text-2xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl block text-gray-800 xl:inline"),
Translations.t.index.intro.AddClass(
"mt-3 text-base font-semibold text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"),
Translations.t.index.pickTheme.AddClass("mt-3 text-base text-green-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0")
]).AddClass("flex flex-col sm:text-center lg:text-left m-1 mt-2 md:m-2 md:mt-4")
]);
this.AddClass("flex flex-row");
}
}

View file

@ -29,7 +29,7 @@ export default class LayerControlPanel extends UIElement {
}
const title =Translations.t.general.layerSelection.title.SetClass("featureinfobox-title")
const title = Translations.t.general.layerSelection.title.SetClass("text-2xl break-words font-bold p-2")
this._panel = new ScrollableFullScreen(title, layerControlPanel, () => {
onClose

View file

@ -11,13 +11,14 @@ import Translations from "../i18n/Translations";
import * as personal from "../../assets/themes/personalLayout/personalLayout.json"
import Constants from "../../Models/Constants";
import LanguagePicker from "../LanguagePicker";
import IndexText from "./IndexText";
export default class MoreScreen extends UIElement {
private readonly _onMainScreen: boolean;
private _component: UIElement;
constructor(onMainScreen: boolean = false) {
super(State.state.locationControl);
this._onMainScreen = onMainScreen;
@ -65,15 +66,14 @@ export default class MoreScreen extends UIElement {
}
let description = Translations.W(layout.shortDescription);
if (description !== undefined) {
description = new Combine(["<br/>", description]);
}
return new SubtleButton(layout.icon,
new Combine([
"<b>",
`<dt class='text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-800'>`,
Translations.W(layout.title),
"</b>",
`</dt>`,
`<dd class='mt-1 text-base text-gray-500 group-hover:text-blue-900'>`,
description ?? "",
`</dd>`,
]), {url: linkText, newTab: false});
}
@ -83,21 +83,10 @@ export default class MoreScreen extends UIElement {
const els: UIElement[] = []
els.push(new VariableUiElement(
State.state.osmConnection.userDetails.map(userDetails => {
if (userDetails.csCount < Constants.userJourney.themeGeneratorReadOnlyUnlock) {
return tr.requestATheme.Render();
}
return new SubtleButton(Svg.pencil_ui(), tr.createYourOwnTheme, {
url: "./customGenerator.html",
newTab: false
}).Render();
})
));
const linkButton: UIElement[] = []
for (const k in AllKnownLayouts.allSets) {
const layout : LayoutConfig = AllKnownLayouts.allSets[k];
const layout: LayoutConfig = AllKnownLayouts.allSets[k];
if (k === personal.id) {
if (State.state.osmConnection.userDetails.data.csCount < Constants.userJourney.personalLayoutUnlock) {
continue;
@ -106,12 +95,25 @@ export default class MoreScreen extends UIElement {
if (layout.id !== k) {
continue; // This layout was added multiple time due to an uppercase
}
els.push(this.createLinkButton(layout));
linkButton.push(this.createLinkButton(layout));
}
els.push(new Combine(linkButton))
els.push(new VariableUiElement(
State.state.osmConnection.userDetails.map(userDetails => {
if (userDetails.csCount < Constants.userJourney.themeGeneratorReadOnlyUnlock) {
return tr.requestATheme.SetClass("block text-base mx-10 my-3").Render();
}
return new SubtleButton(Svg.pencil_ui(), tr.createYourOwnTheme, {
url: "./customGenerator.html",
newTab: false
}).Render();
})
));
const customThemesNames = State.state.installedThemes.data ?? [];
if (customThemesNames.length > 0) {
els.push(Translations.t.general.customThemeIntro)
@ -123,18 +125,19 @@ export default class MoreScreen extends UIElement {
let intro : UIElement= tr.intro;
if(this._onMainScreen){
intro = new Combine([
LanguagePicker.CreateLanguagePicker(Translations.t.general.index.SupportedLanguages())
.SetStyle("position: absolute; right: 1.5em; top: 1.5em;"),
Translations.t.general.index.SetStyle("margin-top: 2em;display:block; margin-bottom: 1em;")
])
}
this._component = new VerticalCombine([
intro,
new VerticalCombine(els),
tr.streetcomplete
LanguagePicker.CreateLanguagePicker(Translations.t.index.title.SupportedLanguages())
.SetClass("absolute top-2 right-3 dropdown-ui-element-2226"),
new IndexText()
])
}
this._component = new Combine([
intro,
new Combine(els),
tr.streetcomplete.SetClass("block text-base mx-10 my-3 mb-10")
]);
return this._component.Render();
}

View file

@ -22,7 +22,7 @@ export default class SearchAndGo extends UIElement {
);
private _foundEntries = new UIEventSource([]);
private _goButton = Svg.search_ui().SetClass('search-go');
private _goButton = Svg.search_ui().AddClass('w-8 h-8 full-rounded border-black float-right');
constructor() {
super(undefined);

View file

@ -29,7 +29,7 @@ export default class UserBadge extends UIElement {
this._loginButton = Translations.t.general.loginWithOpenStreetMap
.Clone()
.SetClass("userbadge-login")
.SetClass("userbadge-login pt-3 w-full")
.onClick(() => State.state.osmConnection.AttemptLogin());
this._logout =
Svg.logout_svg()
@ -50,7 +50,7 @@ export default class UserBadge extends UIElement {
this._homeButton = new VariableUiElement(
this._userDetails.map((userinfo) => {
if (userinfo.home) {
return Svg.home;
return Svg.home_svg().Render();
}
return "";
})