Merge pull request 'release v3.13.1' (#356) from develop into master

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

.woodpecker/.build.yml

@@ -7,10 +7,16 @@ when:
   branch: [master, develop, feature/*, fix/*, bugfix/*, translations]
 
 steps:
-  "Build JS":
+  "Install dependencies":
-    image: node:20
+    image: node:16
+    pull: true
     commands:
-      - make build
+      - npm i
+
+  "Build JS":
+    image: node:16
+    commands:
+      - npm run build
 
   "Build translations":
     image: deblan/php:8.3

CHANGELOG.md

@@ -1,14 +1,5 @@
 ## [Unreleased]
 
-## 4.0.1
-### Fixed
-* fix top menu labels (fix #368)
-* fix #369: The menu is displayed even if there are no apps
-
-## 4.0.0
-### Added
-* add compatibility with NC30
-
 ## 3.13.1
 ### Fixed
 * fix #354: remove the opener when the menu is always displayed

appinfo/info.xml

@@ -32,7 +32,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>4.0.1</version>
+    <version>3.13.1</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
     <namespace>SideMenu</namespace>
@@ -54,7 +54,7 @@ In case of downtime, you can download **Custom Menu** from [here](https://kim.de
     <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_big_menu.png</screenshot>
     <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc25_default_menu.png</screenshot>
     <dependencies>
-        <nextcloud min-version="30" max-version="30"/>
+        <nextcloud min-version="25" max-version="29"/>
         <php min-version="8.0"/>
     </dependencies>
     <settings>

css/sideMenu.css

@@ -225,11 +225,6 @@
 .side-menu-category-title {
   padding-left: 10px;
   color: var(--side-menu-text-color, #fff);
-  font-weight: bold;
-  font-size: 20px;
-  margin-bottom: 12px;
-  line-height: 30px;
-  margin-top: 0;
 }
 
 .side-menu-loader {

package.json

@@ -11,15 +11,9 @@
 		"stylelint:fix": "./node_modules/.bin/stylelint src --fix"
 	},
 	"dependencies": {
-		"@nextcloud/axios": "^2.5.1",
-		"@nextcloud/browserslist-config": "^3.0.1",
-		"@nextcloud/event-bus": "^3.3.1",
-		"@nextcloud/initial-state": "^2.2.0",
-		"@nextcloud/l10n": "^3.1.0",
-		"@nextcloud/vue": "^8.19.0",
-		"@vueuse/core": "^11.1.0",
 		"axios": "^1.6.7",
-		"trim": "^1.0.1"
+		"trim": "^1.0.1",
+		"vue": "^2.6.11"
 	},
 	"browserslist": [
 		"extends @nextcloud/browserslist-config"
@@ -28,46 +22,42 @@
 		"node": ">=16.0.0"
 	},
 	"devDependencies": {
-		"@babel/node": "^7.25.7",
+		"@babel/core": "^7.9.0",
-		"@babel/plugin-transform-private-methods": "^7.25.7",
+		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/preset-typescript": "^7.24.7",
+		"@babel/preset-env": "^7.9.0",
-		"@cypress/vue2": "^2.1.1",
+		"@nextcloud/axios": "^2.3.0",
-		"@cypress/webpack-preprocessor": "^6.0.2",
+		"@nextcloud/browserslist-config": "^2.3.0",
-		"@nextcloud/babel-config": "^1.2.0",
+		"@nextcloud/eslint-config": "^8.1.2",
-		"@nextcloud/eslint-config": "^8.4.1",
+		"@nextcloud/initial-state": "^2.0.0",
-		"@nextcloud/stylelint-config": "^3.0.1",
+		"@nextcloud/l10n": "^2.1.0",
-		"@nextcloud/typings": "^1.9.1",
+		"@nextcloud/vue": "^7.12.1",
-		"@nextcloud/webpack-vue-config": "^6.0.1",
+		"babel-eslint": "^10.1.0",
-		"@simplewebauthn/types": "^10.0.0",
+		"babel-loader": "^8.1.0",
-		"@types/dockerode": "^3.3.29",
+		"css-loader": "^6.10.0",
-		"@types/wait-on": "^5.3.4",
+		"eslint": "^8.0.0",
-		"@vue/tsconfig": "^0.5.1",
+		"eslint-config-standard": "^17.0.0",
-		"babel-loader": "^9.2.1",
+		"eslint-import-resolver-webpack": "^0.12.1",
-		"babel-loader-exclude-node-modules-except": "^1.2.1",
+		"eslint-plugin-import": "^2.20.0",
-		"babel-plugin-module-resolver": "^5.0.2",
+		"eslint-plugin-nextcloud": "^0.3.0",
-		"colord": "^2.9.3",
+		"eslint-plugin-node": "^10.0.0",
-		"eslint-plugin-cypress": "^3.5.0",
+		"eslint-plugin-promise": "^6.0.0",
-		"eslint-plugin-es": "^4.1.0",
+		"eslint-plugin-standard": "^4.0.1",
-		"exports-loader": "^5.0.0",
+		"eslint-plugin-vue": "^9.0.0",
-		"file-loader": "^6.2.0",
+		"eslint-webpack-plugin": "^3.0.0",
-		"handlebars-loader": "^1.7.3",
+		"file-loader": "^6.0.0",
-		"jasmine-core": "~2.5.2",
+		"sass": "^1.49.9",
-		"jasmine-sinon": "^0.4.0",
+		"sass-loader": "^13.0.2",
-		"jsdoc": "^4.0.2",
+		"stylelint": "^14.0.0",
-		"raw-loader": "^4.0.2",
+		"stylelint-config-recommended-scss": "^7.0.0",
-		"sass": "^1.79.3",
+		"stylelint-scss": "^4.0.0",
-		"stylelint": "^16.9.0",
+		"stylelint-webpack-plugin": "^3.3.0",
-		"stylelint-use-logical": "^2.1.2",
+		"url-loader": "^4.0.0",
-		"ts-loader": "^9.5.0",
+		"vue-loader": "^15",
-		"ts-node": "^10.9.1",
+		"vue-style-loader": "^4.1.3",
-		"tslib": "^2.7.0",
+		"vue-template-compiler": "^2.7.13",
-		"typescript": "^5.6.2",
+		"webpack": "^5.0.0",
-		"vue-loader": "^15.9.8",
+		"webpack-cli": "^4.0.0",
-		"vue-template-compiler": "^2.7.16",
+		"webpack-merge": "^4.2.2",
-		"wait-on": "^8.0.1",
+		"webpack-node-externals": "^1.7.2"
-		"webpack": "^5.94.0",
-		"webpack-cli": "^5.0.2",
-		"webpack-merge": "^6.0.1",
-		"workbox-webpack-plugin": "^7.1.0"
 	}
 }

src/AdminCategoriesCustom.vue

@@ -84,9 +84,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 </style>
 
 <script>
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 
 export default {
   name: 'AdminCategoriesCustom',

src/AppMenu.vue

@@ -28,9 +28,9 @@
     <ul
       class="app-menu-main"
       :class="{ 'app-menu-main__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
-      v-if="appList.length"
+      v-if="apps !== null"
       >
-      <li v-for="app in mainAppList(state)"
+      <li v-for="app in mainAppList()"
         :key="app.id"
         :data-app-id="app.id"
         class="app-menu-entry"
@@ -50,8 +50,8 @@
         </a>
       </li>
     </ul>
-    <NcActions class="app-menu-more" :aria-label="t('core', 'More apps')">
+    <NcActions class="app-menu-more" :aria-label="t('core', 'More apps')" v-if="apps !== null">
-      <NcActionLink v-for="app in popoverAppList(state)"
+      <NcActionLink v-for="app in popoverAppList()"
         :key="app.id"
         :aria-label="appLabel(app)"
         :aria-current="app.active ? 'page' : false"
@@ -71,128 +71,92 @@
 </template>
 
 <script>
-import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
-import { n, t } from '@nextcloud/l10n'
-import { useElementSize } from '@vueuse/core'
-import { defineComponent, ref } from 'vue'
-import axios from '@nextcloud/axios'
-import { generateOcsUrl } from '@nextcloud/router'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 
-export default defineComponent({
+export default {
   name: 'AppMenu',
-
   components: {
-    NcActions,
+    NcActions, NcActionLink,
-    NcActionLink,
   },
-
-  setup() {
-    return {
-        t,
-        n,
-    }
-  },
-
   data() {
     return {
       apps: null,
-      appList: [],
+      appLimit: 0,
       observer: null,
       targetBlankApps: [],
-      hiddenLabels: true,
+      hiddenLabels: true
-      state: 1,
     }
   },
-
   mounted() {
-    axios.get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
+    const ncApps = loadState('core', 'apps', {})
-      .then((response) => response.data)
+    this.apps = {}
-      .then((data) => {
+    let orders = {}
-        if (data.ocs.meta.statuscode !== 200) {
-          return
-        }
 
-        this.setApps(data.ocs.data)
+    window.menuAppsOrder.forEach((app, order) => {
-      })
+      orders[app] = order + 1
+    })
+
+    Array.from(window.topMenuApps).forEach((id) => {
+      if (ncApps.hasOwnProperty(id)) {
+        this.apps[id] = ncApps[id]
+        this.apps[id].order = orders[id] || null
+      }
+    })
 
     this.targetBlankApps = window.targetBlankApps
     this.hiddenLabels = window.topMenuAppsMouseOverHiddenLabel
-    let timeout = null
+    this.observer = new ResizeObserver(this.resize)
-
+    this.observer.observe(this.$el)
-    window.addEventListener('resize', () => {
+    this.resize()
-      timeout = window.setTimeout(() => {
+  },
-        this.update()
+  beforeDestroy() {
-      }, 300)
+    this.observer.disconnect()
-    })
   },
-
   methods: {
-    update() {
-      ++this.state
-    },
-
-    mainAppList() {
-      return this.appList.slice(0, this.appLimit())
-    },
-
-    popoverAppList() {
-      return this.appList.slice(this.appLimit())
-    },
-
-    appLimit() {
-      const maxApps = Math.floor(this.$root.$el.offsetWidth / 60)
-
-      if (maxApps < this.appList.length) {
-        // Ensure there is space for the overflow menu
-        return Math.max(maxApps - 1, 0)
-      }
-
-      return maxApps
-    },
-
-    setNavigationCounter(id, counter) {
-      const app = this.appList.find(({ app }) => app === id)
-      if (app) {
-        this.$set(app, 'unread', counter)
-      } else {
-        logger.warn(`Could not find app "${id}" for setting navigation count`)
-      }
-    },
-
-    setApps(apps) {
-      this.appList = []
-      let orders = {}
-
-      window.menuAppsOrder.forEach((app, order) => {
-        orders[app] = order + 1
-      })
-
-      apps.forEach((app) => {
-        Array.from(window.topMenuApps).forEach((id) => {
-          if (app.id === id) {
-            app.order = orders[id] || null
-            this.appList.push(app)
-          }
-        })
-      })
-    },
-
     appLabel(app) {
       return app.name
         + (app.active ? ' (' + t('core', 'Currently open') + ')' : '')
         + (app.unread > 0 ? ' (' + n('core', '{count} notification', '{count} notifications', app.unread, { count: app.unread }) + ')' : '')
     },
+    appList() {
+      let items = Object.values(this.apps)
 
+      items.sort((a, b) => {
+        return a.order < b.order ? -1 : 1;
+      })
+
+      return items
+    },
+    mainAppList() {
+      return this.appList().slice(0, this.appLimit)
+    },
+    popoverAppList() {
+      return this.appList().slice(this.appLimit)
+    },
+    setNavigationCounter(id, counter) {
+      this.$set(this.apps[id], 'unread', counter)
+    },
+    resize() {
+      const availableWidth = this.$el.offsetWidth
+      let appCount = Math.floor(availableWidth / 50) - 1
+      const popoverAppCount = this.appList.length - appCount
+      if (popoverAppCount === 1) {
+        appCount--
+      }
+      if (appCount < 1) {
+        appCount = 0
+      }
+      this.appLimit = appCount
+    },
     makeStyle(app) {
       if (app.order !== null) {
         return `order: ${app.order}`
       }
     }
   },
-})
+}
 </script>
 
 <style lang="scss" scoped>
@@ -340,7 +304,7 @@ $header-icon-size: 20px;
   filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
 
   &:not([aria-expanded="true"]) {
-    color: var(--color-main-text);
+    color: var(--color-primary-element-text);
 
     &:hover {
       opacity: 1;

src/SideMenu.js

@@ -21,10 +21,12 @@ import SideMenu from './SideMenu.vue'
 import SideMenuBig from './SideMenuBig.vue'
 import SideMenuWithCategories from './SideMenuWithCategories.vue'
 import PageLoader from './PageLoader'
+import SMcreateElement from './lib/createElement'
 
 Vue.prototype.OC = OC
 Vue.prototype.t = OC.L10N.translate
 
+window.SMcreateElement = SMcreateElement
 window.PageLoader = PageLoader
 
 const mountSideMenuComponent = () => {

src/SideMenu.vue

@@ -39,7 +39,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <ul class="side-menu-apps-list" :class="{'side-menu-apps-list--with-settings': !!settings}">
       <SideMenuApp
         v-for="(app, key) in apps"
-        v-if="searchMatch(app.name)"
+        v-if="!hiddenApps.includes(app.id) && searchMatch(app.name)"
         v-bind:classes="{'side-menu-app': true, 'active': app.active}"
         v-bind:key="key"
         v-bind:icon="app.icon"
@@ -94,16 +94,17 @@ export default {
         orders[app] = order + 1
       })
 
-      for (let app of ncApps) {
+      for (let id in ncApps) {
-        if (window.topMenuApps.includes(app.id) && !window.topSideMenuApps.includes(app.id)) {
+        if (window.topMenuApps.includes(id) && !window.topSideMenuApps.includes(id)) {
           continue
         }
 
-        if (this.hiddenApps.includes(app.id)) {
+        if (this.hiddenApps.includes(id)) {
           continue
         }
 
-        app.order = orders[app.id] || null
+        let app = ncApps[id]
+        app.order = orders[id] || null
 
         finalApps.push(app)
       }

templates/js/script.php

@@ -1,7 +1,5 @@
 <?php
 
-header('Content-type: text/javascript');
-
 $display = 'default';
 
 if ($_['always-displayed']) {
@@ -14,24 +12,6 @@ if ($_['always-displayed']) {
 
 ?>
 
-const SMcreateElement = (tagName, attributes) => {
-  const element = document.createElement(tagName)
-
-  if (typeof attributes === 'object') {
-    for (let i in attributes) {
-      if (i === 'text') {
-        element.textContent = attributes[i]
-      } else if (i === 'html') {
-        element.innerHTML = attributes[i]
-      } else {
-        element.setAttribute(i, attributes[i])
-      }
-    }
-  }
-
-  return element
-}
-
 (function() {
   const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
   const sideMenuOpener = SMcreateElement('button', {

tsconfig.json

@@ -1,33 +0,0 @@
-{
-	"extends": "@vue/tsconfig/tsconfig.json",
-	"include": ["./src/**/*.js"],
-	"compilerOptions": {
-		"types": ["node", "vue", "vue-router"],
-		"outDir": "./js/",
-		"target": "ESNext",
-		"module": "ESNext",
-		// Set module resolution to bundler and `noEmit` to be able to set `allowImportingTsExtensions`, so we can import Typescript with .ts extension
-		"moduleResolution": "Bundler",
-		"allowImportingTsExtensions": true,
-		"noEmit": true,
-		// Allow ts to import js files
-		"allowJs": true,
-		"allowSyntheticDefaultImports": true,
-		"declaration": false,
-		"noImplicitAny": false,
-		"resolveJsonModule": true,
-		"strict": true,
-	},
-	"vueCompilerOptions": {
-		"target": 2.7
-	},
-	"ts-node": {
-		// these options are overrides used only by ts-node
-		// same as our --compilerOptions flag and our TS_NODE_COMPILER_OPTIONS environment variable
-		"compilerOptions": {
-			"moduleResolution": "node",
-			"module": "commonjs",
-			"verbatimModuleSyntax": false
-		}
-	}
-}

webpack.js

@@ -1,70 +1,54 @@
 const path = require('path')
-const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
+const { VueLoaderPlugin } = require('vue-loader')
-const {
+const StyleLintPlugin = require('stylelint-webpack-plugin')
-  VueLoaderPlugin
-} = require('vue-loader')
-// const StyleLintPlugin = require('stylelint-webpack-plugin')
 
 module.exports = {
-  devtool: "source-map",
+    devtool: "source-map",
-  entry: {
+    entry: {
-    'admin': path.join(__dirname, 'src', 'admin.js'),
+        'admin': path.join(__dirname, 'src', 'admin.js'),
-    'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
+        'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
-  },
+    },
-  output: {
+    output: {
-    path: path.resolve(__dirname, './js'),
+        path: path.resolve(__dirname, './js'),
-    publicPath: '/js',
+        publicPath: '/js',
-    filename: '[name].js?v=[chunkhash]',
+        filename: '[name].js?v=[hash]',
-    chunkFilename: 'chunks/[name]-[chunkhash].js',
+        chunkFilename: 'chunks/[name]-[hash].js',
-  },
+    },
-  module: {
+    module: {
-    rules: [{
+        rules: [
-        test: /\.css$/,
+            {
-        use: ['vue-style-loader', 'css-loader'],
+                test: /\.css$/,
-      },
+                use: ['vue-style-loader', 'css-loader'],
-      {
+            },
-        test: /\.scss$/,
+            {
-        use: ['vue-style-loader', 'css-loader', 'sass-loader'],
+                test: /\.scss$/,
-      },
+                use: ['vue-style-loader', 'css-loader', 'sass-loader'],
-      {
+            },
-        test: /\.vue$/,
+            {
-        loader: 'vue-loader',
+                test: /\.vue$/,
-      },
+                loader: 'vue-loader',
-      {
+            },
-        test: /\.tsx?$/,
+            {
-        use: [
+                test: /\.js$/,
-          'babel-loader',
+                loader: 'babel-loader',
-          {
+                exclude: /node_modules/,
-            // Fix TypeScript syntax errors in Vue
+            },
-            loader: 'ts-loader',
+            {
-            options: {
+                test: /\.(png|jpg|gif|svg)$/,
-              transpileOnly: true,
+                loader: 'url-loader',
+                options: {
+                    name: '[name].[ext]?[hash]',
+                    limit: 8192,
+                },
             },
-          },
         ],
-        exclude: BabelLoaderExcludeNodeModulesExcept([]),
+    },
-      },
+    plugins: [
-      {
+        new VueLoaderPlugin(),
-        test: /\.js$/,
+        new StyleLintPlugin(),
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.(png|jpg|gif|svg)$/,
-        loader: 'url-loader',
-        options: {
-          name: '[name].[ext]?[hash]',
-          limit: 8192,
-        },
-      },
     ],
-  },
+    resolve: {
-  plugins: [
+        extensions: ['*', '.js', '.vue'],
-    new VueLoaderPlugin(),
+        symlinks: false,
-    // new StyleLintPlugin(),
+    },
-  ],
-  resolve: {
-    extensions: ['.*', '.js', '.vue'],
-    symlinks: false,
-  },
 }