More UI tweaks, fix bugs with new icon handling

This commit is contained in:
Pieter Vander Vennet 2020-11-27 13:39:00 +01:00
parent 6299c8223e
commit 8383f482c7
9 changed files with 75 additions and 14 deletions

View file

@ -256,7 +256,6 @@ export default class LayerConfig {
html = new Combine([
(Svg.All[key] as string).replace(/stop-color:#000000/g, 'stop-color:' + color)
]).SetStyle(style)
.Render();
}
return html;

View file

@ -57,6 +57,12 @@ export interface LayerConfigJson {
/**
* The icon for an element.
* Note that this also doubles as the icon for this layer (rendered with the overpass-tags) ánd the icon in the presets.
*
* The result of the icon is rendered as follows:
* the resulting string is interpreted as a _list_ of items, seperated by ";". The bottommost layer is the first layer.
* As a result, on could use a generic pin, then overlay it with a specific icon.
* To make things even more practical, one can use all svgs from the folder "assets/svg" and _substitute the color_ in it.
* E.g. to draw a red pin, use "pin:#f00", to have a green circle with your icon on top, use `circle:#0f0;<path to my icon.svg>`
*/
icon?: string | TagRenderingConfigJson;
@ -65,8 +71,10 @@ export interface LayerConfigJson {
* The 'badge'-toggle changes their behaviour.
* If badge is set, it will be added as a 25% height icon at the bottom right of the icon, with all the badges in a flex layout.
* If badges is false, it'll be a simple overlay
*
* Note: strings are interpreted as icons, so layering and substituting is supported
*/
iconOverlays?: {if: AndOrTagConfigJson, then: string, badge?: boolean}[]
iconOverlays?: {if: string | AndOrTagConfigJson, then: string, badge?: boolean}[]
/**
* A string containing "width,height" or "width,height,anchorpoint" where anchorpoint is any of 'center', 'top', 'bottom', 'left', 'right', 'bottomleft','topright', ...

View file

@ -23,7 +23,7 @@ export default class State {
// The singleton of the global state
public static state: State;
public static vNumber = "0.2.2g";
public static vNumber = "0.2.3-rc1";
// The user journey states thresholds when a new feature gets unlocked
public static userJourney = {

View file

@ -36,6 +36,7 @@ export class FeatureInfoBox extends UIElement {
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)))
.SetClass("featureinfobox-icons");
this._renderings = layerConfig.tagRenderings.map(tr => new EditableTagRendering(tags, tr));
this._renderings[0]?.SetClass("first-rendering");
if (State.state.featureSwitchUserbadge.data) {
this._questionBox = new QuestionBox(tags, layerConfig.tagRenderings);
}

View file

@ -9,6 +9,7 @@ import State from "../State";
import {UIEventSource} from "../Logic/UIEventSource";
import Svg from "../Svg";
import {FixedUiElement} from "./Base/FixedUiElement";
/**
* Asks to add a feature at the last clicked location, at least if zoom is sufficient
@ -21,7 +22,7 @@ export class SimpleAddUI extends UIElement {
private _confirmPreset: UIEventSource<{
description: string | UIElement,
name: string | UIElement,
icon: string,
icon: UIElement,
tags: Tag[],
layerToAddTo: FilteredLayer
}>
@ -52,8 +53,8 @@ export class SimpleAddUI extends UIElement {
const presets = layer.layerDef.presets;
for (const preset of presets) {
let icon: string = layer.layerDef.icon.GetRenderValue(
TagUtils.KVtoProperties(preset.tags ?? [])).txt
const tags = TagUtils.KVtoProperties(preset.tags ?? []);
let icon: UIElement = new FixedUiElement(layer.layerDef.GenerateLeafletStyle(new UIEventSource<any>(tags), false).icon.html).SetClass("simple-add-ui-icon");
const csCount = State.state.osmConnection.userDetails.data.csCount;
let tagInfo = "";

View file

@ -58,7 +58,7 @@ export class SubstitutedTranslation extends UIElement {
for (const knownSpecial of SpecialVisualizations.specialVisualizations) {
// NOte: the '.*?' in the regex reads as 'any character, but in a non-greedy way'
// Note: the '.*?' in the regex reads as 'any character, but in a non-greedy way'
const matched = template.match(`(.*){${knownSpecial.funcName}\\((.*?)\\)}(.*)`);
if (matched != null) {

View file

@ -99,3 +99,5 @@ Contains tweaks for small screens
margin-bottom: 0.3em;
}
}

View file

@ -42,6 +42,37 @@
}
}
@media only screen and (max-height: 600px) {
/* landscape mode: the first tagrendering of the infobox gets a special treatment and is placed on the right*/
.featureinfobox-content {
position: relative;
width: 100% !important;
max-width: unset !important;
max-height: unset !important;
height: 100vh;
}
.answer {
max-width: 48% !important;
padding-right: 0.3em;
box-sizing: border-box;
}
.question {
max-width: 48% !important;
padding-right: 0.3em;
box-sizing: border-box;
}
.first-rendering{
position: absolute;
left: 50%;
width: 94%;
padding-right: 0.3em;
box-sizing: border-box;
}
}
.answer {
display: flex;

View file

@ -98,17 +98,36 @@ a {
.single-layer-selection-toggle{
position: relative;
width: 2.5em;
height: 2.5em;
width: 2em;
height: 2em;
}
.single-layer-selection-toggle img{
max-height: 2.5em !important;
max-width: 2.5em !important;
max-height: 2em !important;
max-width: 2em !important;
}
.single-layer-selection-toggle svg{
max-height:2.5em !important;
max-width: 2.5em !important;
max-height:2em !important;
max-width: 2em !important;
}
.simple-add-ui-icon{
position: relative;
display: block;
width: 3.5em;
height: 3.5em;
padding-right: 0.3em;
padding-left: 0.3em;
}
.simple-add-ui-icon img{
max-height:3.5em !important;
max-width: 3.5em !important;
}
.simple-add-ui-icon svg{
max-height:3.5em !important;
max-width: 3.5em !important;
}
.layer-selection-toggle {