diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 5e6225a48e..3f144cc1f2 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -3700,7 +3700,16 @@
console.warn('registerTabView is deprecated! It will be removed in nextcloud 20.');
const enabled = tabView.canDisplay || undefined
if (tabView.id) {
- OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab(tabView.id, tabView, enabled, true))
+ OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
+ id: tabView.id,
+ name: tabView.getLabel(),
+ icon: tabView.getIcon(),
+ render: function(el, fileInfo) {
+ tabView.setFileInfo(fileInfo)
+ el.appendChild(tabView.el)
+ },
+ enabled,
+ }))
}
},
diff --git a/apps/files/src/components/LegacyTab.vue b/apps/files/src/components/SidebarTab.vue
similarity index 68%
rename from apps/files/src/components/LegacyTab.vue
rename to apps/files/src/components/SidebarTab.vue
index c8308dd620..ecf04e9c9b 100644
--- a/apps/files/src/components/LegacyTab.vue
+++ b/apps/files/src/components/SidebarTab.vue
@@ -1,3 +1,4 @@
+
-
+ :icon="icon">
+
+
+
+
-
diff --git a/apps/files/src/models/Tab.js b/apps/files/src/models/Tab.js
index fd1ea9888d..753b9c9c28 100644
--- a/apps/files/src/models/Tab.js
+++ b/apps/files/src/models/Tab.js
@@ -22,32 +22,49 @@
export default class Tab {
- #component
- #legacy
#id
+ #name
+ #icon
+ #render
#enabled
/**
* Create a new tab instance
*
- * @param {string} id the unique id of this tab
- * @param {Object} component the vue component
- * @param {Function} [enabled] function that returns if the tab should be shown or not
- * @param {boolean} [legacy] is this a legacy tab
+ * @param {Object} options destructuring object
+ * @param {string} options.id the unique id of this tab
+ * @param {string} options.name the translated tab name
+ * @param {string} options.icon the vue component
+ * @param {Function} options.render function to render the tab
+ * @param {Function} [options.enabled] define conditions whether this tab is active. Must returns a boolean
*/
- constructor(id, component, enabled = () => true, legacy) {
+ constructor({ id, name, icon, render, enabled }) {
+ if (enabled === undefined) {
+ enabled = () => true
+ }
+
+ // Sanity checks
+ if (typeof id !== 'string' || id.trim() === '') {
+ throw new Error('The id argument is not a valid string')
+ }
+ if (typeof name !== 'string' || name.trim() === '') {
+ throw new Error('The name argument is not a valid string')
+ }
+ if (typeof icon !== 'string' || icon.trim() === '') {
+ throw new Error('The icon argument is not a valid string')
+ }
+ if (typeof render !== 'function') {
+ throw new Error('The render argument should be a function')
+ }
if (typeof enabled !== 'function') {
throw new Error('The enabled argument should be a function')
}
this.#id = id
- this.#component = component
+ this.#name = name
+ this.#icon = icon
+ this.#render = render
this.#enabled = enabled
- this.#legacy = legacy === true
-
- if (this.#legacy) {
- console.warn('Legacy tabs are deprecated! They will be removed in nextcloud 20.')
- }
}
@@ -55,16 +72,20 @@ export default class Tab {
return this.#id
}
- get component() {
- return this.#component
+ get name() {
+ return this.#name
}
- get isEnabled() {
+ get icon() {
+ return this.#icon
+ }
+
+ get render() {
+ return this.#render
+ }
+
+ get enabled() {
return this.#enabled
}
- get isLegacyTab() {
- return this.#legacy === true
- }
-
}
diff --git a/apps/files/src/sidebar.js b/apps/files/src/sidebar.js
index f815a49893..508093465d 100644
--- a/apps/files/src/sidebar.js
+++ b/apps/files/src/sidebar.js
@@ -24,9 +24,6 @@ import Vue from 'vue'
import SidebarView from './views/Sidebar.vue'
import Sidebar from './services/Sidebar'
import Tab from './models/Tab'
-import VueClipboard from 'vue-clipboard2'
-
-Vue.use(VueClipboard)
Vue.prototype.t = t
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index 1fc89c6a7e..6fa5c35dca 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -58,15 +58,14 @@
-
-
+
@@ -77,7 +76,7 @@ import axios from '@nextcloud/axios'
import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
import FileInfo from '../services/FileInfo'
-import LegacyTab from '../components/LegacyTab'
+import SidebarTab from '../components/SidebarTab'
import LegacyView from '../components/LegacyView'
import { encodePath } from '@nextcloud/paths'
@@ -87,6 +86,7 @@ export default {
components: {
ActionButton,
AppSidebar,
+ SidebarTab,
LegacyView,
},
@@ -258,8 +258,8 @@ export default {
})
this.$nextTick(() => {
- if (this.$refs.sidebar) {
- this.$refs.sidebar.updateTabs()
+ if (this.$refs.tabs) {
+ this.$refs.tabs.updateTabs()
}
})
} catch (error) {
@@ -278,14 +278,14 @@ export default {
* @returns {boolean}
*/
canDisplay(tab) {
- return tab.isEnabled(this.fileInfo)
+ return tab.enabled(this.fileInfo)
},
resetData() {
this.error = null
this.fileInfo = null
this.$nextTick(() => {
- if (this.$refs.sidebar) {
- this.$refs.sidebar.updateTabs()
+ if (this.$refs.tabs) {
+ this.$refs.tabs.updateTabs()
}
})
},
@@ -327,18 +327,6 @@ export default {
return OC.MimeType.getIconUrl(mimeType)
},
- tabComponent(tab) {
- if (tab.isLegacyTab) {
- return {
- is: LegacyTab,
- component: tab.component,
- }
- }
- return {
- is: tab.component,
- }
- },
-
/**
* Set current active tab
*
@@ -430,8 +418,8 @@ export default {
})
this.$nextTick(() => {
- if (this.$refs.sidebar) {
- this.$refs.sidebar.updateTabs()
+ if (this.$refs.tabs) {
+ this.$refs.tabs.updateTabs()
}
})
} catch (error) {
diff --git a/apps/files_sharing/src/files_sharing_tab.js b/apps/files_sharing/src/files_sharing_tab.js
index ffb6cdec30..e8988e8c40 100644
--- a/apps/files_sharing/src/files_sharing_tab.js
+++ b/apps/files_sharing/src/files_sharing_tab.js
@@ -19,11 +19,13 @@
* along with this program. If not, see .
*
*/
+import Vue from 'vue'
+import VueClipboard from 'vue-clipboard2'
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
import SharingTab from './views/SharingTab'
import ShareSearch from './services/ShareSearch'
import ExternalLinkActions from './services/ExternalLinkActions'
-
import TabSections from './services/TabSections'
// Init Sharing Tab Service
@@ -34,8 +36,28 @@ Object.assign(window.OCA.Sharing, { ShareSearch: new ShareSearch() })
Object.assign(window.OCA.Sharing, { ExternalLinkActions: new ExternalLinkActions() })
Object.assign(window.OCA.Sharing, { ShareTabSections: new TabSections() })
+Vue.prototype.t = t
+Vue.prototype.n = n
+Vue.use(VueClipboard)
+
+// Init Sharing tab component
+const View = Vue.extend(SharingTab)
+
window.addEventListener('DOMContentLoaded', function() {
if (OCA.Files && OCA.Files.Sidebar) {
- OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab('sharing', SharingTab))
+ OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
+ id: 'sharing',
+ name: t('files_sharing', 'Sharing'),
+ icon: 'icon-share',
+
+ render: (el, fileInfo) => {
+ new View({
+ propsData: {
+ fileInfo,
+ },
+ }).$mount(el)
+ console.info(el)
+ },
+ }))
}
})
diff --git a/apps/files_sharing/src/views/SharingTab.vue b/apps/files_sharing/src/views/SharingTab.vue
index 40c8572912..c92aac40d0 100644
--- a/apps/files_sharing/src/views/SharingTab.vue
+++ b/apps/files_sharing/src/views/SharingTab.vue
@@ -21,10 +21,7 @@
-->
-
+
-
-