Userlist badges

This commit is contained in:
Jiiks 2018-03-08 21:58:53 +02:00
parent af8f7b0c9f
commit 393362c8fb
3 changed files with 42 additions and 7 deletions

View File

@ -41,3 +41,18 @@
height: 12px; height: 12px;
} }
} }
.member-username .bd-message-badges-wrap {
display: inline-block;
height: 17px;
width: 14px;
.bd-message-badge-developer,
.bd-message-badge-contributor {
width: 14px;
height: 16px;
background-position: center;
background-size: 12px 12px;
background-repeat: no-repeat;
}
}

View File

@ -163,12 +163,13 @@ export default class extends EventListener {
} }
setUserId(user) { setUserId(user) {
if (user.hasAttribute('user-id')) return; if (user.hasAttribute('data-user-id')) return;
const userid = Reflection(user).prop('user.id'); const userid = Reflection(user).prop('user.id');
if (!userid) return; if (!userid) return;
user.setAttribute('user-id', userid); user.setAttribute('data-user-id', userid);
const currentUser = userid === TempApi.currentUserId; const currentUser = userid === TempApi.currentUserId;
if (currentUser) user.setAttribute('data-currentuser', true); if (currentUser) user.setAttribute('data-currentuser', true);
Events.emit('ui:useridset', user);
} }
get appMount() { get appMount() {

View File

@ -18,16 +18,18 @@ export default class extends EventListener {
bindings() { bindings() {
this.uiEvent = this.uiEvent.bind(this); this.uiEvent = this.uiEvent.bind(this);
this.messageBadge = this.messageBadge.bind(this); this.messageBadge = this.messageBadge.bind(this);
this.messageBadges = this.messageBadges.bind(this); this.badges = this.badges.bind(this);
this.userlistBadge = this.userlistBadge.bind(this);
} }
get eventBindings() { get eventBindings() {
return [ return [
{ id: 'discord:MESSAGE_CREATE', callback: this.messageBadge }, { id: 'discord:MESSAGE_CREATE', callback: this.messageBadge },
{ id: 'discord:MESSAGE_UPDATE', callback: this.messageBadge }, { id: 'discord:MESSAGE_UPDATE', callback: this.messageBadge },
{ id: 'server-switch', callback: this.messageBadges }, { id: 'server-switch', callback: this.badges },
{ id: 'channel-switch', callback: this.messageBadges }, { id: 'channel-switch', callback: this.badges },
{ id: 'ui:loadedmore', callback: this.messageBadges }, { id: 'ui:loadedmore', callback: this.badges },
{ id: 'ui:useridset', callback: this.userlistBadge },
{ id: 'ui-event', callback: this.uiEvent } { id: 'ui-event', callback: this.uiEvent }
]; ];
} }
@ -41,7 +43,7 @@ export default class extends EventListener {
this.inject(userid); this.inject(userid);
} }
messageBadges() { badges() {
for (const messageGroup of document.querySelectorAll('.message-group')) { for (const messageGroup of document.querySelectorAll('.message-group')) {
this.messageBadge({ element: messageGroup }); this.messageBadge({ element: messageGroup });
} }
@ -69,6 +71,23 @@ export default class extends EventListener {
); );
} }
userlistBadge(e) {
const c = this.contributors.find(c => c.id === e.dataset.userId);
if (!c) return;
const memberUsername = e.querySelector('.member-username');
if (!memberUsername) return;
const root = document.createElement('span');
memberUsername.append(root);
const { developer, contributor, webdev } = c;
VueInjector.inject(
root,
DOM.createElement('div', null, 'bdmessagebadges'),
{ BdMessageBadge },
`<BdMessageBadge developer="${developer}" webdev="${webdev}" contributor="${contributor}"/>`,
true
);
}
inject(userid) { inject(userid) {
const c = this.contributors.find(c => c.id === userid); const c = this.contributors.find(c => c.id === userid);
if (!c) return; if (!c) return;