diff --git a/apps/comments/src/comments-tab.js b/apps/comments/src/comments-tab.js index 7b12de6de4f..ef17ce984a4 100644 --- a/apps/comments/src/comments-tab.js +++ b/apps/comments/src/comments-tab.js @@ -20,14 +20,14 @@ * */ -import MessageReplyText from 'vue-material-design-icons/MessageReplyText.vue' +import MessageReplyText from '@mdi/svg/svg/message-reply-text.svg?raw' // Init Comments tab component let TabInstance = null const commentTab = new OCA.Files.Sidebar.Tab({ id: 'comments', name: t('comments', 'Comments'), - icon: 'icon-comment', + iconSvg: MessageReplyText, async mount(el, fileInfo, context) { if (TabInstance) { @@ -53,7 +53,7 @@ const commentTab = new OCA.Files.Sidebar.Tab({ }, }) -window.addEventListener('DOMContentLoaded', function() { +window.addEventListener('DOMContentLoaded', function () { if (OCA.Files && OCA.Files.Sidebar) { OCA.Files.Sidebar.registerTab(commentTab) } diff --git a/apps/files/src/models/Tab.js b/apps/files/src/models/Tab.js index 9fd38f71bd7..cbf35c77dcb 100644 --- a/apps/files/src/models/Tab.js +++ b/apps/files/src/models/Tab.js @@ -19,12 +19,14 @@ * along with this program. If not, see . * */ +import { sanitizeSVG } from '@skjnldsv/sanitize-svg' export default class Tab { _id _name _icon + _iconSvgSanitized _mount _update _destroy @@ -37,19 +39,20 @@ export default class 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 {?string} options.icon the icon css class + * @param {?string} options.iconSvg the icon in svg format * @param {Function} options.mount function to mount the tab * @param {Function} options.update function to update the tab * @param {Function} options.destroy function to destroy the tab * @param {Function} [options.enabled] define conditions whether this tab is active. Must returns a boolean * @param {Function} [options.scrollBottomReached] executed when the tab is scrolled to the bottom */ - constructor({ id, name, icon, mount, update, destroy, enabled, scrollBottomReached } = {}) { + constructor({ id, name, icon, iconSvg, mount, update, destroy, enabled, scrollBottomReached } = {}) { if (enabled === undefined) { enabled = () => true } if (scrollBottomReached === undefined) { - scrollBottomReached = () => {} + scrollBottomReached = () => { } } // Sanity checks @@ -59,8 +62,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() === '') && typeof icon !== 'object') { - throw new Error('The icon argument is not a valid string or vuejs component') + if ((typeof icon !== 'string' || icon.trim() === '') && typeof iconSvg !== 'string') { + throw new Error('Missing valid string for icon or iconSvg argument') } if (typeof mount !== 'function') { throw new Error('The mount argument should be a function') @@ -81,12 +84,20 @@ export default class Tab { this._id = id this._name = name this._icon = icon + this._iconSvg = iconSvg this._mount = mount this._update = update this._destroy = destroy this._enabled = enabled this._scrollBottomReached = scrollBottomReached + if (typeof iconSvg === 'string') { + sanitizeSVG(iconSvg) + .then(sanitizedSvg => { + this._iconSvgSanitized = sanitizedSvg + }) + } + } get id() { @@ -97,14 +108,14 @@ export default class Tab { return this._name } - get isIconClass() { - return typeof this._icon === 'string' - } - get icon() { return this._icon } + get iconSvg() { + return this._iconSvgSanitized + } + get mount() { return this._mount } diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue index 7c5ac8f0fdb..6c7d391b3c1 100644 --- a/apps/files/src/views/Sidebar.vue +++ b/apps/files/src/views/Sidebar.vue @@ -67,14 +67,15 @@ :id="tab.id" :key="tab.id" :name="tab.name" - :icon="tab.isIconClass ? tab.icon : undefined" + :icon="tab.icon" :on-mount="tab.mount" :on-update="tab.update" :on-destroy="tab.destroy" :on-scroll-bottom-reached="tab.scrollBottomReached" :file-info="fileInfo"> - @@ -512,5 +513,13 @@ export default { top: 0 !important; height: 100% !important; } + + .svg-icon { + ::v-deep svg { + width: 20px; + height: 20px; + fill: var(--color-main-text); + } + } } diff --git a/apps/files_sharing/src/files_sharing_tab.js b/apps/files_sharing/src/files_sharing_tab.js index 9694e2a9539..ed515e86e01 100644 --- a/apps/files_sharing/src/files_sharing_tab.js +++ b/apps/files_sharing/src/files_sharing_tab.js @@ -31,7 +31,7 @@ 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' +import ShareVariant from '@mdi/svg/svg/share-variant.svg?raw' // Init Sharing Tab Service if (!window.OCA.Sharing) { @@ -50,12 +50,12 @@ Vue.use(VueClipboard) const View = Vue.extend(SharingTab) let TabInstance = null -window.addEventListener('DOMContentLoaded', function() { +window.addEventListener('DOMContentLoaded', function () { if (OCA.Files && OCA.Files.Sidebar) { OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({ id: 'sharing', name: t('files_sharing', 'Sharing'), - icon: ShareVariant, + iconSvg: ShareVariant, async mount(el, fileInfo, context) { if (TabInstance) { diff --git a/apps/files_versions/src/files_versions_tab.js b/apps/files_versions/src/files_versions_tab.js index d293a68510c..b4ab075b7a8 100644 --- a/apps/files_versions/src/files_versions_tab.js +++ b/apps/files_versions/src/files_versions_tab.js @@ -22,7 +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' +import BackupRestore from '@mdi/svg/svg/backup-restore.svg?raw' Vue.prototype.t = t Vue.prototype.n = n @@ -33,12 +33,12 @@ Vue.use(VTooltip) const View = Vue.extend(VersionTab) let TabInstance = null -window.addEventListener('DOMContentLoaded', function() { +window.addEventListener('DOMContentLoaded', function () { if (OCA.Files && OCA.Files.Sidebar) { OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({ id: 'version_vue', name: t('files_versions', 'Version'), - icon: BackupRestore, + iconSvg: BackupRestore, async mount(el, fileInfo, context) { if (TabInstance) { diff --git a/apps/files_versions/src/views/VersionTab.vue b/apps/files_versions/src/views/VersionTab.vue index 119dc95a60d..90664491941 100644 --- a/apps/files_versions/src/views/VersionTab.vue +++ b/apps/files_versions/src/views/VersionTab.vue @@ -19,8 +19,8 @@