ilja_space/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add custom theme for advanced users

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-31 04:58:58 +02:00
parent 004eead4ee
commit 9c42839f01
44 changed files with 635 additions and 326 deletions
Download patch file Download diff file Expand all files Collapse all files

8
UI/Base/Combine.ts
View file

@ -3,10 +3,12 @@ import Translations from "../i18n/Translations";
export default class Combine extends UIElement {
private uiElements: (string | UIElement)[];
private className: string = undefined;
private clas: string = undefined;
constructor(uiElements: (string | UIElement)[]) {
constructor(uiElements: (string | UIElement)[], className: string = undefined) {
super(undefined);
this.className = className;
this.uiElements = uiElements;
}
@ -19,6 +21,10 @@ export default class Combine extends UIElement {
elements += element;
}
}
if(this.className !== undefined){
elements = `<span class='${this.className}'>${elements}</span>`;
}
return elements;
}

20
UI/Base/Image.ts Normal file
View file

@ -0,0 +1,20 @@
import {UIElement} from "../UIElement";
export class Image extends UIElement{
private src: string;
private style: string = "";
constructor(src: string, style: string = "") {
super(undefined);
this.style = style;
this.src = src;
}
InnerRender(): string {
if(this.src === undefined){
return "";
}
return `<img src='${this.src}' style='${this.style}'>`;
}
}

6
UI/Base/TabbedComponent.ts
View file

@ -27,8 +27,10 @@ export class TabbedComponent extends UIElement {
for (let i = 0; i < this.headers.length; i++) {
let header = this.headers[i];
headerBar += `<div class=\'tab-single-header ${i == this._source.data ? 'tab-active' : 'tab-non-active'}\'>` +
header.Render() + "</div>"
if (!this.content[i].IsEmpty()) {
headerBar += `<div class=\'tab-single-header ${i == this._source.data ? 'tab-active' : 'tab-non-active'}\'>` +
header.Render() + "</div>"
}
}

4
UI/SimpleAddUI.ts
View file

@ -92,7 +92,7 @@ export class SimpleAddUI extends UIElement {
const self = this;
return () => {
const loc = State.state.bm.lastClickLocation.data;
const loc = State.state.bm.LastClickLocation.data;
let feature = State.state.changes.createElement(option.tags, loc.lat, loc.lon);
option.layerToAddTo.AddNewElement(feature);
State.state.selectedElement.setData({feature: feature});
@ -107,7 +107,7 @@ export class SimpleAddUI extends UIElement {
if(userDetails.data.dryRun){
this.CreatePoint(this._confirmPreset.data)();
return;
return "";
}
return new Combine([

3
UI/UserBadge.ts
View file

@ -9,6 +9,7 @@ import {Basemap} from "../Logic/Leaflet/Basemap";
import {State} from "../State";
import {PendingChanges} from "./PendingChanges";
import Locale from "./i18n/Locale";
import {Utils} from "../Utils";
/**
* Handles and updates the user badge
@ -25,7 +26,7 @@ export class UserBadge extends UIElement {
super(State.state.osmConnection.userDetails);
this._userDetails = State.state.osmConnection.userDetails;
this._pendingChanges = new PendingChanges();
this._languagePicker = Locale.CreateLanguagePicker();
this._languagePicker = Utils.CreateLanguagePicker();
this._logout = new FixedUiElement("<img src='assets/logout.svg' class='small-userbadge-icon' alt='logout'>")
.onClick(() => {

3
UI/WelcomeMessage.ts
View file

@ -6,6 +6,7 @@ import {State} from "../State";
import {Layout} from "../Customizations/Layout";
import Translations from "./i18n/Translations";
import {VariableUiElement} from "./Base/VariableUIElement";
import {Utils} from "../Utils";
export class WelcomeMessage extends UIElement {
private readonly layout: Layout;
@ -20,7 +21,7 @@ export class WelcomeMessage extends UIElement {
constructor() {
super(State.state.osmConnection.userDetails);
this.languagePicker = Locale.CreateLanguagePicker(Translations.t.general.pickLanguage);
this.languagePicker = Utils.CreateLanguagePicker(Translations.t.general.pickLanguage);
this.ListenTo(Locale.language);
function fromLayout(f: (layout: Layout) => (string | UIElement)): UIElement {

16
UI/i18n/Locale.ts
View file

@ -7,15 +7,17 @@ import {State} from "../../State";
export default class Locale {
public static language: UIEventSource<string> = LocalStorageSource.Get('language', "en");
public static CreateLanguagePicker(label: string | UIElement = "") {
return new DropDown(label, State.state.layoutToUse.data.supportedLanguages.map(lang => {
return {value: lang, shown: lang}
}
), Locale.language);
public static language: UIEventSource<string> = Locale.setup();
private static setup() {
const source = LocalStorageSource.Get('language', "en");
// @ts-ignore
window.setLanguage = function (language: string) {
source.setData(language)
}
return source;
}
}

18
UI/i18n/Translations.ts
View file

@ -793,8 +793,8 @@ export default class Translations {
}),
header: new T({
en: "<h2>No data</h2>You clicked somewhere where no data is known yet.<br/>",
nl: "<h2>Geen selectie</h2>Je klikte ergens waar er nog geen data is.<br/>",
en: "<h2>Add a point?</h2>You clicked somewhere where no data is known yet.<br/>",
nl: "<h2>Punt toevoegen?</h2>Je klikte ergens waar er nog geen data is.<br/>",
fr: "<h2>Pas de données</h2> vous avez cliqué sur un endroit ou il n'y a pas encore de données. <br/>"
}),
@ -814,8 +814,8 @@ export default class Translations {
fr: "Chargement des donnés. Patientez un instant avant d'ajouter un nouveau point"
}),
confirmIntro: new T({
en: "<h3>Add a {title} here?</h3>The point you create here will be visible for everyone. Please, only add things on to the map if they truly exist. A lot of applications use this data.",
nl: "<h3>Voeg hier een {title} toe?</h3>Het punt dat je hier toevoegt, is zichtbaar voor iedereen. Veel applicaties gebruiken deze data, voeg dus enkel punten toe die echt bestaan.",
en: "<h3>Add a {title} here?</h3>The point you create here will be <b>visible for everyone</b>. Please, only add things on to the map if they truly exist. A lot of applications use this data.",
nl: "<h3>Voeg hier een {title} toe?</h3>Het punt dat je hier toevoegt, is <b>zichtbaar voor iedereen</b>. Veel applicaties gebruiken deze data, voeg dus enkel punten toe die echt bestaan.",
fr: "<h3>Ajouter un/une {title} ici?</h3>Le point que vous ajouter sera visible par tout le monde. Merci d'etre sûr que ce point existe réellement. Beaucoup d'autres applications reposent sur ces données.",
})
@ -952,6 +952,16 @@ export default class Translations {
nl: "Ga naar de berichten",
fr: "Ouvrir les messages"
})
},
favourite: {
title: "Custom",
description: new T({
en: "<h3>Your custom theme</h3>In your custom theme, you can add some favourite layers from other themes to create a custom theme."
}),
panelIntro: new T({
en:"<h3>Your custom theme</h3>Create your own theme here by picking your favourite layers"
})
}
}