forked from deblan/side_menu
Merge pull request 'v4.0.0' (#363) from develop into master
Reviewed-on: deblan/side_menu#363
This commit is contained in:
commit
695934c28b
9 changed files with 268 additions and 144 deletions
|
|
@ -1,5 +1,9 @@
|
|||
## [Unreleased]
|
||||
|
||||
## 4.0.0
|
||||
### Added
|
||||
* add compatibility with NC30
|
||||
|
||||
## 3.13.1
|
||||
### Fixed
|
||||
* fix #354: remove the opener when the menu is always displayed
|
||||
|
|
|
|||
|
|
@ -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>3.13.1</version>
|
||||
<version>4.0.0</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="25" max-version="29"/>
|
||||
<nextcloud min-version="30" max-version="30"/>
|
||||
<php min-version="8.0"/>
|
||||
</dependencies>
|
||||
<settings>
|
||||
|
|
|
|||
|
|
@ -225,6 +225,11 @@
|
|||
.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 {
|
||||
|
|
|
|||
87
package.json
87
package.json
|
|
@ -11,9 +11,14 @@
|
|||
"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",
|
||||
"@vueuse/core": "^11.1.0",
|
||||
"axios": "^1.6.7",
|
||||
"trim": "^1.0.1",
|
||||
"vue": "^2.6.11"
|
||||
"trim": "^1.0.1"
|
||||
},
|
||||
"browserslist": [
|
||||
"extends @nextcloud/browserslist-config"
|
||||
|
|
@ -22,42 +27,46 @@
|
|||
"node": ">=16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/preset-env": "^7.9.0",
|
||||
"@nextcloud/axios": "^2.3.0",
|
||||
"@nextcloud/browserslist-config": "^2.3.0",
|
||||
"@nextcloud/eslint-config": "^8.1.2",
|
||||
"@nextcloud/initial-state": "^2.0.0",
|
||||
"@nextcloud/l10n": "^2.1.0",
|
||||
"@nextcloud/vue": "^7.12.1",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-loader": "^8.1.0",
|
||||
"css-loader": "^6.10.0",
|
||||
"eslint": "^8.0.0",
|
||||
"eslint-config-standard": "^17.0.0",
|
||||
"eslint-import-resolver-webpack": "^0.12.1",
|
||||
"eslint-plugin-import": "^2.20.0",
|
||||
"eslint-plugin-nextcloud": "^0.3.0",
|
||||
"eslint-plugin-node": "^10.0.0",
|
||||
"eslint-plugin-promise": "^6.0.0",
|
||||
"eslint-plugin-standard": "^4.0.1",
|
||||
"eslint-plugin-vue": "^9.0.0",
|
||||
"eslint-webpack-plugin": "^3.0.0",
|
||||
"file-loader": "^6.0.0",
|
||||
"sass": "^1.49.9",
|
||||
"sass-loader": "^13.0.2",
|
||||
"stylelint": "^14.0.0",
|
||||
"stylelint-config-recommended-scss": "^7.0.0",
|
||||
"stylelint-scss": "^4.0.0",
|
||||
"stylelint-webpack-plugin": "^3.3.0",
|
||||
"url-loader": "^4.0.0",
|
||||
"vue-loader": "^15",
|
||||
"vue-style-loader": "^4.1.3",
|
||||
"vue-template-compiler": "^2.7.13",
|
||||
"webpack": "^5.0.0",
|
||||
"webpack-cli": "^4.0.0",
|
||||
"webpack-merge": "^4.2.2",
|
||||
"webpack-node-externals": "^1.7.2"
|
||||
"@babel/node": "^7.25.7",
|
||||
"@babel/plugin-transform-private-methods": "^7.25.7",
|
||||
"@babel/preset-typescript": "^7.24.7",
|
||||
"@cypress/vue2": "^2.1.1",
|
||||
"@cypress/webpack-preprocessor": "^6.0.2",
|
||||
"@nextcloud/babel-config": "^1.2.0",
|
||||
"@nextcloud/eslint-config": "^8.4.1",
|
||||
"@nextcloud/stylelint-config": "^3.0.1",
|
||||
"@nextcloud/typings": "^1.9.1",
|
||||
"@nextcloud/webpack-vue-config": "^6.0.1",
|
||||
"@simplewebauthn/types": "^10.0.0",
|
||||
"@types/dockerode": "^3.3.29",
|
||||
"@types/wait-on": "^5.3.4",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"babel-loader": "^9.2.1",
|
||||
"babel-loader-exclude-node-modules-except": "^1.2.1",
|
||||
"babel-plugin-module-resolver": "^5.0.2",
|
||||
"colord": "^2.9.3",
|
||||
"eslint-plugin-cypress": "^3.5.0",
|
||||
"eslint-plugin-es": "^4.1.0",
|
||||
"exports-loader": "^5.0.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"handlebars-loader": "^1.7.3",
|
||||
"jasmine-core": "~2.5.2",
|
||||
"jasmine-sinon": "^0.4.0",
|
||||
"jsdoc": "^4.0.2",
|
||||
"raw-loader": "^4.0.2",
|
||||
"sass": "^1.79.3",
|
||||
"stylelint": "^16.9.0",
|
||||
"stylelint-use-logical": "^2.1.2",
|
||||
"ts-loader": "^9.5.0",
|
||||
"ts-node": "^10.9.1",
|
||||
"tslib": "^2.7.0",
|
||||
"typescript": "^5.6.2",
|
||||
"vue-loader": "^15.9.8",
|
||||
"vue-template-compiler": "^2.7.16",
|
||||
"wait-on": "^8.0.1",
|
||||
"webpack": "^5.94.0",
|
||||
"webpack-cli": "^5.0.2",
|
||||
"webpack-merge": "^6.0.1",
|
||||
"workbox-webpack-plugin": "^7.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
157
src/AppMenu.vue
157
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="apps !== null"
|
||||
v-if="appList.length"
|
||||
>
|
||||
<li v-for="app in mainAppList()"
|
||||
<li v-for="app in mainAppList(state)"
|
||||
: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')" v-if="apps !== null">
|
||||
<NcActionLink v-for="app in popoverAppList()"
|
||||
<NcActions class="app-menu-more" :aria-label="t('core', 'More apps')">
|
||||
<NcActionLink v-for="app in popoverAppList(state)"
|
||||
:key="app.id"
|
||||
:aria-label="appLabel(app)"
|
||||
:aria-current="app.active ? 'page' : false"
|
||||
|
|
@ -70,93 +70,132 @@
|
|||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import type { INavigationEntry } from '../types/navigation'
|
||||
|
||||
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 {
|
||||
export default defineComponent({
|
||||
name: 'AppMenu',
|
||||
|
||||
components: {
|
||||
NcActions, NcActionLink,
|
||||
},
|
||||
|
||||
setup() {
|
||||
return {
|
||||
t,
|
||||
n,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
apps: null,
|
||||
appLimit: 0,
|
||||
appList: [],
|
||||
observer: null,
|
||||
targetBlankApps: [],
|
||||
hiddenLabels: true
|
||||
hiddenLabels: true,
|
||||
state: 1,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const ncApps = loadState('core', 'apps', {})
|
||||
this.apps = {}
|
||||
let orders = {}
|
||||
axios.get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
|
||||
.then(({ data }) => {
|
||||
if (data.ocs.meta.statuscode !== 200) {
|
||||
return
|
||||
}
|
||||
|
||||
window.menuAppsOrder.forEach((app, order) => {
|
||||
orders[app] = order + 1
|
||||
this.setApps(data.ocs.data)
|
||||
})
|
||||
|
||||
let timeout = null
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
timeout = window.setTimeout(() => {
|
||||
this.update()
|
||||
}, 300)
|
||||
})
|
||||
|
||||
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
|
||||
this.observer = new ResizeObserver(this.resize)
|
||||
this.observer.observe(this.$el)
|
||||
this.resize()
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.observer.disconnect()
|
||||
unsubscribe('nextcloud:app-menu.refresh', this.setApps)
|
||||
},
|
||||
|
||||
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: string, counter: number) {
|
||||
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>
|
||||
|
|
@ -304,7 +343,7 @@ $header-icon-size: 20px;
|
|||
filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
|
||||
|
||||
&:not([aria-expanded="true"]) {
|
||||
color: var(--color-primary-element-text);
|
||||
color: var(--color-main-text);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -21,12 +21,10 @@ 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 = () => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<?php
|
||||
|
||||
header('Content-type: text/javascript');
|
||||
|
||||
$display = 'default';
|
||||
|
||||
if ($_['always-displayed']) {
|
||||
|
|
@ -12,6 +14,24 @@ 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', {
|
||||
|
|
|
|||
33
tsconfig.json
Normal file
33
tsconfig.json
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"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
|
||||
}
|
||||
}
|
||||
}
|
||||
110
webpack.js
110
webpack.js
|
|
@ -1,54 +1,70 @@
|
|||
const path = require('path')
|
||||
const { VueLoaderPlugin } = require('vue-loader')
|
||||
const StyleLintPlugin = require('stylelint-webpack-plugin')
|
||||
const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
|
||||
const {
|
||||
VueLoaderPlugin
|
||||
} = require('vue-loader')
|
||||
// const StyleLintPlugin = require('stylelint-webpack-plugin')
|
||||
|
||||
module.exports = {
|
||||
devtool: "source-map",
|
||||
entry: {
|
||||
'admin': path.join(__dirname, 'src', 'admin.js'),
|
||||
'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, './js'),
|
||||
publicPath: '/js',
|
||||
filename: '[name].js?v=[hash]',
|
||||
chunkFilename: 'chunks/[name]-[hash].js',
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['vue-style-loader', 'css-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
name: '[name].[ext]?[hash]',
|
||||
limit: 8192,
|
||||
},
|
||||
devtool: "source-map",
|
||||
entry: {
|
||||
'admin': path.join(__dirname, 'src', 'admin.js'),
|
||||
'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, './js'),
|
||||
publicPath: '/js',
|
||||
filename: '[name].js?v=[hash]',
|
||||
chunkFilename: 'chunks/[name]-[hash].js',
|
||||
},
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.css$/,
|
||||
use: ['vue-style-loader', 'css-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
},
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: [
|
||||
'babel-loader',
|
||||
{
|
||||
// Fix TypeScript syntax errors in Vue
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin(),
|
||||
new StyleLintPlugin(),
|
||||
exclude: BabelLoaderExcludeNodeModulesExcept([]),
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
name: '[name].[ext]?[hash]',
|
||||
limit: 8192,
|
||||
},
|
||||
},
|
||||
],
|
||||
resolve: {
|
||||
extensions: ['*', '.js', '.vue'],
|
||||
symlinks: false,
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin(),
|
||||
// new StyleLintPlugin(),
|
||||
],
|
||||
resolve: {
|
||||
extensions: ['.*', '.js', '.vue'],
|
||||
symlinks: false,
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue