deblan/side_menu
deblan
/
side_menu
3
6
Fork 5
Code Issues 6 Pull Requests 11 Projects Releases 119 Wiki Activity

add compatibility with AppOrder, refactoring

This commit is contained in:
Simon Vieille 2020-03-28 23:45:27 +01:00
parent e1d40bdfab
commit 323f2c753b
Signed by: deblan
GPG Key ID: 03383D15A1D31745
3 changed files with 57 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -4,6 +4,8 @@
This application moves the top menu of Nextcloud to the left side.
Comptatible with AppOrder.
![](https://upload.deblan.org/u/2020-03/5e7fab2b.jpg)
![](https://upload.deblan.org/u/2020-03/5e7fab16.jpg)

2
appinfo/info.xml
View File

@ -6,7 +6,7 @@
<description>Move the top menu to the left side.</description>
<licence>agpl</licence>
<author mail="dev+sidemenu@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
<version>1.1.0</version>
<version>1.1.1</version>
<namespace>SideMenu</namespace>
<category>customization</category>
<website>https://gitnet.fr/deblan/side_menu</website>

96
src/SideMenu.vue
View File

@ -1,23 +1,23 @@
<template>
<div id="side-menu">
<div class="side-menu-header">
<button class="side-menu-opener"></button>
<div id="side-menu">
<div class="side-menu-header">
<button class="side-menu-opener"></button>
<div v-if="logo" class="side-menu-logo">
<img v-bind:src="logo">
</div>
</div>
<div v-if="logo" class="side-menu-logo">
<img v-bind:src="logo">
</div>
</div>
<ul class="side-menu-apps-list">
<li v-for="app in apps" v-bind:class="{'side-menu-app': true, 'is-active': app.active}">
<a v-bind:href="app.href">
<span class="side-menu-app-icon" v-html="app.icon"></span>
<ul class="side-menu-apps-list">
<li v-for="app in apps" v-bind:class="{'side-menu-app': true, 'is-active': app.active}">
<a v-bind:href="app.href">
<span class="side-menu-app-icon" v-html="app.icon"></span>
{{ app.name }}
</a>
</li>
</ul>
</div>
{{ app.name }}
</a>
</li>
</ul>
</div>
</template>
<script>
@ -25,34 +25,46 @@ import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
export default {
name: 'SideMenu',
data() {
return {
apps: [],
logo: null
}
},
created() {
let that = this
var links = document.querySelectorAll('#appmenu a')
name: 'SideMenu',
data() {
return {
apps: [],
logo: null
}
},
methods: {
retrieveApps() {
this.apps = [];
const links = document.querySelectorAll('#appmenu a');
this.logo = window.getComputedStyle(document.querySelector('#nextcloud .logo'), null)
.getPropertyValue('background-image')
.replace('url("', '')
.replace('")', '')
for (let element of links) {
let href = element.getAttribute('href')
for (let element of links) {
let href = element.getAttribute('href')
if (href !== '#') {
this.apps.push({
href: href,
name: element.querySelector('span').innerHTML,
icon: element.querySelector('svg').outerHTML,
active: element.classList.contains('active')
});
}
}
},
retrieveLogo() {
this.logo = window.getComputedStyle(document.querySelector('#nextcloud .logo'), null)
.getPropertyValue('background-image')
.replace('url("', '')
.replace('")', '')
},
},
created() {
this.retrieveApps();
this.retrieveLogo();
if (href !== '#') {
that.apps.push({
href: href,
name: element.querySelector('span').innerHTML,
icon: element.querySelector('svg').outerHTML,
active: element.classList.contains('active')
})
}
}
}
const menu = document.querySelector('#appmenu')
const config = {attributes: true, childList: true, subtree: true};
const observer = new MutationObserver(this.retrieveApps);
observer.observe(menu, config);
}
}
</script>