diff --git a/lib/phplib/Seminar_Auth.php b/lib/phplib/Seminar_Auth.php
index 950be8a094795bf8bfd795fe4f19894b5857c13d..92ee2c1f64d14cdff373f72faf3fa3097e505c4a 100644
--- a/lib/phplib/Seminar_Auth.php
+++ b/lib/phplib/Seminar_Auth.php
@@ -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')));
diff --git a/public/assets/sounds/notify-bad.mp3 b/public/assets/sounds/notify-bad.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..9739680a30e6b78d69a75c942fe374a57b2fa558
Binary files /dev/null and b/public/assets/sounds/notify-bad.mp3 differ
diff --git a/public/assets/sounds/notify-good.mp3 b/public/assets/sounds/notify-good.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..17bf8221332a24ff176406b51f31272725ca653e
Binary files /dev/null and b/public/assets/sounds/notify-good.mp3 differ
diff --git a/public/assets/sounds/notify-ok.mp3 b/public/assets/sounds/notify-ok.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..8989b4071a7a82190bb62bab193452b73bdd5934
Binary files /dev/null and b/public/assets/sounds/notify-ok.mp3 differ
diff --git a/resources/assets/stylesheets/scss/system-notifications.scss b/resources/assets/stylesheets/scss/system-notifications.scss
index 34c341be02745105ea27de49b844d22d402796bf..d4795f9b67dc4638045add7b8b4a75b6b59c1e29 100644
--- a/resources/assets/stylesheets/scss/system-notifications.scss
+++ b/resources/assets/stylesheets/scss/system-notifications.scss
@@ -1,11 +1,11 @@
+@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);
}
}
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index a2d90b58ef2e0aa9432c353cba82407fdc2b04c7..3c09d6127bb0524b37907b31786638438c48ad48 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -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;
diff --git a/resources/vue/components/SystemNotification.vue b/resources/vue/components/SystemNotification.vue
index d4793367dd3b13e49038d3f18c1fb77004eab41e..947b73feec77d023bb2e069774c43aee46f4027d 100644
--- a/resources/vue/components/SystemNotification.vue
+++ b/resources/vue/components/SystemNotification.vue
@@ -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() {
diff --git a/resources/vue/components/SystemNotificationManager.vue b/resources/vue/components/SystemNotificationManager.vue
index 1753915ba0b08a0b1f2fbe009ab3c4ad869c357f..313ac4cd7ec5b1793f163343441a11c1e488d0f2 100644
--- a/resources/vue/components/SystemNotificationManager.vue
+++ b/resources/vue/components/SystemNotificationManager.vue
@@ -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>