add custom apps sorting
This commit is contained in:
parent
7d82c78581
commit
84c620637e
|
@ -116,6 +116,7 @@
|
||||||
|
|
||||||
.side-menu-setting-row {
|
.side-menu-setting-row {
|
||||||
display: table;
|
display: table;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-menu-setting-label {
|
.side-menu-setting-label {
|
||||||
|
|
|
@ -95,6 +95,7 @@ class JsController extends Controller
|
||||||
{
|
{
|
||||||
$topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]');
|
$topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]');
|
||||||
$topSideMenuApps = $this->config->getAppValueArray('top-side-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', '[]');
|
$targetBlankApps = $this->config->getAppValueArray('target-blank-apps', '[]');
|
||||||
$useAvatar = $this->config->getAppValueBool('use-avatar', '0');
|
$useAvatar = $this->config->getAppValueBool('use-avatar', '0');
|
||||||
$isForced = $this->config->getAppValueBool('force', '0');
|
$isForced = $this->config->getAppValueBool('force', '0');
|
||||||
|
@ -164,6 +165,7 @@ class JsController extends Controller
|
||||||
'avatar' => $avatar,
|
'avatar' => $avatar,
|
||||||
'top-menu-apps' => $topMenuApps,
|
'top-menu-apps' => $topMenuApps,
|
||||||
'top-side-menu-apps' => $topSideMenuApps,
|
'top-side-menu-apps' => $topSideMenuApps,
|
||||||
|
'top-menu-apps-order' => $topMenuAppsOrder,
|
||||||
'target-blank-apps' => $targetBlankApps,
|
'target-blank-apps' => $targetBlankApps,
|
||||||
'settings' => $settings,
|
'settings' => $settings,
|
||||||
'logo' => $this->themingDefaults->getLogo(),
|
'logo' => $this->themingDefaults->getLogo(),
|
||||||
|
|
|
@ -105,4 +105,23 @@ class AppRepository
|
||||||
|
|
||||||
return $visibleApps;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -159,9 +159,11 @@ class Admin implements ISettings
|
||||||
'force' => $this->config->getAppValue('force', '0'),
|
'force' => $this->config->getAppValue('force', '0'),
|
||||||
'target-blank-apps' => $this->config->getAppValueArray('target-blank-apps', '[]'),
|
'target-blank-apps' => $this->config->getAppValueArray('target-blank-apps', '[]'),
|
||||||
'top-menu-apps' => $this->config->getAppValueArray('top-menu-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', '[]'),
|
'top-side-menu-apps' => $this->config->getAppValueArray('top-side-menu-apps', '[]'),
|
||||||
'default-enabled' => $this->config->getAppValue('default-enabled', '1'),
|
'default-enabled' => $this->config->getAppValue('default-enabled', '1'),
|
||||||
'apps' => $this->appRepository->getVisibleApps(),
|
'apps' => $this->appRepository->getVisibleApps(),
|
||||||
|
'top-menu-ordered-apps' => $this->appRepository->getTopMenuOrderedApps(),
|
||||||
'apps-categories-custom' => $this->config->getAppValueArray('apps-categories-custom', '[]'),
|
'apps-categories-custom' => $this->config->getAppValueArray('apps-categories-custom', '[]'),
|
||||||
'categories-order-type' => $this->config->getAppValue('categories-order-type', 'default'),
|
'categories-order-type' => $this->config->getAppValue('categories-order-type', 'default'),
|
||||||
'categories-order' => $this->config->getAppValueArray('categories-order', '[]'),
|
'categories-order' => $this->config->getAppValueArray('categories-order', '[]'),
|
||||||
|
|
|
@ -27,7 +27,9 @@
|
||||||
:key="app.id"
|
:key="app.id"
|
||||||
:data-app-id="app.id"
|
:data-app-id="app.id"
|
||||||
class="app-menu-entry"
|
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"
|
<a :href="app.href"
|
||||||
:class="{ 'has-unread': app.unread > 0 }"
|
:class="{ 'has-unread': app.unread > 0 }"
|
||||||
:aria-label="appLabel(app)"
|
:aria-label="appLabel(app)"
|
||||||
|
@ -78,10 +80,17 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
const ncApps = loadState('core', 'apps', {})
|
const ncApps = loadState('core', 'apps', {})
|
||||||
this.apps = {}
|
this.apps = {}
|
||||||
|
let orders = {}
|
||||||
|
|
||||||
|
Array.from(window.topMenuAppsOrder).forEach((app, order) => {
|
||||||
|
orders[app] = order + 1
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
Array.from(window.topMenuApps).forEach((id) => {
|
Array.from(window.topMenuApps).forEach((id) => {
|
||||||
if (ncApps.hasOwnProperty(id)) {
|
if (ncApps.hasOwnProperty(id)) {
|
||||||
this.apps[id] = ncApps[id]
|
this.apps[id] = ncApps[id]
|
||||||
|
this.apps[id].order = orders[id] || null
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -122,6 +131,11 @@ export default {
|
||||||
}
|
}
|
||||||
this.appLimit = appCount
|
this.appLimit = appCount
|
||||||
},
|
},
|
||||||
|
makeStyle(app) {
|
||||||
|
if (app.order !== null) {
|
||||||
|
return `order: ${app.order}`
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
18
src/admin.js
18
src/admin.js
|
@ -257,4 +257,22 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
})
|
})
|
||||||
} catch (e) {
|
} 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) {
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -25,6 +25,7 @@ if ($_['always-displayed']) {
|
||||||
const targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>
|
const targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>
|
||||||
|
|
||||||
window.topMenuApps = <?php echo json_encode($_['top-menu-apps']), "\n"; ?>
|
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']); ?>
|
window.topSideMenuApps = <?php echo json_encode($_['top-side-menu-apps']); ?>
|
||||||
|
|
||||||
<?php if ($display === 'big-menu'): ?>
|
<?php if ($display === 'big-menu'): ?>
|
||||||
|
|
|
@ -829,6 +829,33 @@ $labelReset = 'Reset to default';
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue