deblan/side_menu
deblan/side_menu
3
6
Fork 5
Code Issues 6 Pull requests 11 Projects Releases 119 Wiki Activity

update ui of the big menu, add 'files' app

Browse source
This commit is contained in:
Simon Vieille 2020-08-11 13:34:36 +02:00
parent 307f69906b
commit ce5c806524
Signed by: deblan
GPG key ID: 03383D15A1D31745
3 changed files with 88 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
css/sideMenu.css
View file

@ -144,7 +144,7 @@
}
.side-menu-categories-wrapper {
padding: 0 10% 50px 10%;
padding: 0 10% 70px 10%;
}
.side-menu-categories {
@ -159,8 +159,8 @@
}
.side-menu-category {
flex: auto;
margin: 10px;
padding: 10px 20px;
flex: 1 1 auto;
}
.side-menu-category-title {
@ -184,6 +184,6 @@
}
.side-menu-category {
margin: 10px 0;
padding: 10px 0;
}
}

70
lib/Controller/NavController.php
View file

@ -95,6 +95,8 @@ class NavController extends Controller
$apps = $this->appRepository->getVisibleApps();
$currentLanguage = substr($this->l10nFactory->findLanguage(), 0, 2);
$categoriesLabels = $this->categoryFetcher->get();
$appsCategories = [];
$categoriesAppsCount = [];
$items = [];
foreach ($categoriesLabels as $k => $category) {
@ -104,7 +106,8 @@ class NavController extends Controller
}
foreach ($apps as $app) {
$categories = $app['category'];
$categories = (array) $app['category'];
$appsCategories[$app['id']] = [];
foreach ($categories as $category) {
if (!isset($items[$category])) {
@ -114,6 +117,14 @@ class NavController extends Controller
];
}
if (!isset($categoriesAppsCount[$category])) {
$categoriesAppsCount[$category] = 0;
}
++$categoriesAppsCount[$category];
$appsCategories[$app['id']][] = $category;
$items[$category]['apps'][$app['id']] = [
'name' => $app['name'],
'href' => $this->router->linkTo($app['id'], ''),
@ -122,23 +133,52 @@ class NavController extends Controller
}
}
arsort($categoriesAppsCount);
$keys = array_keys($categoriesAppsCount);
foreach ($appsCategories as $app => $appCategories) {
$smallerIndex = count($categoriesAppsCount) - 1;
foreach ($appCategories as $appCategory) {
$appKey = array_keys($keys, $appCategory)[0];
if ($appKey < $smallerIndex) {
$smallerIndex = $appKey;
}
}
$category = $keys[$smallerIndex];
foreach ($items as $itemCategory => $value) {
if ($itemCategory !== $category && isset($value['apps'][$app])) {
unset($items[$itemCategory]['apps'][$app]);
if (empty($items[$itemCategory]['apps'])) {
unset($items[$itemCategory]);
}
}
}
}
$items['other'] = [
'label' => $this->trans->t('Other'),
'apps' => [],
'name' => '',
'apps' => [
'files' => [
'name' => 'Files',
'href' => $this->router->linkTo('files', ''),
'icon' => '/apps/files/img/app.svg',
]
],
];
// foreach ($items as $category => $value) {
// if ($category !== 'other') {
// if (count($value['apps']) < 0) {
// $items['other']['apps'] = array_merge(
// $items['other']['apps'],
// $value['apps']
// );
//
// unset($items[$category]);
// }
// }
// }
foreach ($items as $category => $value) {
ksort($items[$category]['apps']);
}
usort($items, function($a, $b) {
return ($a['name'] < $b['name']) ? -1 : 1;
});
return new JSONResponse([
'items' => $items,

57
src/SideMenuBig.vue
View file

@ -20,22 +20,22 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<button class="side-menu-opener"></button>
</div>
<div class="side-menu-categories-wrapper">
<div class="side-menu-categories">
<div class="side-menu-category" v-for="category in items">
<h2 class="side-menu-category-title" v-html="category.name"></h2>
<div class="side-menu-categories-wrapper">
<div class="side-menu-categories">
<div class="side-menu-category" v-for="category in items">
<h2 class="side-menu-category-title" v-if="category.name != ''" v-html="category.name"></h2>
<ul class="side-menu-apps-list">
<li class="side-menu-app" v-for="app in category.apps">
<a v-bind:href="app.href" v-bind:title="app.name">
<img class="side-menu-app-icon" v-bind:src="app.icon"></span>
<span class="side-menu-app-text" v-html="app.name"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<ul class="side-menu-apps-list">
<li v-bind:class="{'side-menu-app': true, 'active': activeApp === appId}" v-for="(app, appId) in category.apps">
<a v-bind:href="app.href" v-bind:title="app.name">
<img class="side-menu-app-icon" v-bind:src="app.icon"></span>
<span class="side-menu-app-text" v-html="app.name"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
@ -48,29 +48,30 @@ export default {
data() {
return {
items: [],
logo: null,
forceLightIcon: false,
activeApp: null,
}
},
methods: {
retrieveApps() {
this.apps = []
let that = this
let that = this
axios
.get(OC.generateUrl('/apps/side_menu/nav/items'))
.then(function(response) {
that.items = response.data.items
axios
.get(OC.generateUrl('/apps/side_menu/nav/items'))
.then(function(response) {
that.items = response.data.items
jQuery('body').trigger('side-menu.apps', [])
});
},
jQuery('body').trigger('side-menu.apps', [])
});
},
retrieveActiveApp() {
let activeAppLink = document.querySelector('#appmenu a.active')
this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
},
},
mounted() {
this.retrieveApps()
this.forceLightIcon = document.querySelector('#side-menu-container').getAttribute('data-forcelighticon') == 1;
this.ignoreExternalSites = document.querySelector('#side-menu-container').getAttribute('data-externalsitesintopmenu') == 1;
this.retrieveActiveApp()
}
}
</script>