Resolve "Polishing der neuen Notifications"

Closes #4432

Merge request studip/studip!3221

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')));

resources/assets/stylesheets/scss/system-notifications.scss

+@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

@@ -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

@@ -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

@@ -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>