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

Further theme tweaks, attempts to optimize

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-11-15 00:27:55 +01:00
parent c86f4e4aff
commit 9978879536
8 changed files with 62 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
InitUiElements.ts
View file

@ -475,7 +475,7 @@ export class InitUiElements {
throw "Layer " + layer + " was not substituted";
}
const generateInfo = (tagsES, feature) => {
const generateInfo = (tagsES) => {
return new FeatureInfoBox(
tagsES,

17
Logic/FilteredLayer.ts
View file

@ -124,12 +124,8 @@ export class FilteredLayer {
})
}
static fromDefinition(
definition,
showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement):
FilteredLayer {
return new FilteredLayer(
definition, showOnPopup);
static fromDefinition(definition, showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement): FilteredLayer {
return new FilteredLayer(definition, showOnPopup);
}
@ -239,7 +235,7 @@ export class FilteredLayer {
}
// The data is split in two parts: the poinst and the rest
// The data is split in two parts: the point and the rest
// The points get a special treatment in order to render them properly
// Note that some features might get a point representation as well
@ -326,20 +322,23 @@ export class FilteredLayer {
eventSource.addCallback(updateStyle);
function openPopup(e) {
State.state.selectedElement.setData({feature: feature});
updateStyle()
if (feature.geometry.type === "Point") {
State.state.selectedElement.setData({feature: feature});
return; // Points bind there own popups
}
const uiElement = self._showOnPopup(eventSource, feature);
L.popup({
autoPan: true,
}).setContent(uiElement.Render())
.setLatLng(e.latlng)
.openOn(State.state.bm.map);
uiElement.Update();
State.state.selectedElement.setData({feature: feature});
if (e) {
L.DomEvent.stop(e); // Marks the event as consumed
}

48
UI/FullScreenMessageBoxHandler.ts
View file

@ -10,41 +10,19 @@ export class FullScreenMessageBox extends UIElement {
private static readonly _toTheMap_height : string = "5em";
private _uielement: UIElement;
private readonly returnToTheMap: UIElement;
constructor(onClear: (() => void)) {
super(State.state.fullScreenMessage);
const self = this;
State.state.fullScreenMessage.addCallbackAndRun(uiElement => {
this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
"display:block;"+
"padding: 1em;"+
"padding-bottom:6em;"+
`margin-bottom:${FullScreenMessageBox._toTheMap_height};`+
"box-sizing:border-box;"+
`height:calc(100vh - ${FullScreenMessageBox._toTheMap_height});`+
"overflow-y: auto;" +
"max-width:100vw;" +
"overflow-x:hidden;" +
"background:var(--background-color);" +
"color: var(--foreground-color);"
);
});
this.HideOnEmpty(true);
State.state.fullScreenMessage.addCallback(latestData => {
if (latestData === undefined) {
State.state.fullScreenMessage.addCallbackAndRun(uiElement => {
if (uiElement === undefined) {
location.hash = "";
} else {
// The 'hash' makes sure a new piece of history is added. This makes the 'back-button' on android remove the popup
location.hash = "#element";
}
this.Update();
})
});
if (window !== undefined) {
window.onhashchange = function () {
@ -57,6 +35,7 @@ export class FullScreenMessageBox extends UIElement {
}
}
const self = this;
this.returnToTheMap =
new Combine([Translations.t.general.returnToTheMap.Clone().SetStyle("font-size:xx-large")])
.SetStyle("background:#7ebc6f;" +
@ -88,7 +67,24 @@ export class FullScreenMessageBox extends UIElement {
if (State.state.fullScreenMessage.data === undefined) {
return "";
}
return new Combine([this._uielement, this.returnToTheMap])
const el = document.getElementById(this.id);
console.warn(el, el.style.display);
const uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
"display:block;" +
"padding: 1em;" +
"padding-bottom:6em;" +
`margin-bottom:${FullScreenMessageBox._toTheMap_height};` +
"box-sizing:border-box;" +
`height:calc(100vh - ${FullScreenMessageBox._toTheMap_height});` +
"overflow-y: auto;" +
"max-width:100vw;" +
"overflow-x:hidden;" +
"background:var(--background-color);" +
"color: var(--foreground-color);"
);
return new Combine([uielement, this.returnToTheMap])
.Render();
}

1
UI/Popup/FeatureInfoBox.ts
View file

@ -40,6 +40,7 @@ export class FeatureInfoBox extends UIElement {
}
InnerRender(): string {
console.error("Inner rendering infobox for ", this._tags.data.id, this.id)
return new Combine([
new Combine([this._title, this._titleIcons])
.SetClass("featureinfobox-titlebar"),

1
Utils.ts
View file

@ -164,6 +164,7 @@ export class Utils {
link.href = location;
link.media = 'all';
head.appendChild(link);
console.log("Added custom layout ",location)
}
}

4
assets/themes/surveillance_cameras/custom_theme.css
View file

@ -1,6 +1,6 @@
html {
--subtle-detail-color: #070 !important;
--subtle-detail-color-contrast: #white !important;
--subtle-detail-color: #2c2 !important;
--subtle-detail-color-contrast: white !important;
--popup-border: #00ff00 !important;
--catch-detail-color: #00ff00 !important;
--catch-detail-color-contrast: black !important;

7
assets/themes/surveillance_cameras/surveillance_cameras.json
View file

@ -245,7 +245,12 @@
"color": {
"render": "#00f"
},
"presets": [],
"presets": [
{
"tags": ["man_made=surveillance","surveillance:type=camera"],
"title": "Surveillance camera"
}
],
"wayHandling": 2
}
],

18
index.css
View file

@ -19,6 +19,9 @@ html, body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
a {
color: var(--foreground-color)
}
svg {
fill: var(--foreground-color) !important;
@ -38,7 +41,6 @@ svg path {
.leaflet-popup-content-wrapper {
background-color: var(--background-color);
color: var(--foreground-color);
border: 2px solid var(--popup-border);
box-shadow: 0 3px 14px var(--shadow-color) !important;
}
@ -47,6 +49,12 @@ svg path {
background-color: var(--background-color) !important;
}
.leaflet-popup-tip {
background-color: var(--popup-border) !important;
color: var(--popup-border) !important;
box-shadow: 0 3px 14px var(--shadow-color) !important;
}
#geolocate-button {
position: absolute;
bottom: 25px;
@ -92,7 +100,7 @@ svg path {
display: block;
width: 2em;
height: 2em;
padding: 1em;
padding: 0.75em;
}
/**************** GENERIC ****************/
@ -284,9 +292,9 @@ svg path {
background: var(--subtle-detail-color);
color: var(--foreground-color);
height: 4em;
width: 4em;
padding: 1em;
height: 3.5em;
width: 3.5em;
padding: 0.75em;
border-radius: 1em;
}