update indentation (4 spaces -> 2 spaces)
This commit is contained in:
parent
1c1fe946cf
commit
585aec5ee2
GPG Key ID:
579388D585F70417
|
|
@ -15,168 +15,168 @@ You should have received a copy of the GNU Affero General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<ul class="side-menu-setting-list">
|
||||
<li v-for="item in values" class="side-menu-setting-list-item" v-on:click="showEditForm(item)">
|
||||
<span v-text="item.en"></span>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<ul class="side-menu-setting-list">
|
||||
<li v-for="item in values" class="side-menu-setting-list-item" v-on:click="showEditForm(item)">
|
||||
<span v-text="item.en"></span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Actions>
|
||||
<ActionButton @click="showAddForm" icon="icon-add"></ActionButton>
|
||||
</Actions>
|
||||
<NcActions>
|
||||
<NcActionButton @click="showAddForm" icon="icon-add"></NcActionButton>
|
||||
</NcActions>
|
||||
|
||||
<Modal v-if="addForm" @close="hideAddForm">
|
||||
<div class="modal__content">
|
||||
<div v-for="lang in langs">
|
||||
<span class="lang" v-text="lang"></span>
|
||||
<input type="text" v-model="newValue[lang]" required>
|
||||
</div>
|
||||
<NcModal v-if="addForm" @close="hideAddForm">
|
||||
<div class="modal__content">
|
||||
<div v-for="lang in langs">
|
||||
<span class="lang" v-text="lang"></span>
|
||||
<input type="text" v-model="newValue[lang]" required>
|
||||
</div>
|
||||
|
||||
<Actions>
|
||||
<ActionButton @click="saveAdd" icon="icon-checkmark"></ActionButton>
|
||||
</Actions>
|
||||
</div>
|
||||
</Modal>
|
||||
<NcActions>
|
||||
<NcActionButton @click="saveAdd" icon="icon-checkmark"></NcActionButton>
|
||||
</NcActions>
|
||||
</div>
|
||||
</NcModal>
|
||||
|
||||
<Modal v-if="editForm" @close="hideEditForm">
|
||||
<div class="modal__content">
|
||||
<div v-for="lang in langs">
|
||||
<span class="lang" v-text="lang"></span>
|
||||
<input type="text" v-model="editValue[lang]" required>
|
||||
</div>
|
||||
<NcModal v-if="editForm" @close="hideEditForm">
|
||||
<div class="modal__content">
|
||||
<div v-for="lang in langs">
|
||||
<span class="lang" v-text="lang"></span>
|
||||
<input type="text" v-model="editValue[lang]" required>
|
||||
</div>
|
||||
|
||||
<div class="pull-right">
|
||||
<Actions>
|
||||
<ActionButton @click="removeEdit" icon="icon-delete"></ActionButton>
|
||||
</Actions>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<NcActions>
|
||||
<NcActionButton @click="removeEdit" icon="icon-delete"></NcActionButton>
|
||||
</NcActions>
|
||||
</div>
|
||||
|
||||
<Actions>
|
||||
<ActionButton @click="saveEdit" icon="icon-checkmark"></ActionButton>
|
||||
</Actions>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
<NcActions>
|
||||
<NcActionButton @click="saveEdit" icon="icon-checkmark"></NcActionButton>
|
||||
</NcActions>
|
||||
</div>
|
||||
</NcModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal__content {
|
||||
width: 200px;
|
||||
padding: 10px;
|
||||
}
|
||||
.modal__content {
|
||||
width: 200px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.modal__content .lang {
|
||||
width: 60px;
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.modal__content .lang {
|
||||
width: 60px;
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal__content input[type=text] {
|
||||
width: calc(100% - 85px);
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
.modal__content input[type=text] {
|
||||
width: calc(100% - 85px);
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Modal from '@nextcloud/vue/dist/Components/Modal'
|
||||
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
||||
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
||||
import NcModal from '@nextcloud/vue/dist/Components/NcModal'
|
||||
import NcActions from '@nextcloud/vue/dist/Components/NcActions'
|
||||
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
|
||||
|
||||
export default {
|
||||
name: 'AdminCategoriesCustom',
|
||||
components: {
|
||||
Modal,
|
||||
Actions,
|
||||
ActionButton,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: null,
|
||||
values: [],
|
||||
langs: [],
|
||||
addForm: false,
|
||||
editForm: false,
|
||||
newValue: {},
|
||||
editValue: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.values = JSON.parse(this.input.value)
|
||||
this.langs = JSON.parse(this.input.getAttribute('data-langs'))
|
||||
},
|
||||
update() {
|
||||
this.input.value = JSON.stringify(this.values)
|
||||
},
|
||||
showAddForm() {
|
||||
this.newValue = {id: 'cat' + Math.random().toString().replace('0.', '')}
|
||||
|
||||
this.addForm = true
|
||||
},
|
||||
showEditForm(value) {
|
||||
this.editValue = {id: value.id}
|
||||
|
||||
for (let i of this.langs) {
|
||||
this.editValue[i] = typeof value[i] !== 'undefined' ? value[i] : ''
|
||||
}
|
||||
|
||||
this.editForm = true
|
||||
},
|
||||
saveAdd() {
|
||||
for (let i of this.langs) {
|
||||
if (!this.newValue[i] || /^\s*$/.test(this.newValue[i])) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.values.push(this.newValue)
|
||||
this.update()
|
||||
this.hideAddForm()
|
||||
this.newValue = {}
|
||||
},
|
||||
saveEdit() {
|
||||
for (let i of this.langs) {
|
||||
if (!this.editValue[i] || /^\s*$/.test(this.editValue[i])) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
for (let i in this.values) {
|
||||
if (this.values[i].id === this.editValue.id) {
|
||||
this.values[i] = this.editValue
|
||||
}
|
||||
}
|
||||
|
||||
this.update()
|
||||
this.hideEditForm()
|
||||
},
|
||||
removeEdit() {
|
||||
for (let i in this.values) {
|
||||
if (this.values[i].id === this.editValue.id) {
|
||||
this.values.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
this.update()
|
||||
this.hideEditForm()
|
||||
},
|
||||
hideAddForm() {
|
||||
this.addForm = false
|
||||
},
|
||||
hideEditForm() {
|
||||
this.editForm = false
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.input = document.querySelector('input[name="categories-custom"]')
|
||||
this.init()
|
||||
name: 'AdminCategoriesCustom',
|
||||
components: {
|
||||
NcModal,
|
||||
NcActions,
|
||||
NcActionButton,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: null,
|
||||
values: [],
|
||||
langs: [],
|
||||
addForm: false,
|
||||
editForm: false,
|
||||
newValue: {},
|
||||
editValue: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.values = JSON.parse(this.input.value)
|
||||
this.langs = JSON.parse(this.input.getAttribute('data-langs'))
|
||||
},
|
||||
update() {
|
||||
this.input.value = JSON.stringify(this.values)
|
||||
},
|
||||
showAddForm() {
|
||||
this.newValue = {id: 'cat' + Math.random().toString().replace('0.', '')}
|
||||
|
||||
this.addForm = true
|
||||
},
|
||||
showEditForm(value) {
|
||||
this.editValue = {id: value.id}
|
||||
|
||||
for (let i of this.langs) {
|
||||
this.editValue[i] = typeof value[i] !== 'undefined' ? value[i] : ''
|
||||
}
|
||||
|
||||
this.editForm = true
|
||||
},
|
||||
saveAdd() {
|
||||
for (let i of this.langs) {
|
||||
if (!this.newValue[i] || /^\s*$/.test(this.newValue[i])) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.values.push(this.newValue)
|
||||
this.update()
|
||||
this.hideAddForm()
|
||||
this.newValue = {}
|
||||
},
|
||||
saveEdit() {
|
||||
for (let i of this.langs) {
|
||||
if (!this.editValue[i] || /^\s*$/.test(this.editValue[i])) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
for (let i in this.values) {
|
||||
if (this.values[i].id === this.editValue.id) {
|
||||
this.values[i] = this.editValue
|
||||
}
|
||||
}
|
||||
|
||||
this.update()
|
||||
this.hideEditForm()
|
||||
},
|
||||
removeEdit() {
|
||||
for (let i in this.values) {
|
||||
if (this.values[i].id === this.editValue.id) {
|
||||
this.values.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
this.update()
|
||||
this.hideEditForm()
|
||||
},
|
||||
hideAddForm() {
|
||||
this.addForm = false
|
||||
},
|
||||
hideEditForm() {
|
||||
this.editForm = false
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.input = document.querySelector('input[name="categories-custom"]')
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -77,14 +77,14 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
const ncApps = loadState('core', 'apps', {})
|
||||
const that = this
|
||||
that.apps = {}
|
||||
const that = this
|
||||
that.apps = {}
|
||||
|
||||
Array.from(window.topMenuApps).forEach((id) => {
|
||||
if (ncApps.hasOwnProperty(id)) {
|
||||
that.apps[id] = ncApps[id]
|
||||
}
|
||||
})
|
||||
Array.from(window.topMenuApps).forEach((id) => {
|
||||
if (ncApps.hasOwnProperty(id)) {
|
||||
that.apps[id] = ncApps[id]
|
||||
}
|
||||
})
|
||||
|
||||
this.observer = new ResizeObserver(this.resize)
|
||||
this.observer.observe(this.$el)
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ You should have received a copy of the GNU Affero General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<button class="side-menu-opener side-menu-closer"></button>
|
||||
<button class="side-menu-opener side-menu-closer"></button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CloserButton',
|
||||
name: 'CloserButton',
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,28 +15,28 @@ You should have received a copy of the GNU Affero General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div class="side-menu-loader">
|
||||
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(1 1)" stroke-width="2">
|
||||
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
|
||||
<path d="M36 18c0-9.94-8.06-18-18-18">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from="0 18 18"
|
||||
to="360 18 18"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="side-menu-loader">
|
||||
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(1 1)" stroke-width="2">
|
||||
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
|
||||
<path d="M36 18c0-9.94-8.06-18-18-18">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from="0 18 18"
|
||||
to="360 18 18"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Loader',
|
||||
name: 'Loader',
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
40
src/Logo.vue
40
src/Logo.vue
|
|
@ -15,30 +15,30 @@ You should have received a copy of the GNU Affero General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div v-bind:class="classes">
|
||||
<a v-if="link !== null" v-bind:href="link">
|
||||
<img v-bind:src="image" alt="Logo">
|
||||
</a>
|
||||
<img v-else v-bind:src="image" alt="Logo">
|
||||
</div>
|
||||
<div v-bind:class="classes">
|
||||
<a v-if="link !== null" v-bind:href="link">
|
||||
<img v-bind:src="image" alt="Logo">
|
||||
</a>
|
||||
<img v-else v-bind:src="image" alt="Logo">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Logo',
|
||||
props: {
|
||||
image: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
link: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
classes: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
name: 'Logo',
|
||||
props: {
|
||||
image: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
link: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
classes: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ You should have received a copy of the GNU Affero General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<button class="side-menu-opener"></button>
|
||||
<button class="side-menu-opener"></button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OpenerButton',
|
||||
name: 'OpenerButton',
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,33 +15,33 @@ You should have received a copy of the GNU Affero General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div class="side-menu-settings">
|
||||
<a v-bind:href="href">
|
||||
{{ label }}
|
||||
<div class="side-menu-settings">
|
||||
<a v-bind:href="href">
|
||||
{{ label }}
|
||||
|
||||
<span class="avatardiv avatardiv-shown">
|
||||
<img v-bind:src="avatar" v-bind:alt="name" v-bind:title="name">
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<span class="avatardiv avatardiv-shown">
|
||||
<img v-bind:src="avatar">
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SettingsButton',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
name: 'SettingsButton',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
268
src/SideMenu.vue
268
src/SideMenu.vue
|
|
@ -15,41 +15,41 @@ You should have received a copy of the GNU Affero General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div id="side-menu">
|
||||
<div class="side-menu-header">
|
||||
<SettingsButton
|
||||
v-if="settings"
|
||||
v-bind:href="settings.href"
|
||||
v-bind:label="settings.name"
|
||||
v-bind:avatar="settings.avatar" />
|
||||
<div id="side-menu">
|
||||
<div class="side-menu-header">
|
||||
<SettingsButton
|
||||
v-if="settings"
|
||||
v-bind:href="settings.href"
|
||||
v-bind:label="settings.name"
|
||||
v-bind:avatar="settings.avatar" />
|
||||
|
||||
<OpenerButton />
|
||||
<OpenerButton />
|
||||
|
||||
<Logo
|
||||
v-if="!avatar && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
|
||||
v-bind:image="logo"
|
||||
v-bind:link="logoLink"
|
||||
/>
|
||||
<Logo
|
||||
v-if="!avatar && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
|
||||
v-bind:image="logo"
|
||||
v-bind:link="logoLink"
|
||||
/>
|
||||
|
||||
<Logo
|
||||
v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
|
||||
v-bind:image="avatar"
|
||||
v-bind:link="logoLink"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul class="side-menu-apps-list">
|
||||
<SideMenuApp
|
||||
v-for="(app, key) in apps"
|
||||
v-bind:classes="{'side-menu-app': true, 'active': app.active}"
|
||||
v-bind:key="key"
|
||||
v-bind:icon="app.icon"
|
||||
v-bind:label="app.name"
|
||||
v-bind:href="app.href"
|
||||
v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
|
||||
/>
|
||||
</ul>
|
||||
<Logo
|
||||
v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
|
||||
v-bind:image="avatar"
|
||||
v-bind:link="logoLink"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul class="side-menu-apps-list">
|
||||
<SideMenuApp
|
||||
v-for="(app, key) in apps"
|
||||
v-bind:classes="{'side-menu-app': true, 'active': app.active}"
|
||||
v-bind:key="key"
|
||||
v-bind:icon="app.icon"
|
||||
v-bind:label="app.name"
|
||||
v-bind:href="app.href"
|
||||
v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -61,109 +61,109 @@ import SideMenuApp from './SideMenuApp'
|
|||
import Logo from './Logo'
|
||||
|
||||
export default {
|
||||
name: 'SideMenu',
|
||||
components: {
|
||||
SettingsButton,
|
||||
OpenerButton,
|
||||
SideMenuApp,
|
||||
Logo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
apps: [],
|
||||
logo: null,
|
||||
logoLink: null,
|
||||
avatar: null,
|
||||
forceLightIcon: false,
|
||||
targetBlankApps: [],
|
||||
settings: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
retrieveApps() {
|
||||
this.apps = []
|
||||
const links = document.querySelectorAll('#appmenu a')
|
||||
const menu = document.querySelector('#appmenu')
|
||||
let menuIsHidden = true
|
||||
|
||||
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)
|
||||
},
|
||||
|
||||
retrieveConfig() {
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/js/config'))
|
||||
.then(function(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']
|
||||
})
|
||||
},
|
||||
},
|
||||
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)
|
||||
}
|
||||
name: 'SideMenu',
|
||||
components: {
|
||||
SettingsButton,
|
||||
OpenerButton,
|
||||
SideMenuApp,
|
||||
Logo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
apps: [],
|
||||
logo: null,
|
||||
logoLink: null,
|
||||
avatar: null,
|
||||
forceLightIcon: false,
|
||||
targetBlankApps: [],
|
||||
settings: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
retrieveApps() {
|
||||
this.apps = []
|
||||
const links = document.querySelectorAll('#appmenu a')
|
||||
const menu = document.querySelector('#appmenu')
|
||||
let menuIsHidden = true
|
||||
|
||||
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)
|
||||
},
|
||||
|
||||
retrieveConfig() {
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/js/config'))
|
||||
.then(function(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']
|
||||
})
|
||||
},
|
||||
},
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -15,38 +15,38 @@ You should have received a copy of the GNU Affero General Public License
|
|||
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>
|
||||
<span class="side-menu-app-text" v-text="label"></span>
|
||||
</a>
|
||||
</li>
|
||||
<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>
|
||||
<span class="side-menu-app-text" v-text="label"></span>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SideMenuApp',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
classes: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
target: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
name: 'SideMenuApp',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
classes: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
target: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,42 +15,42 @@ You should have received a copy of the GNU Affero General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div id="side-menu" class="side-menu-big">
|
||||
<div class="side-menu-header">
|
||||
<CloserButton />
|
||||
<div id="side-menu" class="side-menu-big">
|
||||
<div class="side-menu-header">
|
||||
<CloserButton />
|
||||
|
||||
<SettingsButton
|
||||
v-if="settings"
|
||||
v-bind:href="settings.href"
|
||||
v-bind:label="settings.name"
|
||||
v-bind:avatar="settings.avatar"
|
||||
/>
|
||||
<SettingsButton
|
||||
v-if="settings"
|
||||
v-bind:href="settings.href"
|
||||
v-bind:label="settings.name"
|
||||
v-bind:avatar="settings.avatar"
|
||||
/>
|
||||
|
||||
<OpenerButton />
|
||||
</div>
|
||||
|
||||
<div class="side-menu-categories-wrapper">
|
||||
<div class="side-menu-categories">
|
||||
<Loader v-if="!items.length" />
|
||||
|
||||
<div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
|
||||
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
||||
|
||||
<ul class="side-menu-apps-list">
|
||||
<SideMenuBigApp
|
||||
v-for="(app, appId) in category.apps"
|
||||
v-bind:key="appId"
|
||||
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||
v-bind:icon="app.icon"
|
||||
v-bind:label="app.name"
|
||||
v-bind:href="app.href"
|
||||
v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<OpenerButton />
|
||||
</div>
|
||||
|
||||
<div class="side-menu-categories-wrapper">
|
||||
<div class="side-menu-categories">
|
||||
<Loader v-if="!items.length" />
|
||||
|
||||
<div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
|
||||
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
||||
|
||||
<ul class="side-menu-apps-list">
|
||||
<SideMenuBigApp
|
||||
v-for="(app, appId) in category.apps"
|
||||
v-bind:key="appId"
|
||||
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||
v-bind:icon="app.icon"
|
||||
v-bind:label="app.name"
|
||||
v-bind:href="app.href"
|
||||
v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -62,69 +62,69 @@ import Loader from './Loader'
|
|||
import SideMenuBigApp from './SideMenuBigApp'
|
||||
|
||||
export default {
|
||||
name: 'SideMenuBig',
|
||||
components: {
|
||||
SettingsButton,
|
||||
OpenerButton,
|
||||
CloserButton,
|
||||
Loader,
|
||||
SideMenuBigApp,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
activeApp: null,
|
||||
targetBlank: false,
|
||||
targetBlankApps: [],
|
||||
settings: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
retrieveApps() {
|
||||
this.apps = []
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/nav/items'))
|
||||
.then(function(response) {
|
||||
that.items = response.data.items
|
||||
|
||||
let apps = []
|
||||
|
||||
for (let category of that.items) {
|
||||
for (let a in category.apps) {
|
||||
apps.push(category.apps[a])
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
||||
detail: {apps: apps},
|
||||
}))
|
||||
})
|
||||
},
|
||||
|
||||
retrieveActiveApp() {
|
||||
let activeAppLink = document.querySelector('#appmenu a.active')
|
||||
this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
|
||||
},
|
||||
|
||||
retrieveConfig() {
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/js/config'))
|
||||
.then(function(response) {
|
||||
const config = response.data
|
||||
|
||||
that.targetBlankApps = config['target-blank-apps']
|
||||
that.settings = config['settings']
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.retrieveConfig()
|
||||
this.retrieveApps()
|
||||
this.retrieveActiveApp()
|
||||
name: 'SideMenuBig',
|
||||
components: {
|
||||
SettingsButton,
|
||||
OpenerButton,
|
||||
CloserButton,
|
||||
Loader,
|
||||
SideMenuBigApp,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
activeApp: null,
|
||||
targetBlank: false,
|
||||
targetBlankApps: [],
|
||||
settings: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
retrieveApps() {
|
||||
this.apps = []
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/nav/items'))
|
||||
.then(function(response) {
|
||||
that.items = response.data.items
|
||||
|
||||
let apps = []
|
||||
|
||||
for (let category of that.items) {
|
||||
for (let a in category.apps) {
|
||||
apps.push(category.apps[a])
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
||||
detail: {apps: apps},
|
||||
}))
|
||||
})
|
||||
},
|
||||
|
||||
retrieveActiveApp() {
|
||||
let activeAppLink = document.querySelector('#appmenu a.active')
|
||||
this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
|
||||
},
|
||||
|
||||
retrieveConfig() {
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/js/config'))
|
||||
.then(function(response) {
|
||||
const config = response.data
|
||||
|
||||
that.targetBlankApps = config['target-blank-apps']
|
||||
that.settings = config['settings']
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.retrieveConfig()
|
||||
this.retrieveApps()
|
||||
this.retrieveActiveApp()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,38 +15,38 @@ You should have received a copy of the GNU Affero General Public License
|
|||
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">
|
||||
<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>
|
||||
<li v-bind:class="classes">
|
||||
<a v-bind:href="href" :target="target" v-bind:title="label">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SideMenuBigApp',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
classes: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
target: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
name: 'SideMenuBigApp',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
classes: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
target: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,40 +15,40 @@ You should have received a copy of the GNU Affero General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div id="side-menu" class="side-menu-with-categories">
|
||||
<div class="side-menu-header">
|
||||
<SettingsButton
|
||||
v-if="settings"
|
||||
v-bind:href="settings.href"
|
||||
v-bind:label="settings.name"
|
||||
v-bind:avatar="settings.avatar"
|
||||
/>
|
||||
<div id="side-menu" class="side-menu-with-categories">
|
||||
<div class="side-menu-header">
|
||||
<SettingsButton
|
||||
v-if="settings"
|
||||
v-bind:href="settings.href"
|
||||
v-bind:label="settings.name"
|
||||
v-bind:avatar="settings.avatar"
|
||||
/>
|
||||
|
||||
<OpenerButton />
|
||||
</div>
|
||||
|
||||
<div class="side-menu-categories-wrapper">
|
||||
<div class="side-menu-categories">
|
||||
<Loader v-if="!items.length" />
|
||||
|
||||
<div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
|
||||
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
||||
|
||||
<ul class="side-menu-apps-list">
|
||||
<SideMenuBigApp
|
||||
v-for="(app, appId) in category.apps"
|
||||
v-bind:key="appId"
|
||||
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||
v-bind:icon="app.icon"
|
||||
v-bind:label="app.name"
|
||||
v-bind:href="app.href"
|
||||
v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<OpenerButton />
|
||||
</div>
|
||||
|
||||
<div class="side-menu-categories-wrapper">
|
||||
<div class="side-menu-categories">
|
||||
<Loader v-if="!items.length" />
|
||||
|
||||
<div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
|
||||
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
||||
|
||||
<ul class="side-menu-apps-list">
|
||||
<SideMenuBigApp
|
||||
v-for="(app, appId) in category.apps"
|
||||
v-bind:key="appId"
|
||||
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||
v-bind:icon="app.icon"
|
||||
v-bind:label="app.name"
|
||||
v-bind:href="app.href"
|
||||
v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -60,69 +60,69 @@ import Loader from './Loader'
|
|||
import SideMenuBigApp from './SideMenuBigApp'
|
||||
|
||||
export default {
|
||||
name: 'SideMenuWithCategories',
|
||||
components: {
|
||||
SettingsButton,
|
||||
OpenerButton,
|
||||
CloserButton,
|
||||
Loader,
|
||||
SideMenuBigApp,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
activeApp: null,
|
||||
targetBlank: false,
|
||||
targetBlankApps: [],
|
||||
settings: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
retrieveApps() {
|
||||
this.apps = []
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/nav/items'))
|
||||
.then(function(response) {
|
||||
that.items = response.data.items
|
||||
|
||||
let apps = []
|
||||
|
||||
for (let category of that.items) {
|
||||
for (let a in category.apps) {
|
||||
apps.push(category.apps[a])
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
||||
detail: {apps: apps},
|
||||
}))
|
||||
})
|
||||
},
|
||||
|
||||
retrieveActiveApp() {
|
||||
let activeAppLink = document.querySelector('#appmenu a.active')
|
||||
this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
|
||||
},
|
||||
|
||||
retrieveConfig() {
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/js/config'))
|
||||
.then(function(response) {
|
||||
const config = response.data
|
||||
|
||||
that.targetBlankApps = config['target-blank-apps']
|
||||
that.settings = config['settings']
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.retrieveConfig()
|
||||
this.retrieveApps()
|
||||
this.retrieveActiveApp()
|
||||
name: 'SideMenuWithCategories',
|
||||
components: {
|
||||
SettingsButton,
|
||||
OpenerButton,
|
||||
CloserButton,
|
||||
Loader,
|
||||
SideMenuBigApp,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
activeApp: null,
|
||||
targetBlank: false,
|
||||
targetBlankApps: [],
|
||||
settings: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
retrieveApps() {
|
||||
this.apps = []
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/nav/items'))
|
||||
.then(function(response) {
|
||||
that.items = response.data.items
|
||||
|
||||
let apps = []
|
||||
|
||||
for (let category of that.items) {
|
||||
for (let a in category.apps) {
|
||||
apps.push(category.apps[a])
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
||||
detail: {apps: apps},
|
||||
}))
|
||||
})
|
||||
},
|
||||
|
||||
retrieveActiveApp() {
|
||||
let activeAppLink = document.querySelector('#appmenu a.active')
|
||||
this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
|
||||
},
|
||||
|
||||
retrieveConfig() {
|
||||
let that = this
|
||||
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/js/config'))
|
||||
.then(function(response) {
|
||||
const config = response.data
|
||||
|
||||
that.targetBlankApps = config['target-blank-apps']
|
||||
that.settings = config['settings']
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.retrieveConfig()
|
||||
this.retrieveApps()
|
||||
this.retrieveActiveApp()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue