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