Add support for Material icon in files sidebar

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
Signed-off-by: Louis Chemineau <louis@chmn.me>

apps/comments/src/comments-tab.js

@@ -20,6 +20,8 @@
  *
  */
 
+import MessageReplyText from 'vue-material-design-icons/MessageReplyText.vue'
+
 // Init Comments tab component
 let TabInstance = null
 const commentTab = new OCA.Files.Sidebar.Tab({

apps/files/src/components/SidebarTab.vue

@@ -26,6 +26,9 @@
 		:name="name"
 		:icon="icon"
 		@bottomReached="onScrollBottomReached">
+		<template #icon>
+			<slot name="icon" />
+		</template>
 		<!-- Fallback loading -->
 		<NcEmptyContent v-if="loading" icon="icon-loading" />
 
@@ -63,7 +66,7 @@ export default {
 		},
 		icon: {
 			type: String,
-			required: true,
+			required: false,
 		},
 
 		/**

apps/files/src/models/Tab.js

@@ -59,8 +59,8 @@ export default class Tab {
 		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 icon !== 'string' || icon.trim() === '') && typeof icon !== 'object') {
+			throw new Error('The icon argument is not a valid string or vuejs component')
 		}
 		if (typeof mount !== 'function') {
 			throw new Error('The mount argument should be a function')
@@ -97,6 +97,10 @@ export default class Tab {
 		return this._name
 	}
 
+	get isIconClass() {
+		return typeof this._icon === 'string'
+	}
+
 	get icon() {
 		return this._icon
 	}

apps/files/src/views/Sidebar.vue

@@ -67,12 +67,16 @@
 				:id="tab.id"
 				:key="tab.id"
 				:name="tab.name"
-				:icon="tab.icon"
+				:icon="tab.isIconClass ? tab.icon : undefined"
 				:on-mount="tab.mount"
 				:on-update="tab.update"
 				:on-destroy="tab.destroy"
 				:on-scroll-bottom-reached="tab.scrollBottomReached"
-				:file-info="fileInfo" />
+				:file-info="fileInfo">
+				<template #icon v-if="!tab.isIconClass">
+					<component :is="tab.icon" />
+				</template>
+			</SidebarTab>
 		</template>
 	</NcAppSidebar>
 </template>

apps/files_sharing/src/files_sharing_tab.js

@@ -25,11 +25,13 @@ 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 ExternalShareActions from './services/ExternalShareActions'
-import TabSections from './services/TabSections'
+import SharingTab from './views/SharingTab.vue'
+import ShareSearch from './services/ShareSearch.js'
+import ExternalLinkActions from './services/ExternalLinkActions.js'
+import ExternalShareActions from './services/ExternalShareActions.js'
+import TabSections from './services/TabSections.js'
+
+import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
 
 // Init Sharing Tab Service
 if (!window.OCA.Sharing) {
@@ -53,7 +55,7 @@ window.addEventListener('DOMContentLoaded', function() {
 		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
 			id: 'sharing',
 			name: t('files_sharing', 'Sharing'),
-			icon: 'icon-share',
+			icon: ShareVariant,
 
 			async mount(el, fileInfo, context) {
 				if (TabInstance) {

apps/files_versions/src/files_versions_tab.js

@@ -22,6 +22,7 @@ import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
 import VersionTab from './views/VersionTab.vue'
 import VTooltip from 'v-tooltip'
+import BackupRestore from 'vue-material-design-icons/BackupRestore.vue'
 
 Vue.prototype.t = t
 Vue.prototype.n = n
@@ -37,7 +38,7 @@ window.addEventListener('DOMContentLoaded', function() {
 		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
 			id: 'version_vue',
 			name: t('files_versions', 'Version'),
-			icon: 'icon-history',
+			icon: BackupRestore,
 
 			async mount(el, fileInfo, context) {
 				if (TabInstance) {