From 3db0c1ccd294ad47bc6edfc81a31f22588a5d8c5 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 19 Aug 2020 11:29:21 +0200
Subject: [PATCH] fix #23: hidden icons in the top menu

---
 templates/js/_topMenuApps.js | 39 ++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/templates/js/_topMenuApps.js b/templates/js/_topMenuApps.js
index b6fe1c1..efab920 100644
--- a/templates/js/_topMenuApps.js
+++ b/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()