From c7f33a9490d90f2864a86a7e54cea69b33ff8d1f Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Fri, 11 Sep 2020 19:14:32 +0200 Subject: [PATCH] Cleanup of the image carousel code and index.css code --- Customizations/AllKnownLayouts.ts | 2 - Customizations/JSON/FromJSON.ts | 2 +- Customizations/Layouts/Cyclofix.ts | 2 +- Logic/Osm/OsmConnection.ts | 2 +- Logic/PersonalLayersPanel.ts | 4 - UI/Image/ImageCarousel.ts | 105 ++++++++------ UI/ImageUploadFlow.ts | 60 ++++---- UI/i18n/Translations.ts | 12 ++ css/tabbedComponent.css | 57 ++++++++ index.css | 222 +---------------------------- index.html | 1 + index.ts | 4 +- test.html | 2 + test.ts | 33 ++--- 14 files changed, 190 insertions(+), 318 deletions(-) diff --git a/Customizations/AllKnownLayouts.ts b/Customizations/AllKnownLayouts.ts index 71b2dc1..f5a0a9d 100644 --- a/Customizations/AllKnownLayouts.ts +++ b/Customizations/AllKnownLayouts.ts @@ -3,7 +3,6 @@ import {Layout} from "./Layout"; import {Groen} from "./Layouts/Groen"; import Cyclofix from "./Layouts/Cyclofix"; import {StreetWidth} from "./Layouts/StreetWidth"; -import {GRB} from "./Layouts/GRB"; import {MetaMap} from "./Layouts/MetaMap"; import {Natuurpunt} from "./Layouts/Natuurpunt"; import {FromJSON} from "./JSON/FromJSON"; @@ -22,7 +21,6 @@ export class AllKnownLayouts { public static layoutsList: Layout[] = [ new PersonalLayout(), new Natuurpunt(), - new GRB(), new Cyclofix(), FromJSON.LayoutFromJSON(bookcases), FromJSON.LayoutFromJSON(aed), diff --git a/Customizations/JSON/FromJSON.ts b/Customizations/JSON/FromJSON.ts index c8e2520..67c7bb3 100644 --- a/Customizations/JSON/FromJSON.ts +++ b/Customizations/JSON/FromJSON.ts @@ -392,7 +392,7 @@ export class FromJSON { } ); - layer.maxAllowedOverlapPercentage = json.hideUnderlayingFeaturesMinPercentage; + layer.maxAllowedOverlapPercentage = json.hideUnderlayingFeaturesMinPercentage ?? 0; return layer; } diff --git a/Customizations/Layouts/Cyclofix.ts b/Customizations/Layouts/Cyclofix.ts index 614039d..902ec36 100644 --- a/Customizations/Layouts/Cyclofix.ts +++ b/Customizations/Layouts/Cyclofix.ts @@ -37,6 +37,6 @@ export default class Cyclofix extends Layout { this.icon = "./assets/bike/logo.svg" this.description = "Easily search and contribute bicycle data nearby"; this.socialImage = "./assets/bike/cyclofix.jpeg"; - this.widenFactor = 0.5; + this.widenFactor = 0.05; } } diff --git a/Logic/Osm/OsmConnection.ts b/Logic/Osm/OsmConnection.ts index 9ece8f6..2def74c 100644 --- a/Logic/Osm/OsmConnection.ts +++ b/Logic/Osm/OsmConnection.ts @@ -19,7 +19,7 @@ export class UserDetails { } export class OsmConnection { - + public auth; public userDetails: UIEventSource; private _dryRun: boolean; diff --git a/Logic/PersonalLayersPanel.ts b/Logic/PersonalLayersPanel.ts index 99fff61..1537aa8 100644 --- a/Logic/PersonalLayersPanel.ts +++ b/Logic/PersonalLayersPanel.ts @@ -37,10 +37,6 @@ export class PersonalLayersPanel extends UIElement { if (layout.id === PersonalLayout.NAME) { continue; } - if (layout.hideFromOverview && - State.state.osmConnection.userDetails.data.name !== "Pieter Vander Vennet") { - continue - } const header = new Combine([ diff --git a/UI/Image/ImageCarousel.ts b/UI/Image/ImageCarousel.ts index 412a42e..e568266 100644 --- a/UI/Image/ImageCarousel.ts +++ b/UI/Image/ImageCarousel.ts @@ -3,7 +3,6 @@ import {ImageSearcher} from "../../Logic/ImageSearcher"; import {SlideShow} from "../SlideShow"; import {FixedUiElement} from "../Base/FixedUiElement"; import {VariableUiElement} from "../Base/VariableUIElement"; -import {ConfirmDialog} from "../ConfirmDialog"; import {UIEventSource} from "../../Logic/UIEventSource"; import { Dependencies, @@ -12,8 +11,12 @@ import { } from "../../Customizations/UIElementConstructor"; import {State} from "../../State"; import Translation from "../i18n/Translation"; +import {CheckBox} from "../Input/CheckBox"; +import Combine from "../Base/Combine"; +import {OsmConnection} from "../../Logic/Osm/OsmConnection"; +import Translations from "../i18n/Translations"; -export class ImageCarouselConstructor implements TagDependantUIElementConstructor{ +export class ImageCarouselConstructor implements TagDependantUIElementConstructor { IsKnown(properties: any): boolean { return true; } @@ -46,12 +49,12 @@ export class ImageCarousel extends TagDependantUIElement { private readonly _uiElements: UIEventSource; private readonly _deleteButton: UIElement; - private readonly _isDeleted: UIElement; - - constructor(tags: UIEventSource) { + + constructor(tags: UIEventSource, osmConnection: OsmConnection = undefined) { super(tags); - + const self = this; + osmConnection = osmConnection ?? State.state?.osmConnection; this.searcher = new ImageSearcher(tags); this._uiElements = this.searcher.map((imageURLS: string[]) => { @@ -68,12 +71,17 @@ export class ImageCarousel extends TagDependantUIElement { new FixedUiElement("")).HideOnEmpty(true); - const showDeleteButton = this.slideshow._currentSlide.map((i) => { - if(!State.state.osmConnection.userDetails.data.loggedIn){ + const showDeleteButton = this.slideshow._currentSlide.map((i: number) => { + if (!osmConnection?.userDetails?.data?.loggedIn) { return false; } return self.searcher.IsDeletable(self.searcher.data[i]); - }, [this.searcher, State.state.osmConnection.userDetails]); + }, [this.searcher, osmConnection?.userDetails]); + + const isDeleted: UIEventSource = this.slideshow._currentSlide.map((i: number) => { + return self.searcher._deletedImages.data.indexOf(self.searcher.data[i]) >= 0; + }, [this.searcher, this.searcher._deletedImages]); + this.slideshow._currentSlide.addCallback(() => { showDeleteButton.ping(); // This pings the showDeleteButton, which indicates that it has to hide it's subbuttons }) @@ -84,43 +92,66 @@ export class ImageCarousel extends TagDependantUIElement { } - this._deleteButton = new ConfirmDialog(showDeleteButton, - "Afbeelding verwijderen", - "Afbeelding verwijderen", - "Terug", - deleteCurrent, - () => { }, - 'delete-image-confirm', - 'delete-image-cancel'); + const style = ";padding:0.4em;height:2em;padding: 0.4em; font-weight:bold;"; + const backButton = Translations.t.image.dontDelete + .SetStyle("background:black;border-radius:0.4em 0.4em 0 0" + style) + const deleteButton = Translations.t.image.doDelete + .SetStyle("background:#ff8c8c;border-radius:0 0 0.4em 0.4em" + style) + .onClick(deleteCurrent); - const mapping = this.slideshow._currentSlide.map((i) => { - if (this.searcher._deletedImages.data.indexOf( - this.searcher.data[i] - ) >= 0) { - return "
Deze afbeelding is verwijderd
" - } + const deleteButtonCheckbox = new CheckBox( + new Combine([ + backButton, + deleteButton] + ).SetStyle("display:flex;" + + "flex-direction:column;" + + "background:black;" + + "color:white;" + + "border-radius:0.5em;" + + "width:max-content;" + + "height:min-content;"), + new VariableUiElement( + showDeleteButton.map(showDelete => { - return ""; - }); - this._isDeleted = new VariableUiElement( - mapping + if (isDeleted.data) { + return Translations.t.image.isDeleted + .SetStyle("display:block;" + + "background-color: black;color:white;padding:0.4em;border-radius:0.4em").Render() + } + if (!showDelete) { + return ""; + } + return new FixedUiElement("") + .SetStyle("display:block;" + + "width: 1.5em;" + + "height: 1.5em;" + + "padding: 0.5em;" + + "border-radius: 3em;" + + "background-color: black;").Render(); + }, [this.searcher._deletedImages, isDeleted] + ))); + + this._deleteButton = deleteButtonCheckbox; + this._deleteButton.SetStyle( + "position:absolute;display:block;top:1em;left:5em;z-index: 7000;width:min-content;height:min-content;" ) + this.slideshow._currentSlide.addCallback(() => { + deleteButtonCheckbox.isEnabled.setData(false) + }) this.searcher._deletedImages.addCallback(() => { this.slideshow._currentSlide.ping(); }) + } InnerRender(): string { - return "" + - "
" + - this._deleteButton.Render() + - this._isDeleted.Render() + - "
" + - this.slideshow.Render() + - ""; + return new Combine([ + this._deleteButton, + this.slideshow + ]).SetStyle("position:relative").Render(); } IsKnown(): boolean { @@ -139,12 +170,6 @@ export class ImageCarousel extends TagDependantUIElement { return 0; } - InnerUpdate(htmlElement: HTMLElement) { - super.InnerUpdate(htmlElement); - this._deleteButton.Update(); - this._isDeleted.Update(); - } - Activate() { super.Activate(); diff --git a/UI/ImageUploadFlow.ts b/UI/ImageUploadFlow.ts index d3768d6..edecac4 100644 --- a/UI/ImageUploadFlow.ts +++ b/UI/ImageUploadFlow.ts @@ -44,13 +44,17 @@ export class ImageUploadFlow extends UIElement { {value: "CC-BY 4.0", shown: Translations.t.image.ccb} ], preferedLicense - ); const t = Translations.t.image; - + ); + licensePicker.SetStyle("float:left"); + + const t = Translations.t.image; + this._licensePicker = licensePicker; this._selectedLicence = licensePicker.GetValue(); - this._connectButton = new Combine([ t.pleaseLogin]) + + this._connectButton = new Combine([t.pleaseLogin]) .onClick(() => State.state.osmConnection.AttemptLogin()) - .SetClass("login-button-friendly"); + .SetClass("login-button-friendly"); } @@ -91,29 +95,37 @@ export class ImageUploadFlow extends UIElement { } } - return "" + - "
" + + const extraInfo = new Combine([ + Translations.t.image.respectPrivacy, + "
", + this._licensePicker, + "
", + currentStateHtml, + "
" + ]); - "
" - ; + actualInputElement+ + ""; + + return new Combine([ + form, + extraInfo + ]).SetStyle("margin-top: 1em;margin-bottom: 2em;text-align: center;") + .Render(); } InnerUpdate(htmlElement: HTMLElement) { diff --git a/UI/i18n/Translations.ts b/UI/i18n/Translations.ts index b197b27..62c6483 100644 --- a/UI/i18n/Translations.ts +++ b/UI/i18n/Translations.ts @@ -434,6 +434,18 @@ export default class Translations { nl: "Je afbeelding is toegevoegd. Bedankt om te helpen!", fr: "Votre photo est ajouté. Merci beaucoup!", gl: "A túa imaxe foi engadida. Grazas por axudar." + }), + dontDelete: new T({ + "nl":"Terug", + "en":"Cancel" + }), + doDelete: new T({ + "nl":"Verwijder afbeelding", + "en":"Remove image" + }), + isDeleted: new T({ + "nl":"Verwijderd", + "en":"Deleted" }) }, centerMessage: { diff --git a/css/tabbedComponent.css b/css/tabbedComponent.css index e69de29..f3f8215 100644 --- a/css/tabbedComponent.css +++ b/css/tabbedComponent.css @@ -0,0 +1,57 @@ + +.tabs-header-bar { + padding-left: 1em; + padding-top: 10px; /* For the shadow */ + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: start; + background-color: white; +} + + +.tab-single-header img { + height: 3em; + max-width: 3em; + padding: 0.5em; + display:block; + margin:auto; +} + + +.tab-content { + z-index: 5002; + background-color: white; + position: relative; + padding: 1em; + display: inline-block; + width: 100%; + box-sizing: border-box; +} + +.tab-single-header { + border-top-left-radius: 1em; + border-top-right-radius: 1em; + z-index: 5000; + padding-bottom: 0; + margin-bottom: 0; +} + +.tab-active { + background-color: white; + z-index: 5001; + box-shadow: 0 0 10px black; + border: 1px solid white; + min-width: 4em; +} + +.tab-non-active { + background-color: #e5f5ff; + opacity: 0.5; + border-left: 1px solid gray; + border-right:1px solid gray; + border-top: 1px solid gray; + border-bottom: 1px solid lightgray; + min-width: 4em; +} diff --git a/index.css b/index.css index 48e034d..a49d79e 100644 --- a/index.css +++ b/index.css @@ -547,11 +547,8 @@ box-shadow: unset; overflow-y: unset; } - - } - .to-the-map { display: block; box-sizing: border-box; @@ -619,9 +616,6 @@ } - - - .imgWithAttr { max-height: 20em; @@ -664,61 +658,12 @@ } - /**************** Image upload flow ***************/ - - .imageflow { - margin-top: 1em; - margin-bottom: 2em; - text-align: center; - - } - - .imageflow-file-input-wrapper { - display: flex; - flex-wrap: wrap; - padding: 0.5em; - border-radius: 1em; - border: 3px solid black; - } - - .imageflow-add-picture { - font-size: 28px; - font-weight: bold; - float: left; - margin-top: 4px; - padding-top: 4px; - padding-bottom: 4px; - padding-left: 13px; - } - - .imageflow-file-input-wrapper img { - width: 36px; - height: 36px; - padding: 0.1em; - margin-top: 5px; - border-radius: 0; - float: left; - } - - - .license-picker { - float: left; - } - - .imageflow > input { - display: none; - } - - /***************** Info box (box containing features and questions ******************/ .leaflet-popup-content { width: 40em !important; } - - - #messagesboxmobile .featureinfobox { max-height: unset; overflow-y: unset; @@ -842,103 +787,6 @@ display: inline-block } -/******* THe remove image buttons ****/ - -.image-carousel-container { - position: relative; -} - -.image-is-removed{ - display: inline-block; - left: 0; - top: 2.5em; - - padding: 0.5em; - padding-left: 0.75em; - - height: 3em; - width: 14em; - border-radius: 1em; - background-color: black; - - color: white; - font-weight: bold; - height: 1.5em; /* same as .delete-image */ - - z-index: 7000; -} - -.image-delete-container { - position: absolute; - left: 6em; - top: 1.5em; - display: inline-block; - z-index: 7000; - -} - -.delete-image { - width: 1.5em; - height: 1.5em; - padding: 0.5em; - border-radius: 3em; - background-color: black; -} - -.delete-image-confirm { - position: absolute; - display: inline-block; - left: 0; - top: 2.5em; - - padding: 0.5em; - padding-left: 0.75em; - - width: 14em; - border-radius: 1em; - border-top-left-radius: 0; - border-top-right-radius: 0; - background-color: #ff8c8c; - - color: white; - height: 1.5em; /* same as .delete-image */ - - z-index: 7000; -} - -.delete-image-confirm span { - font-size: larger; - font-weight: bold; -} - - -.delete-image-cancel { - display: inline-block; - position: absolute; - - left: 0em; - padding: 0.5em; - padding-left: 0.75em; - - border-radius: 1em; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - - height: 1.5em; /* same as .delete-image */ - width: 14em; /* Same as delete-image-confirm */ - - - background-color: black; - color: white; - z-index: 7000; -} - -.delete-image-cancel span { - font-size: larger; - font-weight: bold; - -} - /**** The save button *****/ .save { @@ -946,9 +794,7 @@ border: solid white 2px; background-color: #3a3aeb; color: white; - padding: 0.2em; - padding-left: 0.6em; - padding-right: 0.6em; + padding: 0.2em 0.6em; font-size: x-large; font-weight: bold; border-radius: 1.5em; @@ -991,66 +837,6 @@ } -/******** TabbedElement ****/ - -.tabs-header-bar { - padding-left: 1em; - padding-top: 10px; /* For the shadow */ - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - align-items: start; - background-color: white; -} - - -.tab-single-header img { - height: 3em; - max-width: 3em; - padding: 0.5em; - display:block; - margin:auto; -} - - -.tab-content { - z-index: 5002; - background-color: white; - position: relative; - padding: 1em; - display: inline-block; - width: 100%; - box-sizing: border-box; -} - -.tab-single-header { - border-top-left-radius: 1em; - border-top-right-radius: 1em; - z-index: 5000; - padding-bottom: 0; - margin-bottom: 0; -} - -.tab-active { - background-color: white; - z-index: 5001; - box-shadow: 0 0 10px black; - border: 1px solid white; - min-width: 4em; -} - -.tab-non-active { - background-color: #e5f5ff; - opacity: 0.5; - border-left: 1px solid gray; - border-right:1px solid gray; - border-top: 1px solid gray; - border-bottom: 1px solid lightgray; - min-width: 4em; -} - - /****** ShareScreen *****/ .literal-code { @@ -1127,12 +913,6 @@ font-size: large; } - - .custom-layer-panel { - - } - - .custom-layer-panel-header { display: flex; flex-wrap: nowrap; diff --git a/index.html b/index.html index ede2540..b05b56a 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + diff --git a/index.ts b/index.ts index ccdb343..92301b9 100644 --- a/index.ts +++ b/index.ts @@ -37,9 +37,9 @@ let defaultLayout = "bookcases" let hash = window.location.hash; const path = window.location.pathname.split("/").slice(-1)[0]; -if (path !== "index.html") { +if (path !== "index.html" && path !== "") { defaultLayout = path.substr(0, path.length - 5); - console.log("Using layout", defaultLayout) + console.log("Using layout", defaultLayout); } // Run over all questsets. If a part of the URL matches a searched-for part in the layout, it'll take that as the default diff --git a/test.html b/test.html index 3be38f5..efc81c2 100644 --- a/test.html +++ b/test.html @@ -4,6 +4,8 @@ Small tests + +