forked from MapComplete/MapComplete
Derping around, bit of a dead end due to transform3d in a parent
This commit is contained in:
commit
81f0a21076
52 changed files with 1717 additions and 14115 deletions
|
@ -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,
|
||||
|
|
28
UI/BigComponents/IndexText.ts
Normal file
28
UI/BigComponents/IndexText.ts
Normal 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");
|
||||
}
|
||||
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 "";
|
||||
})
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue