Fixed user language location

This commit is contained in:
Pieter Vander Vennet 2020-07-23 16:00:49 +02:00
parent 7c1b05b68b
commit 2e7b14061f
5 changed files with 26 additions and 43 deletions

View file

@ -64,8 +64,8 @@ export class DropDown<T> extends InputElement<T> {
let options = ""; let options = "";
for (let i = 0; i < this._values.length; i++) { for (let i = 0; i < this._values.length; i++) {
options += "<option value='" + i + "'>" + this._values[i].shown.InnerRender() + "</option>" options += "<option value='" + i + "'>" + this._values[i].shown.InnerRender() + "</option>"
} }
return "<form>" + return "<form>" +
"<label for='dropdown-" + this.id + "'>" + this._label.Render() + "</label>" + "<label for='dropdown-" + this.id + "'>" + this._label.Render() + "</label>" +
"<select name='dropdown-" + this.id + "' id='dropdown-" + this.id + "'>" + "<select name='dropdown-" + this.id + "' id='dropdown-" + this.id + "'>" +
@ -89,8 +89,6 @@ export class DropDown<T> extends InputElement<T> {
}); });
var t = this._value.data; var t = this._value.data;
for (let i = 0; i < this._values.length ; i++) { for (let i = 0; i < this._values.length ; i++) {
const value = this._values[i]; const value = this._values[i];
@ -99,7 +97,5 @@ export class DropDown<T> extends InputElement<T> {
e.selectedIndex = i; e.selectedIndex = i;
} }
} }
} }
} }

View file

@ -24,10 +24,10 @@ export class UserBadge extends UIElement {
languagePicker: UIElement, languagePicker: UIElement,
basemap: Basemap) { basemap: Basemap) {
super(userDetails); super(userDetails);
this._languagePicker = languagePicker;
this._userDetails = userDetails; this._userDetails = userDetails;
this._pendingChanges = pendingChanges; this._pendingChanges = pendingChanges;
this._basemap = basemap; this._basemap = basemap;
this._languagePicker = languagePicker;
this._logout = new FixedUiElement("<img src='assets/logout.svg' class='small-userbadge-icon' alt='logout'>") this._logout = new FixedUiElement("<img src='assets/logout.svg' class='small-userbadge-icon' alt='logout'>")
.onClick(() => { .onClick(() => {
@ -101,27 +101,29 @@ export class UserBadge extends UIElement {
"<img class='small-userbadge-icon' src='./assets/gear.svg' alt='settings'>" + "<img class='small-userbadge-icon' src='./assets/gear.svg' alt='settings'>" +
"</a> "; "</a> ";
return "<a href='https://www.openstreetmap.org/user/" + encodeURIComponent(user.name) + "' target='_blank'>" + const userIcon = "<a href='https://www.openstreetmap.org/user/" + encodeURIComponent(user.name) + "' target='_blank'><img id='profile-pic' src='" + user.img + "' alt='profile-pic'/></a>";
"<img id='profile-pic' src='" + user.img + "' alt='profile-pic'/> " +
"</a>" +
"<div id='usertext'>" + const userName = "<p id='username'>" +
"<p id='username'>" +
"<a href='https://www.openstreetmap.org/user/" + user.name + "' target='_blank'>" + user.name + "</a>" + "<a href='https://www.openstreetmap.org/user/" + user.name + "' target='_blank'>" + user.name + "</a>" +
dryrun + dryrun + "</p>";
"</p> " +
"<p id='userstats'>" + const csCount = "<span id='csCount'> " +
" <a href='https://www.openstreetmap.org/user/" + user.name + "/history' target='_blank'><img class='small-userbadge-icon' src='./assets/star.svg' alt='star'/> " + user.csCount +
"</a></span> ";
const userStats = "<div id='userstats'>" +
this._homeButton.Render() + this._homeButton.Render() +
settings + settings +
messageSpan + messageSpan +
"<span id='csCount'> " + csCount +
" <a href='https://www.openstreetmap.org/user/" + user.name + "/history' target='_blank'><img class='small-userbadge-icon' src='./assets/star.svg' alt='star'/> " + user.csCount +
"</a></span> " +
this._logout.Render() + this._logout.Render() +
this._languagePicker.Render() +
this._pendingChanges.Render() + this._pendingChanges.Render() +
"</p>" + this._languagePicker.Render() +
"</div>"; "</div>";
return userIcon + "<div id='usertext'>" + userName + userStats + "</div>";
} }

View file

@ -238,14 +238,7 @@ form {
height: 1em; height: 1em;
} }
#language-select { e
pointer-events: all;
cursor: pointer;
position: absolute;
margin-left: 2em;
margin-top: 3em;
}
#messagesbox-wrapper { #messagesbox-wrapper {
} }

View file

@ -33,8 +33,6 @@
Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is
blocking it. blocking it.
</div> </div>
<div id="language-select"></div>
<br/>
<div id="searchbox"></div> <div id="searchbox"></div>
</div> </div>
<br/> <br/>

View file

@ -207,9 +207,6 @@ for (const layer of layoutToUse.layers) {
} }
addButtons.push(addButton); addButtons.push(addButton);
flayers.push(flayer); flayers.push(flayer);
console.log(flayers);
} }
const layerUpdater = new LayerUpdater(bm, minZoom, flayers); const layerUpdater = new LayerUpdater(bm, minZoom, flayers);
@ -217,17 +214,12 @@ const layerUpdater = new LayerUpdater(bm, minZoom, flayers);
// --------------- Setting up filter ui -------- // --------------- Setting up filter ui --------
// buttons
const closedFilterButton = `<button id="filter__button" class="filter__button filter__button--shadow">${Img.closedFilterButton}</button>`; const closedFilterButton = `<button id="filter__button" class="filter__button filter__button--shadow">${Img.closedFilterButton}</button>`;
const openFilterButton = ` const openFilterButton = `
<button id="filter__button" class="filter__button">${Img.openFilterButton}</button>`; <button id="filter__button" class="filter__button">${Img.openFilterButton}</button>`;
// basemap dropdown
let baseLayerOptions = []; let baseLayerOptions = [];
for (const key in BaseLayers.baseLayers) { for (const key in BaseLayers.baseLayers) {
baseLayerOptions.push({value: {name: key, layer: BaseLayers.baseLayers[key]}, shown: key}); baseLayerOptions.push({value: {name: key, layer: BaseLayers.baseLayers[key]}, shown: key});
} }
@ -241,10 +233,7 @@ if (flayers.length > 1) {
// ------------------ Setup various UI elements ------------ // ------------------ Setup various UI elements ------------
let languagePicker = new DropDown(" ", layoutToUse.supportedLanguages.map(lang => {
return {value: lang, shown: lang}
}
), Locale.language).AttachTo("language-select");
new StrayClickHandler(bm, selectedElement, fullScreenMessage, () => { new StrayClickHandler(bm, selectedElement, fullScreenMessage, () => {
@ -290,9 +279,14 @@ selectedElement.addCallback((feature) => {
const pendingChanges = new PendingChanges( const pendingChanges = new PendingChanges(
changes, secondsTillChangesAreSaved,); changes, secondsTillChangesAreSaved,);
let languagePicker = new DropDown("", layoutToUse.supportedLanguages.map(lang => {
return {value: lang, shown: lang}
}
), Locale.language);
new UserBadge(osmConnection.userDetails, new UserBadge(osmConnection.userDetails,
pendingChanges, pendingChanges,
new FixedUiElement(""), languagePicker,
bm) bm)
.AttachTo('userbadge'); .AttachTo('userbadge');