mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Let apps toggle an unread counter on app icons 

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2021-05-11 08:22:51 +02:00
parent b2ad201644
commit 7db0abe573
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
7 changed files with 86 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
core/css/header.scss
View File

@ -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;

2
core/js/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

2
core/js/dist/main.js.map vendored
View File

File diff suppressed because one or more lines are too long

14
core/src/components/MainMenu.js
View File

@ -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'))

4
core/templates/layout.user.php
View File

@ -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; ?>

12
lib/private/NavigationManager.php
View File

@ -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 @@ class NavigationManager implements INavigationManager {
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 @@ class NavigationManager implements INavigationManager {
}
return false;
}
public function setUnreadCounter(string $id, int $unreadCounter): void {
$this->unreadCounters[$id] = $unreadCounter;
}
}

9
lib/public/INavigationManager.php
View File

@ -97,4 +97,13 @@ interface INavigationManager {
* @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;
}