upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-04-21 22:27:31 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 40

🧭 Fix rebuilding the navigation

Browse source 
Signed-off-by: Joas Schilling <coding@schilljs.com>
This commit is contained in:
Joas Schilling 2022-10-18 11:17:52 +02:00 committed by backportbot-nextcloud[bot]
parent 20ea9a2535
commit 6b1901f0e7
2 changed files with 8 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
apps/settings/src/service/rebuild-navigation.js
View file

@ -1,5 +1,6 @@
import axios from '@nextcloud/axios'
import { generateOcsUrl } from '@nextcloud/router'
import { emit } from '@nextcloud/event-bus'
export default () => {
return axios.get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
@ -8,123 +9,7 @@ export default () => {
return
}
const addedApps = {}
const navEntries = data.ocs.data
const container = document.querySelector('#navigation #apps ul')
// remove disabled apps
navEntries.forEach((entry) => {
if (!container.querySelector('li[data-id="' + entry.id + '"]')) {
addedApps[entry.id] = true
}
})
container.querySelectorAll('li[data-id]').forEach((el, index) => {
const id = el.dataset.id
// remove all apps that are not in the correct order
if (!navEntries[index] || (navEntries[index] && navEntries[index].id !== id)) {
el.remove()
document.querySelector(`#appmenu li[data-id=${id}]`).remove()
}
})
let previousEntry = {}
// add enabled apps to #navigation and #appmenu
navEntries.forEach((entry) => {
if (container.querySelector(`li[data-id="${entry.id}"]`) === null) {
const li = document.createElement('li')
li.dataset.id = entry.id
const img = `<svg width="20" height="20" viewBox="0 0 20 20" alt="">
<defs>
<filter id="invertMenuMore-${entry.id}"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter>
<mask id="hole">
<rect width="100%" height="100%" fill="white"></rect>
<circle r="4.5" cx="17" cy="3" fill="black"></circle>
</mask>
</defs>
<image x="0" y="0" width="16" height="16" filter="url(#invertMenuMore-${entry.id})" preserveAspectRatio="xMinYMin meet" xlink:href="${entry.icon}" class="app-icon" />
</svg>`
const imgElement = document.createElement('template')
imgElement.innerHTML = img
const a = document.createElement('a')
a.setAttribute('href', entry.href)
const filename = document.createElement('span')
filename.appendChild(document.createTextNode(entry.name))
const loading = document.createElement('div')
loading.setAttribute('class', 'unread-counter')
loading.style.display = 'none'
// draw attention to the newly added app entry
// by flashing twice the more apps menu
if (addedApps[entry.id]) {
a.classList.add('animated')
}
a.prepend(imgElement.content.firstChild, loading, filename)
li.append(a)
// add app icon to the navigation
const previousElement = document.querySelector(`#navigation li[data-id=${previousEntry.id}]`)
if (previousElement) {
previousElement.insertAdjacentElement('afterend', li)
} else {
document.querySelector('#navigation #apps ul').prepend(li)
}
}
if (document.getElementById('appmenu').querySelector(`li[data-id="${entry.id}"]`) === null) {
const li = document.createElement('li')
li.dataset.id = entry.id
// Generating svg embedded image (see layout.user.php)
let img
if (OCA.Theming && OCA.Theming.inverted) {
img = `<svg width="20" height="20" viewBox="0 0 20 20" alt="">
<defs>
<filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter>
</defs>
<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="${entry.icon}" class="app-icon" />
</svg>`
} else {
img = `<svg width="20" height="20" viewBox="0 0 20 20" alt="">
<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" xlink:href="${entry.icon}" class="app-icon" />
</svg>`
}
const imgElement = document.createElement('template')
imgElement.innerHTML = img
const a = document.createElement('a')
a.setAttribute('href', entry.href)
const filename = document.createElement('span')
filename.appendChild(document.createTextNode(entry.name))
const loading = document.createElement('div')
loading.setAttribute('class', 'icon-loading-dark')
loading.style.display = 'none'
// draw attention to the newly added app entry
// by flashing twice the more apps menu
if (addedApps[entry.id]) {
a.classList.add('animated')
}
a.prepend(loading, filename, imgElement.content.firstChild)
li.append(a)
// add app icon to the navigation
const previousElement = document.querySelector('#appmenu li[data-id=' + previousEntry.id + ']')
if (previousElement) {
previousElement.insertAdjacentElement('afterend', li)
} else {
document.queryElementById('appmenu').prepend(li)
}
}
previousEntry = entry
})
emit('nextcloud:app-menu.refresh', { apps: data.ocs.data })
window.dispatchEvent(new Event('resize'))
})
}

6
core/src/components/AppMenu.vue
View file

@ -60,6 +60,7 @@
<script>
import { loadState } from '@nextcloud/initial-state'
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
import NcActions from '@nextcloud/vue/dist/Components/NcActions'
import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
@ -95,14 +96,19 @@ export default {
this.observer = new ResizeObserver(this.resize)
this.observer.observe(this.$el)
this.resize()
subscribe('nextcloud:app-menu.refresh', this.setApps)
},
beforeDestroy() {
this.observer.disconnect()
unsubscribe('nextcloud:app-menu.refresh', this.setApps)
},
methods: {
setNavigationCounter(id, counter) {
this.$set(this.apps[id], 'unread', counter)
},
setApps({ apps }) {
this.apps = apps
},
resize() {
const availableWidth = this.$el.offsetWidth
let appCount = Math.floor(availableWidth / 50) - 1