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

Browse source
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. 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/5e7fab2b.jpg)
![](https://upload.deblan.org/u/2020-03/5e7fab16.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> <description>Move the top menu to the left side.</description>
<licence>agpl</licence> <licence>agpl</licence>
<author mail="dev+sidemenu@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author> <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> <namespace>SideMenu</namespace>
<category>customization</category> <category>customization</category>
<website>https://gitnet.fr/deblan/side_menu</website> <website>https://gitnet.fr/deblan/side_menu</website>

96
src/SideMenu.vue
View file

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