From 78827474243e3b01cde94085f5b8661bf7ae03b3 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Wed, 29 Jul 2020 16:05:02 +0200 Subject: [PATCH 1/2] Add feature switches to layouts, add option to remove a layout from more-screen --- Customizations/Layout.ts | 7 +++++++ Customizations/Layouts/All.ts | 1 + Customizations/Layouts/GRB.ts | 1 + Customizations/Layouts/StreetWidth.ts | 4 ++++ InitUiElements.ts | 1 + UI/MoreScreen.ts | 4 +--- index.ts | 9 ++++----- 7 files changed, 19 insertions(+), 8 deletions(-) diff --git a/Customizations/Layout.ts b/Customizations/Layout.ts index 2062787..e4a6f75 100644 --- a/Customizations/Layout.ts +++ b/Customizations/Layout.ts @@ -31,6 +31,13 @@ export class Layout { public startLat: number; public locationContains: string[]; + + public enableAdd: boolean = true; + public enableUserBadge: boolean = true; + public enableSearch: boolean = true; + public enableLayers: boolean = true; + + public hideFromOverview : boolean = false; /** * diff --git a/Customizations/Layouts/All.ts b/Customizations/Layouts/All.ts index 54065b4..a3e0aeb 100644 --- a/Customizations/Layouts/All.ts +++ b/Customizations/Layouts/All.ts @@ -15,5 +15,6 @@ export class All extends Layout{ "Please log in", "" ); + this.hideFromOverview = true; } } \ No newline at end of file diff --git a/Customizations/Layouts/GRB.ts b/Customizations/Layouts/GRB.ts index 21ba2ab..9efafb9 100644 --- a/Customizations/Layouts/GRB.ts +++ b/Customizations/Layouts/GRB.ts @@ -18,5 +18,6 @@ export class GRB extends Layout { , "", ""); + this.hideFromOverview = true; } } \ No newline at end of file diff --git a/Customizations/Layouts/StreetWidth.ts b/Customizations/Layouts/StreetWidth.ts index 7ad592c..da09971 100644 --- a/Customizations/Layouts/StreetWidth.ts +++ b/Customizations/Layouts/StreetWidth.ts @@ -87,6 +87,10 @@ export class StreetWidth extends Layout{ "
  • Voorzie in elke straat enkele parkeerplaatsen voor kortparkeren. Zo kunnen leveringen, iemand afzetten,... gebeuren zonder dat er een fietspad of een straat geblokkeerd wordt
    • " + ""); this.icon = "assets/bug.svg"; + this.enableSearch = false; + this.enableUserBadge = false; + this.enableAdd = false; + this.hideFromOverview = true; } } \ No newline at end of file diff --git a/InitUiElements.ts b/InitUiElements.ts index e878540..7d20c4c 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -69,6 +69,7 @@ export class InitUiElements { new FixedUiElement(`
    help
    `).onClick(() => { fullScreenMessage.setData(fullOptions2) }).AttachTo("help-button-mobile"); + } diff --git a/UI/MoreScreen.ts b/UI/MoreScreen.ts index fab85f8..81d6ad0 100644 --- a/UI/MoreScreen.ts +++ b/UI/MoreScreen.ts @@ -22,10 +22,8 @@ export class MoreScreen extends UIElement { const els: UIElement[] = [] for (const k in AllKnownLayouts.allSets) { - if (k === "all") { - continue; - } const layout = AllKnownLayouts.allSets[k] + if(layout.hideFromOverview){continue} const linkText = `https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon} diff --git a/index.ts b/index.ts index fdd57fc..ac9fc58 100644 --- a/index.ts +++ b/index.ts @@ -112,12 +112,11 @@ const lat = QueryParameters.GetQueryParameter("lat", "" + layoutToUse.startLat) const lon = QueryParameters.GetQueryParameter("lon", "" + layoutToUse.startLon) .syncWith(LocalStorageSource.Get("lon")); -const featureSwitchUserbadge = QueryParameters.GetQueryParameter("fs-userbadge", "true"); -const featureSwitchSearch = QueryParameters.GetQueryParameter("fs-search", "true"); +const featureSwitchUserbadge = QueryParameters.GetQueryParameter("fs-userbadge", ""+layoutToUse.enableUserBadge); +const featureSwitchSearch = QueryParameters.GetQueryParameter("fs-search", ""+layoutToUse.enableSearch); const featureSwitchWelcomeMessage = QueryParameters.GetQueryParameter("fs-welcome-message", "true"); -const featureSwitchLayers = QueryParameters.GetQueryParameter("fs-layers", "true"); -const featureSwitchEmbedded = QueryParameters.GetQueryParameter("fs-embedded", "true"); -const featureSwitchAddNew = QueryParameters.GetQueryParameter("fs-add-new", "true"); +const featureSwitchLayers = QueryParameters.GetQueryParameter("fs-layers", ""+layoutToUse.enableLayers); +const featureSwitchAddNew = QueryParameters.GetQueryParameter("fs-add-new", ""+layoutToUse.enableAdd); const featureSwitchIframe = QueryParameters.GetQueryParameter("fs-iframe", "false"); From 497d5c1b4964955b632eab6210079a28192b3b6f Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Wed, 29 Jul 2020 16:46:45 +0200 Subject: [PATCH 2/2] Add sublte-button, add different icon for popout --- UI/Base/SubtleButton.ts | 27 +++++++++++++++++++++++++++ UI/MoreScreen.ts | 35 +++++++++++++++++++---------------- assets/pop-out.svg | 7 +++++++ index.css | 9 +++++++-- index.ts | 5 +++-- 5 files changed, 63 insertions(+), 20 deletions(-) create mode 100644 UI/Base/SubtleButton.ts create mode 100644 assets/pop-out.svg diff --git a/UI/Base/SubtleButton.ts b/UI/Base/SubtleButton.ts new file mode 100644 index 0000000..444e71a --- /dev/null +++ b/UI/Base/SubtleButton.ts @@ -0,0 +1,27 @@ +import {UIElement} from "../UIElement"; +import Translations from "../i18n/Translations"; +import Combine from "./Combine"; + + +export class SubtleButton extends UIElement{ + private imageUrl: string; + private message: UIElement; + + constructor(imageUrl: string, message: string | UIElement) { + super(undefined); + this.message = Translations.W(message); + this.imageUrl = imageUrl; + + } + + InnerRender(): string { + return new Combine([ + '', + ``, + this.message, + '' + ]).Render(); + } + + +} \ No newline at end of file diff --git a/UI/MoreScreen.ts b/UI/MoreScreen.ts index 81d6ad0..b7018b7 100644 --- a/UI/MoreScreen.ts +++ b/UI/MoreScreen.ts @@ -7,6 +7,8 @@ import {Utils} from "../Utils"; import {link} from "fs"; import {UIEventSource} from "./UIEventSource"; import {VariableUiElement} from "./Base/VariableUIElement"; +import Combine from "./Base/Combine"; +import {SubtleButton} from "./Base/SubtleButton"; export class MoreScreen extends UIElement { @@ -23,26 +25,27 @@ export class MoreScreen extends UIElement { const els: UIElement[] = [] for (const k in AllKnownLayouts.allSets) { const layout = AllKnownLayouts.allSets[k] - if(layout.hideFromOverview){continue} + if (layout.hideFromOverview) { + continue + } const linkText = - `https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon} - ` - const link = new FixedUiElement( - ` - - - -
    ${Utils.Upper(layout.name)}
    - ${Translations.W(layout.description).Render()}
    -     -     -` - ); + `https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon}` + const link = + new SubtleButton(layout.icon, + new Combine([ + ``, + "
    ", + "", + Translations.W(layout.title), + "", + "
    ", + Translations.W(layout.description), + "
    ", + "    " + ])); els.push(link) - - } diff --git a/assets/pop-out.svg b/assets/pop-out.svg new file mode 100644 index 0000000..6a4cad6 --- /dev/null +++ b/assets/pop-out.svg @@ -0,0 +1,7 @@ + + + + + Svg Vector Icons : http://www.onlinewebfonts.com/icon + + \ No newline at end of file diff --git a/index.css b/index.css index dfdc93d..57f8d4e 100644 --- a/index.css +++ b/index.css @@ -4,6 +4,11 @@ html, body { padding: 0; } +a { + text-decoration: unset; + color:unset; +} + body { font-family: 'Helvetica Neue', Arial, sans-serif; } @@ -1187,7 +1192,7 @@ form { /** Switch layout **/ -.switch-layout a{ +.subtle-button{ display: flex; flex-wrap: nowrap; flex-direction: row; @@ -1201,7 +1206,7 @@ form { } -.switch-layout a img{ +.subtle-button img{ width: 3em; max-height: 3em; margin-right: 0.5em; diff --git a/index.ts b/index.ts index ac9fc58..4af80da 100644 --- a/index.ts +++ b/index.ts @@ -320,8 +320,9 @@ InitUiElements.OnlyIf(featureSwitchWelcomeMessage, () => { InitUiElements.InitWelcomeMessage(layoutToUse, osmConnection, bm, fullScreenMessage) }); -if (window != window.top || featureSwitchIframe.data !== "false") { - new FixedUiElement(``).AttachTo("top-right") +if ((window != window.top && featureSwitchWelcomeMessage.data === "false") || featureSwitchIframe.data !== "false") { + console.log("WELCOME? ",featureSwitchWelcomeMessage.data) + new FixedUiElement(``).AttachTo("top-right") }