forked from deblan/side_menu
update default view
This commit is contained in:
parent
9cdb008a72
commit
8aa07efaf9
|
@ -21,7 +21,7 @@
|
|||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
max-width: 290px;
|
||||
background: linear-gradient(90deg, var(--side-menu-background-color, #333) 0%, var(--side-menu-background-color-to, #333) 100%);
|
||||
z-index: 3000;
|
||||
color: var(--side-menu-text-color, #fff);
|
||||
|
@ -103,27 +103,19 @@
|
|||
position: fixed;
|
||||
top: 150px;
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
max-width: 290px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.side-menu-app-icon {
|
||||
width: 20px;
|
||||
vertical-align: top;
|
||||
vertical-align: middle;
|
||||
margin-top: -4px;
|
||||
margin-right: 10px;
|
||||
filter: invert(var(--side-menu-icon-invert-filter, 0%));
|
||||
opacity: var(--side-menu-icon-opacity, 1);
|
||||
}
|
||||
|
||||
.side-menu-app-icon svg {
|
||||
vertical-align: middle;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.side-menu-app-icon .app-icon-notification {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.side-menu-app a {
|
||||
line-height: 30px;
|
||||
color: var(--side-menu-text-color, #fff);
|
||||
|
@ -151,7 +143,7 @@
|
|||
height: 150px;
|
||||
width: 100%;
|
||||
z-index: 2300;
|
||||
max-width: 250px;
|
||||
max-width: 290px;
|
||||
position: fixed;
|
||||
padding-top: 2px;
|
||||
top: 0;
|
||||
|
|
|
@ -59,6 +59,7 @@ import OpenerButton from './OpenerButton'
|
|||
import SettingsButton from './SettingsButton'
|
||||
import SideMenuApp from './SideMenuApp'
|
||||
import Logo from './Logo'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
|
||||
export default {
|
||||
name: 'SideMenu',
|
||||
|
@ -81,89 +82,31 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
retrieveApps() {
|
||||
this.apps = []
|
||||
const links = document.querySelectorAll('#appmenu a')
|
||||
const menu = document.querySelector('#appmenu')
|
||||
let menuIsHidden = true
|
||||
this.apps = loadState('core', 'apps', {})
|
||||
|
||||
if (menu) {
|
||||
menuIsHidden = window.getComputedStyle(menu, null).getPropertyValue('display') === 'none'
|
||||
}
|
||||
|
||||
for (let element of links) {
|
||||
let href = element.getAttribute('href')
|
||||
let parent = element.parentNode
|
||||
|
||||
if (!parent) {
|
||||
continue
|
||||
}
|
||||
|
||||
let dataId = parent.getAttribute('data-id')
|
||||
dataId = dataId !== null ? dataId : ''
|
||||
|
||||
if (!parent.classList.contains('app-top-side-menu') && !parent.classList.contains('app-hidden') && !menuIsHidden) {
|
||||
continue
|
||||
}
|
||||
|
||||
if (href !== '#') {
|
||||
let svg = element.querySelector('svg').outerHTML
|
||||
|
||||
svg = svg
|
||||
.replace(/(height|width)="20"/, '')
|
||||
.replace('id="invertMenuMain', 'id="invertSideMenu')
|
||||
.replace('url(#invertMenuMain', 'url(#invertSideMenu')
|
||||
|
||||
if (this.forceLightIcon) {
|
||||
svg = svg.replace(/filter="url[^"]+"/, '')
|
||||
}
|
||||
|
||||
this.apps.push({
|
||||
id: dataId,
|
||||
href: href,
|
||||
name: trim(element.querySelector('span').innerHTML),
|
||||
icon: svg,
|
||||
active: element.classList.contains('active')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
(function(apps) {
|
||||
window.setTimeout(function() {
|
||||
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
||||
detail: {apps: apps},
|
||||
}))
|
||||
}, 1000)
|
||||
})(this.apps)
|
||||
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
||||
detail: {apps: this.apps},
|
||||
}))
|
||||
},
|
||||
|
||||
retrieveConfig() {
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/js/config'))
|
||||
.then(function(response) {
|
||||
.then((response) => {
|
||||
const config = response.data
|
||||
|
||||
that.targetBlankApps = config['target-blank-apps']
|
||||
that.forceLightIcon = config['force-light-icon']
|
||||
that.avatar = config['avatar']
|
||||
that.logo = config['logo']
|
||||
that.logoLink = config['logo-link']
|
||||
that.settings = config['settings']
|
||||
this.targetBlankApps = config['target-blank-apps']
|
||||
this.forceLightIcon = config['force-light-icon']
|
||||
this.avatar = config['avatar']
|
||||
this.logo = config['logo']
|
||||
this.logoLink = config['logo-link']
|
||||
this.settings = config['settings']
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.retrieveConfig()
|
||||
this.retrieveApps()
|
||||
|
||||
const menu = document.querySelector('#appmenu')
|
||||
|
||||
if (menu) {
|
||||
const config = {attributes: true, childList: true, subtree: true}
|
||||
const observer = new MutationObserver(this.retrieveApps)
|
||||
observer.observe(menu, config)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -17,7 +17,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<template>
|
||||
<li v-bind:class="classes">
|
||||
<a v-bind:href="href" :target="target" v-bind:title="label">
|
||||
<span class="side-menu-app-icon" v-html="icon"></span>
|
||||
<img class="side-menu-app-icon" v-bind:src="icon" v-bind:alt="label" />
|
||||
<span class="side-menu-app-text" v-text="label"></span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
Loading…
Reference in a new issue