From a94236483e26785dcaf97fb10e863f82348eb068 Mon Sep 17 00:00:00 2001
From: Julius Härtl <jus@bitgrid.net>
Date: Tue, 11 May 2021 08:22:51 +0200
Subject: Let apps toggle an unread counter on app icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Louis Chemineau <louis@chmn.me>
Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 core/templates/layout.user.php | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

(limited to 'core/templates')

diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 3a698550ead..693a14e4058 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -57,12 +57,18 @@
 							<a href="<?php print_unescaped($entry['href']); ?>"
 								<?php if ($entry['active']): ?> class="active"<?php endif; ?>
 								aria-label="<?php p($entry['name']); ?>">
-									<svg width="20" height="20" viewBox="0 0 20 20" alt="">
-										<?php if ($_['themingInvertMenu']) { ?>
-										<defs><filter id="invertMenuMain-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>
-										<?php } ?>
-										<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet"<?php if ($_['themingInvertMenu']) { ?> filter="url(#invertMenuMain-<?php p($entry['id']); ?>)"<?php } ?> xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon"></image>
+									<svg width="24" height="20" viewBox="0 0 24 20" alt=""<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>>
+										<defs>
+											<?php if ($_['themingInvertMenu']) { ?><filter id="invertMenuMain-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter><?php } ?>
+											<mask id="hole">
+												<rect width="100%" height="100%" fill="white"/>
+												<circle r="4.5" cx="21" cy="3" fill="black"/>
+											</mask>
+										</defs>
+										<image x="2" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet"<?php if ($_['themingInvertMenu']) { ?> filter="url(#invertMenuMain-<?php p($entry['id']); ?>)"<?php } ?> xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" style="<?php if ($entry['unread'] !== 0) { ?>mask: url("#hole");<?php } ?>" class="app-icon"></image>
+										<circle class="app-icon-notification" r="3" cx="21" cy="3" fill="red"/>
 									</svg>
+								<div class="unread-counter" aria-hidden="true"><?php p($entry['unread']); ?></div>
 								<span>
 									<?php p($entry['name']); ?>
 								</span>
@@ -87,11 +93,19 @@
 									<a href="<?php print_unescaped($entry['href']); ?>"
 										<?php if ($entry['active']): ?> class="active"<?php endif; ?>
 										aria-label="<?php p($entry['name']); ?>">
-										<svg width="16" height="16" viewBox="0 0 16 16" alt="">
-											<defs><filter id="invertMenuMore-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
-											<image x="0" y="0" width="16" height="16" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMore-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon"></image>
+										<svg width="20" height="20" viewBox="0 0 20 20" alt=""<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>>
+											<defs>
+												<filter id="invertMenuMore-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter>
+												<mask id="hole">
+													<rect width="100%" height="100%" fill="white"/>
+													<circle r="4.5" cx="17" cy="3" fill="black"/>
+												</mask>
+											</defs>
+											<image x="0" y="0" width="16" height="16" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMore-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" style="<?php if ($entry['unread'] !== 0) { ?>mask: url("#hole");<?php } ?>" class="app-icon"></image>
+											<circle class="app-icon-notification" r="3" cx="17" cy="3" fill="red"/>
 										</svg>
-										<span><?php p($entry['name']); ?></span>
+										<div class="unread-counter" aria-hidden="true"><?php p($entry['unread']); ?></div>
+										<span class="app-title"><?php p($entry['name']); ?></span>
 									</a>
 									</li>
 								<?php endforeach; ?>
-- 
cgit v1.2.3