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

View File

@@ -79,7 +79,7 @@ CefSharp.BindObjectAsync(
},
layout: 'topCenter',
theme: 'relax',
timeout: 6000
timeout: 3000
});
Vue.use(ElementUI, {
@@ -727,28 +727,41 @@ CefSharp.BindObjectAsync(
}
});
var bias = new Date(Date.now() - 60000).toJSON();
var theme = "relax";
notys.forEach((noty) => {
if (noty.created_at > bias) {
if (noty.type === 'OnPlayerJoined') {
new Noty({
type: 'alert',
text: `<strong>${noty.data}</strong> has joined`
}).show();
} else if (noty.type === 'OnPlayerLeft') {
new Noty({
type: 'alert',
text: `<strong>${noty.data}</strong> has left`
}).show();
} else if (noty.type === 'Online') {
new Noty({
type: 'alert',
text: `<strong>${noty.displayName}</strong> has logged in`
}).show();
} else if (noty.type === 'Offline') {
new Noty({
type: 'alert',
text: `<strong>${noty.displayName}</strong> has logged out`
}).show();
if (VRCXStorage.GetBool('isDarkMode') === true) {
theme = "sunset";
}
switch(noty.type) {
case 'OnPlayerJoined':
new Noty({
type: 'alert',
theme: theme,
text: `<strong>${noty.data}</strong> has joined`
}).show();
break;
case 'OnPlayerLeft':
new Noty({
type: 'alert',
theme: theme,
text: `<strong>${noty.data}</strong> has left`
}).show();
break;
case 'Online':
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;
}
}
});

View File

@@ -31,22 +31,25 @@
max-width: none;
}
.noty_theme__relax.noty_bar {
.noty_theme__relax.noty_bar,
.noty_theme__sunset.noty_bar {
position: relative;
margin: 4px 0;
overflow: hidden;
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;
font-size: 24px;
font-size: 15px;
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;
border-top: 1px solid #e7e7e7;
}
.noty_theme__relax.noty_type__alert,
@@ -98,6 +101,47 @@
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 {
width: 8px;
height: 8px;