midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Small layout tweaks, fix #751

Browse source
This commit is contained in:
pietervdvn 2022-07-01 00:16:05 +02:00
parent 972d702315
commit e7e8a1a219
7 changed files with 57 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Logic/DetermineLayout.ts
View file

@ -117,7 +117,7 @@ export default class DetermineLayout {
error.SetClass("alert"), error.SetClass("alert"),
new SubtleButton(Svg.back_svg(), new SubtleButton(Svg.back_svg(),
"Go back to the theme overview", "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(() => { json !== undefined ? new SubtleButton(Svg.download_svg(),"Download the JSON file").onClick(() => {
Utils.offerContentsAsDownloadableFile(JSON.stringify(json, null, " "), "theme_definition.json") Utils.offerContentsAsDownloadableFile(JSON.stringify(json, null, " "), "theme_definition.json")
}) : undefined }) : undefined

22
Models/ThemeConfig/LayoutConfig.ts
View file

@ -56,10 +56,10 @@ export default class LayoutConfig {
public readonly usedImages: string[] public readonly usedImages: string[]
public readonly extraLink?: ExtraLinkConfig public readonly extraLink?: ExtraLinkConfig
public readonly definedAtUrl? : string; public readonly definedAtUrl?: string;
public readonly definitionRaw?: string; public readonly definitionRaw?: string;
constructor(json: LayoutConfigJson, official = true,options?: { constructor(json: LayoutConfigJson, official = true, options?: {
definedAtUrl?: string, definedAtUrl?: string,
definitionRaw?: string definitionRaw?: string
}) { }) {
@ -75,7 +75,7 @@ export default class LayoutConfig {
throw "The id of a theme should match [a-z0-9-_]*: " + json.id 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.maintainer = json.maintainer;
this.credits = json.credits; this.credits = json.credits;
this.version = json.version; this.version = json.version;
@ -107,10 +107,10 @@ export default class LayoutConfig {
throw "Got undefined layers for " + json.id + " at " + context throw "Got undefined layers for " + json.id + " at " + context
} }
} }
this.title = new Translation(json.title, "themes:"+context + ".title"); this.title = new Translation(json.title, "themes:" + context + ".title");
this.description = new Translation(json.description, "themes:"+context + ".description"); 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.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.descriptionTail = json.descriptionTail === undefined ? undefined : new Translation(json.descriptionTail, "themes:" + context + ".descriptionTail");
this.icon = json.icon; this.icon = json.icon;
this.socialImage = json.socialImage ?? LayoutConfig.defaultSocialImage; this.socialImage = json.socialImage ?? LayoutConfig.defaultSocialImage;
if (this.socialImage === "") { if (this.socialImage === "") {
@ -128,12 +128,12 @@ export default class LayoutConfig {
// At this point, layers should be expanded and validated either by the generateScript or the LegacyJsonConvert // At this point, layers should be expanded and validated either by the generateScript or the LegacyJsonConvert
this.layers = json.layers.map(lyrJson => new LayerConfig(<LayerConfigJson>lyrJson, json.id + ".layers." + lyrJson["id"], official)); this.layers = json.layers.map(lyrJson => new LayerConfig(<LayerConfigJson>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", 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, newTab: true,
requirements: ["iframe","no-welcome-message"] requirements: ["iframe", "no-welcome-message"]
}, context+".extraLink") }, context + ".extraLink")
this.clustering = { this.clustering = {

19
UI/Base/SubtleButton.ts
View file

@ -29,24 +29,21 @@ export class SubtleButton extends UIElement {
protected InnerRender(): string | BaseUIElement { 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 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; let img;
const imgClasses = "block justify-center flex-none mr-4 " + (this.options?.imgSize ?? "h-11 w-11")
if ((this.imageUrl ?? "") === "") { if ((this.imageUrl ?? "") === "") {
img = undefined; img = undefined;
} else if (typeof (this.imageUrl) === "string") { } else if (typeof (this.imageUrl) === "string") {
img = new Img(this.imageUrl) img = new Img(this.imageUrl)?.SetClass(imgClasses)
} else { } 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")]) const button = new Combine([
.SetClass("flex-shrink-0"); img,
message?.SetClass("block overflow-ellipsis no-images")
const button = new Combine([
image,
message message
]).SetClass("flex group w-full") ]).SetClass("flex items-center group w-full")
if (this.options?.url == undefined) { if (this.options?.url == undefined) {
this.SetClass(classes) this.SetClass(classes)

28
UI/BigComponents/CopyrightPanel.ts
View file

@ -106,29 +106,35 @@ export default class CopyrightPanel extends Combine {
const t = Translations.t.general.attribution const t = Translations.t.general.attribution
const layoutToUse = state.layoutToUse 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 = [ const actionButtons = [
new SubtleButton(Svg.liberapay_ui().SetStyle(iconStyle), t.donate, { new SubtleButton(Svg.liberapay_ui(), t.donate, {
url: "https://liberapay.com/pietervdvn/", 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", 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), 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"), new Combine([t.followOnMastodon.SetClass("font-bold"), t.followBridge]).SetClass("flex flex-col"),
{ {
url:"https://en.osm.town/web/notifications", 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", url:"https://twitter.com/mapcomplete",
newTab: true newTab: true,
imgSize
}), }),
new OpenIdEditor(state, iconStyle), new OpenIdEditor(state, iconStyle),
new MapillaryLink(state, iconStyle), new MapillaryLink(state, iconStyle),

5
UI/BigComponents/ExtraLinkButton.ts
View file

@ -45,10 +45,12 @@ export default class ExtraLinkButton extends UIElement {
let link: BaseUIElement let link: BaseUIElement
const theme = this.state.layoutToUse?.id ?? "" const theme = this.state.layoutToUse?.id ?? ""
const basepath = window.location.host
const href = this.state.locationControl.map(loc => { const href = this.state.locationControl.map(loc => {
const subs = { const subs = {
...loc, ...loc,
theme: theme, theme: theme,
basepath,
language: Locale.language.data language: Locale.language.data
} }
return Utils.SubstituteKeys(c.href, subs) return Utils.SubstituteKeys(c.href, subs)
@ -68,8 +70,7 @@ export default class ExtraLinkButton extends UIElement {
} }
link = new SubtleButton(img, text, { link = new SubtleButton(img, text, {
url: url: href,
href,
newTab: c.newTab newTab: c.newTab
}) })

2
UI/BigComponents/MapillaryLink.ts
View file

@ -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)}` 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), return new SubtleButton(Svg.mapillary_black_ui().SetStyle(iconStyle),
new Combine([ new Combine([
new Title(t.openMapillary,3), t.openMapillary.SetClass("font-bold"),
t.mapillaryHelp]), { t.mapillaryHelp]), {
url: mapillaryLink, url: mapillaryLink,
newTab: true newTab: true

22
UI/BigComponents/MoreScreen.ts
View file

@ -188,15 +188,17 @@ export default class MoreScreen extends Combine {
BaseUIElement { BaseUIElement {
const url = MoreScreen.createUrlFor(layout, isCustom, state) const url = MoreScreen.createUrlFor(layout, isCustom, state)
return new SubtleButton(layout.icon, let content = new Combine([
new Combine([ new Translation(layout.title, !isCustom && !layout.mustHaveLanguage ? "themes:" + layout.id + ".title" : undefined),
`<dt class='text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-800'>`, new Translation(layout.shortDescription)?.SetClass("subtle") ?? "",
new Translation(layout.title, !isCustom && !layout.mustHaveLanguage ? "themes:" + layout.id + ".title" : undefined), ]).SetClass("overflow-hidden flex flex-col")
`</dt>`,
`<dd class='mt-1 text-base text-gray-500 group-hover:text-blue-900 overflow-ellipsis'>`, if(state.layoutToUse === undefined){
new Translation(layout.shortDescription)?.SetClass("subtle") ?? "", // Currently on the index screen: we style the buttons equally large
`</dd>`, content = new Combine([content]).SetClass("flex flex-col justify-center h-24")
]), {url, newTab: false}); }
return new SubtleButton(layout.icon, content, {url, newTab: false});
} }
public static CreateProffessionalSerivesButton() { 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") ]).SetClass("flex flex-col border border-gray-300 p-2 rounded-lg")
} }
private static createUnofficialThemeList(buttonClass: string, state: UserRelatedState, themeListClasses: string, search: UIEventSource<string>): BaseUIElement { private static createUnofficialThemeList(buttonClass: string, state: UserRelatedState, themeListClasses: string, search: UIEventSource<string>): BaseUIElement {
var currentIds: UIEventSource<string[]> = state.installedUserThemes var currentIds: Store<string[]> = state.installedUserThemes
var stableIds = Stores.ListStabilized<string>(currentIds) var stableIds = Stores.ListStabilized<string>(currentIds)
return new VariableUiElement( return new VariableUiElement(