Merge pull request #1429 from nextcloud/fix/app-sidebar

Add loading state on AppSidebar and remove unwanted slot bind
nextcloud-libraries · Oct 6, 2020 · f8ee0c5 · f8ee0c5
2 parents 86eff4c + 992d7be
commit f8ee0c5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue
@@ -218,9 +218,14 @@
 				</div>
 			</header>
 
-			<AppSidebarTabs ref="tabs" :active="active" @update:active="onUpdateActive">
+			<AppSidebarTabs v-show="!loading"
+				ref="tabs"
+				:active="active"
+				@update:active="onUpdateActive">
 				<slot />
 			</AppSidebarTabs>
+
+			<EmptyContent v-if="loading" icon="icon-loading" />
 		</aside>
 	</transition>
 </template>
@@ -231,6 +236,7 @@ import Focus from '../../directives/Focus'
 import Linkify from '../../directives/Linkify'
 import l10n from '../../mixins/l10n'
 import AppSidebarTabs from './AppSidebarTabs'
+import EmptyContent from '../EmptyContent/EmptyContent'
 import { directive as ClickOutside } from 'v-click-outside'
 
 export default {
@@ -239,6 +245,7 @@ export default {
 	components: {
 		Actions,
 		AppSidebarTabs,
+		EmptyContent,
 	},
 
 	directives: {
@@ -300,6 +307,13 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Show loading spinner instead of tabs
+		 */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
 
 		/**
 		 * Display the sidebar in compact mode

diff --git a/src/components/AppSidebar/AppSidebarTabs.vue b/src/components/AppSidebar/AppSidebarTabs.vue
@@ -54,7 +54,7 @@
 		<!-- tabs content -->
 		<div :class="{'app-sidebar-tabs__content--multiple': hasMultipleTabs}"
 			class="app-sidebar-tabs__content">
-			<slot :active-tab="activeTab" />
+			<slot />
 		</div>
 	</div>
 </template>

diff --git a/src/components/AppSidebarTab/AppSidebarTab.vue b/src/components/AppSidebarTab/AppSidebarTab.vue
@@ -24,10 +24,12 @@
 	https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->
 
 <template>
-	<section v-show="isActive"
+	<section
 		:id="`tab-${id}`"
+		:class="{'app-sidebar__tab--active': isActive}"
 		:aria-hidden="!isActive"
 		:aria-labelledby="name"
+		class="app-sidebar__tab"
 		tabindex="0"
 		role="tabpanel">
 		<slot />
@@ -67,7 +69,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-section {
+.app-sidebar__tab {
+	display: none;
 	padding: 10px;
 	min-height: 100%; // fill available height
 
@@ -76,5 +79,9 @@ section {
 		box-shadow: 0 0 0.2em var(--color-primary);
 		outline: 0;
 	}
+
+	&--active {
+		display: block;
+	}
 }
 </style>