diff --git a/resources/assets/javascripts/lib/personal_notifications.js b/resources/assets/javascripts/lib/personal_notifications.js
index 392e8b0615b5c7c314f37b224bb700f85e1b5295..d05fbaa08bb547ced474b6709bd6bc787ed6b635 100644
--- a/resources/assets/javascripts/lib/personal_notifications.js
+++ b/resources/assets/javascripts/lib/personal_notifications.js
@@ -169,11 +169,12 @@ const PersonalNotifications = {
});
if (really_new > 0) {
$('#notification_marker')
- .data('seen', false)
+ .data('seen', false);
+ $('#avatar-menu-container')
.addClass('alert');
PageLayout.title_prefix = '(!) ';
} else {
- $('#notification_marker').removeClass('alert');
+ $('#avatar-menu-container').removeClass('alert');
PageLayout.title_prefix = '';
}
if (count) {
@@ -220,8 +221,10 @@ const PersonalNotifications = {
$.get(STUDIP.URLHelper.getURL('dispatch.php/jsupdater/notifications_seen')).then(time => {
$('#notification_marker')
- .removeClass('alert')
.data('lastvisit', time);
+ $('#avatar-menu-container')
+ .removeClass('alert');
+
});
}
};
diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss
index 1f93d86feef3cb65b5fc73270f575f571de3c9a0..dc904b1efa0d95480ab8c4599f94036172327f12 100644
--- a/resources/assets/stylesheets/scss/header.scss
+++ b/resources/assets/stylesheets/scss/header.scss
@@ -48,7 +48,6 @@
gap: 20px;
> li {
- margin: 2px;
> a {
color: var(--white);
@@ -195,42 +194,36 @@
&.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;
+ height: 26px;
margin: 0;
- vertical-align: text-bottom;
z-index: 1003;
.action-menu.avatar-menu {
z-index: 1002;
+ padding: 1px 1px 1px 0;
.action-menu-icon {
- border: 1px solid var(--dark-gray-color-40);
- border-left: none;
- background-color: var(--dark-gray-color-5);
- height: 28px;
- margin: 0 22px 0 0;
+ height: 24px;
position: relative;
- width: 28px;
+ width: 24px;
z-index: 1;
img {
- height: 100%;
- width: 100%;
- }
-
- // Add arrow on the right
- @include icon(after, arr_1down, info_alt);
-
- &::after {
- background-position: center;
- background-repeat: no-repeat;
- padding: 4px 6px;
- position: absolute;
- left: 100%;
- top: 0;
+ height: 24px;
+ width: 24px;
+ border-top-right-radius: var(--border-radius-avatar-menu);
+ border-bottom-right-radius: var(--border-radius-avatar-menu);
}
#notification-container + & {
diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss
index cdad081fb77decf2b7e21d7f625eb7fb795e8b62..610d6260a630be28f6effde67f53f94ae43553e2 100644
--- a/resources/assets/stylesheets/scss/personal-notifications.scss
+++ b/resources/assets/stylesheets/scss/personal-notifications.scss
@@ -5,29 +5,24 @@
padding-right: 0px;
width: 100%;
height: 100%;
- font-size: 0.8em;
- color: var(--base-color);
+ font-size: 12px;
+ color: var(--color--font-primary);
text-align: center;
- line-height: 24px;
- background-color: var(--dark-gray-color-10);
- border: 1px solid var(--dark-gray-color-40);
-
- &.alert {
- background-color: var(--red);
- color: var(--white);
- }
+ line-height: 26px;
+ border: none;
+ border-radius: var(--border-radius-avatar-menu);
+ background-color: var(--color--global-background);
}
#notification-container {
$arrow-height: 10px;
-
+ border-radius: var(--border-radius-avatar-menu);
$list-width: 400px;
- width: 49px;
- height: 30px;
+ width: 26px;
+ height: 26px;
color: var(--base-color);
vertical-align: text-bottom;
- background-color: var(--base-color);
position: relative;
// Insert invisible padding on top of the arrow in order to try to
@@ -104,6 +99,8 @@
width: $list-width;
max-width: $list-width;
box-shadow: 1px 1px 1px var(--light-gray-color-80);
+ padding: 5px;
+ border-radius: var(--border-radius-default);
// Without this, buttons or message boxes would appear on top of the list
z-index: 2;
@@ -112,9 +109,14 @@
left: ($list-width - 30px);
}
+ &::after {
+ border-width: 10px;
+ bottom: calc(100% - 1px);
+ }
+
// Positions: below or left'ish or right'ish to the triggering element
&.below {
- left: (-$list-width + 44px);
+ left: (-$list-width + 33px);
}
&.left {
right: 0;
@@ -130,24 +132,15 @@
// List item
.item {
- $padding: 5px;
- border-top: thin solid var(--light-gray-color-60);
+ $padding: 7px 5px;
+ border-top: thin solid var(--color--action-menu-divider);
line-height: 20px;
height: auto;
padding: $padding;
white-space: normal;
&:hover {
- background-color: var(--light-gray-color-20)
- }
-
- &:only-child:hover {
- @include arrow-top(10px, $light-gray-color-20);
- margin-top: 0;
- &::before {
- left: ($list-width - 30px);
- z-index: 2;
- }
+ background-color: var(--color--action-menu-hover)
}
// First child: no top-border
@@ -166,7 +159,7 @@
flex-grow: 1;
.avatar {
- $avatar-size: 40px;
+ $avatar-size: 36px;
margin-right: 10px;
margin-left: 0;
background-position: center center;
@@ -187,11 +180,43 @@
&:hover { color: var(--active-color); }
}
+ a.mark-all-as-read:not(.invisible),
+ a.enable-desktop-notifications {
+ border-bottom: thin solid var(--color--action-menu-divider);
+ display: block;
+ max-height: 31px;
+ padding: 7px 7px 7px 9px;
+ z-index: 3;
+ }
+
+ a.mark-all-as-read {
+ @include background-icon('accept', 'clickable');
+ background-repeat: no-repeat;
+ background-position: right 8px center;
+
+ &:hover {
+ @include background-icon('accept', 'attention');
+ }
+
+ margin: 0;
+
+ // Create blind effect to hide/display this links smoothly
+ transition: all var(--transition-duration);
+ }
+ a.enable-desktop-notifications {
+ @include background-icon('notification', 'clickable');
+ background-repeat: no-repeat;
+ background-position: right 8px center;
+
+ &:hover {
+ @include background-icon('notification', 'attention');
+ }
+ }
+
.options {
border: 0;
background: none;
cursor: pointer;
- padding-top: 4px;
height: 24px;
> img {
vertical-align: top;
@@ -201,46 +226,4 @@
}
.item:hover .options.hidden { visibility: visible; }
}
-
- a.mark-all-as-read:not(.invisible),
- a.enable-desktop-notifications {
- background-color: var(--dark-gray-color-15);
- border-bottom: thin solid var(--dark-gray-color-45);
- display: block;
- max-height: 31px;
- padding: 5px 5px 5px 14px;
- z-index: 3;
- }
-
- a.mark-all-as-read {
- // Creates an arrow pointing from the list to the triggering element
- @include arrow-top-border(10px, $light-gray-color-20, 1px, $light-gray-color-80);
- &::before,
- &::after {
- left: ($list-width - 30px);
- z-index: 2;
- }
-
- @include background-icon('accept', 'clickable');
- background-repeat: no-repeat;
- background-position: right 8px center;
-
- &:hover {
- @include background-icon('accept', 'attention');
- }
-
- margin: 0;
-
- // Create blind effect to hide/display this links smoothly
- transition: all var(--transition-duration);
- }
- a.enable-desktop-notifications {
- @include background-icon('notification', 'clickable');
- background-repeat: no-repeat;
- background-position: right 8px center;
-
- &:hover {
- @include background-icon('notification', 'attention');
- }
- }
}
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 63643ab114166aa833f532aa11dee9e2c300b0a9..09675196ad6f7c3b10b9c9aedb6909bb120f84b3 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -58,6 +58,7 @@ $transition-duration-superslow: 1s;
// Border radius:
$border-radius: 4px;
+$border-radius-avatar-menu: 7px;
// Layout
$page-margin: 15px;
@@ -298,6 +299,7 @@ $grid-gap: 0;
--color-image-placeholder-background: #{$color-image-placeholder-background};
--border-radius-default: #{$border-radius};
+ --border-radius-avatar-menu: #{$border-radius-avatar-menu};
@media (prefers-reduced-motion) {
#{"--"}transition-duration: 0s;
diff --git a/templates/header.php b/templates/header.php
index 7cb271c19a7db70d252564a4c18ac5dad2af4750..64d1c3cd6f6e12d1fbd29b7d6334ce0ea7f86962 100644
--- a/templates/header.php
+++ b/templates/header.php
@@ -123,18 +123,21 @@ if ($navigation) {
&& Navigation::getItem('/profile')->isActive();
?>
- <!-- User-Avatar -->
- <li class="header_avatar_container <? if ($active) echo 'active'; ?>" id="avatar-menu-container">
+
<? if (is_object($GLOBALS['perm']) && PersonalNotifications::isActivated() && $GLOBALS['perm']->have_perm('autor')) : ?>
+
<? $notifications = PersonalNotifications::getMyNotifications() ?>
<? $lastvisit = (int)UserConfig::get($GLOBALS['user']->id)->getValue('NOTIFICATIONS_SEEN_LAST_DATE') ?>
- <div id="notification-container"<?= count($notifications) > 0 ? ' class="hoverable"' : '' ?>>
- <? foreach ($notifications as $notification) {
- if ($notification['mkdate'] > $lastvisit) {
- $alert = true;
- }
- } ?>
+ <? foreach ($notifications as $notification) {
+ if ($notification['mkdate'] > $lastvisit) {
+ $alert = true;
+ }
+ } ?>
+ <!-- User-Avatar -->
+ <li class="header_avatar_container <?= !empty($alert) ? 'alert' : '' ?> <? if ($active) echo 'active'; ?>" id="avatar-menu-container">
+ <div id="notification-container" <?= count($notifications) > 0 ? ' class="hoverable"' : '' ?>>
+
<button id="notification_marker" data-toggles="#notification_checkbox" <?= !empty($alert) ? ' class="alert"' : "" ?>
title="<?= sprintf(
ngettext('%u Benachrichtigung', '%u Benachrichtigungen', count($notifications)),
diff --git a/templates/personal_notifications/notification.php b/templates/personal_notifications/notification.php
index 8a10ae91a9e842ea783b297546bd74fff8f4c995..2f86a50371b1a9eddae8ea48aa51a2bb20e93758 100644
--- a/templates/personal_notifications/notification.php
+++ b/templates/personal_notifications/notification.php
@@ -7,7 +7,7 @@
<?= htmlReady($notification['text']) ?>
</a>
<button class="options mark_as_read">
- <?= Icon::create('decline')->asImg(12, ['title' => _('Als gelesen markieren')]) ?>
+ <?= Icon::create('decline')->asImg(14, ['title' => _('Als gelesen markieren')]) ?>
</button>
</div>
<? if ($notification->more_unseen > 0): ?>