Dark and Light themes on notifications

This commit is contained in:
Jean Ouina 2020-06-10 18:24:36 +02:00
parent 943aadb29d
commit 45c5d96a45
4 changed files with 76 additions and 17 deletions

View File

@ -62,11 +62,11 @@ async function privateInit(){
require.cache["react-dom"] = ReactDOM
}
let original = ModuleLoader.get((e) => e.createSound)[0].createSound
let createSoundOriginal = ModuleLoader.get((e) => e.createSound)[0].createSound
ModuleLoader.get((e) => e.createSound)[0].createSound = function(sound){
let isCalling = sound === "call_ringing_beat" || sound === "call_ringing"
if(isCalling){
let returned = original(...arguments)
let returned = createSoundOriginal.call(this, ...arguments)
Object.defineProperty(returned, "name", {
get(){
return window.Lightcord.Settings.callRingingBeat ? "call_ringing_beat" : "call_ringing"
@ -78,7 +78,7 @@ async function privateInit(){
})
return returned
}else{
return original(...arguments)
return createSoundOriginal(...arguments)
}
}
@ -109,7 +109,7 @@ async function privateInit(){
fs.writeFileSync(ZeresPluginLibraryPath, content)
})
// Should we download 1XenoLib and BDFDB too ?
// Should we download 1XenoLib and BDFDB too ? response: No
BetterDiscordConfig.haveInstalledDefault = true // Inform User about what we just did
}
@ -187,6 +187,11 @@ async function privateInit(){
}
}
dispatcher.subscribe("USER_SETTINGS_UPDATE", (data) => {
console.log(data)
DiscordNative.ipc.send("UPDATE_THEME", data.settings.theme)
})
require("../../../../../LightcordApi/js/main")
if(shouldShowPrompt){
@ -840,18 +845,26 @@ function ensureGuildClasses(){
})
}
function ensureExported(filter){
return new Promise((resolve) => {
global.ensureExported = function ensureExported(filter, maxTime = 500){
let tried = 0
return new Promise((resolve, reject) => {
let mod = ModuleLoader.get(filter)[0]
if(mod)return resolve(mod)
tried++
let intergay = setInterval(() => {
let interval = setInterval(() => {
if(tried > maxTime){
clearInterval(interval)
reject(new Error("Could not find the module with the given filter."))
return
}
mod = ModuleLoader.get(filter)[0]
if(mod){
clearInterval(intergay)
clearInterval(interval)
resolve(mod)
return
}
tried++
}, 100);
})
}

View File

@ -50,4 +50,9 @@ if(process.platform === "win32"){
this.onclose()
}
}
}
}
ensureExported((e => e.default && e.default.theme))
.then(themeStore => {
ipcRenderer.send("UPDATE_THEME", themeStore.default.theme)
}).catch(console.error)

View File

@ -38,6 +38,7 @@ const IPC_NOTIFICATIONS_CLEAR = 'NOTIFICATIONS_CLEAR';
const IPC_NOTIFICATION_SHOW = 'NOTIFICATION_SHOW';
const IPC_NOTIFICATION_CLICK = 'NOTIFICATION_CLICK';
const IPC_NOTIFICATION_CLOSE = 'NOTIFICATION_CLOSE';
const IPC_THEME_UPDATE = "UPDATE_THEME"
// events
const events = exports.events = new _events.EventEmitter();
@ -87,6 +88,7 @@ function init({
_ipcMain2.default.on(IPC_NOTIFICATION_SHOW, handleNotificationShow);
_ipcMain2.default.on(IPC_NOTIFICATION_CLICK, handleNotificationClick);
_ipcMain2.default.on(IPC_NOTIFICATION_CLOSE, handleNotificationClose);
_ipcMain2.default.on(IPC_THEME_UPDATE, handleThemeUpdate)
}
function destroyWindow() {
@ -106,6 +108,7 @@ function close() {
_ipcMain2.default.removeListener(IPC_NOTIFICATION_SHOW, handleNotificationShow);
_ipcMain2.default.removeListener(IPC_NOTIFICATION_CLICK, handleNotificationClick);
_ipcMain2.default.removeListener(IPC_NOTIFICATION_CLOSE, handleNotificationClose);
_ipcMain2.default.removeListener(IPC_THEME_UPDATE, handleThemeUpdate)
}
function setMainWindow(_mainWindow) {
@ -137,6 +140,10 @@ function handleNotificationClose(e, notificationId) {
}, VARIABLES.outDuration);
}
function handleThemeUpdate(e, theme){
updateTheme(theme)
}
function updateNotifications() {
if (notifications.length > 0) {
clearTimeout(hideTimeout);
@ -163,6 +170,14 @@ function updateNotifications() {
}
}
let lastUsedTheme = "dark"
function updateTheme(theme){
lastUsedTheme = theme
if (notificationWindow != null) {
webContentsSend(notificationWindow, 'UPDATE_THEME', theme);
}
}
function calculateBoundingBox() {
const [positionX, positionY] = mainWindow.getPosition();
const [windowWidth, windowHeight] = mainWindow.getSize();
@ -215,5 +230,8 @@ function createWindow() {
pathname: _path2.default.join(__dirname, 'notifications', 'index.html')
});
notificationWindow.loadURL(notificationUrl);
notificationWindow.webContents.on('did-finish-load', () => updateNotifications());
notificationWindow.webContents.on('did-finish-load', () => {
updateTheme(lastUsedTheme)
updateNotifications()
});
}

View File

@ -113,7 +113,23 @@
r.locals && (e.exports = r.locals)
}, function(e, t, n) {
var r = n(5);
(e.exports = n(6)(!1)).push([e.i, "@font-face {\n font-family: Whitney;\n font-style: light;\n font-weight: 300;\n src: url(" + r(n(7)) + ") format('woff');\n}\n@font-face {\n font-family: Whitney;\n font-style: normal;\n font-weight: 500;\n src: url(" + r(n(8)) + ") format('woff');\n}\n@font-face {\n font-family: Whitney;\n font-style: medium;\n font-weight: 600;\n src: url(" + r(n(9)) + ") format('woff');\n}\n@font-face {\n font-family: Whitney;\n font-style: bold;\n font-weight: 700;\n src: url(" + r(n(10)) + ') format(\'woff\');\n}\n@-webkit-keyframes flipIn {\n 0% {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n transition-timing-function: ease-in;\n opacity: 0;\n }\n 40% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n transition-timing-function: ease-in;\n }\n 60% {\n transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n opacity: 1;\n }\n 80% {\n transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n }\n 100% {\n transform: perspective(400px);\n }\n}\n@-webkit-keyframes flipOut {\n 0% {\n transform: perspective(400px);\n }\n 30% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n opacity: 1;\n }\n 100% {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n opacity: 0;\n }\n}\n* {\n box-sizing: border-box;\n -webkit-user-select: none;\n cursor: default;\n}\nbody {\n margin: 0;\n overflow: hidden;\n}\n#notifications {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 400;\n height: 530;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n}\n.notification {\n height: 96px;\n width: 390px;\n font-family: Whitney, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;\n line-height: 18px;\n font-size: 12px;\n background-color: #fff;\n background-clip: padding-box;\n box-shadow: 0 1px 2px rgba(0,0,0,0.2);\n transition: 0.2s background-color;\n -webkit-animation-fill-mode: both;\n margin-bottom: 10px;\n margin-right: 10px;\n position: relative;\n}\n.notification.in {\n backface-visibility: visible !important;\n -webkit-animation-name: flipIn;\n -webkit-animation-duration: 700ms;\n}\n.notification.out {\n backface-visibility: visible !important;\n -webkit-animation-name: flipOut;\n -webkit-animation-duration: 333ms;\n}\n.notification:hover .notification-dismiss {\n opacity: 0.5;\n}\n.notification .notification-dismiss {\n position: absolute;\n opacity: 0;\n width: 10px;\n height: 10px;\n right: 6px;\n top: 6px;\n background: url(' + r(n(11)) + ") no-repeat;\n background-size: 10px;\n transition: 0.2s opacity;\n z-index: 1;\n cursor: pointer;\n padding: 0;\n margin: 0;\n border: none;\n outline: none;\n}\n.notification .notification-dismiss:hover {\n opacity: 1;\n}\n.notification .notification-logo {\n position: absolute;\n bottom: 10px;\n right: 12px;\n width: 22px;\n height: 24px;\n background: url(" + r(n(12)) + ") center center no-repeat;\n background-size: 22px 24px;\n}\n.notification .notification-contents {\n height: 96px;\n width: 390px;\n display: flex;\n flex-direction: row;\n}\n.notification .notification-contents .notification-icon {\n height: 96px;\n width: 96px;\n background: #1e2124;\n background-size: 96px 96px;\n}\n.notification .notification-contents .notification-body {\n flex: 1;\n padding: 10px;\n}\n.notification .notification-contents .notification-body header {\n margin: 0;\n font-size: 16px;\n line-height: 1.8em;\n font-weight: 600;\n color: #7289da;\n letter-spacing: 0.02em;\n}\n.notification .notification-contents .notification-body p {\n margin: 0;\n color: #737f8d;\n font-size: 12px;\n line-height: 1.25em;\n overflow: hidden;\n width: 90%;\n flex: 1;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n.notification .notification-contents .notification-body p + p {\n margin-top: 5px;\n}\n", ""])
(e.exports = n(6)(!1)).push([e.i,
"@font-face {\n font-family: Whitney;\n font-style: light;\n font-weight: 300;\n src: url(" +
r(n(7)) +
") format('woff');\n}\n@font-face {\n font-family: Whitney;\n font-style: normal;\n font-weight: 500;\n src: url(" +
r(n(8)) +
") format('woff');\n}\n@font-face {\n font-family: Whitney;\n font-style: medium;\n font-weight: 600;\n src: url(" +
r(n(9)) +
") format('woff');\n}\n@font-face {\n font-family: Whitney;\n font-style: bold;\n font-weight: 700;\n src: url(" +
r(n(10)) +
') format(\'woff\');\n}\n@-webkit-keyframes flipIn {\n 0% {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n transition-timing-function: ease-in;\n opacity: 0;\n }\n 40% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n transition-timing-function: ease-in;\n }\n 60% {\n transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n opacity: 1;\n }\n 80% {\n transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n }\n 100% {\n transform: perspective(400px);\n }\n}\n@-webkit-keyframes flipOut {\n 0% {\n transform: perspective(400px);\n }\n 30% {\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n opacity: 1;\n }\n 100% {\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n opacity: 0;\n }\n}\n* {\n box-sizing: border-box;\n -webkit-user-select: none;\n cursor: default;\n}\nbody {\n margin: 0;\n overflow: hidden;\n}\n#notifications {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 400;\n height: 530;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n}\n.notification {\n height: 96px;\n width: 390px;\n font-family: Whitney, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;\n line-height: 18px;\n font-size: 12px;\n background-color: #fff;\n background-clip: padding-box;\n box-shadow: 0 1px 2px rgba(0,0,0,0.2);\n transition: 0.2s background-color;\n -webkit-animation-fill-mode: both;\n margin-bottom: 10px;\n margin-right: 10px;\n position: relative;\n}\n.notification.in {\n backface-visibility: visible !important;\n -webkit-animation-name: flipIn;\n -webkit-animation-duration: 700ms;\n}\n.notification.out {\n backface-visibility: visible !important;\n -webkit-animation-name: flipOut;\n -webkit-animation-duration: 333ms;\n}\n.notification:hover .notification-dismiss {\n opacity: 0.5;\n}\n.notification .notification-dismiss {\n position: absolute;\n opacity: 0;\n width: 10px;\n height: 10px;\n right: 6px;\n top: 6px;\n background: url(' +
r(n(11)) +
") no-repeat;\n background-size: 10px;\n transition: 0.2s opacity;\n z-index: 1;\n cursor: pointer;\n padding: 0;\n margin: 0;\n border: none;\n outline: none;\n}\n.notification .notification-dismiss:hover {\n opacity: 1;\n}\n.notification .notification-logo {\n position: absolute;\n bottom: 10px;\n right: 12px;\n width: 22px;\n height: 24px;\n background: url(" +
r(n(12)) +
") center center no-repeat;\n background-size: 22px 24px;\n}\n.notification .notification-contents {\n height: 96px;\n width: 390px;\n display: flex;\n flex-direction: row;\n}\n.notification .notification-contents .notification-icon {\n height: 96px;\n width: 96px;\n background: #1e2124;\n background-size: 96px 96px;\n}\n.notification .notification-contents .notification-body {\n flex: 1;\n padding: 10px;\n}\n.notification .notification-contents .notification-body header {\n margin: 0;\n font-size: 16px;\n line-height: 1.8em;\n font-weight: 600;\n color: #7289da;\n letter-spacing: 0.02em;\n}\n.notification .notification-contents .notification-body p {\n margin: 0;\n color: #737f8d;\n font-size: 12px;\n line-height: 1.25em;\n overflow: hidden;\n width: 90%;\n flex: 1;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n.notification .notification-contents .notification-body p + p {\n margin-top: 5px;\n}\n" +
".notification.theme-dark {background-color: #202225}\n.notif-text.theme-dark {color: #dcddde !important}\n.notif-text.theme-light {background-color: #fff}\n.notification.notification-contents.notification-body.theme-light {color: #2e3338 !important}",
""
])
}, function(e, t) {
e.exports = function(e) {
return "string" != typeof e ? e : (/^['"].*['"]$/.test(e) && (e = e.slice(1, -1)), /["'() \t\n]/.test(e) ? '"' + e.replace(/"/g, '\\"').replace(/\n/g, "\\n") + '"' : e)
@ -5712,7 +5728,7 @@
},
render() {
return i.default.createElement("div", {
className: "notification " + this.state.className,
className: "notification " + this.state.className + " theme-"+this.props.theme,
onClick: this.handeClick
}, i.default.createElement("button", {
type: "button",
@ -5727,7 +5743,7 @@
}
}), i.default.createElement("div", {
className: "notification-body"
}, i.default.createElement("header", null, this.props.title), i.default.createElement("p", null, this.props.body))), i.default.createElement("div", {
}, i.default.createElement("header", null, this.props.title), i.default.createElement("p", {className: "notif-text theme-"+this.props.theme}, this.props.body))), i.default.createElement("div", {
className: "notification-logo"
}))
}
@ -5735,7 +5751,8 @@
f = (0, o.default)({
displayName: "Notifications",
getInitialState: () => ({
notifications: []
notifications: [],
theme: "dark"
}),
handleUpdateEvent(e, t) {
this.setState({
@ -5754,11 +5771,16 @@
notifications: n
})
},
handleUpdateTheme(e, theme){
this.setState({
theme: theme
})
},
componentDidMount() {
a.default.on("UPDATE", this.handleUpdateEvent), a.default.on("FADE_OUT", this.handleFadeOut)
a.default.on("UPDATE_THEME", this.handleUpdateTheme), a.default.on("UPDATE", this.handleUpdateEvent), a.default.on("FADE_OUT", this.handleFadeOut)
},
componentWillUnmount() {
a.default.removeListener("UPDATE", this.handleUpdateEvent), a.default.removeListener("FADE_OUT", this.handleFadeOut)
a.default.removeListener("UPDATE_THEME", this.handleUpdateTheme), a.default.removeListener("UPDATE", this.handleUpdateEvent), a.default.removeListener("FADE_OUT", this.handleFadeOut)
},
handleNotificationClick(e) {
a.default.send(u, e)
@ -5770,7 +5792,8 @@
const e = this.state.notifications.map(e => i.default.createElement(s, r({}, e, {
key: e.id,
onClick: this.handleNotificationClick,
onDismiss: this.handleNotificationDismiss
onDismiss: this.handleNotificationDismiss,
theme: this.state.theme
})));
return i.default.createElement("div", {
id: "notifications"