release v1.8.2

appinfo/info.xml

@@ -17,7 +17,7 @@ You can report a bug or request a feature by opening an issue.
 ]]></description>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
-    <version>1.8.1</version>
+    <version>1.8.2</version>
     <namespace>SideMenu</namespace>
     <category>customization</category>
     <website>https://gitnet.fr/deblan/side_menu</website>

css/sideMenu.css

@@ -45,6 +45,11 @@
     border: 0;
 }
 
+.side-menu-closer {
+    background: url('../img/side-menu-opener-closer.svg');
+    display: none;
+}
+
 #side-menu.hide-opener .side-menu-opener, .side-menu-opener.hide {
     display: none;
 }
@@ -193,3 +198,15 @@
         height: 100vh;
     }
 }
+
+@media screen and (min-width: 1024px) {
+    .side-menu-closer {
+        display: block;
+        float: right;
+        margin-right: 9px;
+    }
+
+    .side-menu-big .side-menu-header {
+        max-width: 100%;
+    }
+}

img/side-menu-opener-closer.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 10.583 10.583">
+  <g color="#000" fill="#fff">
+    <rect transform="rotate(135)" ry=".545" rx=".545" y="-8.209" x="-3.608" height="1.451" width="7.216" style="marker:none" overflow="visible" paint-order="stroke markers fill"/>
+    <rect transform="rotate(-135)" ry=".545" rx=".545" y="-.726" x="-11.091" height="1.451" width="7.216" style="marker:none" overflow="visible" paint-order="stroke markers fill"/>
+  </g>
+</svg>

lib/Controller/NavController.php

@@ -154,7 +154,7 @@ class NavController extends Controller
                 $items[$category]['apps'][$app['id']] = [
                     'name' => $app['name'],
                     'href' => $app['href'],
-                    'icon' => $app['previewAsIcon'] ? $app['preview'] : null,
+                    'icon' => $app['icon'],
                 ];
             }
         }

lib/Service/AppRepository.php

@@ -42,11 +42,14 @@ class AppRepository
         foreach ($apps as $app) {
             $id = $app['id'];
 
-            if (isset($navigation[$id])) {
-                $app['name'] = $this->l10nFactory->get($app['id'])->t($app['name']);
-                $app['href'] = $navigation[$id]['href'];
+            foreach ([$app['id'], $app['id'].'_index'] as $id) {
+                if (isset($navigation[$id])) {
+                    $app['name'] = $this->l10nFactory->get($id)->t($app['name']);
+                    $app['href'] = $navigation[$id]['href'];
+                    $app['icon'] = $navigation[$id]['icon'];
 
-                $visibleApps[$id] = $app;
+                    $visibleApps[$id] = $app;
+                }
             }
         }
 
@@ -56,8 +59,7 @@ class AppRepository
                     'id' => $app['id'],
                     'name' => $this->l10nFactory->get($app['id'])->t($app['name']),
                     'href' => $app['href'],
-                    'preview' => $app['icon'],
-                    'previewAsIcon' => true,
+                    'icon' => $app['icon'],
                     'category' => [
                         'external_links',
                     ],
@@ -67,8 +69,7 @@ class AppRepository
                     'id' => $app['id'],
                     'name' => $this->l10nFactory->get($app['id'])->t($app['name']),
                     'href' => $app['href'],
-                    'preview' => $app['icon'],
-                    'previewAsIcon' => true,
+                    'icon' => $app['icon'],
                     'category' => [],
                 ];
             }

src/SideMenuBig.vue

@@ -17,7 +17,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
     <div id="side-menu" class="side-menu-big">
         <div class="side-menu-header">
-            <button class="side-menu-opener"></button>
+            <button class="side-menu-opener side-menu-closer"></button>
+			<button class="side-menu-opener"></button>
         </div>
 
         <div class="side-menu-categories-wrapper">
@@ -64,8 +65,8 @@ export default {
                     let apps = []
 
                     for (let category of that.items) {
-                        for (let app of category.apps) {
-                            apps.push(app)
+                        for (let a in category.apps) {
+                            apps.push(category.apps[a])
                         }
                     }
 

templates/js/_topMenuApps.js

@@ -5,7 +5,7 @@ var updateTopMenu = function() {
     var menu = $('#appmenu')
     var apps = menu.find('li')
     var minAppsDesktop = 8
-    var usePercentualAppMenuLimit = 0.9
+    var usePercentualAppMenuLimit = 0.8
     var isMobile = $(window).width() < breakpointMobileWidth
     var lastShownApp = null
     var appShown = []
@@ -42,18 +42,20 @@ var updateTopMenu = function() {
 
     var rightHeaderWidth = $('.header-right').outerWidth()
     var headerWidth = $('header').outerWidth()
-    var availableWidth = headerWidth - $('#nextcloud').outerWidth() - $('#header .side-menu-opener').outerWidth() - (rightHeaderWidth > 210 ? rightHeaderWidth : 210)
+    var availableWidth = headerWidth - $('#nextcloud').outerWidth()
+                            - $('#header .side-menu-opener').outerWidth()
+                            - (rightHeaderWidth > 230 ? rightHeaderWidth : 230)
 
     if (!isMobile) {
         availableWidth = availableWidth * usePercentualAppMenuLimit
     }
 
+    appCount = Math.floor(availableWidth / $('#appmenu li').width())
+
     if (isMobile && appCount > minAppsDesktop) {
         appCount = minAppsDesktop
     } else if (!isMobile && appCount < minAppsDesktop) {
         appCount = minAppsDesktop
-    } else {
-        appCount = Math.floor(availableWidth / $('#appmenu li').width())
     }
 
     if (appCount === 0) {
@@ -102,6 +104,35 @@ var updateTopMenu = function() {
         k++
     })
 
+    $('#apps li.app-external-site').each(function(i, app) {
+        app = $(app)
+        var appId = app.attr('data-id')
+
+        if (app.hasClass('in-header')) {
+            app.find('svg').find('defs').remove()
+        } else {
+            var svg = app.find('svg');
+
+            if (svg.find('defs').length > 0) {
+                return;
+            }
+
+            var defs = `
+                <defs>
+                    <filter id="invertMenuMore-${appId}">
+                        <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>`
+
+            svg.prepend(defs)
+            svg.find('image').attr('filter', `url(#invertMenuMore-${appId})`)
+
+            var html = svg.get(0).innerHTML.replace(/fecolormatrix/g, 'feColorMatrix');
+
+            svg.html(html)
+        }
+    })
+
     if (notInHeader === 0) {
         moreApps.hide()
         navigation.hide()