Revert "fix #5107"

This reverts commit 5ad1fb5b.

resources/assets/javascripts/lib/personal_notifications.js

@@ -170,11 +170,11 @@ const PersonalNotifications = {
         if (really_new > 0) {
             $('#notification_marker')
                 .data('seen', false);
-            $('#notification-wrapper')
+            $('#avatar-menu-container')
                 .addClass('alert');
             PageLayout.title_prefix = '(!) ';
         } else {
-            $('#notification-wrapper').removeClass('alert');
+            $('#avatar-menu-container').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);
-            $('#notification-wrapper')
+            $('#avatar-menu-container')
                 .removeClass('alert');
                 
         });

resources/assets/stylesheets/mixins/colors.scss

@@ -323,5 +323,3 @@ $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

resources/assets/stylesheets/scss/globalsearch.scss

@@ -4,7 +4,7 @@
 #globalsearch-searchbar {
     display: flex;
     align-items: center;
-    border: thin solid var(--color--header-inverted);
+    border: thin solid var(--color--font-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(--color--global-background);
+        background-color: var(--white);
         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(--color--header-inverted);
+            background-color: var(--white);
             color: var(--color--font-primary);
 
             &::placeholder {

resources/assets/stylesheets/scss/header.scss

@@ -45,7 +45,7 @@
             justify-content: space-between;
             list-style-type: none;
             height: 40px;
-            gap: 8px;
+            gap: 20px;
 
             > li {
 
@@ -188,26 +188,40 @@
     padding: 0 5px 0 0;
 }
 
-#avatar-wrapper {
+#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-menu {
-        height: 30px;
-        width: 30px;
+        height: 28px;
         margin: 0;
         z-index: 1003;
 
         .action-menu.avatar-menu {
             z-index: 1002;
+            padding: 1px 1px 1px 0;
 
             .action-menu-icon {
+                height: 26px;
                 position: relative;
-                height: 100%;
-                width: 100%;
+                width: 26px;
                 z-index: 1;
 
                 img {
-                    height: 28px;
-                    width: 28px;
-                    border: solid 1px var(--color--header-inverted);
+                    height: 26px;
+                    width: 26px;
                     border-radius: var(--border-radius-avatar-menu);
                 }
 
@@ -219,7 +233,7 @@
 
             .action-menu-content {
                 position: absolute;
-                top: 40px;
+                top: 41px;
                 right: 0;
                 background: var(--white);
                 box-shadow: 1px 1px 1px var(--dark-gray-color-60);
@@ -241,6 +255,13 @@
             }
         }
     }
+
+    #notification-container + #avatar-menu {
+        .action-menu-icon img {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
 }
 
 // Fix header covering relevant other areas

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

 #notification_marker {
-    padding: 0 8px;
+    margin-left: 0px;
+    padding-left: 0px;
+    margin-right: 0px;
+    padding-right: 0px;
     width: 100%;
     height: 100%;
+    font-size: 12px;
     color: var(--color--font-primary);
     text-align: center;
-    line-height: 30px;
+    line-height: 28px;
     border: none;
     border-radius: var(--border-radius-avatar-menu);
-    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;
-    }
+    background-color: var(--color--global-background);
 }
 
 #notification-container {
     $arrow-height: 10px;
     border-radius: var(--border-radius-avatar-menu);
     $list-width: 400px;
-    height: 30px;
+
+    width: 28px;
+    height: 28px;
     color: var(--base-color);
     vertical-align: text-bottom;
     position: relative;

resources/assets/stylesheets/scss/responsive.scss

@@ -285,8 +285,7 @@ $sidebarOut: -330px;
     }
 
     #quicksearch_item,
-    #notification-wrapper,
-    #avatar-wrapper,
+    #avatar-menu-container,
     #current-page-structure {
         display: none;
     }
@@ -303,8 +302,8 @@ $sidebarOut: -330px;
             }
         }
 
-        #notification-wrapper,
-        #avatar-wrapper,
+        #notification-container,
+        .header_avatar_container,
         #sidebar-menu {
             display: none;
         }
@@ -761,6 +760,21 @@ 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;

resources/assets/stylesheets/scss/variables.scss

@@ -299,8 +299,6 @@ $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};

templates/header.php

@@ -122,9 +122,10 @@ if ($navigation) {
             <? $active = Navigation::getItem('/profile')?->isActive() ?? false; ?>
 
             <? if ($GLOBALS['perm']->have_perm('autor')) : ?>
-
+                <li id="avatar-menu-container"
+                    class="header_avatar_container <?= PersonalNotifications::hasUnseenNotifications() ? 'alert' : '' ?>"
+                >
                 <? if (PersonalNotifications::isActivated()): ?>
-                    <li id="notification-wrapper">
                     <? $notifications = PersonalNotifications::getMyNotifications() ?>
                     <div id="notification-container"  <?= count($notifications) > 0 ? ' class="hoverable"' : '' ?>>
                         <button id="notification_marker"
@@ -136,12 +137,10 @@ if ($navigation) {
                                 aria-controls="notification-list"
                                 data-lastvisit="<?= UserConfig::get($GLOBALS['user']->id)->getValue('NOTIFICATIONS_SEEN_LAST_DATE') ?>"
                                 <? if (count($notifications) === 0) echo 'disabled'; ?>
-                                    class="<?= PersonalNotifications::hasUnseenNotifications() ? 'alert' : '' ?>"
+                                <? if (PersonalNotifications::hasUnseenNotifications()) echo 'class="alert"'; ?>
                                 aria-expanded="false"
                         >
                             <span class="count" aria-hidden="true"><?= count($notifications) ?></span>
-                                <? $icon_role =  PersonalNotifications::hasUnseenNotifications() ? ICON::ROLE_INFO_ALT : ICON::ROLE_CLICKABLE ?>
-                                <?= Icon::create('notification2', $icon_role)->asImg() ?>
                         </button>
                         <input type="checkbox" id="notification_checkbox">
                         <div class="list below" id="notification_list">
@@ -166,11 +165,9 @@ if ($navigation) {
                         </audio>
                     <? endif; ?>
                     </div>
-                    </li>
                 <? endif; ?>
 
                 <? if (Navigation::hasItem('/avatar')): ?>
-                    <li id="avatar-wrapper">
                     <form id="avatar-menu" method="post">
                     <?php
                         $action_menu = ContentGroupMenu::get();
@@ -207,9 +204,8 @@ if ($navigation) {
                     ?>
                     <?= $action_menu->render(); ?>
                     </form>
-                    </li>
                 <? endif; ?>
-                
+                </li>
             <? endif; ?>
         <? else: ?>
                 <li>

tests/e2e/login.spec.ts

@@ -55,7 +55,7 @@ test.describe('Loggin In - HTML Web Form @auth', () => {
             await benutzername.fill(credentials.autor.username);
             await passwort.fill(credentials.autor.password);
             await submit.click();
-            await expect(page.locator('#notification-wrapper')).toBeVisible();
+            await expect(page.locator('#avatar-menu-container')).toBeVisible();
             await expect(page).toHaveURL(`${baseURL}dispatch.php/start`);
         });
     });

tests/e2e/logout.spec.ts

@@ -7,7 +7,7 @@ test.describe('Logging Out', () => {
 
     test('should take us back to the homepage', async ({ page, baseURL }) => {
         await page.goto(baseURL);
-        await expect(page.locator('#notification-wrapper')).toBeVisible();
+        await expect(page.locator('#avatar-menu-container')).toBeVisible();
         await page.getByTitle('Testaccount Dozent').click();
         await page.getByRole('link', { name: 'Logout' }).click();
         await expect(page).toHaveURL(/index\.php.*logout=true/);