add custom apps sorting

This commit is contained in:
Simon Vieille 2022-10-21 17:59:41 +02:00
parent 7d82c78581
commit 84c620637e
Signed by: deblan
GPG key ID: 579388D585F70417
8 changed files with 85 additions and 1 deletions

View file

@ -116,6 +116,7 @@
.side-menu-setting-row {
display: table;
margin-bottom: 10px;
}
.side-menu-setting-label {

View file

@ -95,6 +95,7 @@ class JsController extends Controller
{
$topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]');
$topSideMenuApps = $this->config->getAppValueArray('top-side-menu-apps', '[]');
$topMenuAppsOrder = $this->config->getAppValueArray('top-menu-apps-order', '[]');
$targetBlankApps = $this->config->getAppValueArray('target-blank-apps', '[]');
$useAvatar = $this->config->getAppValueBool('use-avatar', '0');
$isForced = $this->config->getAppValueBool('force', '0');
@ -164,6 +165,7 @@ class JsController extends Controller
'avatar' => $avatar,
'top-menu-apps' => $topMenuApps,
'top-side-menu-apps' => $topSideMenuApps,
'top-menu-apps-order' => $topMenuAppsOrder,
'target-blank-apps' => $targetBlankApps,
'settings' => $settings,
'logo' => $this->themingDefaults->getLogo(),

View file

@ -105,4 +105,23 @@ class AppRepository
return $visibleApps;
}
public function getTopMenuOrderedApps()
{
$apps = $this->getVisibleApps();
$orders = $this->config->getAppValueArray('top-menu-apps-order', '[]');
usort($apps, function ($a, $b) use ($orders) {
$ak = array_keys($orders, $a['id'])[0] ?? null;
$bk = array_keys($orders, $b['id'])[0] ?? null;
if ($ak === null || $bk === null) {
return ($a['name'] < $b['name']) ? -1 : 1;
}
return $ak < $bk ? -1 : 1;
});
return $apps;
}
}

View file

@ -159,9 +159,11 @@ class Admin implements ISettings
'force' => $this->config->getAppValue('force', '0'),
'target-blank-apps' => $this->config->getAppValueArray('target-blank-apps', '[]'),
'top-menu-apps' => $this->config->getAppValueArray('top-menu-apps', '[]'),
'top-menu-apps-order' => $this->config->getAppValueArray('top-menu-apps-order', '[]'),
'top-side-menu-apps' => $this->config->getAppValueArray('top-side-menu-apps', '[]'),
'default-enabled' => $this->config->getAppValue('default-enabled', '1'),
'apps' => $this->appRepository->getVisibleApps(),
'top-menu-ordered-apps' => $this->appRepository->getTopMenuOrderedApps(),
'apps-categories-custom' => $this->config->getAppValueArray('apps-categories-custom', '[]'),
'categories-order-type' => $this->config->getAppValue('categories-order-type', 'default'),
'categories-order' => $this->config->getAppValueArray('categories-order', '[]'),

View file

@ -27,7 +27,9 @@
:key="app.id"
:data-app-id="app.id"
class="app-menu-entry"
:class="{ 'app-menu-entry__active': app.active }">
:class="{ 'app-menu-entry__active': app.active }"
:style="makeStyle(app)"
>
<a :href="app.href"
:class="{ 'has-unread': app.unread > 0 }"
:aria-label="appLabel(app)"
@ -78,10 +80,17 @@ export default {
mounted() {
const ncApps = loadState('core', 'apps', {})
this.apps = {}
let orders = {}
Array.from(window.topMenuAppsOrder).forEach((app, order) => {
orders[app] = order + 1
})
Array.from(window.topMenuApps).forEach((id) => {
if (ncApps.hasOwnProperty(id)) {
this.apps[id] = ncApps[id]
this.apps[id].order = orders[id] || null
}
})
@ -122,6 +131,11 @@ export default {
}
this.appLimit = appCount
},
makeStyle(app) {
if (app.order !== null) {
return `order: ${app.order}`
}
}
},
}
</script>

View file

@ -257,4 +257,22 @@ document.addEventListener('DOMContentLoaded', () => {
})
} catch (e) {
}
sortable('#top-menu-apps-order-list .side-menu-setting-list', {
placeholderClass: 'side-menu-setting-list-drop'
})
try {
sortable('#top-menu-apps-order-list .side-menu-setting-list')[0].addEventListener('sortstop', (e) => {
let value = []
for (let item of document.querySelectorAll('#top-menu-apps-order-list .side-menu-setting-list-item')) {
console.log(item.getAttribute('data-id'))
value.push(item.getAttribute('data-id'))
}
document.querySelector('input[name="top-menu-apps-order"]').value = JSON.stringify(value)
})
} catch (e) {
}
})

View file

@ -25,6 +25,7 @@ if ($_['always-displayed']) {
const targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>
window.topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
window.topMenuAppsOrder = <?php echo json_encode($_['top-menu-apps-order']), "\n"; ?>
window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps']); ?>
<?php if ($display === 'big-menu'): ?>

View file

@ -829,6 +829,33 @@ $labelReset = 'Reset to default';
</div>
</div>
</div>
<div class="side-menu-setting-row">
<div class="side-menu-setting-label">
<?php p($l->t('Customize sorting')); ?>
</div>
<div class="side-menu-setting-form">
<a class="side-menu-toggler" data-target="#top-menu-apps-order-list" href="#_">
🖱️ <?php p($l->t($labelShowHideApps)); ?>
</a>
<div id="top-menu-apps-order-list" style="display: none">
<ul class="side-menu-setting-list">
<?php foreach ($_['top-menu-ordered-apps'] as $key => $app): ?>
<li data-id="<?php echo $app['id']; ?>" class="side-menu-setting-list-item">
<span class="arrow">
</span>
<?php echo p($l->t($app['name'])); ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<input type="hidden" value='<?php echo json_encode(array_keys($_['top-menu-apps-order'])) ?>' name="top-menu-apps-order" class="side-menu-setting">
</div>
</div>
</div>
</div>