Merge pull request 'develop' (#508) from develop into master

Reviewed-on: https://gitnet.fr/deblan/side_menu/pulls/508

appinfo/info.xml

@@ -30,7 +30,7 @@ Notice
 Because I believe in a free and decentralized Internet, [Gitnet](https://gitnet.fr) is **self-hosted at home**.
 In case of downtime, you can download **Custom Menu** from [here](https://kim.deblan.fr/~side_menu/).
 ]]></description>
-    <version>5.3.0</version>
+    <version>6.0.1</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.fr/">Simon Vieille</author>
     <namespace>SideMenu</namespace>
@@ -53,7 +53,7 @@ In case of downtime, you can download **Custom Menu** from [here](https://kim.de
     <screenshot><![CDATA[https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_default_menu.png]]></screenshot>
     <dependencies>
         <php min-version="8.1" max-version="8.5" />
-        <nextcloud min-version="31" max-version="33"/>
+        <nextcloud min-version="34" max-version="34"/>
     </dependencies>
     <settings>
         <admin>OCA\SideMenu\Settings\Admin</admin>

lib/AppInfo/Application.php

@@ -6,6 +6,7 @@ use OC\AllConfig;
 use OC\App\AppStore\Fetcher\CategoryFetcher;
 use OC\AppFramework\Http\Request;
 use OC\Security\CSP\ContentSecurityPolicyNonceManager;
+use OC\Security\CSRF\CsrfTokenManager;
 use OC\User\User;
 use OCA\SideMenu\Service\AppRepository;
 use OCA\SideMenu\Service\CategoryRepository;
@@ -19,8 +20,11 @@ use OCP\AppFramework\Bootstrap\IRegistrationContext;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\IConfig;
 use OCP\INavigationManager;
+use OCP\IRequest;
+use OCP\IURLGenerator;
 use OCP\IUserSession;
 use OCP\L10N\IFactory;
+use OCP\Server;
 use OCP\Util;
 use Psr\Container\ContainerInterface;
 
@@ -34,9 +38,9 @@ class Application extends App implements IBootstrap
     public const APP_ID = 'side_menu';
     public const APP_NAME = 'Custom menu';
 
-    protected AllConfig $config;
+    protected IConfig $config;
     protected ContentSecurityPolicyNonceManager $cspnm;
-    protected Request $request;
+    protected IRequest $request;
     protected ?User $user = null;
 
     public function __construct(array $urlParams = [])
@@ -83,10 +87,9 @@ class Application extends App implements IBootstrap
 
     public function boot(IBootContext $context): void
     {
-        $this->config = \OC::$server->getConfig();
-        $this->cspnm = \OC::$server->getContentSecurityPolicyNonceManager();
-        $this->user = \OC::$server[IUserSession::class]->getUser();
-        $this->request = \OC::$server->getRequest();
+        $this->config = Server::get(IConfig::class);
+        $this->user = Server::get(IUserSession::class)->getUser();
+        $this->request = Server::get(IRequest::class);
 
         if (!$this->isEnabled()) {
             return;
@@ -138,7 +141,7 @@ class Application extends App implements IBootstrap
         $cache = $this->config->getAppValue(self::APP_ID, 'cache', '0');
 
         foreach ($assets as $value) {
-            $route = \OC::$server->getURLGenerator()->linkToRoute(
+            $route = Server::get(IURLGenerator::class)->linkToRoute(
                 $value['route'],
                 ['v' => $cache]
             );

package.json

@@ -13,7 +13,7 @@
     "@babel/core": ">=7.12.0 <8.0.0",
     "@formatjs/intl-segmenter": "^12.0.8",
     "@nextcloud/router": "^3.0.1",
-    "@nextcloud/vue": "^9.0.0-alpha.8",
+    "@nextcloud/vue": "^9.9.0",
     "node-polyfill-webpack-plugin": "^4.1.0",
     "pinia": "^3.0.1",
     "postcss": "^7.0.0 || ^8.0.1",

src/menus/StandardMenu.vue

@@ -62,8 +62,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </li>
     </ul>
     <NcActions
-      class="cm-standardmenu-app-menu-more app-menu-more"
+      class="cm-standardmenu-app-menu-more"
       :aria-label="t('core', 'More apps')"
+      :forceMenu="true"
     >
       <NcActionLink
         v-for="app in popoverAppList"
@@ -132,19 +133,27 @@ const setApps = (value) => {
 const appLimit = () => {
   const headerStart = document.querySelector('#header .header-start')
   const headerEnd = document.querySelector('#header .header-end')
+  const unifiedSearch = document.querySelector('#header .unified-search-input')
   const body = document.querySelector('body')
 
-  let size = (headerEnd ? headerEnd.offsetWidth : 0) + 70
+  let totalWidth = body.offsetWidth
+  let otherElementsWidth = headerEnd ? headerEnd.offsetWidth : 0
+
+  if (unifiedSearch && headerEnd.offsetWidth < unifiedSearch.offsetWidth) {
+    otherElementsWidth += unifiedSearch.offsetWidth
+  }
+
+  let maxWidth = body.offsetWidth - otherElementsWidth
 
   if (headerStart) {
     Array.from(headerStart.children).forEach((child) => {
       if (child.id !== 'app-menu-container') {
-        size += child.offsetWidth
+        maxWidth -= child.offsetWidth
       }
     })
   }
 
-  return Math.max(0, Math.floor((body.offsetWidth - size) / 70))
+  return Math.max(0, Math.floor(maxWidth / 60))
 }
 
 const makeStyle = (app) => {
@@ -156,13 +165,9 @@ const makeStyle = (app) => {
 }
 
 const computeLists = () => {
-  mainAppList.value = appList.value.slice(0, appLimit())
-  popoverAppList.value = appList.value.slice(appLimit()).sort((a, b) => a.order - b.order)
-}
-
-const reComputeLists = (delay) => {
-    window.clearTimeout(resizeTimeout)
-    resizeTimeout = window.setTimeout(computeLists, delay || 100)
+  const limit = appLimit()
+  mainAppList.value = appList.value.slice(0, limit)
+  popoverAppList.value = appList.value.slice(limit).sort((a, b) => a.order - b.order)
 }
 
 onMounted(async () => {
@@ -177,7 +182,7 @@ onMounted(async () => {
 
   setApps(await navStore.getCoreApps())
 
-  window.addEventListener('resize', reComputeLists)
+  window.setInterval(computeLists, 100)
 })
 </script>
 

src/scss/menu.scss

@@ -363,6 +363,16 @@
     right: 0 !important;
     margin-left: 0 !important;
   }
+
+  #content {
+    left: 53px;
+    width: calc(100% - (var(--body-container-margin) * 2) - 62px);
+  }
+
+  #content-vue {
+    width: calc(100% - (var(--body-container-margin) * 2) - 60px);
+    margin-left: 11px;
+  }
 }
 
 @media screen and (max-width: 1024px) {
@@ -385,6 +395,16 @@
       padding: 10px 0;
     }
   }
+
+  #header {
+    .unified-search-input {
+      width: 80px !important;
+
+      .unified-search-input__label {
+        display: none;
+      }
+    }
+  }
 }
 
 @media screen and (min-width: 1024px) {
@@ -599,3 +619,9 @@ $header-icon-size: 20px;
     display: none;
   }
 }
+
+#header {
+  .unified-search-input:not(.unified-search-input--mobile) {
+    position: unset !important;
+  }
+}

templates/css/stylesheet.php

@@ -117,15 +117,3 @@ body[data-theme-light], body[data-theme-light-highcontrast] {
     font-size: 16px;
   }
 <?php } ?>
-
-<?php if ($_['always-displayed']) { ?>
-  #content {
-    left: 53px;
-    width: calc(100% - (var(--body-container-margin) * 2) - 62px);
-  }
-
-  #content-vue {
-    width: calc(100% - (var(--body-container-margin) * 2) - 60px);
-    margin-left: 11px;
-  }
-<?php } ?>

webpack.config.js

@@ -7,6 +7,7 @@ const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 
 const appName = 'side_menu'
+const appVersion = '6.x'
 const buildMode = process.env.NODE_ENV
 const isDev = buildMode === 'development'
 
@@ -80,6 +81,7 @@ module.exports = {
 
     new webpack.DefinePlugin({
       appName: JSON.stringify(appName),
+      appVersion: JSON.stringify(appVersion),
     }),
   ],