Skip to content
Snippets Groups Projects
Commit 3f450094 authored by Thomas Hackl's avatar Thomas Hackl
Browse files

Resolve "Polishing der neuen Notifications" 

Closes #4432

Merge request studip/studip!3221
parent b665fa8d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 101 additions and 55 deletions
lib/phplib/Seminar_Auth.php
+ 1
− 1
View file @ 3f450094
......@@ -337,7 +337,7 @@ class Seminar_Auth
unset($_SESSION['semi_logged_in']); // used by email activation
$login_template = $GLOBALS['template_factory']->open('loginform');
if (isset($this->auth['uname']) && $this->error_msg) {
PageLayout::postException(_('Bei der Anmeldung trat ein Fehler auf!'), $this->error_msg);
PageLayout::postError(_('Bei der Anmeldung trat ein Fehler auf!'), $this->error_msg);
}
$login_template->set_attribute('error_msg', $this->error_msg);
$login_template->set_attribute('uname', (isset($this->auth["uname"]) ? $this->auth["uname"] : Request::username('loginname')));
......
public/assets/sounds/notify-bad.mp3 0 → 100644
+ 0
− 0
View file @ 3f450094
File added
public/assets/sounds/notify-good.mp3 0 → 100644
+ 0
− 0
View file @ 3f450094
File added
public/assets/sounds/notify-ok.mp3 0 → 100644
+ 0
− 0
View file @ 3f450094
File added
resources/assets/stylesheets/scss/system-notifications.scss
+ 67
− 32
View file @ 3f450094
@use 'variables';
#system-notifications {
&.bottom-right {
bottom: 50px;
bottom: 40px;
right: 15px;
.system-notification {
box-shadow: 5px 5px var(--dark-gray-color-10);
&.system-notification-slide-enter,
&.system-notification-slide-leave-to {
opacity: 0;
......@@ -17,16 +17,25 @@
opacity: 1;
transform: translateX(0);
}
&.system-notification-slide-enter-active,
&.system-notification-slide-leave-active {
transition: all var(--transition-duration-superslow) ease-in-out;
}
}
&:not(.system-notifications-login) {
position: fixed;
width: 400px;
}
}
&.top-center {
left: calc(50% - 300px);
top: 0;
top: 41px;
.system-notification {
box-shadow: 0 0 0 3px var(--dark-gray-color-10);
&.system-notification-slide-enter,
&.system-notification-slide-leave-to {
opacity: 0;
......@@ -38,36 +47,40 @@
opacity: 1;
transform: translateY(0);
}
&.system-notification-slide-enter-active,
&.system-notification-slide-leave-active {
transition: all var(--transition-duration-slow) ease-in-out;
}
}
&:not(.system-notifications-login) {
position: fixed;
width: 600px;
}
}
&:not(.system-notifications-login) {
position: fixed;
width: 600px;
}
&.system-notifications-login {
margin-bottom: 15px;
overflow: hidden;
}
overflow: hidden;
z-index: 1001;
overflow: visible;
z-index: 1000;
}
.system-notification {
background-color: var(--content-color-20);
border: thin solid var(--content-color-40);
color: var(--black);
color: var(--white);
cursor: pointer;
display: flex;
padding: 10px;
margin-bottom: 6px;
min-height: 60px;
padding: 5px;
position: relative;
&.system-notification-slide-enter-active,
&.system-notification-slide-leave-active {
transition: all var(--transition-duration-slow) ease-in-out;
}
.system-notification-icon {
flex: 0;
padding: 10px;
......@@ -88,6 +101,7 @@
.system-notification-close {
align-self: normal;
display: none;
flex: 0;
height: 20px;
width: 20px;
......@@ -127,52 +141,73 @@
}
a:not(.system-notification-message) {
color: var(--black);
color: var(--white);
text-decoration-line: underline;
}
a.system-notification-message {
color: var(--text-color);
color: var(--white);
text-decoration: unset;
}
&:hover {
.system-notification-close {
display: unset;
}
}
}
.system-notification-exception {
background-color: var(--red-40);
background-color: var(--red);
color: var(--white);
.system-notification-timeout {
background-color: var(--red);
background-color: var(--red-40);
}
}
.system-notification-error {
background-color: var(--red-20);
background-color: var(--red);
color: var(--white);
.system-notification-timeout {
background-color: var(--red-80);
background-color: var(--red-40);
}
}
.system-notification-warning {
background-color: var(--yellow-20);
background-color: var(--yellow);
color: var(--black);
.system-notification-timeout {
background-color: var(--yellow-80);
background-color: var(--yellow-40);
}
a:not(.system-notification-message) {
color: var(--black);
text-decoration-line: underline;
}
a.system-notification-message {
color: var(--white);
text-decoration: unset;
}
}
.system-notification-success {
background-color: var(--green-20);
background-color: var(--green);
.system-notification-timeout {
background-color: var(--green-80);
background-color: var(--green-40);
}
}
.system-notification-info {
background-color: var(--dark-violet-20);
background-color: var(--dark-violet);
.system-notification-timeout {
background-color: var(--dark-violet-60);
background-color: var(--dark-violet-40);
}
}
resources/assets/stylesheets/scss/variables.scss
+ 2
− 0
View file @ 3f450094
......@@ -44,6 +44,7 @@ $drag_and_drop_border: 1px solid $base-color;
$transition-duration: .3s;
$transition-duration-slow: .5s;
$transition-duration-superslow: 1s;
// Layout
$page-margin: 15px;
......@@ -177,6 +178,7 @@ $grid-gap: 0;
#{"--"}transition-duration: $transition-duration;
#{"--"}transition-duration-slow: $transition-duration-slow;
#{"--"}transition-duration-superslow: $transition-duration-superslow;
@media (prefers-reduced-motion) {
#{"--"}transition-duration: 0s;
......
resources/vue/components/SystemNotification.vue
+ 30
− 22
View file @ 3f450094
......@@ -9,7 +9,7 @@
>
<div class="system-notification-icon">
<studip-icon :shape="icon.shape"
:size="48"
:size="40"
:role="icon.color"
alt=""
title=""></studip-icon>
......@@ -41,6 +41,7 @@
@keydown.space="destroyMe"
tabindex="0">
<studip-icon shape="decline"
:role="icon.color"
:size="20"
class="close-system-notification"/>
</button>
......@@ -74,6 +75,10 @@ export default {
visibleFor: {
type: Number,
default: 5000
},
placement: {
type: String,
default: 'topcenter'
}
},
data() {
......@@ -97,25 +102,7 @@ export default {
},
icon() {
let iconShape = 'info-circle';
let iconColor = 'info';
switch (this.type) {
case 'exception':
iconShape = 'exclaim-circle';
iconColor = 'info_alt';
break;
case 'error':
iconShape = 'exclaim-circle';
iconColor = 'status-red';
break;
case 'warning':
iconShape = 'exclaim-circle';
iconColor = 'status-yellow';
break;
case 'success':
iconShape = 'check-circle';
iconColor = 'status-green';
break;
}
let iconColor = this.notification.type === 'warning' ? 'info' : 'info_alt';
return {shape: iconShape, color: iconColor};
},
isDisrupted() {
......@@ -162,8 +149,29 @@ export default {
this.globalOn('resume-system-notifications', this.initTimeout);
if (!STUDIP.config?.PERSONAL_NOTIFICATIONS_AUDIO_DEACTIVATED) {
const audio = new Audio(STUDIP.ASSETS_URL + '/sounds/blubb.mp3');
audio.play();
let audio = null;
switch (this.notification.type) {
case 'info':
audio = new Audio(STUDIP.ASSETS_URL + '/sounds/notify-ok.mp3');
break;
case 'success':
audio = new Audio(STUDIP.ASSETS_URL + '/sounds/notify-good.mp3');
break;
case 'warning':
case 'error':
case 'exception':
audio = new Audio(STUDIP.ASSETS_URL + '/sounds/notify-bad.mp3');
break;
}
let timing = 300;
if (this.placement === 'bottomright') {
timing = 750;
}
setTimeout(() => {
audio.play();
}, timing);
}
},
destroyed() {
......
resources/vue/components/SystemNotificationManager.vue
+ 1
− 0
View file @ 3f450094
......@@ -8,6 +8,7 @@
<system-notification v-for="notification in allNotifications"
:key="`message-${notification.key}`"
:notification="notification"
:placement="placement"
@destroyMe="destroyNotification(notification)"
></system-notification>
</transition-group>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment