lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

add base for notifications. These should be used for things such as "update available" only

This commit is contained in:
Jiiks 2018-08-20 16:23:05 +03:00
parent f2d7ef41da
commit 3518ac7cb2
11 changed files with 208 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/index.js
View File

@ -8,7 +8,7 @@
* LICENSE file in the root directory of this source tree.
*/
import { DOM, BdUI, BdMenu, Modals, Reflection, Toasts } from 'ui';
import { DOM, BdUI, BdMenu, Modals, Reflection, Toasts, Notifications } from 'ui';
import BdCss from './styles/index.scss';
import { Events, CssEditor, Globals, Settings, Database, Updater, ModuleManager, PluginManager, ThemeManager, ExtModuleManager, Vendor, WebpackModules, Patcher, MonkeyPatch, ReactComponents, ReactHelpers, ReactAutoPatcher, DiscordApi, BdWebApi, Connectivity, Cache } from 'modules';
import { ClientLogger as Logger, ClientIPC, Utils } from 'common';
@ -27,7 +27,7 @@ class BetterDiscord {
Logger.log('main', 'BetterDiscord starting');
this._bd = {
DOM, BdUI, BdMenu, Modals, Reflection, Toasts,
DOM, BdUI, BdMenu, Modals, Reflection, Toasts, Notifications,
Events, CssEditor, Globals, Settings, Database, Updater,
ModuleManager, PluginManager, ThemeManager, ExtModuleManager,

1
client/src/styles/partials/generic/index.scss
View File

@ -12,3 +12,4 @@
@import './layouts';
@import './toasts';
@import './badges';
@import './notifications';

77
client/src/styles/partials/generic/notifications.scss Normal file
View File

@ -0,0 +1,77 @@
.bd-notifications {
position: absolute;
left: -300px;
top: 0;
z-index: 900000;
.bd-notificationContainer {
position: relative;
background: rgb(54, 57, 63);
width: 280px;
height: 130px;
top: 30px;
border-radius: 2px;
box-shadow: 1px 1px 15px #000;
animation: bd-notif-slidein 1s reverse;
.bd-notificationHeader {
height: 24px;
border-bottom: 1px solid #484b51;
.bd-notificationDismissBtn {
cursor: pointer;
border-right: 1px solid #484b51;
&:hover {
background: rgba(0, 0, 0, .1);
}
.bd-materialDesignIcon {
fill: #fff;
display: flex;
height: 24px;
}
}
}
.bd-notificationBody {
padding: 10px;
.bd-notificationText {
color: #FFF;
}
}
&.bd-active {
animation: bd-notif-slidein 1s forwards;
}
&.bd-closing {
animation: bd-notif-slideout .5s;
}
}
}
@keyframes bd-notif-slidein {
0% {
transform: translatex(0);
}
50% {
transform: translatex(315px);
}
100% {
transform: translatex(305px);
}
}
@keyframes bd-notif-slideout {
0% {
transform: translatex(305px);
}
100% {
transform: translatex(0);
}
}

7
client/src/ui/bdui.js
View File

@ -12,7 +12,7 @@ import { Events, DiscordApi, Settings } from 'modules';
import { remote } from 'electron';
import DOM from './dom';
import Vue from './vue';
import { BdSettingsWrapper, BdModals, BdToasts } from './components';
import { BdSettingsWrapper, BdModals, BdToasts, BdNotifications } from './components';
export default class {
@ -52,6 +52,7 @@ export default class {
DOM.createElement('div', null, 'bd-settings').appendTo(DOM.bdBody);
DOM.createElement('div', null, 'bd-modals').appendTo(DOM.bdModals);
DOM.createElement('div', null, 'bd-toasts').appendTo(DOM.bdToasts);
DOM.createElement('div', null, 'bd-notifications').appendTo(DOM.bdNotifications);
DOM.createElement('bd-tooltips').appendTo(DOM.bdBody);
this.toasts = new (Vue.extend(BdToasts))({
@ -66,6 +67,10 @@ export default class {
el: '#bd-settings'
});
this.notifications = new (Vue.extend(BdNotifications))({
el: '#bd-notifications'
});
return this.vueInstance;
}

49
client/src/ui/components/BdNotifications.vue Normal file
View File

@ -0,0 +1,49 @@
/**
* BetterDiscord Notifications 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-notifications">
<div v-if="notifications.length" class="bd-notificationContainer bd-flex bd-flexCol bd-active" :class="{'bd-closing': dismissing}">
<div class="bd-notificationHeader bd-flex">
<div @click="this.dismissFirst" class="bd-notificationDismissBtn"><MiArrowLeft/></div>
</div>
<div class="bd-notificationBody bd-flex">
<div class="bd-notificationText">{{notifications[0].text}}</div>
</div>
<div class="bd-notificationFooter bd-flex"></div>
</div>
</div>
</template>
<script>
// Imports
import { Notifications } from 'ui';
import { MiArrowLeft } from './common';
export default {
data() {
return {
notifications: Notifications.stack,
dismissing: false
};
},
components: { MiArrowLeft },
methods: {
dismissFirst() {
if (this.dismissing) return;
this.dismissing = true;
setTimeout(() => {
Notifications.dismiss(0);
this.dismissing = false;
}, 500);
}
}
}
</script>

1
client/src/ui/components/common/MaterialIcon.js
View File

@ -20,3 +20,4 @@ export { default as MiSuccess } from './materialicons/Success.vue';
export { default as AccountCircle } from './materialicons/AccountCircle.vue';
export { default as MiLock } from './materialicons/Lock.vue';
export { default as MiImagePlus } from './materialicons/ImagePlus.vue';
export { default as MiArrowLeft } from './materialicons/ArrowLeft.vue';

27
client/src/ui/components/common/materialicons/ArrowLeft.vue Normal file
View File

@ -0,0 +1,27 @@
/**
* BetterDiscord Material Design Icon
* 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.
*
* Material Design Icons
* Copyright (c) 2014 Google
* Apache 2.0 LICENSE
* https://www.apache.org/licenses/LICENSE-2.0.txt
*/
<template>
<span class="bd-materialDesignIcon">
<svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
<path stroke-linejoin="round" d="M 20,11L 20,13L 7.98958,13L 13.4948,18.5052L 12.0806,19.9194L 4.16116,12L 12.0806,4.08058L 13.4948,5.49479L 7.98958,11L 20,11 Z " />
</svg>
</span>
</template>
<script>
export default {
props: ['size']
}
</script>

1
client/src/ui/components/index.js
View File

@ -2,3 +2,4 @@ export { default as BdSettingsWrapper } from './BdSettingsWrapper.vue';
export { default as BdSettings } from './BdSettings.vue';
export { default as BdModals } from './BdModals.vue';
export { default as BdToasts } from './BdToasts.vue';
export { default as BdNotifications } from './BdNotifications.vue';

5
client/src/ui/dom.js
View File

@ -184,9 +184,8 @@ export default class DOM {
static get bdThemes() { return this.getElement('bd-themes') || this.createElement('bd-themes').appendTo(this.bdHead) }
static get bdTooltips() { return this.getElement('bd-tooltips') || this.createElement('bd-tooltips').appendTo(this.bdBody) }
static get bdModals() { return this.getElement('bd-modals') || this.createElement('bd-modals').appendTo(this.bdBody) }
static get bdToasts() {
return this.getElement('bd-toasts') || this.createElement('bd-toasts').appendTo(this.bdBody);
}
static get bdToasts() { return this.getElement('bd-toasts') || this.createElement('bd-toasts').appendTo(this.bdBody) }
static get bdNotifications() { return this.getElement('bd-notifications') || this.createElement('bd-notifications').appendTo(this.bdBody) }
static getElement(e) {
if (e instanceof BdNode) return e.element;

41
client/src/ui/notifications.js Normal file
View File

@ -0,0 +1,41 @@
/*
* BetterDiscord Notifications
* 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.
*/
import { Events } from 'modules';
export default class Notifications {
/**
* Add a new notification to the stack.
* Notifications should only be used for important things.
* @param {String} text
* @param {Object} [buttons] buttons to show { text: 'Text for the button', onClick: fn() { return true if notification should be dismissed } }
*/
static add(text, buttons = []) {
this.stack.push({ text, buttons });
}
/**
* Notifications currently in the stack.
* @type {Object[]}
*/
static get stack() {
return this._stack || (this._stack = []);
}
/**
* Dismiss a notification at index.
* @param {Number} index Index of the notification
*/
static dismiss(index) {
this.stack.splice(index, 1);
}
}

1
client/src/ui/ui.js
View File

@ -3,6 +3,7 @@ export { default as BdUI } from './bdui';
export { default as BdMenu, BdMenuItems } from './bdmenu';
export { default as Modals } from './modals';
export { default as Toasts } from './toasts';
export { default as Notifications } from './notifications';
export { default as VueInjector } from './vueinjector';
export { default as Reflection } from './reflection';