VR overlay notifications dark mode toggle (#95)

This commit is contained in:
Natsumi-sama
2020-11-01 16:35:55 +13:00
committed by GitHub
parent f7b6324d73
commit 1953098790
2 changed files with 83 additions and 26 deletions
+34 -21
View File
@@ -79,7 +79,7 @@ CefSharp.BindObjectAsync(
}, },
layout: 'topCenter', layout: 'topCenter',
theme: 'relax', theme: 'relax',
timeout: 6000 timeout: 3000
}); });
Vue.use(ElementUI, { Vue.use(ElementUI, {
@@ -727,28 +727,41 @@ CefSharp.BindObjectAsync(
} }
}); });
var bias = new Date(Date.now() - 60000).toJSON(); var bias = new Date(Date.now() - 60000).toJSON();
var theme = "relax";
notys.forEach((noty) => { notys.forEach((noty) => {
if (noty.created_at > bias) { if (noty.created_at > bias) {
if (noty.type === 'OnPlayerJoined') { if (VRCXStorage.GetBool('isDarkMode') === true) {
new Noty({ theme = "sunset";
type: 'alert', }
text: `<strong>${noty.data}</strong> has joined` switch(noty.type) {
}).show(); case 'OnPlayerJoined':
} else if (noty.type === 'OnPlayerLeft') { new Noty({
new Noty({ type: 'alert',
type: 'alert', theme: theme,
text: `<strong>${noty.data}</strong> has left` text: `<strong>${noty.data}</strong> has joined`
}).show(); }).show();
} else if (noty.type === 'Online') { break;
new Noty({ case 'OnPlayerLeft':
type: 'alert', new Noty({
text: `<strong>${noty.displayName}</strong> has logged in` type: 'alert',
}).show(); theme: theme,
} else if (noty.type === 'Offline') { text: `<strong>${noty.data}</strong> has left`
new Noty({ }).show();
type: 'alert', break;
text: `<strong>${noty.displayName}</strong> has logged out` case 'Online':
}).show(); new Noty({
type: 'alert',
theme: theme,
text: `<strong>${noty.displayName}</strong> has logged in`
}).show();
break;
case 'Offline':
new Noty({
type: 'alert',
theme: theme,
text: `<strong>${noty.displayName}</strong> has logged out`
}).show();
break;
} }
} }
}); });
+49 -5
View File
@@ -31,22 +31,25 @@
max-width: none; max-width: none;
} }
.noty_theme__relax.noty_bar { .noty_theme__relax.noty_bar,
.noty_theme__sunset.noty_bar {
position: relative; position: relative;
margin: 4px 0; margin: 4px 0;
overflow: hidden; overflow: hidden;
border-radius: 2px; border-radius: 2px;
} }
.noty_theme__relax.noty_bar .noty_body { .noty_theme__relax.noty_bar .noty_body,
.noty_theme__sunset.noty_bar .noty_body {
padding: 5px 10px 10px; padding: 5px 10px 10px;
font-size: 24px; font-size: 15px;
text-align: center; text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
} }
.noty_theme__relax.noty_bar .noty_buttons { .noty_theme__relax.noty_bar .noty_buttons,
.noty_theme__sunset.noty_bar .noty_buttons {
padding: 5px 10px; padding: 5px 10px;
border-top: 1px solid #e7e7e7;
} }
.noty_theme__relax.noty_type__alert, .noty_theme__relax.noty_type__alert,
@@ -98,6 +101,47 @@
border-color: #50c24e; border-color: #50c24e;
} }
.noty_theme__sunset.noty_type__alert,
.noty_theme__sunset.noty_type__notification {
background-color: #073B4C;
color: #fff;
}
.noty_theme__sunset.noty_type__alert .noty_progressbar,
.noty_theme__sunset.noty_type__notification .noty_progressbar {
background-color: #fff;
}
.noty_theme__sunset.noty_type__warning {
background-color: #FFD166;
color: #fff;
}
.noty_theme__sunset.noty_type__error {
background-color: #EF476F;
color: #fff;
}
.noty_theme__sunset.noty_type__info,
.noty_theme__sunset.noty_type__information {
background-color: #118AB2;
color: #fff;
}
.noty_theme__sunset.noty_type__success {
background-color: #06D6A0;
color: #fff;
}
.noty_theme__sunset.noty_type__error .noty_progressbar {
opacity: .4;
}
.noty_theme__sunset.noty_type__info .noty_progressbar,
.noty_theme__sunset.noty_type__information .noty_progressbar {
opacity: .6;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;