midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Lots of styling tweaks, add filter links between layers

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-02-01 04:14:54 +01:00
parent 5cefc4d25f
commit c15f3d2036
28 changed files with 263 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

9
UI/Base/MinimapImplementation.ts
View file

@ -53,14 +53,15 @@ export default class MinimapImplementation extends BaseUIElement implements Mini
public installBounds(factor: number | BBox, showRange?: boolean) {
this.leafletMap.addCallbackD(leaflet => {
let bounds;
let bounds : {getEast(), getNorth(), getWest(), getSouth()};
if (typeof factor === "number") {
bounds = leaflet.getBounds().pad(factor)
leaflet.setMaxBounds(bounds)
const lbounds = leaflet.getBounds().pad(factor)
leaflet.setMaxBounds(lbounds)
bounds = lbounds;
} else {
// @ts-ignore
leaflet.setMaxBounds(factor.toLeaflet())
bounds = leaflet.getBounds()
bounds = factor
}
if (showRange) {

4
UI/Base/ScrollableFullScreen.ts
View file

@ -6,6 +6,7 @@ import {UIEventSource} from "../../Logic/UIEventSource";
import Hash from "../../Logic/Web/Hash";
import BaseUIElement from "../BaseUIElement";
import Img from "./Img";
import Title from "./Title";
/**
*
@ -101,7 +102,8 @@ export default class ScrollableFullScreen extends UIElement {
Hash.hash.setData(undefined)
})
title.SetClass("block text-l sm:text-xl md:text-2xl w-full font-bold p-0 max-h-20vh overflow-y-auto self-center")
title = new Title(title, 2)
title.SetClass("text-l sm:text-xl md:text-2xl w-full p-0 max-h-20vh overflow-y-auto self-center")
return new Combine([
new Combine([
new Combine([returnToTheMap, title])

2
UI/Base/SubtleButton.ts
View file

@ -21,7 +21,7 @@ export class SubtleButton extends UIElement {
}
protected InnerRender(): string | BaseUIElement {
const classes = "block flex p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200 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);
let img;
if ((this.imageUrl ?? "") === "") {

2
UI/BigComponents/CopyrightPanel.ts
View file

@ -185,7 +185,7 @@ export default class CopyrightPanel extends Combine {
...iconAttributions
].map(e => e?.SetClass("mt-4")));
this.SetClass("flex flex-col link-underline overflow-hidden")
this.SetStyle("max-width: calc(100vw - 3em); width: 40rem; margin-left: 0.75rem; margin-right: 0.5rem")
this.SetStyle("max-width:100%; width: 40rem; margin-left: 0.75rem; margin-right: 0.5rem")
}
private static CodeContributors(): BaseUIElement {

15
UI/BigComponents/FilterView.ts
View file

@ -115,17 +115,16 @@ export default class FilterView extends VariableUiElement {
)
const style =
"display:flex;align-items:center;padding:0.5rem 0;";
const layerIcon = layer.defaultIcon()?.SetClass("w-8 h-8 ml-2 shrink-0")
const layerIconUnchecked = layer.defaultIcon()?.SetClass("opacity-50 w-8 h-8 ml-2")
const toggleClasses = "layer-toggle flex flex-wrap items-center pt-2 pb-1 px-0";
const layerIcon = layer.defaultIcon()?.SetClass("flex-shrink-0 w-8 h-8 ml-2")
const layerIconUnchecked = layer.defaultIcon()?.SetClass("flex-shrink-0 opacity-50 w-8 h-8 ml-2")
const layerChecked = new Combine([icon, layerIcon, styledNameChecked, zoomStatus])
.SetStyle(style)
.SetClass(toggleClasses)
.onClick(() => filteredLayer.isDisplayed.setData(false));
const layerNotChecked = new Combine([iconUnselected, layerIconUnchecked, styledNameUnChecked])
.SetStyle(style)
.SetClass(toggleClasses)
.onClick(() => filteredLayer.isDisplayed.setData(true));
@ -152,7 +151,7 @@ export default class FilterView extends VariableUiElement {
const [ui, actualTags] = FilterView.createFilter(filter)
ui.SetClass("mt-3")
ui.SetClass("mt-1")
toShow.push(ui)
actualTags.addCallback(tagsToFilterFor => {
flayer.appliedFilters.data.set(filter.id, tagsToFilterFor)
@ -165,7 +164,7 @@ export default class FilterView extends VariableUiElement {
}
return new Combine(toShow)
.SetClass("flex flex-col p-2 ml-0 pl-12 bg-gray-200 pt-0 border-b-2 border-detail mb-4")
.SetClass("flex flex-col p-2 ml-12 pl-1 pt-0 border-b-2 border-detail mb-4")
}

4
UI/BigComponents/LeftControls.ts
View file

@ -35,9 +35,7 @@ export default class LeftControls extends Combine {
return defaultIcon;
}
const tags = {...feature.properties, button: "yes"}
const elem = currentViewFL.layerDef.mapRendering[0]?.GenerateLeafletStyle(new UIEventSource(tags), false, {
noSize: true
})?.html
const elem = currentViewFL.layerDef.mapRendering[0]?.GetSimpleIcon(new UIEventSource(tags));
if (elem === undefined) {
return defaultIcon
}

2
UI/Image/ImageUploadFlow.ts
View file

@ -75,7 +75,7 @@ export class ImageUploadFlow extends Toggle {
const label = new Combine([
Svg.camera_plus_ui().SetClass("block w-12 h-12 p-1 text-4xl "),
labelContent
]).SetClass("p-2 border-4 border-black rounded-full font-bold h-full align-middle w-full flex justify-center")
]).SetClass("p-2 border-4 border-detail rounded-full font-bold h-full align-middle w-full flex justify-center")
const fileSelector = new FileSelectorButton(label)
fileSelector.GetValue().addCallback(filelist => {

2
UI/Popup/FeatureInfoBox.ts
View file

@ -62,7 +62,7 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
layerConfig: LayerConfig,
state: {}): BaseUIElement {
const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI"), state)
.SetClass("break-words font-bold sm:p-0.5 md:p-1 sm:p-1.5 md:p-2");
.SetClass("break-words font-bold sm:p-0.5 md:p-1 sm:p-1.5 md:p-2 text-2xl");
const titleIcons = new Combine(
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon, state,
"block w-8 h-8 max-h-8 align-baseline box-content sm:p-0.5 w-10",)

7
UI/Popup/TagRenderingQuestion.ts
View file

@ -111,9 +111,8 @@ export default class TagRenderingQuestion extends Combine {
const saveButton = new Combine([
options.saveButtonConstr(inputElement.GetValue()),
new Toggle(Translations.t.general.testing.SetClass("alert"), undefined, state.featureSwitchIsTesting)
])
let bottomTags: BaseUIElement;
if (options.bottomText !== undefined) {
bottomTags = options.bottomText(inputElement.GetValue())
@ -142,7 +141,9 @@ export default class TagRenderingQuestion extends Combine {
inputElement,
options.cancelButton,
saveButton,
bottomTags])
bottomTags,
new Toggle(Translations.t.general.testing.SetClass("alert"), undefined, state.featureSwitchIsTesting)
])
this.SetClass("question disable-links")

2
UI/SubstitutedTranslation.ts
View file

@ -36,7 +36,7 @@ export class SubstitutedTranslation extends VariableUiElement {
super(
Locale.language.map(language => {
let txt = translation.textFor(language);
let txt = translation?.textFor(language);
if (txt === undefined) {
return undefined
}

2
UI/i18n/Translation.ts
View file

@ -35,7 +35,7 @@ export class Translation extends BaseUIElement {
get txt(): string {
return this.textFor(Translation.forcedLanguage ?? Locale.language.data)
}
}
static ExtractAllTranslationsFrom(object: any, context = ""): { context: string, tr: Translation }[] {
const allTranslations: { context: string, tr: Translation }[] = []