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

Cleaning away fullscreenmessage

Browse source
This commit is contained in:
pietervdvn 2021-01-22 00:40:15 +01:00
parent 977991cced
commit 7f1b78198a
12 changed files with 50 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
InitUiElements.ts
View file

@ -10,14 +10,12 @@ import StrayClickHandler from "./Logic/Actors/StrayClickHandler";
import SimpleAddUI from "./UI/BigComponents/SimpleAddUI";
import CenterMessageBox from "./UI/CenterMessageBox";
import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
import {TagUtils} from "./Logic/Tags";
import UserBadge from "./UI/BigComponents/UserBadge";
import SearchAndGo from "./UI/BigComponents/SearchAndGo";
import FullScreenMessageBox from "./UI/FullScreenMessageBoxHandler";
import GeoLocationHandler from "./Logic/Actors/GeoLocationHandler";
import {LocalStorageSource} from "./Logic/Web/LocalStorageSource";
import {Utils} from "./Utils";
import FeatureInfoBox from "./UI/Popup/FeatureInfoBox";
import Svg from "./Svg";
import Link from "./UI/Base/Link";
import * as personal from "./assets/themes/personalLayout/personalLayout.json"
@ -121,49 +119,6 @@ export class InitUiElements {
}
/**
* Show the questions and information for the selected element
* This is given to the div which renders fullscreen on mobile devices
*/
State.state.selectedElement.addCallback((feature) => {
if (feature === undefined) {
State.state.fullScreenMessage.setData(undefined);
}
if (feature?.properties === undefined) {
return;
}
const data = feature.properties;
// Which is the applicable set?
for (const layer of layoutToUse.layers) {
if (typeof layer === "string") {
continue;
}
const applicable = layer.overpassTags.matches(TagUtils.proprtiesToKV(data));
if (!applicable) {
continue;
}
if ((layer.title ?? null) === null && layer.tagRenderings.length === 0) {
continue;
}
// This layer is the layer that gives the questions
const featureBox = new FeatureInfoBox(
State.state.allElements.getEventSourceById(data.id),
layer
);
State.state.fullScreenMessage.setData({
content: featureBox,
hashText: feature.properties.id.replace("/", "_"),
titleText: featureBox.title
});
break;
}
}
);
new HistoryHandling(Hash.hash, State.state.fullScreenMessage);
InitUiElements.OnlyIf(State.state.featureSwitchUserbadge, () => {
@ -256,7 +211,8 @@ export class InitUiElements {
private static InitWelcomeMessage() {
const fullOptions = new FullWelcomePaneWithTabs();
const isOpened = new UIEventSource<boolean>(true);
const fullOptions = new FullWelcomePaneWithTabs(() => isOpened.setData(false));
const help = Svg.help_svg().SetClass("open-welcome-button");
const close = Svg.close_svg().SetClass("close-welcome-button");
@ -285,27 +241,12 @@ export class InitUiElements {
}
})
const fullOptions2 = new FullWelcomePaneWithTabs();
if (Hash.hash.data === undefined) {
State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"})
}
Svg.help_svg()
.SetClass("open-welcome-button")
.SetClass("shadow")
.onClick(() => {
State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"})
}).AttachTo("help-button-mobile");
}
private static InitLayerSelection() {
InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => {
const layerControlPanel = new LayerControlPanel()
const layerControlPanel = new LayerControlPanel(() => State.state.layerControlIsOpened.setData(false))
.SetStyle("display:block;padding:0.75em;border-radius:1em;");
const closeButton = Svg.close_svg().SetClass("layer-selection-toggle").SetStyle(" background: var(--subtle-detail-color);")
const checkbox = new CheckBox(
@ -324,20 +265,9 @@ export class InitUiElements {
State.state.locationControl
.addCallback(() => {
// Close the layer selection when the map is moved
// checkbox.isEnabled.setData(false);
checkbox.isEnabled.setData(false);
});
const fullScreen = new LayerControlPanel();
checkbox.isEnabled.addCallback(isEnabled => {
if (isEnabled) {
State.state.fullScreenMessage.setData({content: fullScreen, hashText: "layer-select"});
}
})
State.state.fullScreenMessage.addCallback(latest => {
if (latest === undefined) {
checkbox.isEnabled.setData(false);
}
})
});
}
@ -404,7 +334,7 @@ export class InitUiElements {
source.features.addCallbackAndRun((featuresFreshness: { feature: any, freshness: Date }[]) => {
if(featuresFreshness === undefined){
if (featuresFreshness === undefined) {
return;
}
let features = featuresFreshness.map(ff => ff.feature);
@ -451,7 +381,9 @@ export class InitUiElements {
State.state.leafletMap,
State.state.fullScreenMessage,
() => {
return new SimpleAddUI();
return new SimpleAddUI(
() => State.state.LastClickLocation.setData(undefined)
);
}
);
});

10
Logic/Actors/StrayClickHandler.ts
View file

@ -32,11 +32,16 @@ export default class StrayClickHandler {
})
lastClickLocation.addCallback(function (lastClick) {
selectedElement.setData(undefined);
if (self._lastMarker !== undefined) {
leafletMap.data?.removeLayer(self._lastMarker);
}
if(lastClick === undefined){
return;
}
selectedElement.setData(undefined);
self._lastMarker = L.marker([lastClick.lat, lastClick.lon], {
icon: L.icon({
iconUrl: Img.AsData(Svg.add),
@ -51,7 +56,6 @@ export default class StrayClickHandler {
self._lastMarker.bindPopup(popup);
self._lastMarker.on("click", () => {
fullscreenMessage.setData({content: self._uiToShow(), hashText: "new"});
uiElement.Update();
});
});

19
UI/Base/ScrollableFullScreen.ts
View file

@ -11,22 +11,23 @@ export default class ScrollableFullScreen extends UIElement {
private _component: Combine;
constructor(title: UIElement, content: UIElement) {
constructor(title: UIElement, content: UIElement, onClose: (() => void)) {
super();
const returnToTheMap = Svg.back_svg().onClick(() => {
State.state.fullScreenMessage.setData(undefined);
State.state.selectedElement.setData(undefined);
}).SetClass("only-on-mobile")
onClose();
}).SetClass("sm:hidden")
.SetClass("featureinfobox-back-to-the-map")
title.SetStyle("width: 100%; display: block;")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
.SetClass("block sm:hidden")
this._component = new Combine([
new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"),
new Combine(["<span>",content,"</span>", ornament]).SetClass("featureinfobox-content"),
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
new Combine([returnToTheMap, title])
.SetClass("text-xl break-words"),
new Combine([content, ornament])
])
this.SetClass("featureinfobox");
this.SetClass("fixed h-screen w-screen fixed sm:relative");
}

18
UI/BigComponents/FullWelcomePaneWithTabs.ts
View file

@ -15,8 +15,7 @@ import {TabbedComponent} from "../Base/TabbedComponent";
import {UIEventSource} from "../../Logic/UIEventSource";
import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
import UserDetails from "../../Logic/Osm/OsmConnection";
import {FixedUiElement} from "../Base/FixedUiElement";
import CombinedInputElement from "../Input/CombinedInputElement";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
export default class FullWelcomePaneWithTabs extends UIElement {
private readonly _layoutToUse: UIEventSource<LayoutConfig>;
@ -24,7 +23,7 @@ export default class FullWelcomePaneWithTabs extends UIElement {
private readonly _component: UIElement;
constructor() {
constructor(onClose: () => void) {
super(State.state.layoutToUse);
this._layoutToUse = State.state.layoutToUse;
this._userDetails = State.state.osmConnection.userDetails;
@ -71,14 +70,13 @@ export default class FullWelcomePaneWithTabs extends UIElement {
const tabbedPart = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab)
.ListenTo(this._userDetails);
const backButton = new Combine([
new Combine([Translations.t.general.returnToTheMap.Clone().SetClass("to-the-map")])
.SetClass("to-the-map-inner")
]).SetClass("only-on-mobile")
.onClick(() => State.state.fullScreenMessage.setData(undefined));
this._component = new Combine([tabbedPart, backButton]).SetStyle("width:100%;");
this._component = new ScrollableFullScreen(
layoutToUse.title,
tabbedPart,
onClose
)
}
InnerRender(): string {

6
UI/BigComponents/LayerControlPanel.ts
View file

@ -11,7 +11,7 @@ export default class LayerControlPanel extends UIElement {
private readonly _panel: UIElement;
constructor() {
constructor(onClose: () => void) {
super();
let layerControlPanel: UIElement = new FixedUiElement("");
if (State.state.layoutToUse.data.enableBackgroundLayerSelection) {
@ -31,7 +31,9 @@ export default class LayerControlPanel extends UIElement {
const title =Translations.t.general.layerSelection.title.SetClass("featureinfobox-title")
this._panel = new ScrollableFullScreen(title, layerControlPanel);
this._panel = new ScrollableFullScreen(title, layerControlPanel, () => {
onClose
});
}
InnerRender(): string {

14
UI/BigComponents/SimpleAddUI.ts
View file

@ -37,7 +37,7 @@ export default class SimpleAddUI extends UIElement {
private readonly goToInboxButton: UIElement = new SubtleButton(Svg.envelope_ui(),
Translations.t.general.goToInbox, {url: "https://www.openstreetmap.org/messages/inbox", newTab: false});
constructor() {
constructor(onClose: () => void) {
super(State.state.locationControl.map(loc => loc.zoom));
const self = this;
this.ListenTo(Locale.language);
@ -61,17 +61,17 @@ export default class SimpleAddUI extends UIElement {
this.openLayerControl = new SubtleButton(Svg.layers_ui(),
Translations.t.general.add.openLayerControl
).onClick(() => {
State.state.fullScreenMessage.setData(undefined);
State.state.layerControlIsOpened.setData(true);
})
this._component = new ScrollableFullScreen(
Translations.t.general.add.title,
this.CreateContent(),
onClose
);
}
InnerRender(): string {
this._component = new ScrollableFullScreen(
Translations.t.general.add.title,
this.CreateContent()
)
return this._component.Render();
}

2
UI/CustomGenerator/AllLayersPanel.ts
View file

@ -68,7 +68,7 @@ export default class AllLayersPanel extends UIElement {
const layer = config.layers[i];
if (typeof layer !== "string") {
try {
const iconTagRendering = new TagRenderingConfig(layer.icon, undefined, "icon")
const iconTagRendering = new TagRenderingConfig(layer["icon"], undefined, "icon")
const icon = iconTagRendering.GetRenderValue({"id": "node/-1"}).txt;
return `<img src='${icon}'>`
} catch (e) {

5
UI/Popup/FeatureInfoBox.ts
View file

@ -16,7 +16,8 @@ export default class FeatureInfoBox extends UIElement {
constructor(
tags: UIEventSource<any>,
layerConfig: LayerConfig
layerConfig: LayerConfig,
onClose: () => {}
) {
super();
if (layerConfig === undefined) {
@ -60,7 +61,7 @@ export default class FeatureInfoBox extends UIElement {
new Combine([title, titleIcons]).SetClass("featureinfobox-titlebar-title")
])
this._component = new ScrollableFullScreen(titleBar, content)
this._component = new ScrollableFullScreen(titleBar, content, onClose)
}
InnerRender(): string {

2
UI/ShowDataLayer.ts
View file

@ -126,7 +126,7 @@ export default class ShowDataLayer {
const tags = State.state.allElements.getEventSourceFor(feature);
const uiElement: LazyElement = new LazyElement(() => new FeatureInfoBox(tags, layer),
const uiElement: LazyElement = new LazyElement(() => new FeatureInfoBox(tags, layer, () => popup.closePopup()),
"<div style='height: 90vh'>Rendering</div>");
popup.setContent(uiElement.Render());
popup.on('remove', () => {

17
css/mobile.css
View file

@ -20,17 +20,6 @@ Contains tweaks for small screens
display: none !important;
}
#messagesbox {
display: none;
background-color: var(--background-color);
color: var(--foreground-color);
}
#help-button-mobile{
display: unset;
pointer-events: all;
}
#help-button-mobile div {
box-shadow: 0 0 10px #0006;
margin-bottom: 10px;
@ -39,12 +28,6 @@ Contains tweaks for small screens
#geolocate-button {
display: block;
}
.leaflet-popup {
/* On mobile, the popups are shown as a full-screen element */
display: none;
visibility: hidden;
}
#centermessage {
top: 30%;

14
css/tagrendering.css
View file

@ -4,11 +4,6 @@
flex-direction: column;
}
.featureinfobox-title {
font-size: xx-large;
word-break: break-word;
}
.featureinfobox-icons img {
max-height: 1.5em;
width: 1.5em;
@ -63,15 +58,6 @@
}
.featureinfobox-content {
display: block;
max-height: 75vh;
overflow-y: auto;
padding-top: 1em;
width:100%;
overflow-x: hidden;
}
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
.featureinfobox-content {
display: block;

4
index.css
View file

@ -82,9 +82,7 @@ a {
}
#help-button-mobile {
display: none;
}
#layer-selection {
position: absolute;