PolishingTIC: Avatarmenu und Notifications sollen getrennt werden

Closes #5107

Merge request studip/studip!3827

7 files changed, 42 insertions, 65 deletions

diff --git a/resources/assets/javascripts/lib/personal_notifications.js b/resources/assets/javascripts/lib/personal_notifications.js
index 798566f..a70e82e 100644
--- a/resources/assets/javascripts/lib/personal_notifications.js
+++ b/resources/assets/javascripts/lib/personal_notifications.js
@@ -170,11 +170,11 @@ const PersonalNotifications = {
         if (really_new > 0) {
             $('#notification_marker')
                 .data('seen', false);
-            $('#avatar-menu-container')
+            $('#notification-wrapper')
                 .addClass('alert');
             PageLayout.title_prefix = '(!) ';
         } else {
-            $('#avatar-menu-container').removeClass('alert');
+            $('#notification-wrapper').removeClass('alert');
             PageLayout.title_prefix = '';
         }
         if (count) {
@@ -227,7 +227,7 @@ const PersonalNotifications = {
         $.get(STUDIP.URLHelper.getURL('dispatch.php/jsupdater/notifications_seen')).then(time => {
             $('#notification_marker')
                 .data('lastvisit', time);
-            $('#avatar-menu-container')
+            $('#notification-wrapper')
                 .removeClass('alert');
                 
         });
diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index cb6bce6..249a6df 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/resources/assets/stylesheets/mixins/colors.scss
@@ -323,3 +323,5 @@ $color--info: $color--blue-2;
 $color--info-alternative: mix($color--info, $color--white, 20%);
 
 $color-image-placeholder-background: $color--gray-6;
+
+$color-header-inverted: $color--white;
\ No newline at end of file
diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss
index 0d4052a..3ccd8ae 100644
--- a/resources/assets/stylesheets/scss/globalsearch.scss
+++ b/resources/assets/stylesheets/scss/globalsearch.scss
@@ -4,7 +4,7 @@
 #globalsearch-searchbar {
     display: flex;
     align-items: center;
-    border: thin solid var(--color--font-inverted);
+    border: thin solid var(--color--header-inverted);
     border-radius: var(--border-radius-search);
     background-color: var(--color--brand-primary);
     padding: 3px 5px 2px 5px;
@@ -77,7 +77,7 @@
 
     // List display
     #globalsearch-list {
-        background-color: var(--white);
+        background-color: var(--color--global-background);
         box-shadow: 1px 1px 1px var(--light-gray-color-80);
         color: var(--text-color);
         display: none;
@@ -118,7 +118,7 @@
         background-color: var(--white);
 
         #globalsearch-input {
-            background-color: var(--white);
+            background-color: var(--color--header-inverted);
             color: var(--color--font-primary);
 
             &::placeholder {
diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss
index 0a04d64..225d043 100644
--- a/resources/assets/stylesheets/scss/header.scss
+++ b/resources/assets/stylesheets/scss/header.scss
@@ -45,7 +45,7 @@
             justify-content: space-between;
             list-style-type: none;
             height: 40px;
-            gap: 20px;
+            gap: 10px;
 
             > li {
 
@@ -188,40 +188,26 @@
     padding: 0 5px 0 0;
 }
 
-#avatar-menu-container {
-    display: inline-flex;
-
-    &.header_avatar_container {
-        align-items: end;
-        flex: 0;
-        border-radius: var(--border-radius-avatar-menu);
-        background-color: var(--color--global-background);
-
-        &.alert,
-        &.alert #notification_marker {
-            background-color: var(--color--warning);
-            color: var(--color--font-inverted);
-        }
-    }
-
+#avatar-wrapper {
     #avatar-menu {
-        height: 28px;
+        height: 30px;
+        width: 30px;
         margin: 0;
         z-index: 1003;
 
         .action-menu.avatar-menu {
             z-index: 1002;
-            padding: 1px 1px 1px 0;
 
             .action-menu-icon {
-                height: 26px;
                 position: relative;
-                width: 26px;
+                height: 100%;
+                width: 100%;
                 z-index: 1;
 
                 img {
-                    height: 26px;
-                    width: 26px;
+                    height: 28px;
+                    width: 28px;
+                    border: solid 1px var(--color--header-inverted);
                     border-radius: var(--border-radius-avatar-menu);
                 }
 
@@ -233,7 +219,7 @@
 
             .action-menu-content {
                 position: absolute;
-                top: 41px;
+                top: 40px;
                 right: 0;
                 background: var(--white);
                 box-shadow: 1px 1px 1px var(--dark-gray-color-60);
@@ -255,13 +241,6 @@
             }
         }
     }
-
-    #notification-container + #avatar-menu {
-        .action-menu-icon img {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-    }
 }
 
 // Fix header covering relevant other areas
diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss
index ada6054..2b16e89 100644
--- a/resources/assets/stylesheets/scss/personal-notifications.scss
+++ b/resources/assets/stylesheets/scss/personal-notifications.scss
@@ -1,26 +1,34 @@
 #notification_marker {
-    margin-left: 0px;
-    padding-left: 0px;
-    margin-right: 0px;
-    padding-right: 0px;
+    padding: 0 8px;
     width: 100%;
     height: 100%;
-    font-size: 12px;
     color: var(--color--font-primary);
     text-align: center;
-    line-height: 28px;
+    line-height: 30px;
     border: none;
     border-radius: var(--border-radius-avatar-menu);
-    background-color: var(--color--global-background);
+    background-color: var(--color--header-inverted);
+
+    &.alert {
+        background-color: var(--color--warning);
+        color: var(--color--font-inverted);
+    }
+
+    .count {
+        padding: 0 5px;
+    }
+
+    img {
+        vertical-align: middle;
+        margin-top: -3px;
+    }
 }
 
 #notification-container {
     $arrow-height: 10px;
     border-radius: var(--border-radius-avatar-menu);
     $list-width: 400px;
-
-    width: 28px;
-    height: 28px;
+    height: 30px;
     color: var(--base-color);
     vertical-align: text-bottom;
     position: relative;
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index 35ffa7c..d6c838c 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -285,7 +285,8 @@ $sidebarOut: -330px;
     }
 
     #quicksearch_item,
-    #avatar-menu-container,
+    #notification-wrapper,
+    #avatar-wrapper,
     #current-page-structure {
         display: none;
     }
@@ -302,8 +303,8 @@ $sidebarOut: -330px;
             }
         }
 
-        #notification-container,
-        .header_avatar_container,
+        #notification-wrapper,
+        #avatar-wrapper,
         #sidebar-menu {
             display: none;
         }
@@ -760,21 +761,6 @@ html:not(.responsive-display):not(.fullscreen-mode) {
             line-height: 20px;
         }
 
-        #avatar-menu-container {
-            position: relative;
-            bottom: 0px;
-            right: 0px;
-            line-height: 20px !important;
-
-            #avatar-menu {
-                display: none;
-            }
-
-            &::after {
-                display: none !important;
-            }
-        }
-
         #top-bar {
             box-sizing: border-box;
             height: $header-bar-container-height;
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 2941fe6..c3565dd 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -299,6 +299,8 @@ $grid-gap: 0;
 
     --color-image-placeholder-background: #{$color-image-placeholder-background};
 
+    --color--header-inverted: #{$color-header-inverted};
+
     --border-radius-default: #{$border-radius};
     --border-radius-avatar-menu: #{$border-radius-avatar-menu};
     --border-radius-search: #{$border-radius-search};