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

More styling tweaks

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-08 02:13:44 +01:00
parent 9a412c6b74
commit 77ffdc093a
8 changed files with 85 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

34
UI/Base/ScrollableFullScreen.ts Normal file
View file

@ -0,0 +1,34 @@
import {UIElement} from "../UIElement";
import Svg from "../../Svg";
import State from "../../State";
import Combine from "./Combine";
/**
* Wraps some contents into a panel that scrolls the content _under_ the title
*/
export default class ScrollableFullScreen extends UIElement{
private _component: Combine;
constructor(title: UIElement, content: UIElement) {
super();
const returnToTheMap = Svg.back_svg().onClick(() => {
State.state.fullScreenMessage.setData(undefined);
State.state.selectedElement.setData(undefined);
}).SetClass("only-on-mobile")
.SetClass("featureinfobox-back-to-the-map")
this._component = new Combine([
new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"),
new Combine([content]).SetClass("featureinfobox-content")
])
this.SetClass("featureinfobox");
}
InnerRender(): string {
return this._component.Render();
}
}

15
UI/BigComponents/LayerControlPanel.ts
View file

@ -3,6 +3,8 @@ import State from "../../State";
import BackgroundSelector from "./BackgroundSelector";
import LayerSelection from "./LayerSelection";
import Combine from "../Base/Combine";
import {FixedUiElement} from "../Base/FixedUiElement";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
import Translations from "../i18n/Translations";
export default class LayerControlPanel extends UIElement {
@ -11,7 +13,7 @@ export default class LayerControlPanel extends UIElement {
constructor() {
super();
let layerControlPanel: UIElement = undefined;
let layerControlPanel: UIElement = new FixedUiElement("");
if (State.state.layoutToUse.data.enableBackgroundLayerSelection) {
layerControlPanel = new BackgroundSelector();
layerControlPanel.SetStyle("margin:1em");
@ -27,16 +29,9 @@ export default class LayerControlPanel extends UIElement {
}
const backButton = new Combine([
new Combine([Translations.t.general.returnToTheMap.Clone().SetClass("to-the-map")])
.SetClass("to-the-map-inner")
const title =Translations.t.general.layerSelection.title.SetClass("featureinfobox-title")
]).SetClass("only-on-mobile")
.onClick(() => State.state.fullScreenMessage.setData(undefined));
layerControlPanel = new Combine([layerControlPanel , backButton]);
this._panel = layerControlPanel;
this._panel = new ScrollableFullScreen(title, layerControlPanel);
}
InnerRender(): string {

4
UI/BigComponents/LayerSelection.ts
View file

@ -36,14 +36,14 @@ export default class LayerSelection extends UIElement {
const zoomStatus = new VariableUiElement(State.state.locationControl.map(location => {
if (location.zoom < layer.layerDef.minzoom) {
return Translations.t.general.zoomInToSeeThisLayer
return Translations.t.general.layerSelection.zoomInToSeeThisLayer
.SetClass("alert")
.SetStyle("display: block ruby;width:min-content;")
.Render();
}
return ""
}))
const style = "display:flex;align-items:center;"
const style = "display:flex;align-items:center;flex-wrap:wrap;"
this._checkboxes.push(new CheckBox(
new Combine([icon, name, zoomStatus]).SetStyle(style),
new Combine([iconUnselected, "<del>", name, "</del>", zoomStatus]).SetStyle(style),

56
UI/Popup/FeatureInfoBox.ts
View file

@ -10,17 +10,10 @@ import {FixedUiElement} from "../Base/FixedUiElement";
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
import Svg from "../../Svg";
import Ornament from "../Base/Ornament";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
export default class FeatureInfoBox extends UIElement {
private _tags: UIEventSource<any>;
private _layerConfig: LayerConfig;
private _title: UIElement;
private _titleIcons: UIElement;
private _renderings: UIElement[];
private _questionBox: UIElement;
private _returnToTheMap: UIElement;
private _tail: UIElement;
private _component: UIElement;
constructor(
tags: UIEventSource<any>,
@ -30,18 +23,11 @@ export default class FeatureInfoBox extends UIElement {
if (layerConfig === undefined) {
throw "Undefined layerconfig"
}
this._tags = tags;
this._layerConfig = layerConfig;
this._returnToTheMap = Svg.back_svg().onClick(() => {
State.state.fullScreenMessage.setData(undefined);
State.state.selectedElement.setData(undefined);
}).SetClass("only-on-mobile")
.SetClass("featureinfobox-back-to-the-map")
this._title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI"))
const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI"))
.SetClass("featureinfobox-title");
this._titleIcons = new Combine(
const titleIcons = new Combine(
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)))
.SetClass("featureinfobox-icons");
@ -51,7 +37,7 @@ export default class FeatureInfoBox extends UIElement {
}
let questionBoxIsUsed = false;
this._renderings = layerConfig.tagRenderings.map(tr => {
const renderings = layerConfig.tagRenderings.map(tr => {
if (tr.question === null) {
questionBoxIsUsed = true;
// This is the question box!
@ -59,27 +45,27 @@ export default class FeatureInfoBox extends UIElement {
}
return new EditableTagRendering(tags, tr);
});
this._renderings[0]?.SetClass("first-rendering");
renderings[0]?.SetClass("first-rendering");
if (!questionBoxIsUsed) {
this._renderings.push(questionBox);
renderings.push(questionBox);
}
this._tail = new Combine([new Ornament()]).SetClass("only-on-mobile");
const tail = new Combine([new Ornament()]).SetClass("only-on-mobile");
const content = new Combine([
...renderings,
questionBox,
tail.SetClass("featureinfobox-tail")
]
)
const titleBar = new Combine([
new Combine([title, titleIcons]).SetClass("featureinfobox-titlebar-title")
])
this._component = new ScrollableFullScreen(titleBar, content)
}
InnerRender(): string {
return new Combine([
new Combine([
this._returnToTheMap, new Combine([this._title, this._titleIcons]).SetClass("featureinfobox-titlebar-title")
]).SetClass("featureinfobox-titlebar"),
new Combine([
...this._renderings,
this._questionBox,
this._tail.SetClass("featureinfobox-tail")
]
).SetClass("featureinfobox-content"),
]).SetClass("featureinfobox")
.Render();
return this._component.Render();
}
}