bring back mark as unread/mark as read & bookmark links

The links were silently dropped with commit
4c0d975532 "Make clickable icons"
without any mention in the commit message.

Based on the commit title, I would assume this is an additional
functionality and not something that replaces existing stuff.

It's annoying to move the mouse across the screen (reading text from
the left to right) to get to the mark read icon for marking an article
as read.

All changes related to the removal of the links are reverted by keeping
the clickable icons.
This commit is contained in:
Mathias Kresin 2016-08-04 22:06:02 +02:00
parent cba69bb9ae
commit 48be7a1fff
5 changed files with 150 additions and 88 deletions

View File

@ -152,25 +152,50 @@ Miniflux.Item = (function() {
return item.getAttribute("data-item-id"); return item.getAttribute("data-item-id");
} }
function changeLabel(link) function changeLabel(links)
{ {
if (link && link.hasAttribute("data-reverse-title") && link.hasAttribute("title")) { if (links.length === 0) {
return;
}
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.hasAttribute("data-reverse-label")) {
var content = link.innerHTML;
link.innerHTML = link.getAttribute("data-reverse-label");
link.setAttribute("data-reverse-label", content);
}
if (link.hasAttribute("data-reverse-title")) {
var title = link.getAttribute("title"); var title = link.getAttribute("title");
link.setAttribute("title", link.getAttribute("data-reverse-title")); link.setAttribute("title", link.getAttribute("data-reverse-title"));
link.setAttribute("data-reverse-title", title); link.setAttribute("data-reverse-title", title);
} }
} }
}
function changeAction(links, action)
{
if (links.length === 0) {
return;
}
for (var i = 0; i < links.length; i++) {
links[i].setAttribute("data-action", action);
}
}
function changeBookmarkLabel(item) function changeBookmarkLabel(item)
{ {
var link = item.querySelector(".bookmark-icon"); var links = item.querySelectorAll(".bookmark-icon, a.bookmark");
changeLabel(link); changeLabel(links);
} }
function changeStatusLabel(item) function changeStatusLabel(item)
{ {
var link = item.querySelector(".read-icon"); var links = item.querySelectorAll(".read-icon, a.mark");
changeLabel(link); changeLabel(links);
} }
function showItemAsRead(item) function showItemAsRead(item)
@ -179,19 +204,18 @@ Miniflux.Item = (function() {
return; return;
} }
nbUnreadItems--;
if (item.getAttribute("data-hide")) { if (item.getAttribute("data-hide")) {
hideItem(item); hideItem(item);
return;
} }
else {
item.setAttribute("data-item-status", "read"); item.setAttribute("data-item-status", "read");
changeStatusLabel(item); changeStatusLabel(item);
// Change action var links = item.querySelectorAll(".read-icon, a.mark");
var link = item.querySelector(".read-icon"); changeAction(links, "mark-unread");
if (link) link.setAttribute("data-action", "mark-unread");
}
nbUnreadItems--;
} }
function showItemAsUnread(item) function showItemAsUnread(item)
@ -200,19 +224,18 @@ Miniflux.Item = (function() {
return; return;
} }
nbUnreadItems++;
if (item.getAttribute("data-hide")) { if (item.getAttribute("data-hide")) {
hideItem(item); hideItem(item);
return;
} }
else {
item.setAttribute("data-item-status", "unread"); item.setAttribute("data-item-status", "unread");
changeStatusLabel(item); changeStatusLabel(item);
// Change action var links = item.querySelectorAll(".read-icon, a.mark");
var link = item.querySelector(".read-icon"); changeAction(links, "mark-read");
if (link) link.setAttribute("data-action", "mark-read");
}
nbUnreadItems++;
} }
function hideItem(item) function hideItem(item)

View File

@ -40,25 +40,50 @@ Miniflux.Item = (function() {
return item.getAttribute("data-item-id"); return item.getAttribute("data-item-id");
} }
function changeLabel(link) function changeLabel(links)
{ {
if (link && link.hasAttribute("data-reverse-title") && link.hasAttribute("title")) { if (links.length === 0) {
return;
}
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.hasAttribute("data-reverse-label")) {
var content = link.innerHTML;
link.innerHTML = link.getAttribute("data-reverse-label");
link.setAttribute("data-reverse-label", content);
}
if (link.hasAttribute("data-reverse-title")) {
var title = link.getAttribute("title"); var title = link.getAttribute("title");
link.setAttribute("title", link.getAttribute("data-reverse-title")); link.setAttribute("title", link.getAttribute("data-reverse-title"));
link.setAttribute("data-reverse-title", title); link.setAttribute("data-reverse-title", title);
} }
} }
}
function changeAction(links, action)
{
if (links.length === 0) {
return;
}
for (var i = 0; i < links.length; i++) {
links[i].setAttribute("data-action", action);
}
}
function changeBookmarkLabel(item) function changeBookmarkLabel(item)
{ {
var link = item.querySelector(".bookmark-icon"); var links = item.querySelectorAll(".bookmark-icon, a.bookmark");
changeLabel(link); changeLabel(links);
} }
function changeStatusLabel(item) function changeStatusLabel(item)
{ {
var link = item.querySelector(".read-icon"); var links = item.querySelectorAll(".read-icon, a.mark");
changeLabel(link); changeLabel(links);
} }
function showItemAsRead(item) function showItemAsRead(item)
@ -67,19 +92,18 @@ Miniflux.Item = (function() {
return; return;
} }
nbUnreadItems--;
if (item.getAttribute("data-hide")) { if (item.getAttribute("data-hide")) {
hideItem(item); hideItem(item);
return;
} }
else {
item.setAttribute("data-item-status", "read"); item.setAttribute("data-item-status", "read");
changeStatusLabel(item); changeStatusLabel(item);
// Change action var links = item.querySelectorAll(".read-icon, a.mark");
var link = item.querySelector(".read-icon"); changeAction(links, "mark-unread");
if (link) link.setAttribute("data-action", "mark-unread");
}
nbUnreadItems--;
} }
function showItemAsUnread(item) function showItemAsUnread(item)
@ -88,19 +112,18 @@ Miniflux.Item = (function() {
return; return;
} }
nbUnreadItems++;
if (item.getAttribute("data-hide")) { if (item.getAttribute("data-hide")) {
hideItem(item); hideItem(item);
return;
} }
else {
item.setAttribute("data-item-status", "unread"); item.setAttribute("data-item-status", "unread");
changeStatusLabel(item); changeStatusLabel(item);
// Change action var links = item.querySelectorAll(".read-icon, a.mark");
var link = item.querySelector(".read-icon"); changeAction(links, "mark-read");
if (link) link.setAttribute("data-action", "mark-read");
}
nbUnreadItems++;
} }
function hideItem(item) function hideItem(item)

View File

@ -1,15 +1,17 @@
<li class="hide-mobile">
<?php if ($item['bookmark']): ?> <?php if ($item['bookmark']): ?>
<span <a
class="bookmark-icon" class="bookmark"
href="?action=bookmark&amp;value=0&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;menu=<?= $menu ?>&amp;feed_id=<?= $item['feed_id'] ?>"
data-action="bookmark" data-action="bookmark"
data-reverse-title="<?= t('bookmark') ?>" data-reverse-label="<?= t('bookmark') ?>"
title="<?= t('remove bookmark') ?>" ><?= t('remove bookmark') ?></a>
></span>
<?php else: ?> <?php else: ?>
<span <a
class="bookmark-icon" class="bookmark"
href="?action=bookmark&amp;value=1&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;menu=<?= $menu ?>&amp;feed_id=<?= $item['feed_id'] ?>"
data-action="bookmark" data-action="bookmark"
data-reverse-title="<?= t('remove bookmark') ?>" data-reverse-label="<?= t('remove bookmark') ?>"
title="<?= t('bookmark') ?>" ><?= t('bookmark') ?></a>
></span>
<?php endif ?> <?php endif ?>
</li>

View File

@ -8,8 +8,18 @@
> >
<h2 <?= Helper\is_rtl($item) ? 'dir="rtl"' : 'dir="ltr"' ?>> <h2 <?= Helper\is_rtl($item) ? 'dir="rtl"' : 'dir="ltr"' ?>>
<span class="item-icons"> <span class="item-icons">
<?= \Template\load('bookmark_links', array('item' => $item, 'menu' => $menu, 'offset' => $offset, 'source' => '')) ?> <span
<?= \Template\load('status_links', array('item' => $item, 'redirect' => $menu, 'offset' => $offset)) ?> class="bookmark-icon"
title="<?= ($item['bookmark']) ? t('remove bookmark') : t('bookmark') ?>"
data-action="bookmark"
data-reverse-title="<?= ($item['bookmark']) ? t('bookmark') : t('remove bookmark') ?>"
></span>
<span
class="read-icon"
title="<?= ($item['status'] === 'unread') ? t('mark as read') : t('mark as unread') ?>"
data-action="<?= ($item['status'] === 'unread') ? 'mark-read' : 'mark-unread' ?>"
data-reverse-title="<?= ($item['status'] === 'unread') ? t('mark as unread') : t('mark as read') ?>"
></span>
</span> </span>
<span class="item-title"> <span class="item-title">
<?= Helper\favicon($favicons, $item['feed_id']) ?> <?= Helper\favicon($favicons, $item['feed_id']) ?>
@ -71,13 +81,8 @@
<?php endif ?> <?php endif ?>
</li> </li>
<?php endif ?> <?php endif ?>
<li class="hide-mobile"> <?= \Template\load('bookmark_links', array('item' => $item, 'menu' => $menu, 'offset' => $offset)) ?>
<a <?= \Template\load('status_links', array('item' => $item, 'menu' => $menu, 'offset' => $offset)) ?>
href="?action=mark-item-removed&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $menu ?>&amp;feed_id=<?= $item['feed_id'] ?>"
data-action="mark-removed"
class="delete"
><?= t('remove') ?></a>
</li>
</ul> </ul>
<?php if ($display_mode === 'full'): ?> <?php if ($display_mode === 'full'): ?>
<div class="preview-full-content" <?= Helper\is_rtl($item) ? 'dir="rtl"' : 'dir="ltr"' ?>><?= $item['content'] ?></div> <div class="preview-full-content" <?= Helper\is_rtl($item) ? 'dir="rtl"' : 'dir="ltr"' ?>><?= $item['content'] ?></div>

View File

@ -1,15 +1,24 @@
<li class="hide-mobile">
<a
href="?action=mark-item-removed&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $menu ?>&amp;feed_id=<?= $item['feed_id'] ?>"
data-action="mark-removed"
class="delete"
><?= t('remove') ?></a>
</li>
<li class="hide-mobile">
<?php if ($item['status'] == 'unread'): ?> <?php if ($item['status'] == 'unread'): ?>
<span <a
class="read-icon" class="mark"
href="?action=mark-item-read&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $menu ?>&amp;feed_id=<?= $item['feed_id'] ?>"
data-action="mark-read" data-action="mark-read"
data-reverse-title="<?= t('mark as unread') ?>" data-reverse-label="<?= t('mark as unread') ?>"
title="<?= t('mark as read') ?>" ><?= t('mark as read') ?></a>
></span>
<?php else: ?> <?php else: ?>
<span <a
class="read-icon" class="mark"
href="?action=mark-item-unread&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $menu ?>&amp;feed_id=<?= $item['feed_id'] ?>"
data-action="mark-unread" data-action="mark-unread"
data-reverse-title="<?= t('mark as read') ?>" data-reverse-label="<?= t('mark as read') ?>"
title="<?= t('mark as unread') ?>" ><?= t('mark as unread') ?></a>
></span>
<?php endif ?> <?php endif ?>
</li>