Further work on infobox, styling everything, removing clutter

This commit is contained in:
Pieter Vander Vennet 2020-06-27 03:06:51 +02:00
parent 2acd53d150
commit 0b4016b65d
48 changed files with 1283 additions and 454 deletions

View file

@ -7,11 +7,14 @@ import {UIEventSource} from "./UIEventSource";
*/
export class UserBadge extends UIElement {
private _userDetails: UIEventSource<UserDetails>;
private _pendingChanges: UIElement;
constructor(userDetails: UIEventSource<UserDetails>) {
constructor(userDetails: UIEventSource<UserDetails>,
pendingChanges : UIElement) {
super(userDetails);
this._userDetails = userDetails;
this._pendingChanges = pendingChanges;
userDetails.addCallback(function () {
const profilePic = document.getElementById("profile-pic");
@ -27,17 +30,50 @@ export class UserBadge extends UIElement {
if (!user.loggedIn) {
return "<div class='activate-osm-authentication'>Klik hier om aan te melden bij OSM</div>";
}
let messageSpan = "<span id='messages'>" +
" <a href='https://www.openstreetmap.org/messages/inbox' target='_blank'><img class='envelope' src='./assets/envelope.svg'/>" +
user.totalMessages +
"</a></span>";
if (user.unreadMessages > 0) {
messageSpan = "<span id='messages' class='alert'>" +
" <a href='https://www.openstreetmap.org/messages/inbox' target='_blank'><img class='envelope' src='./assets/envelope.svg'/>" +
" " +
"" +
user.unreadMessages.toString() +
"</a></span>";
}
let dryrun = "";
if (user.dryRun) {
dryrun = " <span class='alert'>TESTING</span>";
}
return "<img id='profile-pic' src='" + user.img + "'/> " +
"<div id='usertext'>"+
"<div id='username'>" +
"<a href='https://www.openstreetmap.org/user/"+user.name+"' target='_blank'>" + user.name + "</a></div> <br />" +
"<div id='csCount'> " +
" <a href='https://www.openstreetmap.org/user/"+user.name+"/history' target='_blank'><img class='star' src='./assets/star.svg'/>" + user.csCount + "</div></a>" +
"<div id='usertext'>" +
"<p id='username'>" +
"<a href='https://www.openstreetmap.org/user/" + user.name + "' target='_blank'>" + user.name + "</a>" +
dryrun +
"</p> " +
"<p id='userstats'>" +
messageSpan +
"<span id='csCount'> " +
" <a href='https://www.openstreetmap.org/user/" + user.name + "/history' target='_blank'><img class='star' src='./assets/star.svg'/> " + user.csCount +
"</a></span> " +
this._pendingChanges.Render() +
"</p>" +
"</div>";
}
InnerUpdate(htmlElement: HTMLElement) {
this._pendingChanges.Update();
}
Activate() {
this._pendingChanges.Activate();
}
}