Compare commits
1 Commits
master
...
enh/app-ic
Author | SHA1 | Date |
---|---|---|
Julius Härtl | 7db0abe573 |
|
@ -487,6 +487,24 @@ nav[role='navigation'] {
|
||||||
height: 20px;
|
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 */
|
/* App title */
|
||||||
span {
|
span {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
@ -544,6 +562,10 @@ nav[role='navigation'] {
|
||||||
a::before {
|
a::before {
|
||||||
border-width: 5px;
|
border-width: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.unread-counter {
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -587,6 +609,12 @@ nav[role='navigation'] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li a.active {
|
||||||
|
.unread-counter {
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* triangle focus feedback */
|
/* triangle focus feedback */
|
||||||
li a.active::before,
|
li a.active::before,
|
||||||
li:hover a::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 links – show only on keyboard focus */
|
||||||
.skip-navigation {
|
.skip-navigation {
|
||||||
padding: 11px;
|
padding: 11px;
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -32,6 +32,20 @@ import OC from '../OC'
|
||||||
* If the screen is bigger, the main menu is not a toggle any more.
|
* If the screen is bigger, the main menu is not a toggle any more.
|
||||||
*/
|
*/
|
||||||
export const setUp = () => {
|
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
|
// init the more-apps menu
|
||||||
OC.registerMenu($('#more-apps > a'), $('#navigation'))
|
OC.registerMenu($('#more-apps > a'), $('#navigation'))
|
||||||
|
|
||||||
|
|
|
@ -63,6 +63,7 @@
|
||||||
<?php } ?>
|
<?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>
|
<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>
|
</svg>
|
||||||
|
<div class="unread-counter <?php if ($entry['unread'] === 0) { p('hidden'); }?>" aria-hidden="true"><?php p($entry['unread']); ?></div>
|
||||||
<span>
|
<span>
|
||||||
<?php p($entry['name']); ?>
|
<?php p($entry['name']); ?>
|
||||||
</span>
|
</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>
|
<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>
|
<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>
|
</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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
|
|
|
@ -50,6 +50,8 @@ class NavigationManager implements INavigationManager {
|
||||||
protected $entries = [];
|
protected $entries = [];
|
||||||
protected $closureEntries = [];
|
protected $closureEntries = [];
|
||||||
protected $activeEntry;
|
protected $activeEntry;
|
||||||
|
protected $unreadCounters = [];
|
||||||
|
|
||||||
/** @var bool */
|
/** @var bool */
|
||||||
protected $init = false;
|
protected $init = false;
|
||||||
/** @var IAppManager|AppManager */
|
/** @var IAppManager|AppManager */
|
||||||
|
@ -98,7 +100,11 @@ class NavigationManager implements INavigationManager {
|
||||||
if (!isset($entry['type'])) {
|
if (!isset($entry['type'])) {
|
||||||
$entry['type'] = 'link';
|
$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;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function setUnreadCounter(string $id, int $unreadCounter): void {
|
||||||
|
$this->unreadCounters[$id] = $unreadCounter;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -97,4 +97,13 @@ interface INavigationManager {
|
||||||
* @since 14.0.0
|
* @since 14.0.0
|
||||||
*/
|
*/
|
||||||
public function getAll(string $type = self::TYPE_APPS): array;
|
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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue