Merge pull request #1939 from nextcloud/fix/1859/tabs-md-icon

nextcloud-libraries · May 10, 2021 · 01fd135 · 01fd135
2 parents 0792858 + a3bc8b9
commit 01fd135
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue
@@ -30,16 +30,28 @@ include a standard-header like it's used by the files app.
 ### Standard usage
 
 ```vue
-<AppSidebar
-	title="cat-picture.jpg"
-	subtitle="last edited 3 weeks ago">
-	<AppSidebarTab icon="icon-settings" name="Settings" id="settings">
-		Settings tab content
-	</AppSidebarTab>
-	<AppSidebarTab icon="icon-share" name="Sharing" id="share">
-		Sharing tab content
-	</AppSidebarTab>
-</AppSidebar>
+<template>
+	<AppSidebar
+		title="cat-picture.jpg"
+		subtitle="last edited 3 weeks ago">
+		<AppSidebarTab icon="icon-settings" name="Settings" id="settings">
+			<Cog slot="icon" :size="24" decorative />
+			Settings tab content
+		</AppSidebarTab>
+		<AppSidebarTab icon="icon-share" name="Sharing" id="share">
+			Sharing tab content
+		</AppSidebarTab>
+	</AppSidebar>
+</template>
+<script>
+	import Cog from 'vue-material-design-icons/Cog.vue'
+
+	export default {
+		components: {
+			Cog,
+		},
+	}
+</script>
 ```
 
 ### Editable title

diff --git a/src/components/AppSidebar/AppSidebarTabs.vue b/src/components/AppSidebar/AppSidebarTabs.vue
@@ -45,7 +45,10 @@
 						:tabindex="activeTab === tab.id ? null : -1"
 						role="tab"
 						@click.prevent="setActive(tab.id)">
-						<span :class="tab.icon" class="app-sidebar-tabs__tab-icon" />
+						<span class="app-sidebar-tabs__tab-icon">
+							<VNodes v-if="hasMdIcon(tab)" :vnodes="tab.$slots.icon[0]" />
+							<span v-else :class="tab.icon" />
+						</span>
 						{{ tab.name }}
 					</a>
 				</li>
@@ -73,6 +76,15 @@ const IsValidStringWithoutSpaces = function(value) {
 
 export default {
 	name: 'AppSidebarTabs',
+
+	components: {
+		// Component to render the material design icon (vnodes)
+		VNodes: {
+			functional: true,
+			render: (h, context) => context.props.vnodes,
+		},
+	},
+
 	props: {
 		/**
 		 * Id of the tab to activate
@@ -208,6 +220,10 @@ export default {
 					: ''
 		},
 
+		hasMdIcon(tab) {
+			return tab?.$slots?.icon
+		},
+
 		/**
 		 * Manually update the sidebar tabs according to $slots.default
 		 */
@@ -227,7 +243,7 @@ export default {
 				// Make sure all required props are provided and valid
 				if (IsValidString(tab?.name)
 					&& IsValidStringWithoutSpaces(tab?.id)
-					&& IsValidStringWithoutSpaces(tab?.icon)) {
+					&& (IsValidStringWithoutSpaces(tab?.icon) || tab?.$slots?.icon)) {
 					tabs.push(tab)
 				} else {
 					invalidTabs.push(tabNode)
@@ -331,6 +347,12 @@ export default {
 		opacity: $opacity_normal;
 		background-position: center 8px;
 		background-size: 16px;
+
+		& > span {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
 	}
 
 	&__content {

diff --git a/src/components/AppSidebarTab/AppSidebarTab.vue b/src/components/AppSidebarTab/AppSidebarTab.vue
@@ -52,7 +52,7 @@ export default {
 		},
 		icon: {
 			type: String,
-			required: true,
+			default: '',
 		},
 		order: {
 			type: Number,