From cd548ab04b8051262b2bf85cde70deb3ac70121a Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Fri, 20 Nov 2020 14:00:37 +0100 Subject: [PATCH] Add Fietsambassade logo to cyclofix; various svg- and css fixes --- Customizations/JSON/LayerConfig.ts | 2 +- InitUiElements.ts | 1 - Logic/FilteredLayer.ts | 4 +- State.ts | 2 +- Svg.ts | 9 +- UI/Popup/EditableTagRendering.ts | 2 +- UI/Popup/FeatureInfoBox.ts | 10 +- .../bike_repair_station.json | 8 ++ assets/layers/bike_shop/bike_shop.json | 102 +++++++++++++----- .../{repair_station.svg => tools.svg} | 0 .../cycling_themed_objects.json | 13 +-- assets/questions/questions.json | 39 +++++-- assets/svg/ampersand.svg | 2 +- assets/svg/phone.svg | 59 ++++++++++ .../cyclofix/fietsambassade_gent_logo.svg | 1 + .../fietsambassade_gent_logo_small.svg | 82 ++++++++++++++ css/tagrendering.css | 31 ++++++ index.css | 5 +- package.json | 4 +- test.ts | 2 +- test/Tag.spec.ts | 13 ++- 21 files changed, 332 insertions(+), 59 deletions(-) rename assets/layers/bike_shop/{repair_station.svg => tools.svg} (100%) create mode 100644 assets/svg/phone.svg create mode 100644 assets/themes/cyclofix/fietsambassade_gent_logo.svg create mode 100644 assets/themes/cyclofix/fietsambassade_gent_logo_small.svg diff --git a/Customizations/JSON/LayerConfig.ts b/Customizations/JSON/LayerConfig.ts index 6e14be6..faa7ac5 100644 --- a/Customizations/JSON/LayerConfig.ts +++ b/Customizations/JSON/LayerConfig.ts @@ -100,7 +100,7 @@ export default class LayerConfig { } this.tagRenderings = trs(json.tagRenderings).concat(roamingRenderings); - this.titleIcons = trs(json.titleIcons ?? ["wikipedialink","osmlink"]); + this.titleIcons = trs(json.titleIcons ?? ["phonelink","wikipedialink","osmlink"]); function tr(key, deflt) { diff --git a/InitUiElements.ts b/InitUiElements.ts index 551704c..ad04884 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -230,7 +230,6 @@ export class InitUiElements { }); const marker = L.marker([home.lat, home.lon], {icon: icon}) marker.addTo(State.state.bm.map) - console.log(marker) }); new GeoLocationHandler() diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index c978185..a9f2302 100644 --- a/Logic/FilteredLayer.ts +++ b/Logic/FilteredLayer.ts @@ -184,7 +184,9 @@ export class FilteredLayer { if (feature.properties.id.replace(/\//g, "_") === Hash.Get().data) { const center = GeoOperations.centerpoint(feature).geometry.coordinates; popup.setLatLng({lat: center[1], lng: center[0]}); - popup.openOn(State.state.bm.map) + popup.openOn(State.state.bm.map); + State.state.selectedElement.setData(feature); + uiElement.Update(); } } diff --git a/State.ts b/State.ts index ec61047..b96bee9 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.0"; + public static vNumber = "0.2.1c"; // The user journey states thresholds when a new feature gets unlocked public static userJourney = { diff --git a/Svg.ts b/Svg.ts index fbcbcdd..4fcddce 100644 --- a/Svg.ts +++ b/Svg.ts @@ -14,7 +14,7 @@ export default class Svg { public static addSmall_svg() { return new FixedUiElement(Svg.addSmall);} public static addSmall_ui() { return new FixedUiElement(Svg.addSmall_img);} - public static ampersand = "e image/svg+xml " + public static ampersand = " image/svg+xml " public static ampersand_img = Img.AsImageElement(Svg.ampersand) public static ampersand_svg() { return new FixedUiElement(Svg.ampersand);} public static ampersand_ui() { return new FixedUiElement(Svg.ampersand_img);} @@ -174,6 +174,11 @@ export default class Svg { public static pencil_svg() { return new FixedUiElement(Svg.pencil);} public static pencil_ui() { return new FixedUiElement(Svg.pencil_img);} + public static phone = " image/svg+xml " + public static phone_img = Img.AsImageElement(Svg.phone) + public static phone_svg() { return new FixedUiElement(Svg.phone);} + public static phone_ui() { return new FixedUiElement(Svg.phone_img);} + public static pop_out = " Svg Vector Icons : http://www.onlinewebfonts.com/icon " public static pop_out_img = Img.AsImageElement(Svg.pop_out) public static pop_out_svg() { return new FixedUiElement(Svg.pop_out);} @@ -219,4 +224,4 @@ export default class Svg { public static wikipedia_svg() { return new FixedUiElement(Svg.wikipedia);} public static wikipedia_ui() { return new FixedUiElement(Svg.wikipedia_img);} -public static All = {"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"close.svg": Svg.close,"compass.svg": Svg.compass,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapillary.svg": Svg.mapillary,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"search.svg": Svg.search,"share.svg": Svg.share,"star.svg": Svg.star,"statistics.svg": Svg.statistics,"up.svg": Svg.up,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};} +public static All = {"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"close.svg": Svg.close,"compass.svg": Svg.compass,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapillary.svg": Svg.mapillary,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"search.svg": Svg.search,"share.svg": Svg.share,"star.svg": Svg.star,"statistics.svg": Svg.statistics,"up.svg": Svg.up,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};} diff --git a/UI/Popup/EditableTagRendering.ts b/UI/Popup/EditableTagRendering.ts index ea61c89..0481eef 100644 --- a/UI/Popup/EditableTagRendering.ts +++ b/UI/Popup/EditableTagRendering.ts @@ -33,7 +33,7 @@ export default class EditableTagRendering extends UIElement { this.dumbMode = false; if (this._configuration.question !== undefined) { - if (State.state.featureSwitchUserbadge.data) { + if (State.state?.featureSwitchUserbadge?.data) { // 2.3em total width const self = this; this._editButton = diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts index 9a669dc..7c1ac0b 100644 --- a/UI/Popup/FeatureInfoBox.ts +++ b/UI/Popup/FeatureInfoBox.ts @@ -44,9 +44,13 @@ export class FeatureInfoBox extends UIElement { return new Combine([ new Combine([this._title, this._titleIcons]) .SetClass("featureinfobox-titlebar"), - ...this._renderings, - this._questionBox, - ]).Render(); + new Combine([ + ...this._renderings, + this._questionBox + ] + ).SetClass("featureinfobox-content"), + ]).SetClass("featureinfobox") + .Render(); } } diff --git a/assets/layers/bike_repair_station/bike_repair_station.json b/assets/layers/bike_repair_station/bike_repair_station.json index 4089160..daa1e3d 100644 --- a/assets/layers/bike_repair_station/bike_repair_station.json +++ b/assets/layers/bike_repair_station/bike_repair_station.json @@ -89,6 +89,14 @@ } ] }, + "titleIcons": [ + { + "render": "", + "condition": "operator=De Fietsambassade Gent" + }, + "wikipedialink", + "osmlink" + ], "tagRenderings": [ "images", { diff --git a/assets/layers/bike_shop/bike_shop.json b/assets/layers/bike_shop/bike_shop.json index 613e5a6..1a93146 100644 --- a/assets/layers/bike_shop/bike_shop.json +++ b/assets/layers/bike_shop/bike_shop.json @@ -12,6 +12,13 @@ "#": "We select all bicycle shops, sport shops (but we try to weed out non-bicycle related shops), and any shop with a bicycle related tag", "or": [ "shop=bicycle", + { + "#": "A bicycle rental with a network is something such as villo, bluebike, ... We don't want them", + "and": [ + "amenity=bicycle_rental", + "network=" + ] + }, { "#": "if sport is defined and is not bicycle, it is retrackted; if bicycle retail/repair is marked as 'no', it is retracted too.", "##": "There will be a few false-positives with this. They will get filtered out by people marking both 'not selling bikes' and 'not repairing bikes'. Furthermore, the OSMers will add a sports-subcategory on it", @@ -68,7 +75,12 @@ } }, { - "if": "shop!~bicycle", + "if": { + "and": [ + "shop!~bicycle", + "shop~*" + ] + }, "then": "Other shop" }, { @@ -127,6 +139,23 @@ "de": "Fahrradgeschäft" } }, + { + "if": { + "and": [ + "name~*", + { + "or": [ + "service:bicycle:rental=yes", + "amenity=bicycle_rental" + ] + } + ] + }, + "then": { + "nl": "Fietsverhuur {name}", + "en": "Bicycle rental {name}" + } + }, { "if": "name~*", "then": { @@ -141,37 +170,34 @@ }, "titleIcons": [ { - "mappings": [ - { - "if": "service:bicycle:pump=yes", - "then": "" - } - ] + "render": "", + "condition": "operator=De Fietsambassade Gent" }, { - "mappings": [ - { - "if": "service:bicycle:diy=yes", - "then": "" - } - ] + "condition": { + "or": [ + "service:bicycle:pump=yes", + "service:bicycle:pump=seperate" + ] + }, + "render": "" }, { - "mappings": [ - { - "if": { - "or": [ - "service:bicycle:cleaning=yes", - "service:bicycle:cleaning=diy" - ] - }, - "then": "" - } - ] + "condition": "service:bicycle:diy=yes", + "render": "" }, + { + "condition": { + "or": [ + "service:bicycle:cleaning=yes", + "service:bicycle:cleaning=diy" + ] + }, + "render": "" + }, + "phonelink", "wikipedialink", "osmlink" - ], "description": { "en": "A shop specifically selling bicycles or related items", @@ -182,6 +208,7 @@ { "condition": { "and": [ + "shop~*", "shop!~bicycle", "shop!~sports" ] @@ -257,6 +284,13 @@ "type": "opening_hours" } }, + "description", + { + "render": "Enkel voor {access}", + "freeform": { + "key": "access" + } + }, { "question": { "en": "Does this shop sell bikes?", @@ -439,6 +473,13 @@ "gl": "Esta tenda non ofrece unha bomba de ar para uso de calquera persoa", "de": "Dieses Geschäft bietet für niemanden eine Fahrradpumpe an" } + }, + { + "if": "service:bicycle:pump=seperate", + "then": { + "en": "There is bicycle pump, it is shown as a seperate point ", + "nl": "Er is een fietspomp, deze is apart aangeduid" + } } ] }, @@ -470,6 +511,13 @@ "gl": "Non hai ferramentas aquí para arranxar a túa propia bicicleta", "de": "Dieses Geschäft bietet keine Werkzeuge für Heimwerkerreparaturen an" } + }, + { + "if": "service:bicycle:diy=only_sold", + "then": { + "en": "Tools for DIY repair are only available if you bought/hire the bike in the shop", + "nl": "Het gereedschap aan om je fiets zelf te herstellen is enkel voor als je de fiets er kocht of huurt" + } } ] }, @@ -521,6 +569,10 @@ "icon": { "render": "./assets/layers/bike_shop/repair_shop.svg", "mappings": [ + { + "if": "operator=De Fietsambassade Gent", + "then": "./assets/themes/cyclofix/fietsambassade_gent_logo_small.svg" + }, { "if": "service:bicycle:retail=yes", "then": "./assets/layers/bike_shop/shop.svg" diff --git a/assets/layers/bike_shop/repair_station.svg b/assets/layers/bike_shop/tools.svg similarity index 100% rename from assets/layers/bike_shop/repair_station.svg rename to assets/layers/bike_shop/tools.svg diff --git a/assets/layers/cycling_themed_object/cycling_themed_objects.json b/assets/layers/cycling_themed_object/cycling_themed_objects.json index 2f4be6e..7e57106 100644 --- a/assets/layers/cycling_themed_object/cycling_themed_objects.json +++ b/assets/layers/cycling_themed_object/cycling_themed_objects.json @@ -7,7 +7,7 @@ "de": "Mit Fahrrad zusammenhängendes Objekt" }, "minzoom": 13, - "overpassTags": "theme~cycling|bicycle", + "overpassTags": {"or": ["theme~cycling|bicycle", "sport=cycling"]}, "title": { "render": { "en": "Bike related object", @@ -18,12 +18,13 @@ "mappings": [ { "if": "name~*", + "then":"{name}" + }, + { + "if": "leisure=track", "then": { - "en": "{name}", - "nl": "{name}", - "fr": "{name}", - "gl": "{name}", - "de": "{name}" + "nl": "Wielerpiste", + "en": "Cycle track" } } ] diff --git a/assets/questions/questions.json b/assets/questions/questions.json index 2595eab..6d34f7e 100644 --- a/assets/questions/questions.json +++ b/assets/questions/questions.json @@ -5,17 +5,40 @@ "osmlink": { "render": "", - "mappings":[{ - "if": "id~=-", - "then": "Uploading..." - }] + "mappings": [ + { + "if": "id~=-", + "then": "Uploading..." + } + ] }, - "wikipedialink": { - "render": "WP", - "condition": "wikipedia~*" + "render": "WP", + "condition": "wikipedia~*" + }, + "phonelink": { + "render": "", + "condition": "phone~*" + }, + "description": { + "question": { + "nl": "Zijn er extra zaken die je niet in de bovenstaande vragen kwijt kon? Zet deze in de descriptionHerhaal geen antwoorden die je reeds gaf", + "en": "Is there still something relevant you couldn't give in the previous questions? Add it here.
Don't repeat already stated facts" + }, + "render": "{description}", + "freeform": { + "key": "description" + }, + "mappings": [ + { + "if": "description=", + "then": { + "nl": "Geen extra beschrijving", + "en": "No extra description" + } + } + ] }, - "website": { "question": { "en": "What is the website of {name}?", diff --git a/assets/svg/ampersand.svg b/assets/svg/ampersand.svg index f2df861..525a1ef 100644 --- a/assets/svg/ampersand.svg +++ b/assets/svg/ampersand.svg @@ -1,4 +1,4 @@ -e + + + + + + image/svg+xml + + + + + + + + + + diff --git a/assets/themes/cyclofix/fietsambassade_gent_logo.svg b/assets/themes/cyclofix/fietsambassade_gent_logo.svg new file mode 100644 index 0000000..53c3aef --- /dev/null +++ b/assets/themes/cyclofix/fietsambassade_gent_logo.svg @@ -0,0 +1 @@ +Lg_fietsambassade_Q_blauw_neg \ No newline at end of file diff --git a/assets/themes/cyclofix/fietsambassade_gent_logo_small.svg b/assets/themes/cyclofix/fietsambassade_gent_logo_small.svg new file mode 100644 index 0000000..9835e74 --- /dev/null +++ b/assets/themes/cyclofix/fietsambassade_gent_logo_small.svg @@ -0,0 +1,82 @@ + + + + + + image/svg+xml + + + + + + + + + + + + Lg_fietsambassade_Q_blauw_neg + + + diff --git a/css/tagrendering.css b/css/tagrendering.css index aa82b69..8026491 100644 --- a/css/tagrendering.css +++ b/css/tagrendering.css @@ -1,12 +1,23 @@ + +.featureinfobox { + display: flex; + flex-direction: column; +} + .featureinfobox-title { font-size: xx-large; } .featureinfobox-icons img{ max-height: 1.5em; + width:1.5em; } .featureinfobox-icons { } +.featureinfobox-icons span { + display: inline-block; +} + .featureinfobox-titlebar{ font-size: large; font-weight: bold; @@ -14,6 +25,20 @@ justify-content: space-between; } +.featureinfobox-content { + display:block; + max-height: 75vh; + overflow-y: auto; +} +@media only screen and (max-width: 600px), only screen and (max-height: 600px) { + .featureinfobox-content { + display:block; + max-height: unset !important; + overflow-y: auto; + } +} + + .answer { display: flex; width: 100%; @@ -43,6 +68,12 @@ height: 100%; } +.question a { + pointer-events: none; + text-decoration: none; + color: var(--subtle-detail-color-contrast) +} + .question-text { font-size: larger; font-weight: bold; diff --git a/index.css b/index.css index 8afce07..3e26358 100644 --- a/index.css +++ b/index.css @@ -408,10 +408,7 @@ a { } .leaflet-popup-content { - width: 40em !important; - max-height: 80vh; - overflow-y: auto; - overflow-x: hidden; + width: 45em !important; } .leaflet-div-icon { diff --git a/package.json b/package.json index 9de3284..1d87f57 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "staticPath": [ { "staticPath": "tiles/", - "staticOutDir": "./tiles/" + "staticOutDir": "tiles/" } ] }, @@ -24,7 +24,7 @@ "build": "rm -rf dist/ && npm run generate && parcel build --public-url ./ *.html assets/** assets/**/** assets/**/**/** vendor/* vendor/*/*", "prepare-deploy": "npm run generate && npm run build && rm -rf .cache", "deploy:staging": "npm run prepare-deploy && rm -rf /home/pietervdvn/git/pietervdvn.github.io/Staging/* && cp -r dist/* /home/pietervdvn/git/pietervdvn.github.io/Staging/ && cd /home/pietervdvn/git/pietervdvn.github.io/ && git add * && git commit -m 'New MapComplete Version' && git push && cd - && npm run clean", - "deploy:production": "npm run prepare-deploy && npm run optimize-images && rm -rf /home/pietervdvn/git/pietervdvn.github.io/MapComplete/* && cp -r dist/* /home/pietervdvn/git/pietervdvn.github.io/MapComplete/ && cd /home/pietervdvn/git/pietervdvn.github.io/ && git add * && git commit -m 'New MapComplete Version' && git push && cd - && npm run clean", + "deploy:production": "rm -rf ./assets/generated && npm run prepare-deploy && npm run optimize-images && rm -rf /home/pietervdvn/git/pietervdvn.github.io/MapComplete/* && cp -r dist/* /home/pietervdvn/git/pietervdvn.github.io/MapComplete/ && cd /home/pietervdvn/git/pietervdvn.github.io/ && git add * && git commit -m 'New MapComplete Version' && git push && cd - && npm run clean", "clean": "rm -rf .cache/ && (find *.html | grep -v \"\\(index\\|land\\|test\\|preferences\\|customGenerator\\).html\" | xargs rm) && (find *.webmanifest | xargs rm)" diff --git a/test.ts b/test.ts index 1a50ef3..87cb971 100644 --- a/test.ts +++ b/test.ts @@ -6,7 +6,7 @@ import {UIEventSource} from "./Logic/UIEventSource"; import {VariableUiElement} from "./UI/Base/VariableUIElement"; const d = new UIEventSource("90"); -new Direction(d, [51.21576,3.22001]).AttachTo("maindiv") +new Direction(d).AttachTo("maindiv") new VariableUiElement(d.map(d => "" + d + "°")).AttachTo("extradiv") UIEventSource.Chronic(25, () => { diff --git a/test/Tag.spec.ts b/test/Tag.spec.ts index 9544c43..0237eab 100644 --- a/test/Tag.spec.ts +++ b/test/Tag.spec.ts @@ -1,6 +1,7 @@ import {UIElement} from "../UI/UIElement"; UIElement.runningFromConsole = true; - +import {Img} from "../UI/Img"; +Img.runningFromConsole = true; import {equal} from "assert"; import T from "./TestHelper"; import {FromJSON} from "../Customizations/JSON/FromJSON"; @@ -17,7 +18,6 @@ import {Utils} from "../Utils"; import {Translation} from "../UI/i18n/Translation"; - new T([ ["Tag replacement works in translation", () => { const tr = new Translation({ @@ -35,6 +35,15 @@ new T([ equal((and.and[0] as Tag).key, "key"); equal((and.and[1] as Tag).value, "y"); + + const notReg = FromJSON.Tag("x!~y") as And; + equal(notReg.matches([{k:"x",v:"y"}]), false) + equal(notReg.matches([{k:"x",v:"z"}]), true) + equal(notReg.matches([{k:"x",v:""}]), true) + + equal(notReg.matches([]), true) + + })], ["Is equivalent test", (() => {