From ce5c80652429eadf8eb53d27d426d08b4c1c2a00 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Tue, 11 Aug 2020 13:34:36 +0200
Subject: [PATCH] update ui of the big menu, add 'files' app

---
 css/sideMenu.css                 |  8 ++--
 lib/Controller/NavController.php | 70 +++++++++++++++++++++++++-------
 src/SideMenuBig.vue              | 57 +++++++++++++-------------
 3 files changed, 88 insertions(+), 47 deletions(-)

diff --git a/css/sideMenu.css b/css/sideMenu.css
index f4fad95..e051ac4 100644
--- a/css/sideMenu.css
+++ b/css/sideMenu.css
@@ -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;
     }
 }
diff --git a/lib/Controller/NavController.php b/lib/Controller/NavController.php
index b89baad..36b3451 100644
--- a/lib/Controller/NavController.php
+++ b/lib/Controller/NavController.php
@@ -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,
diff --git a/src/SideMenuBig.vue b/src/SideMenuBig.vue
index e8758d4..67ba1f4 100644
--- a/src/SideMenuBig.vue
+++ b/src/SideMenuBig.vue
@@ -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>