From 3518ac7cb27fa60509e584faa9af8e4acd75ecb7 Mon Sep 17 00:00:00 2001 From: Jiiks Date: Mon, 20 Aug 2018 16:23:05 +0300 Subject: [PATCH] add base for notifications. These should be used for things such as "update available" only --- client/src/index.js | 4 +- client/src/styles/partials/generic/index.scss | 1 + .../partials/generic/notifications.scss | 77 +++++++++++++++++++ client/src/ui/bdui.js | 7 +- client/src/ui/components/BdNotifications.vue | 49 ++++++++++++ .../src/ui/components/common/MaterialIcon.js | 1 + .../common/materialicons/ArrowLeft.vue | 27 +++++++ client/src/ui/components/index.js | 1 + client/src/ui/dom.js | 5 +- client/src/ui/notifications.js | 41 ++++++++++ client/src/ui/ui.js | 1 + 11 files changed, 208 insertions(+), 6 deletions(-) create mode 100644 client/src/styles/partials/generic/notifications.scss create mode 100644 client/src/ui/components/BdNotifications.vue create mode 100644 client/src/ui/components/common/materialicons/ArrowLeft.vue create mode 100644 client/src/ui/notifications.js diff --git a/client/src/index.js b/client/src/index.js index 04248269..31d196e2 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -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, diff --git a/client/src/styles/partials/generic/index.scss b/client/src/styles/partials/generic/index.scss index d193ab04..f8472f62 100644 --- a/client/src/styles/partials/generic/index.scss +++ b/client/src/styles/partials/generic/index.scss @@ -12,3 +12,4 @@ @import './layouts'; @import './toasts'; @import './badges'; +@import './notifications'; diff --git a/client/src/styles/partials/generic/notifications.scss b/client/src/styles/partials/generic/notifications.scss new file mode 100644 index 00000000..5b64112c --- /dev/null +++ b/client/src/styles/partials/generic/notifications.scss @@ -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); + } +} diff --git a/client/src/ui/bdui.js b/client/src/ui/bdui.js index 4fd07eb2..c57e918e 100644 --- a/client/src/ui/bdui.js +++ b/client/src/ui/bdui.js @@ -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; } diff --git a/client/src/ui/components/BdNotifications.vue b/client/src/ui/components/BdNotifications.vue new file mode 100644 index 00000000..aa8be389 --- /dev/null +++ b/client/src/ui/components/BdNotifications.vue @@ -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. +*/ + + + + diff --git a/client/src/ui/components/common/MaterialIcon.js b/client/src/ui/components/common/MaterialIcon.js index f5d4b6b3..18355005 100644 --- a/client/src/ui/components/common/MaterialIcon.js +++ b/client/src/ui/components/common/MaterialIcon.js @@ -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'; diff --git a/client/src/ui/components/common/materialicons/ArrowLeft.vue b/client/src/ui/components/common/materialicons/ArrowLeft.vue new file mode 100644 index 00000000..325a2949 --- /dev/null +++ b/client/src/ui/components/common/materialicons/ArrowLeft.vue @@ -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 +*/ + + + diff --git a/client/src/ui/components/index.js b/client/src/ui/components/index.js index 3a22b4d8..60616b7a 100644 --- a/client/src/ui/components/index.js +++ b/client/src/ui/components/index.js @@ -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'; diff --git a/client/src/ui/dom.js b/client/src/ui/dom.js index 2428a29c..91d311f1 100644 --- a/client/src/ui/dom.js +++ b/client/src/ui/dom.js @@ -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; diff --git a/client/src/ui/notifications.js b/client/src/ui/notifications.js new file mode 100644 index 00000000..5d6da771 --- /dev/null +++ b/client/src/ui/notifications.js @@ -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); + } + +} diff --git a/client/src/ui/ui.js b/client/src/ui/ui.js index 95eb66f4..8b29f2f6 100644 --- a/client/src/ui/ui.js +++ b/client/src/ui/ui.js @@ -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';