Fixed user language location

UI/Input/DropDown.ts

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

UI/UserBadge.ts

@@ -24,10 +24,10 @@ export class UserBadge extends UIElement {
                 languagePicker: UIElement,
                 basemap: Basemap) {
         super(userDetails);
-        this._languagePicker = languagePicker;
         this._userDetails = userDetails;
         this._pendingChanges = pendingChanges;
         this._basemap = basemap;
+        this._languagePicker = languagePicker;
 
         this._logout = new FixedUiElement("<img src='assets/logout.svg' class='small-userbadge-icon' alt='logout'>")
             .onClick(() => {
@@ -101,27 +101,29 @@ export class UserBadge extends UIElement {
             "<img class='small-userbadge-icon' src='./assets/gear.svg' alt='settings'>" +
             "</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>" +
-            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() +
             settings +
             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._languagePicker.Render() +
             this._pendingChanges.Render() +
-            "</p>" +
+            this._languagePicker.Render() +
-       
             "</div>";
+
+        return userIcon + "<div id='usertext'>" + userName + userStats + "</div>";
+
     }
 
 

index.css

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

index.html

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

index.ts

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