From 60f2b28874a7e3082b7806858f23bcc4a9ac064e Mon Sep 17 00:00:00 2001 From: Ron Lucke Date: Mon, 13 Jan 2025 21:15:18 +0100 Subject: Revert "fix #5107" This reverts commit 5ad1fb5b6dd0a801e2f5d9fc6c0d59db831a4fd0. --- .../javascripts/lib/personal_notifications.js | 6 +- resources/assets/stylesheets/mixins/colors.scss | 2 - .../assets/stylesheets/scss/globalsearch.scss | 6 +- resources/assets/stylesheets/scss/header.scss | 41 ++++-- .../stylesheets/scss/personal-notifications.scss | 28 ++-- resources/assets/stylesheets/scss/responsive.scss | 22 ++- resources/assets/stylesheets/scss/variables.scss | 2 - templates/header.php | 154 ++++++++++----------- tests/e2e/login.spec.ts | 2 +- tests/e2e/logout.spec.ts | 2 +- 10 files changed, 142 insertions(+), 123 deletions(-) diff --git a/resources/assets/javascripts/lib/personal_notifications.js b/resources/assets/javascripts/lib/personal_notifications.js index a70e82e..798566f 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 249a6df..cb6bce6 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 3ccd8ae..0d4052a 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 c16a790..0a04d64 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 2b16e89..ada6054 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 d6c838c..35ffa7c 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 c3565dd..2941fe6 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 a3ecc99..2f1d509 100644 --- a/templates/header.php +++ b/templates/header.php @@ -122,94 +122,90 @@ if ($navigation) { isActive() ?? false; ?> have_perm('autor')) : ?> - +
  • -
  • - -
    0 ? ' class="hoverable"' : '' ?>> - + +
    + - - - asImg() ?> - - -
    - - - - -
      - - getLiElement() ?> - -
    -
    - - - + + + +
      + + getLiElement() ?> + +
    -
    • + + + + -
  • -
    - 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'] - ); + + 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); - ?> - render(); ?> -
    -
    • + } + SkipLinks::addIndex(_('Profilmenü'), 'header_avatar_image_link', 1, false); + ?> + render(); ?> + - +
  • diff --git a/tests/e2e/login.spec.ts b/tests/e2e/login.spec.ts index f646272..2e859dd 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 f969df9..bd87e0b 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/); -- cgit v1.0