diff --git a/resources/assets/javascripts/lib/personal_notifications.js b/resources/assets/javascripts/lib/personal_notifications.js
index a70e82e6456e8ca9cef83e3153ed4a57ea061466..798566fae0f27fdca5c64ed6848e55b265ac6c6b 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);
- $('#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');
});
diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index 249a6dfd09a86d396a8b7e2714bffd7b4c5f918f..cb6bce67e66fce8c51d6d7ba9cf516f28f0e6b69 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/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
diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss
index 3ccd8ae954a30727beecafc784114ed9793d8f50..0d4052a2ffdef1afbd4cf82e69255d1c91486361 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--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 {
diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss
index c16a79047d7c9f3135f12ac3355cfde31c5142a0..0a04d64456115adf2c63c98c99f512c75ad238c3 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: 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
diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss
index 2b16e89399ece126b2d79cf02c02573dd070527d..ada6054e7ac6ee29d8c6339a32913ee222f9a2ac 100644
--- a/resources/assets/stylesheets/scss/personal-notifications.scss
+++ b/resources/assets/stylesheets/scss/personal-notifications.scss
@@ -1,34 +1,26 @@
#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;
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index d6c838cc9b3bd7c3ddc012578b94b8f751fc14fa..35ffa7c9557def6f52890cd6c2ae2b5120de0819 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/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;
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index c3565dd1acb045b73bd1054ef50bd84454ca3600..2941fe69e3bde60a40b421dee4d844fe63b6d9dc 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/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};
diff --git a/templates/header.php b/templates/header.php
index a3ecc999917f60a45b26e8b421c3b6f5d0aac186..2f1d50992f49088a871705d3401d1a8b31e3af7c 100644
--- a/templates/header.php
+++ b/templates/header.php
@@ -122,94 +122,90 @@ 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"
- data-toggles="#notification_checkbox"
- title="<?= sprintf(
- ngettext('%u Benachrichtigung', '%u Benachrichtigungen', count($notifications)),
- count($notifications)
- ) ?>"
- 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' : '' ?>"
- aria-expanded="false"
+ <? $notifications = PersonalNotifications::getMyNotifications() ?>
+ <div id="notification-container" <?= count($notifications) > 0 ? ' class="hoverable"' : '' ?>>
+ <button id="notification_marker"
+ data-toggles="#notification_checkbox"
+ title="<?= sprintf(
+ ngettext('%u Benachrichtigung', '%u Benachrichtigungen', count($notifications)),
+ count($notifications)
+ ) ?>"
+ aria-controls="notification-list"
+ data-lastvisit="<?= UserConfig::get($GLOBALS['user']->id)->getValue('NOTIFICATIONS_SEEN_LAST_DATE') ?>"
+ <? if (count($notifications) === 0) echo 'disabled'; ?>
+ <? if (PersonalNotifications::hasUnseenNotifications()) echo 'class="alert"'; ?>
+ aria-expanded="false"
+ >
+ <span class="count" aria-hidden="true"><?= count($notifications) ?></span>
+ </button>
+ <input type="checkbox" id="notification_checkbox">
+ <div class="list below" id="notification_list">
+ <a class="mark-all-as-read <? if (count($notifications) < 2) echo 'invisible'; ?>"
+ href="<?= URLHelper::getLink('dispatch.php/jsupdater/mark_notification_read/all', ['return_to' => $_SERVER['REQUEST_URI']]) ?>"
>
- <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">
- <a class="mark-all-as-read <? if (count($notifications) < 2) echo 'invisible'; ?>"
- href="<?= URLHelper::getLink('dispatch.php/jsupdater/mark_notification_read/all', ['return_to' => $_SERVER['REQUEST_URI']]) ?>"
- >
- <?= _('Alle Benachrichtigungen als gelesen markieren') ?>
- </a>
- <a class="enable-desktop-notifications" href="#" style="display: none;">
- <?= _('Desktop-Benachrichtigungen aktivieren') ?>
- </a>
- <ul>
- <? foreach ($notifications as $notification) : ?>
- <?= $notification->getLiElement() ?>
- <? endforeach ?>
- </ul>
- </div>
- <? if (PersonalNotifications::isAudioActivated()): ?>
- <audio id="audio_notification" preload="none">
- <source src="<?= Assets::url('sounds/blubb.ogg') ?>" type="audio/ogg">
- <source src="<?= Assets::url('sounds/blubb.mp3') ?>" type="audio/mpeg">
- </audio>
- <? endif; ?>
+ <?= _('Alle Benachrichtigungen als gelesen markieren') ?>
+ </a>
+ <a class="enable-desktop-notifications" href="#" style="display: none;">
+ <?= _('Desktop-Benachrichtigungen aktivieren') ?>
+ </a>
+ <ul>
+ <? foreach ($notifications as $notification) : ?>
+ <?= $notification->getLiElement() ?>
+ <? endforeach ?>
+ </ul>
</div>
- </li>
+ <? if (PersonalNotifications::isAudioActivated()): ?>
+ <audio id="audio_notification" preload="none">
+ <source src="<?= Assets::url('sounds/blubb.ogg') ?>" type="audio/ogg">
+ <source src="<?= Assets::url('sounds/blubb.mp3') ?>" type="audio/mpeg">
+ </audio>
+ <? endif; ?>
+ </div>
<? endif; ?>
<? if (Navigation::hasItem('/avatar')): ?>
- <li id="avatar-wrapper">
- <form id="avatar-menu" method="post">
- <?php
- $action_menu = ContentGroupMenu::get();
- $action_menu->addCSSClass('avatar-menu');
- $action_menu->addAttribute('data-action-menu-reposition', 'false');
- $action_menu->setLabel(User::findCurrent()->getFullName());
- $action_menu->setAriaLabel(_('Profilmenü'));
- $action_menu->setIcon(
- Avatar::getAvatar(User::findCurrent()->id)->getImageTag(),
- ['id' => 'header_avatar_image_link']
- );
+ <form id="avatar-menu" method="post">
+ <?php
+ $action_menu = ContentGroupMenu::get();
+ $action_menu->addCSSClass('avatar-menu');
+ $action_menu->addAttribute('data-action-menu-reposition', 'false');
+ $action_menu->setLabel(User::findCurrent()->getFullName());
+ $action_menu->setAriaLabel(_('Profilmenü'));
+ $action_menu->setIcon(
+ Avatar::getAvatar(User::findCurrent()->id)->getImageTag(),
+ ['id' => 'header_avatar_image_link']
+ );
- foreach (Navigation::getItem('/avatar') as $subnav) {
- if ($subnav->getRenderAsButton()) {
- $action_menu->addButton(
- 'logout',
- $subnav->getTitle(),
- $subnav->getImage(),
- array_merge(
- $subnav->getLinkAttributes(),
- ['formaction' => URLHelper::getURL($subnav->getURL(), [], true)]
- )
- );
- } else {
- $action_menu->addLink(
- URLHelper::getURL($subnav->getURL(), [], true),
- $subnav->getTitle(),
- $subnav->getImage(),
- $subnav->getLinkAttributes()
- );
- }
+ foreach (Navigation::getItem('/avatar') as $subnav) {
+ if ($subnav->getRenderAsButton()) {
+ $action_menu->addButton(
+ 'logout',
+ $subnav->getTitle(),
+ $subnav->getImage(),
+ array_merge(
+ $subnav->getLinkAttributes(),
+ ['formaction' => URLHelper::getURL($subnav->getURL(), [], true)]
+ )
+ );
+ } else {
+ $action_menu->addLink(
+ URLHelper::getURL($subnav->getURL(), [], true),
+ $subnav->getTitle(),
+ $subnav->getImage(),
+ $subnav->getLinkAttributes()
+ );
}
- SkipLinks::addIndex(_('Profilmenü'), 'header_avatar_image_link', 1, false);
- ?>
- <?= $action_menu->render(); ?>
- </form>
- </li>
+ }
+ SkipLinks::addIndex(_('Profilmenü'), 'header_avatar_image_link', 1, false);
+ ?>
+ <?= $action_menu->render(); ?>
+ </form>
<? endif; ?>
-
+ </li>
<? endif; ?>
<? else: ?>
<li>
diff --git a/tests/e2e/login.spec.ts b/tests/e2e/login.spec.ts
index f646272bb4ad9e2d10d5ba8bba8f60415fa05548..2e859dd1bba1b32c3b1e904d5fa477a57fa421a4 100644
--- a/tests/e2e/login.spec.ts
+++ b/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`);
});
});
diff --git a/tests/e2e/logout.spec.ts b/tests/e2e/logout.spec.ts
index f969df977ba69f81a4eede79669d120b803e6428..bd87e0b28dafc2acbf23125dbd8d28880b96fa2c 100644
--- a/tests/e2e/logout.spec.ts
+++ b/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/);