add badges to messages as well

This commit is contained in:
Jiiks 2018-03-08 20:46:03 +02:00
parent 7737dacd05
commit dfa7987756
5 changed files with 76 additions and 5 deletions

View File

@ -18,13 +18,26 @@
}
.bd-profile-badge-developer,
.bd-profile-badge-contributor {
.bd-profile-badge-contributor,
.bd-message-badge-developer,
.bd-message-badge-contributor {
background-image: $logoSmallBw;
width: 16px;
filter: brightness(10);
cursor: pointer;
.theme-light [class*="topSectionNormal-"] & {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjYmJiYmJiIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==');
filter: none;
}
}
.bd-message-badges-wrap {
display: inline-block;
margin-left: 6px;
height: 11px;
.bd-message-badge-developer,
.bd-message-badge-contributor {
width: 12px;
height: 12px;
}
}

View File

@ -7,7 +7,7 @@
@import './bdsettings/index.scss';
@import './generic/index.scss';
@import './modals/index.scss';
@import './profilebadges.scss';
@import './badges.scss';
@import './discordoverrides.scss';
@import './helpers.scss';

View File

@ -0,0 +1,32 @@
/**
* BetterDiscord BD Message Badge Component
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
* All rights reserved.
* https://betterdiscord.net
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
<template>
<div class="bd-message-badges-wrap">
<div v-if="developer == 'true'" v-tooltip="'BetterDiscord Developer'" class="bd-message-badge bd-message-badge-developer" @click="onClick"></div>
<div v-else-if="webdev == 'true'" v-tooltip="'BetterDiscord Web Developer'" class="bd-message-badge bd-message-badge-developer" @click="onClick"></div>
<div v-else-if="contributor == 'true'" v-tooltip="'BetterDiscord Contributor'" class="bd-message-badge bd-message-badge-contributor" @click="onClick"></div>
</div>
</template>
<script>
// Imports
import { shell } from 'electron';
export default {
props: ['webdev', 'developer', 'contributor', 'hasBadges'],
methods: {
onClick() {
if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
if (this.webdev) return shell.openExternal('https://betterdiscord.net');
if (this.contributor) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp/graphs/contributors');
}
}
}
</script>

View File

@ -4,3 +4,4 @@ export { default as CssEditorView } from './CssEditor.vue';
export { default as PluginsView } from './PluginsView.vue';
export { default as ThemesView } from './ThemesView.vue';
export { default as BdBadge } from './BdBadge.vue';
export { default as BdMessageBadge } from './BdMessageBadge.vue';

View File

@ -10,18 +10,20 @@
import { EventListener } from 'modules';
import DOM from './dom';
import { BdBadge } from './components/bd';
import { BdBadge, BdMessageBadge } from './components/bd';
import VueInjector from './vueinjector';
export default class extends EventListener {
bindings() {
this.uiEvent = this.uiEvent.bind(this);
this.messageBadges = this.messageBadges.bind(this);
}
get eventBindings() {
return [
{ id: 'ui-event', callback: this.uiEvent }
{ id: 'discord:MESSAGE_CREATE', callback: this.messageBadges },
{ id: 'ui-event', callback: this.uiEvent }
];
}
@ -34,6 +36,28 @@ export default class extends EventListener {
this.inject(userid);
}
messageBadges(e) {
if (!e.element) return;
const msgGroup = e.element.closest('.message-group');
if (msgGroup.dataset.hasBadges) return;
msgGroup.setAttribute('data-has-badges', true);
if (!msgGroup.dataset.authorId) return;
const c = this.contributors.find(c => c.id === msgGroup.dataset.authorId);
if (!c) return;
const root = document.createElement('span');
const wrapperParent = msgGroup.querySelector('.username-wrapper').parentElement;
if (!wrapperParent || wrapperParent.children.length < 2) return;
wrapperParent.insertBefore(root, wrapperParent.children[1]);
const { developer, contributor, webdev } = c;
VueInjector.inject(
root,
DOM.createElement('div', null, 'bdmessagebadges'),
{ BdMessageBadge },
`<BdMessageBadge developer="${developer}" webdev="${webdev}" contributor="${contributor}"/>`,
true
);
}
inject(userid) {
const c = this.contributors.find(c => c.id === userid);
if (!c) return;
@ -61,6 +85,7 @@ export default class extends EventListener {
get contributors() {
return [
{ 'id': '81388395867156480', 'webdev': true, 'developer': true, 'contributor': true }, // Jiiks
{ 'id': '418494039050944513', 'webdev': true, 'developer': true, 'contributor': true }, // Mioni
{ 'id': '98003542823944192', 'webdev': false, 'developer': true, 'contributor': true }, // Pohky
{ 'id': '138850472541814784', 'webdev': true, 'developer': false, 'contributor': true }, // Hammock
{ 'id': '249746236008169473', 'webdev': false, 'developer': true, 'contributor': true }, // Zerebos