Skip to content
Snippets Groups Projects
Commit 715fa188 authored by Ron Lucke's avatar Ron Lucke Committed by David Siegfried
Browse files

Polishing TIC: Avatarmenu 

Closes #4935

Merge request studip/studip!3718
parent 278270b3
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 90 additions and 106 deletions
resources/assets/javascripts/lib/personal_notifications.js
+ 6
− 3
View file @ 715fa188
......@@ -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');
});
}
};
......
resources/assets/stylesheets/scss/header.scss
+ 16
− 23
View file @ 715fa188
......@@ -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 + & {
......
resources/assets/stylesheets/scss/personal-notifications.scss
+ 54
− 71
View file @ 715fa188
......@@ -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,40 +180,16 @@
&:hover { color: var(--active-color); }
}
.options {
border: 0;
background: none;
cursor: pointer;
padding-top: 4px;
height: 24px;
> img {
vertical-align: top;
}
&.hidden { visibility: hidden; }
}
.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);
border-bottom: thin solid var(--color--action-menu-divider);
display: block;
max-height: 31px;
padding: 5px 5px 5px 14px;
padding: 7px 7px 7px 9px;
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;
......@@ -243,4 +212,18 @@
@include background-icon('notification', 'attention');
}
}
.options {
border: 0;
background: none;
cursor: pointer;
height: 24px;
> img {
vertical-align: top;
}
&.hidden { visibility: hidden; }
}
.item:hover .options.hidden { visibility: visible; }
}
}
resources/assets/stylesheets/scss/variables.scss
+ 2
− 0
View file @ 715fa188
......@@ -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;
......
templates/header.php
+ 11
− 8
View file @ 715fa188
......@@ -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;
}
} ?>
<!-- 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)),
......
templates/personal_notifications/notification.php
+ 1
− 1
View file @ 715fa188
......@@ -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): ?>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment