midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Extract variables from html, add black theme to surveillance cameras, use svgs directly in the frontend

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-11-14 02:54:33 +01:00
parent 3183dec830
commit 3fdb84e481
26 changed files with 402 additions and 152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
InitUiElements.ts
View file

@ -110,6 +110,16 @@ export class InitUiElements {
InitUiElements.setupAllLayerElements(); 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() { function updateFavs() {
const favs = State.state.favouriteLayers.data ?? []; const favs = State.state.favouriteLayers.data ?? [];
@ -269,7 +279,7 @@ export class InitUiElements {
] ]
if (State.state.featureSwitchShareScreen.data) { 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) { if (State.state.featureSwitchMoreQuests.data) {
@ -282,7 +292,7 @@ export class InitUiElements {
tabs.push({ tabs.push({
header: Svg.help_img, header: Svg.help ,
content: new VariableUiElement(State.state.osmConnection.userDetails.map(userdetails => { content: new VariableUiElement(State.state.osmConnection.userDetails.map(userdetails => {
if (userdetails.csCount < State.userJourney.mapCompleteHelpUnlock) { if (userdetails.csCount < State.userJourney.mapCompleteHelpUnlock) {
return "" return ""
@ -303,8 +313,8 @@ export class InitUiElements {
const fullOptions = this.CreateWelcomePane(); const fullOptions = this.CreateWelcomePane();
const help = Svg.help_ui().SetClass("open-welcome-button"); const help = Svg.help_svg().SetClass("open-welcome-button");
const close = Svg.close_ui().SetClass("close-welcome-button"); const close = Svg.close_svg().SetClass("close-welcome-button");
const checkbox = new CheckBox( const checkbox = new CheckBox(
new Combine([ new Combine([
close, close,
@ -328,7 +338,7 @@ export class InitUiElements {
const fullOptions2 = this.CreateWelcomePane(); const fullOptions2 = this.CreateWelcomePane();
State.state.fullScreenMessage.setData(fullOptions2) State.state.fullScreenMessage.setData(fullOptions2)
Svg.help_ui() Svg.help_svg()
.SetClass("open-welcome-button") .SetClass("open-welcome-button")
.SetClass("shadow") .SetClass("shadow")
.onClick(() => { .onClick(() => {
@ -366,14 +376,14 @@ export class InitUiElements {
} }
layerControlPanel.SetStyle("display:block;padding:1em;border-radius:1em;"); 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( const checkbox = new CheckBox(
new Combine([ new Combine([
closeButton, closeButton,
layerControlPanel]).SetStyle("display:flex;flex-direction:row;") layerControlPanel]).SetStyle("display:flex;flex-direction:row;")
.SetClass("hidden-on-mobile") .SetClass("hidden-on-mobile")
, ,
Svg.layers_ui().SetClass("layer-selection-toggle"), Svg.layers_svg().SetClass("layer-selection-toggle"),
State.state.layerControlIsOpened State.state.layerControlIsOpened
); );

109
Svg.ts
View file

File diff suppressed because one or more lines are too long

3
UI/FullScreenMessageBoxHandler.ts
View file

@ -27,7 +27,8 @@ export class FullScreenMessageBox extends UIElement {
"overflow-y: auto;" + "overflow-y: auto;" +
"max-width:100vw;" + "max-width:100vw;" +
"overflow-x:hidden;" + "overflow-x:hidden;" +
"background:white;" "background:var(--background-color);" +
"color: var(--foreground-color);"
); );
}); });

6
UI/Image/ImageUploadFlow.ts
View file

@ -44,7 +44,7 @@ export class ImageUploadFlow extends UIElement {
this._licensePicker = licensePicker; this._licensePicker = licensePicker;
this._selectedLicence = licensePicker.GetValue(); this._selectedLicence = licensePicker.GetValue();
this._connectButton = new Combine([t.pleaseLogin]) this._connectButton = t.pleaseLogin.Clone()
.onClick(() => State.state.osmConnection.AttemptLogin()) .onClick(() => State.state.osmConnection.AttemptLogin())
.SetClass("login-button-friendly"); .SetClass("login-button-friendly");
@ -101,7 +101,7 @@ export class ImageUploadFlow extends UIElement {
]); ]);
const label = new Combine([ 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 Translations.t.image.addPicture
.SetStyle("width:max-content;font-size: 28px;" + .SetStyle("width:max-content;font-size: 28px;" +
"font-weight: bold;" + "font-weight: bold;" +
@ -115,7 +115,7 @@ export class ImageUploadFlow extends UIElement {
"cursor:pointer;" + "cursor:pointer;" +
"padding: 0.5em;" + "padding: 0.5em;" +
"border-radius: 1em;" + "border-radius: 1em;" +
"border: 3px solid black;" + "border: 3px solid var(--popup-border);" +
"box-sizing:border-box;") "box-sizing:border-box;")
const actualInputElement = const actualInputElement =

39
UI/Input/Direction.ts Normal file
View file

@ -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<number>{
private readonly value: UIEventSource<number>;
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
constructor(value?: UIEventSource<number>) {
super();
this.value = value ?? new UIEventSource<number>(undefined);
}
GetValue(): UIEventSource<number> {
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;
}
}

2
UI/Popup/EditableTagRendering.ts
View file

@ -38,7 +38,7 @@ export default class EditableTagRendering extends UIElement {
if(State.state.featureSwitchUserbadge.data){ if(State.state.featureSwitchUserbadge.data){
this._editButton = this._editButton =
Svg.pencil_ui().SetClass("edit-button") Svg.pencil_svg().SetClass("edit-button")
.onClick(() => { .onClick(() => {
self._editMode.setData(true); self._editMode.setData(true);
}); });

12
UI/UserBadge.ts
View file

@ -34,7 +34,7 @@ export class UserBadge extends UIElement {
.SetClass("userbadge-login") .SetClass("userbadge-login")
.onClick(() => State.state.osmConnection.AttemptLogin()); .onClick(() => State.state.osmConnection.AttemptLogin());
this._logout = this._logout =
Svg.logout_ui() Svg.logout_svg()
.onClick(() => { .onClick(() => {
State.state.osmConnection.LogOut(); State.state.osmConnection.LogOut();
}); });
@ -52,7 +52,7 @@ export class UserBadge extends UIElement {
this._homeButton = new VariableUiElement( this._homeButton = new VariableUiElement(
this._userDetails.map((userinfo) => { this._userDetails.map((userinfo) => {
if (userinfo.home) { if (userinfo.home) {
return Svg.home_img; return Svg.home;
} }
return ""; return "";
}) })
@ -75,7 +75,7 @@ export class UserBadge extends UIElement {
let messageSpan: UIElement = let messageSpan: UIElement =
new Link( new Link(
new Combine([Svg.envelope_img, "" + user.totalMessages]), new Combine([Svg.envelope, "" + user.totalMessages]),
'https://www.openstreetmap.org/messages/inbox', 'https://www.openstreetmap.org/messages/inbox',
true true
) )
@ -83,7 +83,7 @@ export class UserBadge extends UIElement {
if (user.unreadMessages > 0) { if (user.unreadMessages > 0) {
messageSpan = new Link( messageSpan = new Link(
new Combine([Svg.envelope_img, "" + user.unreadMessages]), new Combine([Svg.envelope, "" + user.unreadMessages]),
'https://www.openstreetmap.org/messages/inbox', 'https://www.openstreetmap.org/messages/inbox',
true true
).SetClass("alert") ).SetClass("alert")
@ -104,7 +104,7 @@ export class UserBadge extends UIElement {
} }
const settings = const settings =
new Link(Svg.gear_ui(), new Link(Svg.gear_svg(),
`https://www.openstreetmap.org/user/${encodeURIComponent(user.name)}/account`, `https://www.openstreetmap.org/user/${encodeURIComponent(user.name)}/account`,
true) true)
@ -124,7 +124,7 @@ export class UserBadge extends UIElement {
const csCount = const csCount =
new Link( new Link(
new Combine([Svg.star_img, "" + user.csCount]), new Combine([Svg.star, "" + user.csCount]),
`https://www.openstreetmap.org/user/${user.name}/history`, `https://www.openstreetmap.org/user/${user.name}/history`,
true); true);

2
assets/svg/ampersand.svg
View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> e<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#" xmlns:cc="http://creativecommons.org/ns#"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

2
assets/svg/checkmark.svg
View file

@ -1 +1 @@
<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7.28571L10.8261 15L23 3" stroke="black" stroke-width="4" stroke-linejoin="round"/></svg> <svg width="26" height="18" viewBox="0 0 26 18" style="fill:none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7.28571L10.8261 15L23 3" stroke="black" stroke-width="4" stroke-linejoin="round"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 195 B

After

Width:  |  Height:  |  Size: 201 B

49
assets/svg/envelope.svg
View file

@ -1,4 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="114" height="114"> <svg
<path stroke="#000" stroke-width="7" fill="none" d="m7,20h98v72H7zl44,44q5,4 10,0l44-44M7,92l36-36m26,0 36,36"/> xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg4"
version="1.1"
viewBox="0 0 114 114"
height="114"
width="114">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<path
id="path817"
d="M 9.6696131,22.725039 42.932885,56.977838 c 0,0 12.343058,14.397206 26.130256,0 C 88.864049,36.30085 103.12276,22.224485 103.12276,22.224485"
style="fill:none;stroke:#000000;stroke-width:8.16401958;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path823"
d="M 9.9025424,22.944915 102.88983,22.461864 v 69.921611"
style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
<path
id="path823-3"
d="M 102.88983,92.383475 9.902543,92.866526 V 22.944915"
style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path840"
d="M 15.059836,89.897056 52.138595,60.125694"
style="fill:none;stroke:#000000;stroke-width:2.88938379;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path840-7"
d="M 59.644597,61.331869 98.071505,89.49552"
style="fill:none;stroke:#000000;stroke-width:2.89490533;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 224 B

After

Width:  |  Height:  |  Size: 2 KiB

5
assets/svg/gear.svg
View file

@ -1 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16 12a4 4 0 11-8 0 4 4 0 018 0zm-1.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/><path fill-rule="evenodd" d="M12 1c-.268 0-.534.01-.797.028-.763.055-1.345.617-1.512 1.304l-.352 1.45c-.02.078-.09.172-.225.22a8.45 8.45 0 00-.728.303c-.13.06-.246.044-.315.002l-1.274-.776c-.604-.368-1.412-.354-1.99.147-.403.348-.78.726-1.129 1.128-.5.579-.515 1.387-.147 1.99l.776 1.275c.042.069.059.185-.002.315-.112.237-.213.48-.302.728-.05.135-.143.206-.221.225l-1.45.352c-.687.167-1.249.749-1.304 1.512a11.149 11.149 0 000 1.594c.055.763.617 1.345 1.304 1.512l1.45.352c.078.02.172.09.22.225.09.248.191.491.303.729.06.129.044.245.002.314l-.776 1.274c-.368.604-.354 1.412.147 1.99.348.403.726.78 1.128 1.129.579.5 1.387.515 1.99.147l1.275-.776c.069-.042.185-.059.315.002.237.112.48.213.728.302.135.05.206.143.225.221l.352 1.45c.167.687.749 1.249 1.512 1.303a11.125 11.125 0 001.594 0c.763-.054 1.345-.616 1.512-1.303l.352-1.45c.02-.078.09-.172.225-.22.248-.09.491-.191.729-.303.129-.06.245-.044.314-.002l1.274.776c.604.368 1.412.354 1.99-.147.403-.348.78-.726 1.129-1.128.5-.579.515-1.387.147-1.99l-.776-1.275c-.042-.069-.059-.185.002-.315.112-.237.213-.48.302-.728.05-.135.143-.206.221-.225l1.45-.352c.687-.167 1.249-.749 1.303-1.512a11.125 11.125 0 000-1.594c-.054-.763-.616-1.345-1.303-1.512l-1.45-.352c-.078-.02-.172-.09-.22-.225a8.469 8.469 0 00-.303-.728c-.06-.13-.044-.246-.002-.315l.776-1.274c.368-.604.354-1.412-.147-1.99-.348-.403-.726-.78-1.128-1.129-.579-.5-1.387-.515-1.99-.147l-1.275.776c-.069.042-.185.059-.315-.002a8.465 8.465 0 00-.728-.302c-.135-.05-.206-.143-.225-.221l-.352-1.45c-.167-.687-.749-1.249-1.512-1.304A11.149 11.149 0 0012 1zm-.69 1.525a9.648 9.648 0 011.38 0c.055.004.135.05.162.16l.351 1.45c.153.628.626 1.08 1.173 1.278.205.074.405.157.6.249a1.832 1.832 0 001.733-.074l1.275-.776c.097-.06.186-.036.228 0 .348.302.674.628.976.976.036.042.06.13 0 .228l-.776 1.274a1.832 1.832 0 00-.074 1.734c.092.195.175.395.248.6.198.547.652 1.02 1.278 1.172l1.45.353c.111.026.157.106.161.161a9.653 9.653 0 010 1.38c-.004.055-.05.135-.16.162l-1.45.351a1.833 1.833 0 00-1.278 1.173 6.926 6.926 0 01-.25.6 1.832 1.832 0 00.075 1.733l.776 1.275c.06.097.036.186 0 .228a9.555 9.555 0 01-.976.976c-.042.036-.13.06-.228 0l-1.275-.776a1.832 1.832 0 00-1.733-.074 6.926 6.926 0 01-.6.248 1.833 1.833 0 00-1.172 1.278l-.353 1.45c-.026.111-.106.157-.161.161a9.653 9.653 0 01-1.38 0c-.055-.004-.135-.05-.162-.16l-.351-1.45a1.833 1.833 0 00-1.173-1.278 6.928 6.928 0 01-.6-.25 1.832 1.832 0 00-1.734.075l-1.274.776c-.097.06-.186.036-.228 0a9.56 9.56 0 01-.976-.976c-.036-.042-.06-.13 0-.228l.776-1.275a1.832 1.832 0 00.074-1.733 6.948 6.948 0 01-.249-.6 1.833 1.833 0 00-1.277-1.172l-1.45-.353c-.111-.026-.157-.106-.161-.161a9.648 9.648 0 010-1.38c.004-.055.05-.135.16-.162l1.45-.351a1.833 1.833 0 001.278-1.173 6.95 6.95 0 01.249-.6 1.832 1.832 0 00-.074-1.734l-.776-1.274c-.06-.097-.036-.186 0-.228.302-.348.628-.674.976-.976.042-.036.13-.06.228 0l1.274.776a1.832 1.832 0 001.734.074 6.95 6.95 0 01.6-.249 1.833 1.833 0 001.172-1.277l.353-1.45c.026-.111.106-.157.161-.161z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M16 12a4 4 0 11-8 0 4 4 0 018 0zm-1.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
<path fill-rule="evenodd" d="M12 1c-.268 0-.534.01-.797.028-.763.055-1.345.617-1.512 1.304l-.352 1.45c-.02.078-.09.172-.225.22a8.45 8.45 0 00-.728.303c-.13.06-.246.044-.315.002l-1.274-.776c-.604-.368-1.412-.354-1.99.147-.403.348-.78.726-1.129 1.128-.5.579-.515 1.387-.147 1.99l.776 1.275c.042.069.059.185-.002.315-.112.237-.213.48-.302.728-.05.135-.143.206-.221.225l-1.45.352c-.687.167-1.249.749-1.304 1.512a11.149 11.149 0 000 1.594c.055.763.617 1.345 1.304 1.512l1.45.352c.078.02.172.09.22.225.09.248.191.491.303.729.06.129.044.245.002.314l-.776 1.274c-.368.604-.354 1.412.147 1.99.348.403.726.78 1.128 1.129.579.5 1.387.515 1.99.147l1.275-.776c.069-.042.185-.059.315.002.237.112.48.213.728.302.135.05.206.143.225.221l.352 1.45c.167.687.749 1.249 1.512 1.303a11.125 11.125 0 001.594 0c.763-.054 1.345-.616 1.512-1.303l.352-1.45c.02-.078.09-.172.225-.22.248-.09.491-.191.729-.303.129-.06.245-.044.314-.002l1.274.776c.604.368 1.412.354 1.99-.147.403-.348.78-.726 1.129-1.128.5-.579.515-1.387.147-1.99l-.776-1.275c-.042-.069-.059-.185.002-.315.112-.237.213-.48.302-.728.05-.135.143-.206.221-.225l1.45-.352c.687-.167 1.249-.749 1.303-1.512a11.125 11.125 0 000-1.594c-.054-.763-.616-1.345-1.303-1.512l-1.45-.352c-.078-.02-.172-.09-.22-.225a8.469 8.469 0 00-.303-.728c-.06-.13-.044-.246-.002-.315l.776-1.274c.368-.604.354-1.412-.147-1.99-.348-.403-.726-.78-1.128-1.129-.579-.5-1.387-.515-1.99-.147l-1.275.776c-.069.042-.185.059-.315-.002a8.465 8.465 0 00-.728-.302c-.135-.05-.206-.143-.225-.221l-.352-1.45c-.167-.687-.749-1.249-1.512-1.304A11.149 11.149 0 0012 1zm-.69 1.525a9.648 9.648 0 011.38 0c.055.004.135.05.162.16l.351 1.45c.153.628.626 1.08 1.173 1.278.205.074.405.157.6.249a1.832 1.832 0 001.733-.074l1.275-.776c.097-.06.186-.036.228 0 .348.302.674.628.976.976.036.042.06.13 0 .228l-.776 1.274a1.832 1.832 0 00-.074 1.734c.092.195.175.395.248.6.198.547.652 1.02 1.278 1.172l1.45.353c.111.026.157.106.161.161a9.653 9.653 0 010 1.38c-.004.055-.05.135-.16.162l-1.45.351a1.833 1.833 0 00-1.278 1.173 6.926 6.926 0 01-.25.6 1.832 1.832 0 00.075 1.733l.776 1.275c.06.097.036.186 0 .228a9.555 9.555 0 01-.976.976c-.042.036-.13.06-.228 0l-1.275-.776a1.832 1.832 0 00-1.733-.074 6.926 6.926 0 01-.6.248 1.833 1.833 0 00-1.172 1.278l-.353 1.45c-.026.111-.106.157-.161.161a9.653 9.653 0 01-1.38 0c-.055-.004-.135-.05-.162-.16l-.351-1.45a1.833 1.833 0 00-1.173-1.278 6.928 6.928 0 01-.6-.25 1.832 1.832 0 00-1.734.075l-1.274.776c-.097.06-.186.036-.228 0a9.56 9.56 0 01-.976-.976c-.036-.042-.06-.13 0-.228l.776-1.275a1.832 1.832 0 00.074-1.733 6.948 6.948 0 01-.249-.6 1.833 1.833 0 00-1.277-1.172l-1.45-.353c-.111-.026-.157-.106-.161-.161a9.648 9.648 0 010-1.38c.004-.055.05-.135.16-.162l1.45-.351a1.833 1.833 0 001.278-1.173 6.95 6.95 0 01.249-.6 1.832 1.832 0 00-.074-1.734l-.776-1.274c-.06-.097-.036-.186 0-.228.302-.348.628-.674.976-.976.042-.036.13-.06.228 0l1.274.776a1.832 1.832 0 001.734.074 6.95 6.95 0 01.6-.249 1.833 1.833 0 001.172-1.277l.353-1.45c.026-.111.106-.157.161-.161z"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

22
assets/svg/help.svg
View file

@ -8,33 +8,21 @@
id="svg11382" id="svg11382"
height="900" height="900"
width="900" width="900"
viewBox="0 0 900 900"
version="1.0"> version="1.0">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs11384" />
<g <g
id="layer1" id="layer1"
transform="matrix(0.90103258,0,0,0.90103258,112.84058,-1.9060177)"> transform="matrix(0.90103258,0,0,0.90103258,112.84058,-1.9060177)"
>
<g <g
id="g11476"> id="g11476">
<path <path
id="path11472" id="path11472"
style="font-style:normal;font-weight:normal;font-size:1201.92492676px;font-family:'Bitstream Vera Sans';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" style="font-style:normal;font-weight:normal;font-size:1201.92492676px;font-family:'Bitstream Vera Sans';text-align:center;text-anchor:middle;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 474.50888,718.22841 H 303.49547 v -22.30134 c -2.4e-4,-37.95108 4.30352,-68.76211 12.9113,-92.43319 8.60728,-23.67032 23.63352,-45.28695 40.65324,-64.84996 17.01914,-19.56211 41.98734,-26.33264 101.45793,-75.63085 31.69095,-25.82203 55.2813,-77.1523 55.28175,-98.67174 2.21232,-56.92245 -13.93983,-79.3422 -34.56287,-99.96524 -22.67355,-19.67717 -60.67027,-30.06998 -90.99892,-30.06998 -27.77921,6.9e-4 -68.46735,8.08871 -87.7666,25.37047 -25.93817,17.28308 -65.23747,73.70611 -57.04687,130.54577 l -194.516943,1.70222 c 0,-157.21399 29.393699,-198.69465 99.004113,-263.03032 67.39739,-54.376643 126.53128,-73.268365 243.84757,-73.268365 89.71791,0 161.89728,17.80281 214.32552,53.405855 71.20714,48.12472 122.30105,111.18354 122.30105,230.11281 -6.9e-4,44.32081 -19.15253,90.78638 -43.0726,128.33299 -18.38947,30.90938 -60.37511,66.45236 -118.21237,104.41628 -42.83607,25.7686 -66.67196,53.11926 -77.03964,72.0946 -10.36863,18.97603 -15.55271,43.72267 -15.55225,74.23999 z" /> d="M 474.50888,718.22841 H 303.49547 v -22.30134 c -2.4e-4,-37.95108 4.30352,-68.76211 12.9113,-92.43319 8.60728,-23.67032 23.63352,-45.28695 40.65324,-64.84996 17.01914,-19.56211 41.98734,-26.33264 101.45793,-75.63085 31.69095,-25.82203 55.2813,-77.1523 55.28175,-98.67174 2.21232,-56.92245 -13.93983,-79.3422 -34.56287,-99.96524 -22.67355,-19.67717 -60.67027,-30.06998 -90.99892,-30.06998 -27.77921,6.9e-4 -68.46735,8.08871 -87.7666,25.37047 -25.93817,17.28308 -65.23747,73.70611 -57.04687,130.54577 l -194.516943,1.70222 c 0,-157.21399 29.393699,-198.69465 99.004113,-263.03032 67.39739,-54.376643 126.53128,-73.268365 243.84757,-73.268365 89.71791,0 161.89728,17.80281 214.32552,53.405855 71.20714,48.12472 122.30105,111.18354 122.30105,230.11281 -6.9e-4,44.32081 -19.15253,90.78638 -43.0726,128.33299 -18.38947,30.90938 -60.37511,66.45236 -118.21237,104.41628 -42.83607,25.7686 -66.67196,53.11926 -77.03964,72.0946 -10.36863,18.97603 -15.55271,43.72267 -15.55225,74.23999 z" />
<path <path
id="path11474" id="path11474"
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" style="fill-opacity:1;stroke:none;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
transform="translate(1.106383,-5.5319149)" transform="translate(1.106383,-5.5319149)"
d="m 482.38298,869.80902 a 94.042557,73.021278 0 1 1 -188.08511,0 94.042557,73.021278 0 1 1 188.08511,0 z" /> d="m 482.38298,869.80902 a 94.042557,73.021278 0 1 1 -188.08511,0 94.042557,73.021278 0 1 1 188.08511,0 z" />
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

5
assets/svg/home.svg
View file

@ -1,3 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg height="16px" id="Layer_1" style="enable-background:new 0 0 16 16;" version="1.1" viewBox="0 0 16 16" width="16px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M15.45,7L14,5.551V2c0-0.55-0.45-1-1-1h-1c-0.55,0-1,0.45-1,1v0.553L9,0.555C8.727,0.297,8.477,0,8,0S7.273,0.297,7,0.555 L0.55,7C0.238,7.325,0,7.562,0,8c0,0.563,0.432,1,1,1h1v6c0,0.55,0.45,1,1,1h3v-5c0-0.55,0.45-1,1-1h2c0.55,0,1,0.45,1,1v5h3 c0.55,0,1-0.45,1-1V9h1c0.568,0,1-0.437,1-1C16,7.562,15.762,7.325,15.45,7z"/></svg> <svg height="16px" id="Layer_1" style="enable-background:new 0 0 16 16;" version="1.1" viewBox="0 0 16 16" width="16px"
xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="M15.45,7L14,5.551V2c0-0.55-0.45-1-1-1h-1c-0.55,0-1,0.45-1,1v0.553L9,0.555C8.727,0.297,8.477,0,8,0S7.273,0.297,7,0.555 L0.55,7C0.238,7.325,0,7.562,0,8c0,0.563,0.432,1,1,1h1v6c0,0.55,0.45,1,1,1h3v-5c0-0.55,0.45-1,1-1h2c0.55,0,1,0.45,1,1v5h3 c0.55,0,1-0.45,1-1V9h1c0.568,0,1-0.437,1-1C16,7.562,15.762,7.325,15.45,7z"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 689 B

After

Width:  |  Height:  |  Size: 659 B

2
assets/svg/pencil.svg
View file

@ -1,3 +1,3 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg"> <svg height="1024" width="896" viewBox="0 0 896 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M704 64L576 192l192 192 128-128L704 64zM0 768l0.688 192.562L192 960l512-512L512 256 0 768zM192 896H64V768h64v64h64V896z"/> <path d="M704 64L576 192l192 192 128-128L704 64zM0 768l0.688 192.562L192 960l512-512L512 256 0 768zM192 896H64V768h64v64h64V896z"/>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 207 B

After

Width:  |  Height:  |  Size: 230 B

8
assets/svg/share.svg
View file

@ -73,25 +73,25 @@
id="layer1" id="layer1"
transform="translate(0,-270.54165)"> transform="translate(0,-270.54165)">
<path <path
style="fill:none;stroke:#000000;stroke-width:2.43863511;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke-width:2.43863511;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 19.212364,278.17517 -11.9689358,5.52059 11.9388628,5.50669" d="m 19.212364,278.17517 -11.9689358,5.52059 11.9388628,5.50669"
id="path819" id="path819"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" /> sodipodi:nodetypes="ccc" />
<circle <circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926" style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
id="path820" id="path820"
cx="7.2434282" cx="7.2434282"
cy="283.69574" cy="283.69574"
r="3.9119694" /> r="3.9119694" />
<circle <circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926" style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
id="path820-3" id="path820-3"
cx="19.48818" cx="19.48818"
cy="289.22873" cy="289.22873"
r="3.9119689" /> r="3.9119689" />
<circle <circle
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926" style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
id="path820-3-6" id="path820-3-6"
cx="19.48818" cx="19.48818"
cy="277.56281" cy="277.56281"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

12
assets/themes/surveillance_cameras/custom_theme.css Normal file
View file

@ -0,0 +1,12 @@
html {
--subtle-detail-color: #9d9d9d !important;
--subtle-detail-color-contrast: #00ff00 !important;
--popup-border: #00ff00 !important;
--catch-detail-color: #00ff00 !important;
--catch-detail-color-contrast: black !important;
--alert-color: #eb00ff !important;
--background-color: black !important;
--foreground-color: white !important;
--shadow-color: white !important;
}

3
assets/themes/surveillance_cameras/surveillance_cameras.json
View file

@ -24,6 +24,8 @@
"startZoom": 1, "startZoom": 1,
"widenFactor": 0.05, "widenFactor": 0.05,
"socialImage": "", "socialImage": "",
"customCss": "./assets/themes/surveillance_cameras/custom_theme.css",
"defaultBackgroundId": "Stadia.AlidadeSmoothDark",
"layers": [ "layers": [
{ {
"id": "cameras", "id": "cameras",
@ -52,6 +54,7 @@
}, },
"description": {}, "description": {},
"tagRenderings": [ "tagRenderings": [
"images",
{ {
"question": { "question": {
"en": "What kind of camera is this?", "en": "What kind of camera is this?",

8
createLayouts.ts
View file

@ -202,7 +202,13 @@ function createLandingPage(layout: LayoutConfig) {
let customCss = ""; let customCss = "";
if (layout.customCss !== undefined && layout.customCss !== "") { if (layout.customCss !== undefined && layout.customCss !== "") {
customCss = `<link rel='stylesheet" href=${layout.customCss}"/>`
try {
const cssContent = readFileSync(layout.customCss);
customCss = "<style>" + cssContent + "</style>";
} catch (e) {
customCss = `<link rel='stylesheet' href="${layout.customCss}"/>`
}
} }
const og = ` const og = `

10
css/mobile.css
View file

@ -4,6 +4,8 @@ Contains tweaks for small screens
.only-on-mobile { .only-on-mobile {
display: none; display: none;
background-color: var(--background-color);
color: var(--foreground-color);
} }
@media only screen and (max-width: 600px), only screen and (max-height: 600px) { @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 { .only-on-mobile {
display: unset; display: unset;
background-color: var(--background-color);
color: var(--foreground-color);
} }
.hidden-on-mobile { .hidden-on-mobile {
@ -22,6 +26,8 @@ Contains tweaks for small screens
#messagesbox { #messagesbox {
display: none; display: none;
background-color: var(--background-color);
color: var(--foreground-color);
} }
#help-button-mobile{ #help-button-mobile{
@ -57,15 +63,15 @@ Contains tweaks for small screens
#messagesboxmobile { #messagesboxmobile {
display: block; display: block;
position: absolute; position: absolute;
z-index: 10000; z-index: 10000;
background-color: white;
width: 100vw; width: 100vw;
} }
#welcomeMessage { #welcomeMessage {
display: inline-block; display: inline-block;
background-color: white; background-color: var(--background-color);
border-radius: 0; border-radius: 0;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;

25
css/openinghourstable.css
View file

@ -5,7 +5,6 @@
text-align: center; text-align: center;
word-break: normal; word-break: normal;
} }
.oh-table th { .oh-table th {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -34,22 +33,22 @@
} }
.oh-timecell:hover { .oh-timecell:hover {
background-color: #92b1ff !important; background-color: var(--catch-detail-color) !important;
} }
.oh-timecell-selected { .oh-timecell-selected {
background-color: #0048ff; background-color: var(--catch-detail-color);
} }
.oh-timecell-half { .oh-timecell-half {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
background-color: aliceblue; background-color: var(--subtle-detail-color);
} }
.oh-timecell-half.oh-timecell-selected { .oh-timecell-half.oh-timecell-selected {
background-color: #0048ff; background-color: var(--catch-detail-color);
} }
.oh-table tr { .oh-table tr {
@ -75,12 +74,12 @@
} }
.oh-timecol-selected { .oh-timecol-selected {
border-right: #0048ff; border-right: var(--catch-detail-color);
} }
.oh-timecol-selected > span { .oh-timecol-selected > span {
background-color: #0048ff; background-color: var(--catch-detail-color);
color: white; color: var(--background-color);
width: 100%; width: 100%;
display: block; display: block;
} }
@ -96,11 +95,11 @@
} }
.oh-timerow-selected .oh-timecell-0 { .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 { .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; top: 0;
left: 0; left: 0;
width: calc(100% - 4px); width: calc(100% - 4px);
background: #0048ff; background: var(--catch-detail-color);
z-index: 1; z-index: 1;
box-sizing: border-box; box-sizing: border-box;
} }
@ -276,7 +275,7 @@
.ohviz-today { .ohviz-today {
background-color: #e5f5ff; background-color: var(--subtle-detail-color);
} }
.ohviz-weekday { .ohviz-weekday {
@ -290,7 +289,7 @@
} }
.ohviz-container { .ohviz-container {
border: 0.5em solid #e5f5ff; border: 0.5em solid var(--subtle-detail-color);
border-radius: 1em; border-radius: 1em;
display: block; display: block;
} }

42
css/tabbedComponent.css
View file

@ -7,7 +7,7 @@
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
align-items: start; align-items: start;
background-color: white; background-color: var(--background-color);
max-width: 100vw; max-width: 100vw;
overflow-x: auto; overflow-x: auto;
} }
@ -21,10 +21,19 @@
margin:auto; margin:auto;
} }
.tab-single-header svg {
height: 3em;
max-width: 3em;
padding: 0.5em;
display:block;
margin:auto;
}
.tab-content { .tab-content {
z-index: 5002; z-index: 5002;
background-color: white; background-color: var(--background-color);
color: var(--foreground-color);
position: relative; position: relative;
padding: 1em; padding: 1em;
display: inline-block; display: inline-block;
@ -41,19 +50,36 @@
} }
.tab-active { .tab-active {
background-color: white; background-color: var(--background-color);
color: var(--foreground-color);
z-index: 5001; z-index: 5001;
box-shadow: 0 0 10px black; box-shadow: 0 0 10px var(--shadow-color);
border: 1px solid white; border: 1px solid var(--background-color);
min-width: 4em; min-width: 4em;
} }
.tab-active svg {
fill: var(--foreground-color);
stroke: var(--foreground-color);
}
.tab-non-active { .tab-non-active {
background-color: #e5f5ff; background-color: var(--subtle-detail-color);
color: var(--foreground-color);
opacity: 0.5; opacity: 0.5;
border-left: 1px solid gray; border-left: 1px solid gray;
border-right:1px solid gray; border-right: 1px solid gray;
border-top: 1px solid gray; border-top: 1px solid gray;
border-bottom: 1px solid lightgray; border-bottom: 1px solid lightgray;
min-width: 4em; 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;
}

27
css/tagrendering.css
View file

@ -30,7 +30,7 @@
.question { .question {
display: block; display: block;
margin-top: 1em; margin-top: 1em;
background-color: #e5f5ff; background-color: var(--subtle-detail-color);
padding: 1em; padding: 1em;
border-radius: 1em; border-radius: 1em;
font-size: larger; font-size: larger;
@ -72,7 +72,7 @@ input:checked + label .question-option-with-border {
.save { .save {
display: inline-block; display: inline-block;
border: solid white 2px; border: solid white 2px;
background-color: #3a3aeb; background-color: var(--catch-detail-color);
color: white; color: white;
padding: 0.2em 0.6em; padding: 0.2em 0.6em;
font-size: x-large; font-size: x-large;
@ -90,8 +90,8 @@ input:checked + label .question-option-with-border {
.login-button-friendly { .login-button-friendly {
display: inline-block; display: inline-block;
border: solid white 2px; border: solid white 2px;
background-color: #3a3aeb; background-color:var(--catch-detail-color);
color: white; color: var(--catch-detail-color-contrast);
padding: 0.2em 0.6em; padding: 0.2em 0.6em;
font-size: large; font-size: large;
font-weight: bold; font-weight: bold;
@ -115,7 +115,24 @@ input:checked + label .question-option-with-border {
height: 1.3em; height: 1.3em;
padding: 0.5em; padding: 0.5em;
border-radius: 0.65em; border-radius: 0.65em;
border: solid black 1px; border: solid var(--popup-border) 1px;
font-size: medium; font-size: medium;
float: right; 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;
}

22
css/userbadge.css
View file

@ -1,6 +1,7 @@
#userbadge { #userbadge {
display: inline-block; display: inline-block;
background-color: white; background-color: var(--background-color);
color: var(--foreground-color);
-webkit-border-radius: 2em; -webkit-border-radius: 2em;
-moz-border-radius: 2em; -moz-border-radius: 2em;
border-radius: 2em; border-radius: 2em;
@ -15,7 +16,7 @@
#userbadge a { #userbadge a {
text-decoration: none; text-decoration: none;
color: black; color: var(--foreground-color);
} }
@ -42,14 +43,19 @@
margin-bottom: 0.2em; margin-bottom: 0.2em;
} }
.userstats img { .userstats svg {
width: 1em; width: 1em;
height: 1em; height: 1em;
fill: black; border-radius: 0;
border-radius: 0;
display: block; display: block;
} }
.userstats img {
width: 1em;
height: 1em;
border-radius: 0;
display: block;
}
#profile-pic { #profile-pic {
float: left; float: left;
@ -76,7 +82,8 @@
height: 2.2em; /*SHould equal profile-pic height - padding*/ height: 2.2em; /*SHould equal profile-pic height - padding*/
z-index: 5000; z-index: 5000;
text-align: left; text-align: left;
background-color: white; background-color: var(--background-color);
color: var(--foreground-color);
background-size: 100%; background-size: 100%;
line-height: 0.75em; line-height: 0.75em;
@ -88,7 +95,8 @@
.userbadge-login { .userbadge-login {
font-weight: bold; font-weight: bold;
font-size: large; font-size: large;
background-color: #e5f5ff !important; background-color: var(--subtle-detail-color) !important;
color: var(--subtle-detail-color-contrast);
height:3em; height:3em;
display: inline-block; display: inline-block;

3
generateIncludedImages.ts
View file

@ -14,6 +14,8 @@ function genImages() {
} }
const svg = fs.readFileSync("./assets/svg/" + path, "utf-8") 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(/\n/g, " ")
.replace(/\r/g, "") .replace(/\r/g, "")
.replace(/\\/g, "\\") .replace(/\\/g, "\\")
@ -22,6 +24,7 @@ function genImages() {
.replace(/[ -]/g, "_"); .replace(/[ -]/g, "_");
module += ` public static ${name} = "${svg}"\n` module += ` public static ${name} = "${svg}"\n`
module += ` public static ${name}_img = Img.AsImageElement(Svg.${name})\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 += ` public static ${name}_ui() { return new FixedUiElement(Svg.${name}_img);}\n\n`
} }
module += "}\n"; module += "}\n";

95
index.css
View file

@ -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 { html, body {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 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%; 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 { #geolocate-button {
position: absolute; position: absolute;
bottom: 25px; bottom: 25px;
@ -39,22 +72,25 @@ body {
bottom: 1em; bottom: 1em;
left: 1em; left: 1em;
z-index: 9000; z-index: 9000;
background-color: white; background-color: var(--background-color);
color: var(--foreground-color);
border-radius: 1em; border-radius: 1em;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 10px #00000066; box-shadow: 0 0 10px var(--shadow-color);
} }
.layer-selection-toggle { .layer-selection-toggle {
border-top-left-radius: 1em; border-radius: 1em;
border-bottom-left-radius: 1em;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
background: var(--subtle-detail-color);
} }
.layer-selection-toggle img { .layer-selection-toggle svg {
display: block; display: block;
width: 2em; width: 2em;
height: 2em;
padding: 1em; padding: 1em;
} }
@ -62,7 +98,7 @@ body {
.alert { .alert {
background-color: #fee4d1; background-color: var(--alert-color);
font-weight: bold; font-weight: bold;
border-radius: 1em; border-radius: 1em;
margin: 0.25em; margin: 0.25em;
@ -82,7 +118,7 @@ body {
} }
.shadow { .shadow {
box-shadow: 0 0 10px #00000066; box-shadow: 0 0 10px var(--shadow-color);
} }
.title-font span { .title-font span {
@ -91,7 +127,8 @@ body {
} }
.soft { .soft {
background-color: #e5f5ff; background-color: var(--subtle-detail-color);
color: var(--subtle-detail-color-contrast);
font-weight: bold; font-weight: bold;
border-radius: 1em; border-radius: 1em;
margin: 0.25em; margin: 0.25em;
@ -137,7 +174,9 @@ body {
#searchbox { #searchbox {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
background-color: white; background-color: var(--background-color);
color: var(--foreground-color);
transition: all 500ms linear; transition: all 500ms linear;
pointer-events: all; pointer-events: all;
border-radius: 1.3em; border-radius: 1.3em;
@ -170,6 +209,7 @@ body {
font-size: large; font-size: large;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
color: var(--foreground-color);
} }
.search-go img { .search-go img {
@ -215,13 +255,16 @@ body {
overflow-y: auto; overflow-y: auto;
border-top-right-radius: 1em; border-top-right-radius: 1em;
border-bottom-right-radius: 1em; border-bottom-right-radius: 1em;
background-color: var(--background-color);
color: var(--foreground-color);
} }
.close-welcome-button { .close-welcome-button {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
height: 100%; height: 100%;
background-color: #e5f5ff; background-color: var(--subtle-detail-color);
color: var(--subtle-detail-color-contrast);
box-sizing: border-box; box-sizing: border-box;
width: 4em; width: 4em;
padding: 1em; padding: 1em;
@ -229,22 +272,26 @@ body {
border-bottom-left-radius: 1em; border-bottom-left-radius: 1em;
} }
.close-welcome-button img { .close-welcome-button svg {
width: 2em; width: 2em;
height: 2em;
} }
.open-welcome-button { .open-welcome-button {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
background-color: white; background: var(--subtle-detail-color);
color: var(--foreground-color);
height: 4em; height: 4em;
width: 4em; width: 4em;
padding: 1em; padding: 1em;
border-radius: 1em; border-radius: 1em;
} }
.open-welcome-button img { .open-welcome-button svg {
width: 2em; width: 2em;
height: 2em;
} }
#messagesbox { #messagesbox {
@ -252,9 +299,11 @@ body {
position: relative; position: relative;
padding: 0; padding: 0;
pointer-events: all; pointer-events: all;
box-shadow: 0 0 10px #00000066; box-shadow: 0 0 10px var(--shadow-color);
border-radius: 1em; 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; pointer-events: none;
opacity: 1; opacity: 1;
background-color: white; background-color: var(--background-color);
color: var(--foreground-color);
transition: opacity 500ms linear; transition: opacity 500ms linear;
@ -357,7 +408,9 @@ body {
.iframe-escape { .iframe-escape {
background-color: white; background-color: var(--background-color);
color: var(--foreground-color);
border-radius: 2em; border-radius: 2em;
display: block; display: block;
width: min-content; width: min-content;
@ -376,11 +429,11 @@ body {
flex-direction: row; flex-direction: row;
font-size: large; font-size: large;
margin: 0.5em; margin: 0.5em;
background-color: #e5f5ff; background-color: var(--subtle-detail-color);
color: var(--subtle-detail-color-contrast);
border-radius: 1em; border-radius: 1em;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: black;
} }

15
test.ts
View file

@ -1,20 +1,11 @@
/* //*
import {UIEventSource} from "./Logic/UIEventSource"; import Direction from "./UI/Input/Direction";
import {FeatureInfoBox} from "./UI/Popup/FeatureInfoBox";
import SharedLayers from "./Customizations/SharedLayers";
const tags = { new Direction().AttachTo("maindiv")
mapillary: "wweALGY5g8_T8UjGkcWCfw",
wikimedia_commons: "File:Boekenkast Sint-Lodewijks.jpg"
}
const src = new UIEventSource(tags);
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")
/*/ /*/