From 3fdb84e481c222822ab8e957042fab418ca3c7f1 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Sat, 14 Nov 2020 02:54:33 +0100 Subject: [PATCH] Extract variables from html, add black theme to surveillance cameras, use svgs directly in the frontend --- InitUiElements.ts | 24 ++-- Svg.ts | 109 ++++++++++++------ UI/FullScreenMessageBoxHandler.ts | 3 +- UI/Image/ImageUploadFlow.ts | 6 +- UI/Input/Direction.ts | 39 +++++++ UI/Popup/EditableTagRendering.ts | 2 +- UI/UserBadge.ts | 12 +- assets/svg/ampersand.svg | 2 +- assets/svg/checkmark.svg | 2 +- assets/svg/envelope.svg | 51 +++++++- assets/svg/gear.svg | 5 +- assets/svg/help.svg | 22 +--- assets/svg/home.svg | 5 +- assets/svg/pencil.svg | 2 +- assets/svg/share.svg | 8 +- .../surveillance_cameras/custom_theme.css | 12 ++ .../surveillance_cameras.json | 3 + createLayouts.ts | 8 +- css/mobile.css | 10 +- css/openinghourstable.css | 25 ++-- css/tabbedComponent.css | 42 +++++-- css/tagrendering.css | 27 ++++- css/userbadge.css | 22 ++-- generateIncludedImages.ts | 3 + index.css | 95 +++++++++++---- test.ts | 15 +-- 26 files changed, 402 insertions(+), 152 deletions(-) create mode 100644 UI/Input/Direction.ts create mode 100644 assets/themes/surveillance_cameras/custom_theme.css diff --git a/InitUiElements.ts b/InitUiElements.ts index 8310b0c..faa8dbb 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -110,6 +110,16 @@ export class InitUiElements { InitUiElements.setupAllLayerElements(); + if (layoutToUse.customCss !== undefined) { + var head = document.getElementsByTagName('head')[0]; + var link = document.createElement('link'); + link.id = "customCss"; + link.rel = 'stylesheet'; + link.type = 'text/css'; + link.href = layoutToUse.customCss; + link.media = 'all'; + head.appendChild(link); + } function updateFavs() { const favs = State.state.favouriteLayers.data ?? []; @@ -269,7 +279,7 @@ export class InitUiElements { ] if (State.state.featureSwitchShareScreen.data) { - tabs.push({header: Svg.share_img, content: new ShareScreen()}); + tabs.push({header: Svg.share, content: new ShareScreen()}); } if (State.state.featureSwitchMoreQuests.data) { @@ -282,7 +292,7 @@ export class InitUiElements { tabs.push({ - header: Svg.help_img, + header: Svg.help , content: new VariableUiElement(State.state.osmConnection.userDetails.map(userdetails => { if (userdetails.csCount < State.userJourney.mapCompleteHelpUnlock) { return "" @@ -303,8 +313,8 @@ export class InitUiElements { const fullOptions = this.CreateWelcomePane(); - const help = Svg.help_ui().SetClass("open-welcome-button"); - const close = Svg.close_ui().SetClass("close-welcome-button"); + const help = Svg.help_svg().SetClass("open-welcome-button"); + const close = Svg.close_svg().SetClass("close-welcome-button"); const checkbox = new CheckBox( new Combine([ close, @@ -328,7 +338,7 @@ export class InitUiElements { const fullOptions2 = this.CreateWelcomePane(); State.state.fullScreenMessage.setData(fullOptions2) - Svg.help_ui() + Svg.help_svg() .SetClass("open-welcome-button") .SetClass("shadow") .onClick(() => { @@ -366,14 +376,14 @@ export class InitUiElements { } layerControlPanel.SetStyle("display:block;padding:1em;border-radius:1em;"); - const closeButton = Svg.close_ui().SetClass("layer-selection-toggle").SetStyle(" background: #e5f5ff;") + const closeButton = Svg.close_svg().SetClass("layer-selection-toggle").SetStyle(" background: var(--subtle-detail-color);") const checkbox = new CheckBox( new Combine([ closeButton, layerControlPanel]).SetStyle("display:flex;flex-direction:row;") .SetClass("hidden-on-mobile") , - Svg.layers_ui().SetClass("layer-selection-toggle"), + Svg.layers_svg().SetClass("layer-selection-toggle"), State.state.layerControlIsOpened ); diff --git a/Svg.ts b/Svg.ts index 7a11237..a3a3de1 100644 --- a/Svg.ts +++ b/Svg.ts @@ -4,160 +4,199 @@ import {FixedUiElement} from "./UI/Base/FixedUiElement"; export default class Svg { - public static add = " image/svg+xml " + public static add = " image/svg+xml " public static add_img = Img.AsImageElement(Svg.add) + public static add_svg() { return new FixedUiElement(Svg.add);} public static add_ui() { return new FixedUiElement(Svg.add_img);} - public static addSmall = " image/svg+xml " + public static addSmall = " image/svg+xml " public static addSmall_img = Img.AsImageElement(Svg.addSmall) + public static addSmall_svg() { return new FixedUiElement(Svg.addSmall);} public static addSmall_ui() { return new FixedUiElement(Svg.addSmall_img);} - public static ampersand = " image/svg+xml " + public static ampersand = "e 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);} - public static arrow_left_smooth = " image/svg+xml " + public static arrow_left_smooth = " image/svg+xml " public static arrow_left_smooth_img = Img.AsImageElement(Svg.arrow_left_smooth) + public static arrow_left_smooth_svg() { return new FixedUiElement(Svg.arrow_left_smooth);} public static arrow_left_smooth_ui() { return new FixedUiElement(Svg.arrow_left_smooth_img);} - public static arrow_right_smooth = " image/svg+xml " + public static arrow_right_smooth = " image/svg+xml " public static arrow_right_smooth_img = Img.AsImageElement(Svg.arrow_right_smooth) + public static arrow_right_smooth_svg() { return new FixedUiElement(Svg.arrow_right_smooth);} public static arrow_right_smooth_ui() { return new FixedUiElement(Svg.arrow_right_smooth_img);} public static bug = " " public static bug_img = Img.AsImageElement(Svg.bug) + public static bug_svg() { return new FixedUiElement(Svg.bug);} public static bug_ui() { return new FixedUiElement(Svg.bug_img);} - public static camera_plus = " image/svg+xml " + public static camera_plus = " image/svg+xml " public static camera_plus_img = Img.AsImageElement(Svg.camera_plus) + public static camera_plus_svg() { return new FixedUiElement(Svg.camera_plus);} public static camera_plus_ui() { return new FixedUiElement(Svg.camera_plus_img);} - public static checkmark = "" + public static checkmark = "" public static checkmark_img = Img.AsImageElement(Svg.checkmark) + public static checkmark_svg() { return new FixedUiElement(Svg.checkmark);} public static checkmark_ui() { return new FixedUiElement(Svg.checkmark_img);} - public static close = " image/svg+xml " + public static close = " image/svg+xml " public static close_img = Img.AsImageElement(Svg.close) + public static close_svg() { return new FixedUiElement(Svg.close);} public static close_ui() { return new FixedUiElement(Svg.close_img);} - public static crosshair_blue_center = " image/svg+xml " + public static crosshair_blue_center = " image/svg+xml " public static crosshair_blue_center_img = Img.AsImageElement(Svg.crosshair_blue_center) + public static crosshair_blue_center_svg() { return new FixedUiElement(Svg.crosshair_blue_center);} public static crosshair_blue_center_ui() { return new FixedUiElement(Svg.crosshair_blue_center_img);} - public static crosshair_blue = " image/svg+xml " + public static crosshair_blue = " image/svg+xml " public static crosshair_blue_img = Img.AsImageElement(Svg.crosshair_blue) + public static crosshair_blue_svg() { return new FixedUiElement(Svg.crosshair_blue);} public static crosshair_blue_ui() { return new FixedUiElement(Svg.crosshair_blue_img);} - public static crosshair = " image/svg+xml " + public static crosshair = " image/svg+xml " public static crosshair_img = Img.AsImageElement(Svg.crosshair) + public static crosshair_svg() { return new FixedUiElement(Svg.crosshair);} public static crosshair_ui() { return new FixedUiElement(Svg.crosshair_img);} - public static delete_icon = " image/svg+xml " + public static delete_icon = " image/svg+xml " public static delete_icon_img = Img.AsImageElement(Svg.delete_icon) + public static delete_icon_svg() { return new FixedUiElement(Svg.delete_icon);} public static delete_icon_ui() { return new FixedUiElement(Svg.delete_icon_img);} - public static down = " image/svg+xml " + public static down = " image/svg+xml " public static down_img = Img.AsImageElement(Svg.down) + public static down_svg() { return new FixedUiElement(Svg.down);} public static down_ui() { return new FixedUiElement(Svg.down_img);} - public static envelope = " " + public static envelope = " image/svg+xml " public static envelope_img = Img.AsImageElement(Svg.envelope) + public static envelope_svg() { return new FixedUiElement(Svg.envelope);} public static envelope_ui() { return new FixedUiElement(Svg.envelope_img);} - public static floppy = " " + public static floppy = " " public static floppy_img = Img.AsImageElement(Svg.floppy) + public static floppy_svg() { return new FixedUiElement(Svg.floppy);} public static floppy_ui() { return new FixedUiElement(Svg.floppy_img);} - public static gear = "" + public static gear = " " public static gear_img = Img.AsImageElement(Svg.gear) + public static gear_svg() { return new FixedUiElement(Svg.gear);} public static gear_ui() { return new FixedUiElement(Svg.gear_img);} - public static help = " image/svg+xml " + public static help = " " public static help_img = Img.AsImageElement(Svg.help) + public static help_svg() { return new FixedUiElement(Svg.help);} public static help_ui() { return new FixedUiElement(Svg.help_img);} - public static home = " " + public static home = " " public static home_img = Img.AsImageElement(Svg.home) + public static home_svg() { return new FixedUiElement(Svg.home);} public static home_ui() { return new FixedUiElement(Svg.home_img);} - public static josm_logo = " JOSM Logotype 2019 image/svg+xml JOSM Logotype 2019 2019-08-05 Diamond00744 Public Domain " + public static josm_logo = " JOSM Logotype 2019 image/svg+xml JOSM Logotype 2019 2019-08-05 Diamond00744 Public Domain " public static josm_logo_img = Img.AsImageElement(Svg.josm_logo) + public static josm_logo_svg() { return new FixedUiElement(Svg.josm_logo);} public static josm_logo_ui() { return new FixedUiElement(Svg.josm_logo_img);} - public static layers = " image/svg+xml " + public static layers = " image/svg+xml " public static layers_img = Img.AsImageElement(Svg.layers) + public static layers_svg() { return new FixedUiElement(Svg.layers);} public static layers_ui() { return new FixedUiElement(Svg.layers_img);} - public static layersAdd = " image/svg+xml " + public static layersAdd = " image/svg+xml " public static layersAdd_img = Img.AsImageElement(Svg.layersAdd) + public static layersAdd_svg() { return new FixedUiElement(Svg.layersAdd);} public static layersAdd_ui() { return new FixedUiElement(Svg.layersAdd_img);} - public static logo = " image/svg+xml " + public static logo = " image/svg+xml " public static logo_img = Img.AsImageElement(Svg.logo) + public static logo_svg() { return new FixedUiElement(Svg.logo);} public static logo_ui() { return new FixedUiElement(Svg.logo_img);} - public static logout = " image/svg+xml " + public static logout = " image/svg+xml " public static logout_img = Img.AsImageElement(Svg.logout) + public static logout_svg() { return new FixedUiElement(Svg.logout);} public static logout_ui() { return new FixedUiElement(Svg.logout_img);} public static mapillary = "" public static mapillary_img = Img.AsImageElement(Svg.mapillary) + public static mapillary_svg() { return new FixedUiElement(Svg.mapillary);} public static mapillary_ui() { return new FixedUiElement(Svg.mapillary_img);} public static no_checkmark = " " public static no_checkmark_img = Img.AsImageElement(Svg.no_checkmark) + public static no_checkmark_svg() { return new FixedUiElement(Svg.no_checkmark);} public static no_checkmark_ui() { return new FixedUiElement(Svg.no_checkmark_img);} - public static or = " image/svg+xml " + public static or = " image/svg+xml " public static or_img = Img.AsImageElement(Svg.or) + public static or_svg() { return new FixedUiElement(Svg.or);} public static or_ui() { return new FixedUiElement(Svg.or_img);} public static osm_logo_us = "" public static osm_logo_us_img = Img.AsImageElement(Svg.osm_logo_us) + public static osm_logo_us_svg() { return new FixedUiElement(Svg.osm_logo_us);} public static osm_logo_us_ui() { return new FixedUiElement(Svg.osm_logo_us_img);} - public static osm_logo = " OpenStreetMap logo 2011 image/svg+xml OpenStreetMap logo 2011 Ken Vermette April 2011 OpenStreetMap.org Replacement logo for OpenStreetMap Foundation OSM openstreetmap logo http://wiki.openstreetmap.org/wiki/File:Public-images-osm_logo.svg 010110010011010110010011 010110010011010110010011 " + public static osm_logo = " OpenStreetMap logo 2011 image/svg+xml OpenStreetMap logo 2011 Ken Vermette April 2011 OpenStreetMap.org Replacement logo for OpenStreetMap Foundation OSM openstreetmap logo http://wiki.openstreetmap.org/wiki/File:Public-images-osm_logo.svg 010110010011010110010011 010110010011010110010011 " public static osm_logo_img = Img.AsImageElement(Svg.osm_logo) + public static osm_logo_svg() { return new FixedUiElement(Svg.osm_logo);} public static osm_logo_ui() { return new FixedUiElement(Svg.osm_logo_img);} - public static pencil = " " + public static pencil = " " public static pencil_img = Img.AsImageElement(Svg.pencil) + public static pencil_svg() { return new FixedUiElement(Svg.pencil);} public static pencil_ui() { return new FixedUiElement(Svg.pencil_img);} - public static pop_out = " Svg Vector Icons : http://www.onlinewebfonts.com/icon " + 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);} public static pop_out_ui() { return new FixedUiElement(Svg.pop_out_img);} - public static reload = " " + public static reload = " " public static reload_img = Img.AsImageElement(Svg.reload) + public static reload_svg() { return new FixedUiElement(Svg.reload);} public static reload_ui() { return new FixedUiElement(Svg.reload_img);} - public static search = " " + public static search = " " public static search_img = Img.AsImageElement(Svg.search) + public static search_svg() { return new FixedUiElement(Svg.search);} public static search_ui() { return new FixedUiElement(Svg.search_img);} - public static share = " image/svg+xml " + public static share = " image/svg+xml " public static share_img = Img.AsImageElement(Svg.share) + public static share_svg() { return new FixedUiElement(Svg.share);} public static share_ui() { return new FixedUiElement(Svg.share_img);} - public static star = " Created by potrace 1.15, written by Peter Selinger 2001-2017 " + public static star = " Created by potrace 1.15, written by Peter Selinger 2001-2017 " public static star_img = Img.AsImageElement(Svg.star) + public static star_svg() { return new FixedUiElement(Svg.star);} public static star_ui() { return new FixedUiElement(Svg.star_img);} - public static statistics = " Svg Vector Icons : http://www.onlinewebfonts.com/icon " + public static statistics = " Svg Vector Icons : http://www.onlinewebfonts.com/icon " public static statistics_img = Img.AsImageElement(Svg.statistics) + public static statistics_svg() { return new FixedUiElement(Svg.statistics);} public static statistics_ui() { return new FixedUiElement(Svg.statistics_img);} - public static up = " " + public static up = " " public static up_img = Img.AsImageElement(Svg.up) + public static up_svg() { return new FixedUiElement(Svg.up);} public static up_ui() { return new FixedUiElement(Svg.up_img);} - public static wikimedia_commons_white = " Wikimedia Commons Logo " + public static wikimedia_commons_white = " Wikimedia Commons Logo " public static wikimedia_commons_white_img = Img.AsImageElement(Svg.wikimedia_commons_white) + public static wikimedia_commons_white_svg() { return new FixedUiElement(Svg.wikimedia_commons_white);} public static wikimedia_commons_white_ui() { return new FixedUiElement(Svg.wikimedia_commons_white_img);} - public static wikipedia = " Wikipedia logo version 2" + public static wikipedia = " Wikipedia logo version 2" public static wikipedia_img = Img.AsImageElement(Svg.wikipedia) + public static wikipedia_svg() { return new FixedUiElement(Svg.wikipedia);} public static wikipedia_ui() { return new FixedUiElement(Svg.wikipedia_img);} } diff --git a/UI/FullScreenMessageBoxHandler.ts b/UI/FullScreenMessageBoxHandler.ts index bf12c48..6fe9948 100644 --- a/UI/FullScreenMessageBoxHandler.ts +++ b/UI/FullScreenMessageBoxHandler.ts @@ -27,7 +27,8 @@ export class FullScreenMessageBox extends UIElement { "overflow-y: auto;" + "max-width:100vw;" + "overflow-x:hidden;" + - "background:white;" + "background:var(--background-color);" + + "color: var(--foreground-color);" ); }); diff --git a/UI/Image/ImageUploadFlow.ts b/UI/Image/ImageUploadFlow.ts index 2fb61bc..6836771 100644 --- a/UI/Image/ImageUploadFlow.ts +++ b/UI/Image/ImageUploadFlow.ts @@ -44,7 +44,7 @@ export class ImageUploadFlow extends UIElement { this._licensePicker = licensePicker; this._selectedLicence = licensePicker.GetValue(); - this._connectButton = new Combine([t.pleaseLogin]) + this._connectButton = t.pleaseLogin.Clone() .onClick(() => State.state.osmConnection.AttemptLogin()) .SetClass("login-button-friendly"); @@ -101,7 +101,7 @@ export class ImageUploadFlow extends UIElement { ]); const label = new Combine([ - Svg.camera_plus_ui().SetStyle("width: 36px;height: 36px;padding: 0.1em;margin-top: 5px;border-radius: 0;float: left;display:block"), + Svg.camera_plus_svg().SetStyle("width: 36px;height: 36px;padding: 0.1em;margin-top: 5px;border-radius: 0;float: left;display:block"), Translations.t.image.addPicture .SetStyle("width:max-content;font-size: 28px;" + "font-weight: bold;" + @@ -115,7 +115,7 @@ export class ImageUploadFlow extends UIElement { "cursor:pointer;" + "padding: 0.5em;" + "border-radius: 1em;" + - "border: 3px solid black;" + + "border: 3px solid var(--popup-border);" + "box-sizing:border-box;") const actualInputElement = diff --git a/UI/Input/Direction.ts b/UI/Input/Direction.ts new file mode 100644 index 0000000..d7dc5dc --- /dev/null +++ b/UI/Input/Direction.ts @@ -0,0 +1,39 @@ +import {InputElement} from "./InputElement"; +import {UIEventSource} from "../../Logic/UIEventSource"; +import Combine from "../Base/Combine"; +import {FixedUiElement} from "../Base/FixedUiElement"; + +/** + * Selects a direction in degrees + */ +export default class Direction extends InputElement{ + + private readonly value: UIEventSource; + public readonly IsSelected: UIEventSource = new UIEventSource(false); + + constructor(value?: UIEventSource) { + super(); + this.value = value ?? new UIEventSource(undefined); + } + + + GetValue(): UIEventSource { + return this.value; + } + + InnerRender(): string { + return new Combine([ + new FixedUiElement("").SetStyle( + "position: absolute;top: calc(50% - 0.5em);left: calc(50% - 0.5em);width: 1em;height: 1em;background: red;border-radius: 1em"), + + ]) + .SetStyle("position:relative;display:block;width: min(100%, 25em); padding-top: min(100% , 25em); background:white; border: 1px solid black; border-radius: 999em") + .Render(); + } + + + IsValid(t: number): boolean { + return t >= 0 && t <= 360; + } + +} \ No newline at end of file diff --git a/UI/Popup/EditableTagRendering.ts b/UI/Popup/EditableTagRendering.ts index 931b570..fce78e6 100644 --- a/UI/Popup/EditableTagRendering.ts +++ b/UI/Popup/EditableTagRendering.ts @@ -38,7 +38,7 @@ export default class EditableTagRendering extends UIElement { if(State.state.featureSwitchUserbadge.data){ this._editButton = - Svg.pencil_ui().SetClass("edit-button") + Svg.pencil_svg().SetClass("edit-button") .onClick(() => { self._editMode.setData(true); }); diff --git a/UI/UserBadge.ts b/UI/UserBadge.ts index 49e8acf..6a84fb3 100644 --- a/UI/UserBadge.ts +++ b/UI/UserBadge.ts @@ -34,7 +34,7 @@ export class UserBadge extends UIElement { .SetClass("userbadge-login") .onClick(() => State.state.osmConnection.AttemptLogin()); this._logout = - Svg.logout_ui() + Svg.logout_svg() .onClick(() => { State.state.osmConnection.LogOut(); }); @@ -52,7 +52,7 @@ export class UserBadge extends UIElement { this._homeButton = new VariableUiElement( this._userDetails.map((userinfo) => { if (userinfo.home) { - return Svg.home_img; + return Svg.home; } return ""; }) @@ -75,7 +75,7 @@ export class UserBadge extends UIElement { let messageSpan: UIElement = new Link( - new Combine([Svg.envelope_img, "" + user.totalMessages]), + new Combine([Svg.envelope, "" + user.totalMessages]), 'https://www.openstreetmap.org/messages/inbox', true ) @@ -83,7 +83,7 @@ export class UserBadge extends UIElement { if (user.unreadMessages > 0) { messageSpan = new Link( - new Combine([Svg.envelope_img, "" + user.unreadMessages]), + new Combine([Svg.envelope, "" + user.unreadMessages]), 'https://www.openstreetmap.org/messages/inbox', true ).SetClass("alert") @@ -104,7 +104,7 @@ export class UserBadge extends UIElement { } const settings = - new Link(Svg.gear_ui(), + new Link(Svg.gear_svg(), `https://www.openstreetmap.org/user/${encodeURIComponent(user.name)}/account`, true) @@ -124,7 +124,7 @@ export class UserBadge extends UIElement { const csCount = new Link( - new Combine([Svg.star_img, "" + user.csCount]), + new Combine([Svg.star, "" + user.csCount]), `https://www.openstreetmap.org/user/${user.name}/history`, true); diff --git a/assets/svg/ampersand.svg b/assets/svg/ampersand.svg index 525a1ef..f2df861 100644 --- a/assets/svg/ampersand.svg +++ b/assets/svg/ampersand.svg @@ -1,4 +1,4 @@ - +e \ No newline at end of file + \ No newline at end of file diff --git a/assets/svg/envelope.svg b/assets/svg/envelope.svg index 8728151..74923d3 100644 --- a/assets/svg/envelope.svg +++ b/assets/svg/envelope.svg @@ -1,4 +1,47 @@ - - - - \ No newline at end of file + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/assets/svg/gear.svg b/assets/svg/gear.svg index 302fac4..6142f34 100644 --- a/assets/svg/gear.svg +++ b/assets/svg/gear.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + \ No newline at end of file diff --git a/assets/svg/help.svg b/assets/svg/help.svg index 1f6bad7..b6bd681 100644 --- a/assets/svg/help.svg +++ b/assets/svg/help.svg @@ -8,33 +8,21 @@ id="svg11382" height="900" width="900" + viewBox="0 0 900 900" version="1.0"> - - - - image/svg+xml - - - - - - + transform="matrix(0.90103258,0,0,0.90103258,112.84058,-1.9060177)" + > diff --git a/assets/svg/home.svg b/assets/svg/home.svg index b9f31cf..c27eb53 100644 --- a/assets/svg/home.svg +++ b/assets/svg/home.svg @@ -1,3 +1,6 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/assets/svg/pencil.svg b/assets/svg/pencil.svg index 6f9610f..d41508f 100644 --- a/assets/svg/pencil.svg +++ b/assets/svg/pencil.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/assets/svg/share.svg b/assets/svg/share.svg index d70d175..83f599f 100644 --- a/assets/svg/share.svg +++ b/assets/svg/share.svg @@ -73,25 +73,25 @@ id="layer1" transform="translate(0,-270.54165)"> ` + } } const og = ` diff --git a/css/mobile.css b/css/mobile.css index f4c5839..6ee0708 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -4,6 +4,8 @@ Contains tweaks for small screens .only-on-mobile { display: none; + background-color: var(--background-color); + color: var(--foreground-color); } @media only screen and (max-width: 600px), only screen and (max-height: 600px) { @@ -14,6 +16,8 @@ Contains tweaks for small screens .only-on-mobile { display: unset; + background-color: var(--background-color); + color: var(--foreground-color); } .hidden-on-mobile { @@ -22,6 +26,8 @@ Contains tweaks for small screens #messagesbox { display: none; + background-color: var(--background-color); + color: var(--foreground-color); } #help-button-mobile{ @@ -57,15 +63,15 @@ Contains tweaks for small screens #messagesboxmobile { display: block; + position: absolute; z-index: 10000; - background-color: white; width: 100vw; } #welcomeMessage { display: inline-block; - background-color: white; + background-color: var(--background-color); border-radius: 0; width: 100%; max-width: 100%; diff --git a/css/openinghourstable.css b/css/openinghourstable.css index 5034cff..4d04de0 100644 --- a/css/openinghourstable.css +++ b/css/openinghourstable.css @@ -5,7 +5,6 @@ text-align: center; word-break: normal; } - .oh-table th { padding: 0; margin: 0; @@ -34,22 +33,22 @@ } .oh-timecell:hover { - background-color: #92b1ff !important; + background-color: var(--catch-detail-color) !important; } .oh-timecell-selected { - background-color: #0048ff; + background-color: var(--catch-detail-color); } .oh-timecell-half { border-bottom: 1px solid #ddd; - background-color: aliceblue; + background-color: var(--subtle-detail-color); } .oh-timecell-half.oh-timecell-selected { - background-color: #0048ff; + background-color: var(--catch-detail-color); } .oh-table tr { @@ -75,12 +74,12 @@ } .oh-timecol-selected { - border-right: #0048ff; + border-right: var(--catch-detail-color); } .oh-timecol-selected > span { - background-color: #0048ff; - color: white; + background-color: var(--catch-detail-color); + color: var(--background-color); width: 100%; display: block; } @@ -96,11 +95,11 @@ } .oh-timerow-selected .oh-timecell-0 { - border-left: 10px solid #0048ff !important; + border-left: 10px solid var(--catch-detail-color) !important; } .oh-timerow-selected .oh-timecell-6 { - border-right: 10px solid #0048ff !important; + border-right: 10px solid var(--catch-detail-color) !important; } @@ -117,7 +116,7 @@ top: 0; left: 0; width: calc(100% - 4px); - background: #0048ff; + background: var(--catch-detail-color); z-index: 1; box-sizing: border-box; } @@ -276,7 +275,7 @@ .ohviz-today { - background-color: #e5f5ff; + background-color: var(--subtle-detail-color); } .ohviz-weekday { @@ -290,7 +289,7 @@ } .ohviz-container { - border: 0.5em solid #e5f5ff; + border: 0.5em solid var(--subtle-detail-color); border-radius: 1em; display: block; } diff --git a/css/tabbedComponent.css b/css/tabbedComponent.css index 741c7ba..d895fc9 100644 --- a/css/tabbedComponent.css +++ b/css/tabbedComponent.css @@ -7,7 +7,7 @@ flex-wrap: nowrap; justify-content: flex-start; align-items: start; - background-color: white; + background-color: var(--background-color); max-width: 100vw; overflow-x: auto; } @@ -21,10 +21,19 @@ margin:auto; } +.tab-single-header svg { + height: 3em; + max-width: 3em; + padding: 0.5em; + display:block; + margin:auto; +} + .tab-content { z-index: 5002; - background-color: white; + background-color: var(--background-color); + color: var(--foreground-color); position: relative; padding: 1em; display: inline-block; @@ -41,19 +50,36 @@ } .tab-active { - background-color: white; + background-color: var(--background-color); + color: var(--foreground-color); z-index: 5001; - box-shadow: 0 0 10px black; - border: 1px solid white; + box-shadow: 0 0 10px var(--shadow-color); + border: 1px solid var(--background-color); min-width: 4em; } +.tab-active svg { + fill: var(--foreground-color); + stroke: var(--foreground-color); +} + .tab-non-active { - background-color: #e5f5ff; + background-color: var(--subtle-detail-color); + color: var(--foreground-color); opacity: 0.5; border-left: 1px solid gray; - border-right:1px solid gray; - border-top: 1px solid gray; + border-right: 1px solid gray; + border-top: 1px solid gray; border-bottom: 1px solid lightgray; min-width: 4em; } + +.tab-non-active svg { + fill: var(--foreground-color) !important; + stroke: var(--foreground-color) !important; +} + +.tab-non-active svg path{ + fill: var(--foreground-color) !important; + stroke: var(--foreground-color) !important; +} diff --git a/css/tagrendering.css b/css/tagrendering.css index 7c08861..705202d 100644 --- a/css/tagrendering.css +++ b/css/tagrendering.css @@ -30,7 +30,7 @@ .question { display: block; margin-top: 1em; - background-color: #e5f5ff; + background-color: var(--subtle-detail-color); padding: 1em; border-radius: 1em; font-size: larger; @@ -72,7 +72,7 @@ input:checked + label .question-option-with-border { .save { display: inline-block; border: solid white 2px; - background-color: #3a3aeb; + background-color: var(--catch-detail-color); color: white; padding: 0.2em 0.6em; font-size: x-large; @@ -90,8 +90,8 @@ input:checked + label .question-option-with-border { .login-button-friendly { display: inline-block; border: solid white 2px; - background-color: #3a3aeb; - color: white; + background-color:var(--catch-detail-color); + color: var(--catch-detail-color-contrast); padding: 0.2em 0.6em; font-size: large; font-weight: bold; @@ -115,7 +115,24 @@ input:checked + label .question-option-with-border { height: 1.3em; padding: 0.5em; border-radius: 0.65em; - border: solid black 1px; + border: solid var(--popup-border) 1px; font-size: medium; float: right; +} + +.edit-button svg { + width: 1.3em; + height: 1.3em; + padding: 0.5em; + border-radius: 0.65em; + border: solid var(--popup-border) 1px; + stroke: var(--popup-border) !important; + fill: var(--popup-border) !important; + font-size: medium; + float: right; +} + +.edit-button svg path{ + stroke: var(--popup-border) !important; + fill: var(--popup-border) !important; } \ No newline at end of file diff --git a/css/userbadge.css b/css/userbadge.css index 81ac712..49ddab2 100644 --- a/css/userbadge.css +++ b/css/userbadge.css @@ -1,6 +1,7 @@ #userbadge { display: inline-block; - background-color: white; + background-color: var(--background-color); + color: var(--foreground-color); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; @@ -15,7 +16,7 @@ #userbadge a { text-decoration: none; - color: black; + color: var(--foreground-color); } @@ -42,14 +43,19 @@ margin-bottom: 0.2em; } -.userstats img { +.userstats svg { width: 1em; height: 1em; - fill: black; - border-radius: 0; + border-radius: 0; display: block; } +.userstats img { + width: 1em; + height: 1em; + border-radius: 0; + display: block; +} #profile-pic { float: left; @@ -76,7 +82,8 @@ height: 2.2em; /*SHould equal profile-pic height - padding*/ z-index: 5000; text-align: left; - background-color: white; + background-color: var(--background-color); + color: var(--foreground-color); background-size: 100%; line-height: 0.75em; @@ -88,7 +95,8 @@ .userbadge-login { font-weight: bold; font-size: large; - background-color: #e5f5ff !important; + background-color: var(--subtle-detail-color) !important; + color: var(--subtle-detail-color-contrast); height:3em; display: inline-block; diff --git a/generateIncludedImages.ts b/generateIncludedImages.ts index 1237403..73a8251 100644 --- a/generateIncludedImages.ts +++ b/generateIncludedImages.ts @@ -14,6 +14,8 @@ function genImages() { } const svg = fs.readFileSync("./assets/svg/" + path, "utf-8") + .replace(/<\?xml.*?>/, "") + .replace(/fill: ?none;/g,"fill: none !important;") // This is such a brittle hack... .replace(/\n/g, " ") .replace(/\r/g, "") .replace(/\\/g, "\\") @@ -22,6 +24,7 @@ function genImages() { .replace(/[ -]/g, "_"); module += ` public static ${name} = "${svg}"\n` module += ` public static ${name}_img = Img.AsImageElement(Svg.${name})\n` + module += ` public static ${name}_svg() { return new FixedUiElement(Svg.${name});}\n` module += ` public static ${name}_ui() { return new FixedUiElement(Svg.${name}_img);}\n\n` } module += "}\n"; diff --git a/index.css b/index.css index 8df3e9a..e0bd4e2 100644 --- a/index.css +++ b/index.css @@ -1,11 +1,33 @@ +:root { + --subtle-detail-color: #e5f5ff; + --subtle-detail-color-contrast: black; + --catch-detail-color: #3a3aeb; + --catch-detail-color-contrast: white; + --alert-color: #fee4d1; + --background-color: white; + --foreground-color: black; + --popup-border: white; + --shadow-color: #00000066 +} + html, body { height: 100%; margin: 0; padding: 0; + background-color: var(--background-color); + color: var(--foreground-color); + font-family: 'Helvetica Neue', Arial, sans-serif; } -body { - font-family: 'Helvetica Neue', Arial, sans-serif; + +svg { + fill: var(--foreground-color) !important; + stroke: var(--foreground-color) !important; +} + +svg path { + fill: var(--foreground-color) !important; + stroke: var(--foreground-color) !important; } @@ -13,6 +35,17 @@ body { height: 100%; } +.leaflet-popup-content-wrapper { + background-color: var(--background-color); + color: var(--foreground-color); + + border: 2px solid var(--popup-border) +} + +.leaflet-container { + background-color: var(--background-color) !important; +} + #geolocate-button { position: absolute; bottom: 25px; @@ -39,22 +72,25 @@ body { bottom: 1em; left: 1em; z-index: 9000; - background-color: white; + background-color: var(--background-color); + color: var(--foreground-color); + border-radius: 1em; cursor: pointer; - box-shadow: 0 0 10px #00000066; + box-shadow: 0 0 10px var(--shadow-color); } .layer-selection-toggle { - border-top-left-radius: 1em; - border-bottom-left-radius: 1em; + border-radius: 1em; display: flex; flex-direction: column-reverse; + background: var(--subtle-detail-color); } -.layer-selection-toggle img { +.layer-selection-toggle svg { display: block; width: 2em; + height: 2em; padding: 1em; } @@ -62,7 +98,7 @@ body { .alert { - background-color: #fee4d1; + background-color: var(--alert-color); font-weight: bold; border-radius: 1em; margin: 0.25em; @@ -82,7 +118,7 @@ body { } .shadow { - box-shadow: 0 0 10px #00000066; + box-shadow: 0 0 10px var(--shadow-color); } .title-font span { @@ -91,7 +127,8 @@ body { } .soft { - background-color: #e5f5ff; + background-color: var(--subtle-detail-color); + color: var(--subtle-detail-color-contrast); font-weight: bold; border-radius: 1em; margin: 0.25em; @@ -137,7 +174,9 @@ body { #searchbox { display: inline-block; text-align: left; - background-color: white; + background-color: var(--background-color); + color: var(--foreground-color); + transition: all 500ms linear; pointer-events: all; border-radius: 1.3em; @@ -170,6 +209,7 @@ body { font-size: large; width: 100%; box-sizing: border-box; + color: var(--foreground-color); } .search-go img { @@ -215,13 +255,16 @@ body { overflow-y: auto; border-top-right-radius: 1em; border-bottom-right-radius: 1em; + background-color: var(--background-color); + color: var(--foreground-color); } .close-welcome-button { position: absolute; display: inline-block; height: 100%; - background-color: #e5f5ff; + background-color: var(--subtle-detail-color); + color: var(--subtle-detail-color-contrast); box-sizing: border-box; width: 4em; padding: 1em; @@ -229,22 +272,26 @@ body { border-bottom-left-radius: 1em; } -.close-welcome-button img { +.close-welcome-button svg { width: 2em; + height: 2em; } .open-welcome-button { display: inline-block; box-sizing: border-box; - background-color: white; + background: var(--subtle-detail-color); + color: var(--foreground-color); + height: 4em; width: 4em; padding: 1em; border-radius: 1em; } -.open-welcome-button img { +.open-welcome-button svg { width: 2em; + height: 2em; } #messagesbox { @@ -252,9 +299,11 @@ body { position: relative; padding: 0; pointer-events: all; - box-shadow: 0 0 10px #00000066; + box-shadow: 0 0 10px var(--shadow-color); border-radius: 1em; - width: min-content + width: min-content; + background-color: var(--background-color); + color: var(--foreground-color); } @@ -273,7 +322,9 @@ body { pointer-events: none; opacity: 1; - background-color: white; + background-color: var(--background-color); + color: var(--foreground-color); + transition: opacity 500ms linear; @@ -357,7 +408,9 @@ body { .iframe-escape { - background-color: white; + background-color: var(--background-color); + color: var(--foreground-color); + border-radius: 2em; display: block; width: min-content; @@ -376,11 +429,11 @@ body { flex-direction: row; font-size: large; margin: 0.5em; - background-color: #e5f5ff; + background-color: var(--subtle-detail-color); + color: var(--subtle-detail-color-contrast); border-radius: 1em; align-items: center; text-decoration: none; - color: black; } diff --git a/test.ts b/test.ts index 77feaa5..f1b3381 100644 --- a/test.ts +++ b/test.ts @@ -1,20 +1,11 @@ -/* +//* -import {UIEventSource} from "./Logic/UIEventSource"; -import {FeatureInfoBox} from "./UI/Popup/FeatureInfoBox"; -import SharedLayers from "./Customizations/SharedLayers"; +import Direction from "./UI/Input/Direction"; -const tags = { - mapillary: "wweALGY5g8_T8UjGkcWCfw", - wikimedia_commons: "File:Boekenkast Sint-Lodewijks.jpg" -} -const src = new UIEventSource(tags); +new Direction().AttachTo("maindiv") -new FeatureInfoBox(src, SharedLayers.sharedLayers["ghost_bike"]).AttachTo('maindiv'); -//const subs = new SubstitutedTranslation(new Translation({"nl":"NL {image_carousel()} {image_upload()}"}), src) -//subs.AttachTo("maindiv") /*/