From e7e8a1a21951566beef0d3fad619435c3f4928dc Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Fri, 1 Jul 2022 00:16:05 +0200 Subject: [PATCH] Small layout tweaks, fix #751 --- Logic/DetermineLayout.ts | 2 +- Models/ThemeConfig/LayoutConfig.ts | 30 ++++++++++++++--------------- UI/Base/SubtleButton.ts | 19 ++++++++---------- UI/BigComponents/CopyrightPanel.ts | 28 ++++++++++++++++----------- UI/BigComponents/ExtraLinkButton.ts | 5 +++-- UI/BigComponents/MapillaryLink.ts | 2 +- UI/BigComponents/MoreScreen.ts | 22 +++++++++++---------- 7 files changed, 57 insertions(+), 51 deletions(-) diff --git a/Logic/DetermineLayout.ts b/Logic/DetermineLayout.ts index 36233b73b..b85f6e40c 100644 --- a/Logic/DetermineLayout.ts +++ b/Logic/DetermineLayout.ts @@ -117,7 +117,7 @@ export default class DetermineLayout { error.SetClass("alert"), new SubtleButton(Svg.back_svg(), "Go back to the theme overview", - {url: window.location.protocol + "//" + window.location.hostname + "/index.html", newTab: false}), + {url: window.location.protocol + "//" + window.location.host + "/index.html", newTab: false}), json !== undefined ? new SubtleButton(Svg.download_svg(),"Download the JSON file").onClick(() => { Utils.offerContentsAsDownloadableFile(JSON.stringify(json, null, " "), "theme_definition.json") }) : undefined diff --git a/Models/ThemeConfig/LayoutConfig.ts b/Models/ThemeConfig/LayoutConfig.ts index 3cb39d9f7..e0c917d5a 100644 --- a/Models/ThemeConfig/LayoutConfig.ts +++ b/Models/ThemeConfig/LayoutConfig.ts @@ -55,11 +55,11 @@ export default class LayoutConfig { public readonly usedImages: string[] public readonly extraLink?: ExtraLinkConfig - - public readonly definedAtUrl? : string; + + public readonly definedAtUrl?: string; public readonly definitionRaw?: string; - - constructor(json: LayoutConfigJson, official = true,options?: { + + constructor(json: LayoutConfigJson, official = true, options?: { definedAtUrl?: string, definitionRaw?: string }) { @@ -75,7 +75,7 @@ export default class LayoutConfig { throw "The id of a theme should match [a-z0-9-_]*: " + json.id } } - const context = this.id + const context = this.id this.maintainer = json.maintainer; this.credits = json.credits; this.version = json.version; @@ -107,10 +107,10 @@ export default class LayoutConfig { throw "Got undefined layers for " + json.id + " at " + context } } - this.title = new Translation(json.title, "themes:"+context + ".title"); - this.description = new Translation(json.description, "themes:"+context + ".description"); - this.shortDescription = json.shortDescription === undefined ? this.description.FirstSentence() : new Translation(json.shortDescription, "themes:"+context + ".shortdescription"); - this.descriptionTail = json.descriptionTail === undefined ? undefined : new Translation(json.descriptionTail, "themes:"+context + ".descriptionTail"); + this.title = new Translation(json.title, "themes:" + context + ".title"); + this.description = new Translation(json.description, "themes:" + context + ".description"); + this.shortDescription = json.shortDescription === undefined ? this.description.FirstSentence() : new Translation(json.shortDescription, "themes:" + context + ".shortdescription"); + this.descriptionTail = json.descriptionTail === undefined ? undefined : new Translation(json.descriptionTail, "themes:" + context + ".descriptionTail"); this.icon = json.icon; this.socialImage = json.socialImage ?? LayoutConfig.defaultSocialImage; if (this.socialImage === "") { @@ -128,13 +128,13 @@ export default class LayoutConfig { // At this point, layers should be expanded and validated either by the generateScript or the LegacyJsonConvert this.layers = json.layers.map(lyrJson => new LayerConfig(lyrJson, json.id + ".layers." + lyrJson["id"], official)); - this.extraLink = new ExtraLinkConfig(json.extraLink ?? { + this.extraLink = new ExtraLinkConfig(json.extraLink ?? { icon: "./assets/svg/pop-out.svg", - href: "https://mapcomplete.osm.be/{theme}.html?lat={lat}&lon={lon}&z={zoom}&language={language}", + href: "https://{basepath}/{theme}.html?lat={lat}&lon={lon}&z={zoom}&language={language}", newTab: true, - requirements: ["iframe","no-welcome-message"] - }, context+".extraLink") - + requirements: ["iframe", "no-welcome-message"] + }, context + ".extraLink") + this.clustering = { maxZoom: 16, @@ -211,5 +211,5 @@ export default class LayoutConfig { } return undefined } - + } \ No newline at end of file diff --git a/UI/Base/SubtleButton.ts b/UI/Base/SubtleButton.ts index 62a05b04d..32931845f 100644 --- a/UI/Base/SubtleButton.ts +++ b/UI/Base/SubtleButton.ts @@ -29,25 +29,22 @@ export class SubtleButton extends UIElement { protected InnerRender(): string | BaseUIElement { const classes = "block flex p-3 my-2 bg-subtle rounded-lg hover:shadow-xl hover:bg-unsubtle transition-colors transition-shadow link-no-underline"; - const message = Translations.W(this.message); + const message = Translations.W(this.message)?.SetClass("block overflow-ellipsis no-images flex-shrink"); let img; + const imgClasses = "block justify-center flex-none mr-4 " + (this.options?.imgSize ?? "h-11 w-11") if ((this.imageUrl ?? "") === "") { img = undefined; } else if (typeof (this.imageUrl) === "string") { - img = new Img(this.imageUrl) + img = new Img(this.imageUrl)?.SetClass(imgClasses) } else { - img = this.imageUrl; + img = this.imageUrl?.SetClass(imgClasses); } - const image = new Combine([img?.SetClass("block flex items-center justify-center "+(this.options?.imgSize ?? "h-11 w-11")+" flex-shrink0 mr-4")]) - .SetClass("flex-shrink-0"); - - message?.SetClass("block overflow-ellipsis no-images") - - const button = new Combine([ - image, + const button = new Combine([ + img, message - ]).SetClass("flex group w-full") + ]).SetClass("flex items-center group w-full") + if (this.options?.url == undefined) { this.SetClass(classes) return button diff --git a/UI/BigComponents/CopyrightPanel.ts b/UI/BigComponents/CopyrightPanel.ts index 0c3a2b522..16e6b1eb7 100644 --- a/UI/BigComponents/CopyrightPanel.ts +++ b/UI/BigComponents/CopyrightPanel.ts @@ -106,29 +106,35 @@ export default class CopyrightPanel extends Combine { const t = Translations.t.general.attribution const layoutToUse = state.layoutToUse - const iconStyle = "height: 1.5rem; width: auto" + const imgSize = "h-6 w-6" + const iconStyle = "height: 1.5rem; width: 1.5rem" const actionButtons = [ - new SubtleButton(Svg.liberapay_ui().SetStyle(iconStyle), t.donate, { + new SubtleButton(Svg.liberapay_ui(), t.donate, { url: "https://liberapay.com/pietervdvn/", - newTab: true + newTab: true, + imgSize }), - new SubtleButton(Svg.bug_ui().SetStyle(iconStyle), t.openIssueTracker, { + new SubtleButton(Svg.bug_ui(), t.openIssueTracker, { url: "https://github.com/pietervdvn/MapComplete/issues", - newTab: true + newTab: true, + imgSize }), - new SubtleButton(Svg.statistics_ui().SetStyle(iconStyle), t.openOsmcha.Subs({theme: state.layoutToUse.title}), { + new SubtleButton(Svg.statistics_ui(), t.openOsmcha.Subs({theme: state.layoutToUse.title}), { url: Utils.OsmChaLinkFor(31, state.layoutToUse.id), - newTab: true + newTab: true, + imgSize }), - new SubtleButton(Svg.mastodon_ui().SetStyle(iconStyle), + new SubtleButton(Svg.mastodon_ui(), new Combine([t.followOnMastodon.SetClass("font-bold"), t.followBridge]).SetClass("flex flex-col"), { url:"https://en.osm.town/web/notifications", - newTab: true + newTab: true, + imgSize }), - new SubtleButton(Svg.twitter_ui().SetStyle(iconStyle), t.followOnTwitter, { + new SubtleButton(Svg.twitter_ui(), t.followOnTwitter, { url:"https://twitter.com/mapcomplete", - newTab: true + newTab: true, + imgSize }), new OpenIdEditor(state, iconStyle), new MapillaryLink(state, iconStyle), diff --git a/UI/BigComponents/ExtraLinkButton.ts b/UI/BigComponents/ExtraLinkButton.ts index 4e4dbb0a2..6468874de 100644 --- a/UI/BigComponents/ExtraLinkButton.ts +++ b/UI/BigComponents/ExtraLinkButton.ts @@ -45,10 +45,12 @@ export default class ExtraLinkButton extends UIElement { let link: BaseUIElement const theme = this.state.layoutToUse?.id ?? "" + const basepath = window.location.host const href = this.state.locationControl.map(loc => { const subs = { ...loc, theme: theme, + basepath, language: Locale.language.data } return Utils.SubstituteKeys(c.href, subs) @@ -68,8 +70,7 @@ export default class ExtraLinkButton extends UIElement { } link = new SubtleButton(img, text, { - url: - href, + url: href, newTab: c.newTab }) diff --git a/UI/BigComponents/MapillaryLink.ts b/UI/BigComponents/MapillaryLink.ts index 756e3808c..84ff11028 100644 --- a/UI/BigComponents/MapillaryLink.ts +++ b/UI/BigComponents/MapillaryLink.ts @@ -14,7 +14,7 @@ export class MapillaryLink extends VariableUiElement { const mapillaryLink = `https://www.mapillary.com/app/?focus=map&lat=${location?.lat ?? 0}&lng=${location?.lon ?? 0}&z=${Math.max((location?.zoom ?? 2) - 1, 1)}` return new SubtleButton(Svg.mapillary_black_ui().SetStyle(iconStyle), new Combine([ - new Title(t.openMapillary,3), + t.openMapillary.SetClass("font-bold"), t.mapillaryHelp]), { url: mapillaryLink, newTab: true diff --git a/UI/BigComponents/MoreScreen.ts b/UI/BigComponents/MoreScreen.ts index 5b454200b..dcb8a45de 100644 --- a/UI/BigComponents/MoreScreen.ts +++ b/UI/BigComponents/MoreScreen.ts @@ -188,15 +188,17 @@ export default class MoreScreen extends Combine { BaseUIElement { const url = MoreScreen.createUrlFor(layout, isCustom, state) - return new SubtleButton(layout.icon, - new Combine([ - `
`, - new Translation(layout.title, !isCustom && !layout.mustHaveLanguage ? "themes:" + layout.id + ".title" : undefined), - `
`, - `
`, - new Translation(layout.shortDescription)?.SetClass("subtle") ?? "", - `
`, - ]), {url, newTab: false}); + let content = new Combine([ + new Translation(layout.title, !isCustom && !layout.mustHaveLanguage ? "themes:" + layout.id + ".title" : undefined), + new Translation(layout.shortDescription)?.SetClass("subtle") ?? "", + ]).SetClass("overflow-hidden flex flex-col") + + if(state.layoutToUse === undefined){ + // Currently on the index screen: we style the buttons equally large + content = new Combine([content]).SetClass("flex flex-col justify-center h-24") + } + + return new SubtleButton(layout.icon, content, {url, newTab: false}); } public static CreateProffessionalSerivesButton() { @@ -208,7 +210,7 @@ export default class MoreScreen extends Combine { ]).SetClass("flex flex-col border border-gray-300 p-2 rounded-lg") } private static createUnofficialThemeList(buttonClass: string, state: UserRelatedState, themeListClasses: string, search: UIEventSource): BaseUIElement { - var currentIds: UIEventSource = state.installedUserThemes + var currentIds: Store = state.installedUserThemes var stableIds = Stores.ListStabilized(currentIds) return new VariableUiElement(