Skip to content
Snippets Groups Projects
Commit 7c65ced2 authored by Moritz Strohm's avatar Moritz Strohm
Browse files

fix for BIESt 109, closes #109 

Closes #109

Merge request studip/studip!832
parent 5d11f4d4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 89 additions and 66 deletions
resources/assets/javascripts/bootstrap/studip_helper_attributes.js
+ 14
− 4
View file @ 7c65ced2
......@@ -237,9 +237,19 @@ $(document).on('keydown', '.enter-accessible', function(event) {
}
});
$(document).on('click', '[data-toggles]', function (event) {
const target = event.currentTarget.dataset.toggles;
$(target).toggle();
$(document).on('click keydown', '[data-toggles]', function (event) {
if ((event.type === 'keydown' && event.key === 'Enter') || event.type === 'click') {
const target = event.currentTarget.dataset.toggles;
//Check if the target is a checkbox. These have to be toggled differently than
//other elements:
if ($(target).is(':checkbox')) {
//Toggle the checked state of the checkbox:
$(target).prop('checked', !$(target).prop('checked'));
} else {
//Do the normal toggle operation:
$(target).toggle();
}
event.preventDefault();
event.preventDefault();
}
});
resources/assets/javascripts/lib/gettext.js
+ 2
− 1
View file @ 7c65ced2
......@@ -8,9 +8,10 @@ const DEFAULT_LANG_NAME = 'Deutsch';
const state = getInitialState();
const $gettext = translate.gettext.bind(translate);
const $ngettext = translate.ngettext.bind(translate);
const $gettextInterpolate = translate.gettextInterpolate.bind(translate);
export { $gettext, $gettextInterpolate, translate, getLocale, setLocale, getVueConfig };
export { $gettext, $ngettext, $gettextInterpolate, translate, getLocale, setLocale, getVueConfig };
function getLocale() {
return state.locale;
......
resources/assets/javascripts/lib/personal_notifications.js
+ 9
− 4
View file @ 7c65ced2
import Favico from 'favico.js';
import Cache from './cache.js';
import PageLayout from './page_layout.js';
import { $gettextInterpolate, $ngettext } from './gettext';
var stack = {};
var audio_notification = false;
......@@ -91,7 +92,7 @@ function process_notifications({ notifications }) {
const PersonalNotifications = {
initialize () {
if ($('#notification_marker').length > 0) {
if ($('#notification_marker .count').length > 0) {
$('#notification_list .notification').map(function() {
var data = $(this).data();
stack[data.id] = data;
......@@ -154,7 +155,7 @@ const PersonalNotifications = {
},
update () {
var count = _.values(stack).length;
var old_count = parseInt($('#notification_marker').text(), 10);
var old_count = parseInt($('#notification_marker .count').text(), 10);
var really_new = 0;
$('#notification_list > ul > li').each(function() {
if (parseInt($(this).data('timestamp'), 10) > parseInt($('#notification_marker').data('lastvisit'), 10)) {
......@@ -172,16 +173,20 @@ const PersonalNotifications = {
}
if (count) {
$('#notification_container').addClass('hoverable');
$('#notification_marker').prop('disabled', false);
if (count > old_count && audio_notification !== false) {
audio_notification.play();
}
} else {
$('#notification_container').removeClass('hoverable');
$('#notification_marker').prop('disabled', true);
}
if (old_count !== count) {
$('#notification_marker').text(count);
$('#notification_marker .count').text(count);
let notification_text = $ngettext('%{ count } Benachrichtigung', '%{ count } Benachrichtigungen', count);
$('#notification_marker').attr('title', $gettextInterpolate(notification_text, {count: count}));
updateFavicon(count);
$('#notification_container .mark-all-as-read').toggleClass('notification_hidden', count < 2);
$('#notification_container .mark-all-as-read').toggleClass('invisible', count < 2);
}
},
isVisited () {
......
resources/assets/stylesheets/less/personal-notifications.less
+ 42
− 40
View file @ 7c65ced2
#notification_marker {
width: 48px;
margin-left: 0px;
padding-left: 0px;
margin-right: 0px;
padding-right: 0px;
height: 28px;
width: 100%;
height: 100%;
font-size: 0.8em;
color: @base-color;
text-align: center;
line-height: 28px;
vertical-align: text-bottom;
background-color: @dark-gray-color-10;
border: 1px solid @dark-gray-color-40;
......@@ -58,6 +57,15 @@
&.hoverable:hover {
.list { display: block; }
}
#notification_checkbox {
display: none;
}
&.hoverable #notification_checkbox:checked + #notification_list {
display: block;
}
#notification_list {
z-index: 1001;
margin-top: 10px;
......@@ -71,6 +79,11 @@
}
}
.list {
ul {
list-style-type: none;
}
// Creates an arrow pointing from the list to the triggering element
#arrow > .top-border(10px, @white, 1px, @light-gray-color-80);
......@@ -114,7 +127,6 @@
@padding: 5px;
border-top: thin solid @light-gray-color-60;
line-height: 20px;
display: block;
height: auto;
padding: @padding;
white-space: normal;
......@@ -136,26 +148,33 @@
&:first-child {
border-top: 0;
}
.content {
.main {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
.avatar {
@avatar-size: 40px;
margin-right: 10px;
margin-left: 0px;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
width: @avatar-size;
height: @avatar-size;
min-width: @avatar-size;
.content {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-grow: 1;
.avatar {
@avatar-size: 40px;
margin-right: 10px;
margin-left: 0;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
width: @avatar-size;
height: @avatar-size;
min-width: @avatar-size;
}
}
}
}
a {
a:not(.mark-all-as-read) {
color: @brand-color-dark;
display: block;
padding: 0px;
......@@ -163,9 +182,11 @@
}
.options {
border: 0;
background: none;
cursor: pointer;
float: right;
padding-top: 4px;
height: 24px;
> img {
vertical-align: top;
}
......@@ -175,10 +196,11 @@
.item:hover .options.hidden { visibility: visible; }
}
a.mark-all-as-read,
a.mark-all-as-read:not(.invisible),
a.enable-desktop-notifications {
background-color: @dark-gray-color-15;
border-bottom: thin solid @dark-gray-color-45;
display: block;
max-height: 31px;
padding: 5px 5px 5px 14px;
z-index: 3;
......@@ -205,26 +227,6 @@
// Create blind effect to hide/display this links smoothly
transition: all 300ms;
&.notification_hidden {
border-bottom-width: 0;
max-height: 0;
opacity: 0;
padding-bottom: 0;
padding-top: 0;
pointer-events: none;
+ .enable-desktop-notifications {
// Creates an arrow pointing from the list to the triggering element
#arrow > .top-border(10px, @light-gray-color-20, 1px, @light-gray-color-80);
&::before,
&::after {
left: (@list-width - 20px);
z-index: 2;
}
margin: 0;
}
}
}
a.enable-desktop-notifications {
.background-icon('notification', 'clickable');
......
templates/header.php
+ 7
− 4
View file @ 7c65ced2
......@@ -85,11 +85,14 @@ if (isset($_COOKIE['navigation-length'])) {
$alert = true;
}
} ?>
<div id="notification_marker"<?= $alert ? ' class="alert"' : "" ?> title="<?= _("Benachrichtigungen") ?>" data-lastvisit="<?= $lastvisit ?>">
<?= count($notifications) ?>
</div>
<button id="notification_marker" data-toggles="#notification_checkbox" <?= !empty($alert) ? ' class="alert"' : "" ?>
title="<?= _('Benachrichtigungen') ?>" data-lastvisit="<?= $lastvisit ?>"
<?= count($notifications) == 0 ? 'disabled' : '' ?>>
<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 'notification_hidden'; ?>" href="<?= URLHelper::getLink('dispatch.php/jsupdater/mark_notification_read/all', ['return_to' => $_SERVER['REQUEST_URI']]) ?>">
<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;">
......
templates/personal_notifications/notification.php
+ 15
− 13
View file @ 7c65ced2
<li class="notification item" data-id="<?= $notification['personal_notification_id'] ?>" data-timestamp="<?= (int) $notification['mkdate'] ?>">
<a class="options mark_as_read" href="#">
<?= Icon::create('decline')->asImg(12, ['title' => _('Als gelesen markieren')]) ?>
</a>
<a class="content" href="<?= URLHelper::getLink('dispatch.php/jsupdater/mark_notification_read/' . $notification['personal_notification_id']) ?>"<?= $notification['dialog'] ? ' data-dialog' : '' ?>>
<? if ($notification['avatar']): ?>
<div class="avatar" style="background-image: url(<?= $notification['avatar'] ?>);"></div>
<? endif; ?>
<?= htmlReady($notification['text']) ?>
</a>
<? if ($notification->more_unseen > 0): ?>
<div class="more">
<?= htmlReady(sprintf(_('... und %u weitere'), $notification->more_unseen)) ?>
<div class="main">
<a class="content" href="<?= URLHelper::getLink('dispatch.php/jsupdater/mark_notification_read/' . $notification['personal_notification_id']) ?>"<?= $notification['dialog'] ? ' data-dialog' : '' ?>>
<? if ($notification['avatar']): ?>
<div class="avatar" style="background-image: url(<?= $notification['avatar'] ?>);"></div>
<? endif ?>
<?= htmlReady($notification['text']) ?>
</a>
<button class="options mark_as_read">
<?= Icon::create('decline')->asImg(12, ['title' => _('Als gelesen markieren')]) ?>
</button>
</div>
<? endif; ?>
<? if ($notification->more_unseen > 0): ?>
<div class="more">
<?= htmlReady(sprintf(_('... und %u weitere'), $notification->more_unseen)) ?>
</div>
<? endif ?>
</li>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment