Let apps toggle an unread counter on app icons

Signed-off-by: Julius Härtl <[email protected]>
nextcloud · May 11, 2021 · 7db0abe · 7db0abe
1 parent b2ad201
commit 7db0abe
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 4 deletions.
diff --git a/core/css/header.scss b/core/css/header.scss
@@ -487,6 +487,24 @@ nav[role='navigation'] {
 			height: 20px;
 		}
 
+		.unread-counter {
+			background-color: var(--color-primary-text);
+			border-radius: 50%;
+			width: 6px;
+			height: 6px;
+			display: block;
+			z-index: 999;
+			position: absolute;
+			bottom: 5px;
+			right: calc(50% - 3px);
+			text-indent: -9999px;
+			transition: all var(--animation-quick) ease;
+			&.hidden {
+				display: none;
+			}
+		}
+
+
 		/* App title */
 		span {
 			opacity: 0;
@@ -544,6 +562,10 @@ nav[role='navigation'] {
 			a::before {
 				border-width: 5px;
 			}
+
+			.unread-counter {
+				top: -10px;
+			}
 		}
 	}
 
@@ -587,6 +609,12 @@ nav[role='navigation'] {
 		display: none;
 	}
 
+	li a.active {
+		.unread-counter {
+			top: -10px;
+		}
+	}
+
 	/* triangle focus feedback */
 	li a.active::before,
 	li:hover a::before,
@@ -612,6 +640,25 @@ nav[role='navigation'] {
 	}
 }
 
+#apps {
+	.unread-counter {
+		background-color: var(--color-primary-element);
+		border-radius: 50%;
+		width: 6px;
+		height: 6px;
+		display: block;
+		z-index: 999;
+		position: absolute;
+		bottom: 7px;
+		left: 17px;
+		text-indent: -9999px;
+		transition: all var(--animation-quick) ease;
+		&.hidden {
+			display: none;
+		}
+	}
+}
+
 /* Skip navigation links – show only on keyboard focus */
 .skip-navigation {
 	padding: 11px;

diff --git a/core/js/dist/main.js b/core/js/dist/main.js
diff --git a/core/js/dist/main.js.map b/core/js/dist/main.js.map
diff --git a/core/src/components/MainMenu.js b/core/src/components/MainMenu.js
@@ -32,6 +32,20 @@ import OC from '../OC'
  * If the screen is bigger, the main menu is not a toggle any more.
  */
 export const setUp = () => {
+
+	Object.assign(OC, {
+		setNavigationCounter(id, counter) {
+			if (counter === 0) {
+				document.getElementById('appmenu').querySelector('[data-id="' + id + '"] .unread-counter').classList.add('hidden')
+				document.getElementById('apps').querySelector('[data-id="' + id + '"] .unread-counter').classList.add('hidden')
+			} else {
+				document.getElementById('appmenu').querySelector('[data-id="' + id + '"] .unread-counter').classList.remove('hidden')
+				document.getElementById('apps').querySelector('[data-id="' + id + '"] .unread-counter').classList.remove('hidden')
+			}
+			document.getElementById('appmenu').querySelector('[data-id="' + id + '"] .unread-counter').textContent = counter
+			document.getElementById('apps').querySelector('[data-id="' + id + '"] .unread-counter').textContent = counter
+		},
+	})
 	// init the more-apps menu
 	OC.registerMenu($('#more-apps > a'), $('#navigation'))
 

diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
@@ -63,6 +63,7 @@
 										<?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>
+								<div class="unread-counter <?php if ($entry['unread'] === 0) { p('hidden'); }?>" aria-hidden="true"><?php p($entry['unread']); ?></div>
 								<span>
 									<?php p($entry['name']); ?>
 								</span>
@@ -91,7 +92,8 @@
 											<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>
-										<span><?php p($entry['name']); ?></span>
+										<div class="unread-counter <?php if ($entry['unread'] === 0) { p('hidden'); }?>" aria-hidden="true"><?php p($entry['unread']); ?></div>
+										<span class="app-title"><?php p($entry['name']); ?></span>
 									</a>
 									</li>
 								<?php endforeach; ?>

diff --git a/lib/private/NavigationManager.php b/lib/private/NavigationManager.php
@@ -50,6 +50,8 @@ class NavigationManager implements INavigationManager {
 	protected $entries = [];
 	protected $closureEntries = [];
 	protected $activeEntry;
+	protected $unreadCounters = [];
+
 	/** @var bool */
 	protected $init = false;
 	/** @var IAppManager|AppManager */
@@ -98,7 +100,11 @@ public function add($entry) {
 		if (!isset($entry['type'])) {
 			$entry['type'] = 'link';
 		}
-		$this->entries[$entry['id']] = $entry;
+
+		$id = $entry['id'];
+		$entry['unread'] = isset($this->unreadCounters[$id]) ? $this->unreadCounters[$id] : 0;
+
+		$this->entries[$id] = $entry;
 	}
 
 	/**
@@ -320,4 +326,8 @@ private function isSubadmin() {
 		}
 		return false;
 	}
+
+	public function setUnreadCounter(string $id, int $unreadCounter): void {
+		$this->unreadCounters[$id] = $unreadCounter;
+	}
 }
diff --git a/lib/public/INavigationManager.php b/lib/public/INavigationManager.php
@@ -97,4 +97,13 @@ public function getActiveEntry();
 	 * @since 14.0.0
 	 */
 	public function getAll(string $type = self::TYPE_APPS): array;
+
+	/**
+	 * Set an unread counter for navigation entries
+	 *
+	 * @param string $id id of the navigation entry
+	 * @param int $unreadCounter Number of unread entries (0 to hide the counter which is the default)
+	 * @since 22.0.0
+	 */
+	public function setUnreadCounter(string $id, int $unreadCounter): void;
 }