From 8383f482c7c50787d1fc30708c01ddf11c619a77 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Fri, 27 Nov 2020 13:39:00 +0100 Subject: [PATCH] More UI tweaks, fix bugs with new icon handling --- Customizations/JSON/LayerConfig.ts | 1 - Customizations/JSON/LayerConfigJson.ts | 10 ++++++++- State.ts | 2 +- UI/Popup/FeatureInfoBox.ts | 1 + UI/SimpleAddUI.ts | 7 +++--- UI/SpecialVisualizations.ts | 2 +- css/mobile.css | 4 +++- css/tagrendering.css | 31 ++++++++++++++++++++++++++ index.css | 31 +++++++++++++++++++++----- 9 files changed, 75 insertions(+), 14 deletions(-) diff --git a/Customizations/JSON/LayerConfig.ts b/Customizations/JSON/LayerConfig.ts index c2bbd3f..56221ac 100644 --- a/Customizations/JSON/LayerConfig.ts +++ b/Customizations/JSON/LayerConfig.ts @@ -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; diff --git a/Customizations/JSON/LayerConfigJson.ts b/Customizations/JSON/LayerConfigJson.ts index 3017882..29e2e13 100644 --- a/Customizations/JSON/LayerConfigJson.ts +++ b/Customizations/JSON/LayerConfigJson.ts @@ -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;` */ 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', ... diff --git a/State.ts b/State.ts index ae43966..9600625 100644 --- a/State.ts +++ b/State.ts @@ -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 = { diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts index 0e148f6..03eb19f 100644 --- a/UI/Popup/FeatureInfoBox.ts +++ b/UI/Popup/FeatureInfoBox.ts @@ -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); } diff --git a/UI/SimpleAddUI.ts b/UI/SimpleAddUI.ts index db1c600..0d84c83 100644 --- a/UI/SimpleAddUI.ts +++ b/UI/SimpleAddUI.ts @@ -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(tags), false).icon.html).SetClass("simple-add-ui-icon"); const csCount = State.state.osmConnection.userDetails.data.csCount; let tagInfo = ""; diff --git a/UI/SpecialVisualizations.ts b/UI/SpecialVisualizations.ts index 89d6b42..260786c 100644 --- a/UI/SpecialVisualizations.ts +++ b/UI/SpecialVisualizations.ts @@ -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) { diff --git a/css/mobile.css b/css/mobile.css index 344067b..9439ed8 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -98,4 +98,6 @@ Contains tweaks for small screens #userbadge { margin-bottom: 0.3em; } -} \ No newline at end of file +} + + diff --git a/css/tagrendering.css b/css/tagrendering.css index f725660..7ff98cb 100644 --- a/css/tagrendering.css +++ b/css/tagrendering.css @@ -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; diff --git a/index.css b/index.css index 6259763..ac3de5e 100644 --- a/index.css +++ b/index.css @@ -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 {