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"),
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

30
Models/ThemeConfig/LayoutConfig.ts
View file

@ -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(<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",
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
}
}

19
UI/Base/SubtleButton.ts
View file

@ -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

28
UI/BigComponents/CopyrightPanel.ts
View file

@ -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),

5
UI/BigComponents/ExtraLinkButton.ts
View file

@ -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
})

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)}`
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

22
UI/BigComponents/MoreScreen.ts
View file

@ -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([
`<dt class='text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-800'>`,
new Translation(layout.title, !isCustom && !layout.mustHaveLanguage ? "themes:" + layout.id + ".title" : undefined),
`</dt>`,
`<dd class='mt-1 text-base text-gray-500 group-hover:text-blue-900 overflow-ellipsis'>`,
new Translation(layout.shortDescription)?.SetClass("subtle") ?? "",
`</dd>`,
]), {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<string>): BaseUIElement {
var currentIds: UIEventSource<string[]> = state.installedUserThemes
var currentIds: Store<string[]> = state.installedUserThemes
var stableIds = Stores.ListStabilized<string>(currentIds)
return new VariableUiElement(