fixup! Implement sidebar component

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
nextcloud-libraries · Apr 10, 2019 · 091b4c8 · 091b4c8
1 parent ed01249
commit 091b4c8
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 11 deletions.
diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue
@@ -29,39 +29,47 @@
 				<div class="app-sidebar-header__figure" :style="{
 					backgroundImage: `url(${background})`
 				}">
-					<slot class="app-sidebar-header__background" name="header" />
+					<slot class="app-sidebar-header__background" name="header-background" />
 				</div>
-				<div class="app-sidebar-header__desc">
+				<div :class="{ 'app-sidebar-header__desc--with-star': canStar }" class="app-sidebar-header__desc">
+					<!-- favourite icon -->
+					<a v-if="canStar" :class="isStarred ? 'icon-starred' : 'icon-star'"
+						class="app-sidebar-header__star" @click.prevent="toggleStarred" />
+					<!-- main title -->
 					<h3 class="app-sidebar-header__title">
 						{{ title }}
 					</h3>
+					<!-- secondary title -->
 					<h4 class="app-sidebar-header__subtitle">
 						{{ subtitle }}
 					</h4>
+					<!-- header main menu -->
 					<action v-if="actions.length > 0" class="app-sidebar-header__menu" :actions="actions" />
 				</div>
 				<div v-if="$slots['primary-action'] || $slots['secondary-action']" class="app-sidebar-header__primary-actions">
 					<slot class="app-sidebar-header__primary-action" name="primary-action" />
 					<slot class="app-sidebar-header__secondary-action" name="secondary-action" />
 				</div>
 			</header>
+			<!-- tabs navigation -->
 			<nav class="app-sidebar-tabs__nav">
 				<ul>
 					<li v-for="tab in tabs" :key="tab.id" class="app-sidebar-tabs__tab">
 						<a :href="`#${tab.id}`"
 							:class="[tab.icon, { active: activeTab === tab.id }]"
 							:data-id="tab.id"
 							:aria-selected="activeTab === tab.id"
-							:aria-controls="`${tab.id}-tab`"
+							:aria-controls="tab.id"
 							@click="setActive">
 							{{ tab.name }}
 						</a>
 					</li>
 				</ul>
 			</nav>
-			<section class="app-sidebar-tabs__content">
+			<!-- tabs content -->
+			<div class="app-sidebar-tabs__content">
 				<slot :active-tab="activeTab" />
-			</section>
+			</div>
 		</aside>
 	</transition>
 </template>
@@ -95,20 +103,35 @@ export default {
 		background: {
 			type: String,
 			default: ''
+		},
+		starred: {
+			type: Boolean,
+			default: null
 		}
 	},
 	data() {
 		return {
 			tabs: [],
-			activeTab: ''
+			activeTab: '',
+			isStarred: this.starred
+		}
+	},
+	computed: {
+		canStar() {
+			return this.isStarred !== null
 		}
 	},
 	watch: {
+		// update local value if parent changes
 		active: function(active) {
 			// prevent running it twice
 			if (active !== this.activeTab) {
 				this.updateActive()
 			}
+		},
+		// update local value if parent changes
+		starred: function() {
+			this.isStarred = this.starred
 		}
 	},
 	mounted() {
@@ -142,6 +165,10 @@ export default {
 				: this.tabs
 					? this.tabs[0].id
 					: ''
+		},
+		toggleStarred() {
+			this.isStarred = !this.isStarred
+			this.$emit('update:starred', this.isStarred)
 		}
 	}
 }
@@ -199,23 +226,38 @@ $sidebar-max-width: 500px;
 		}
 		&__desc {
 			position: relative;
-			padding-left: 10px;
+			padding: 10px 44px 10px 10px;
+			&--with-star {
+				padding: 10px 44px;
+			}
 			h3, h4 {
-				width: calc(100% - 44px);
+				width: 100%;
 				white-space: nowrap;
 				text-overflow: ellipsis;
 				overflow: hidden;
 				margin: 0;
 			}
 			h3 {
 				font-size: 16px;
-				padding: 10px 0;
+				padding: 0;
+				+ h4 {
+					padding-top: 10px;
+				}
 			}
 			h4 {
 				font-size: 14px;
-				padding-bottom: 5px;
+				padding: 0;
 				opacity: .7;
 			}
+			.app-sidebar-header__star {
+				display: block;
+				width: 44px;
+				height: 44px;
+				padding: 14px;
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
 			.app-sidebar-header__menu {
 				position: absolute;
 				right: 0;
@@ -267,6 +309,9 @@ $sidebar-max-width: 500px;
 		&__content {
 			position: relative;
 			margin: 10px;
+			> :not(section) {
+				display: none;
+			}
 		}
 	}
 }

diff --git a/src/components/AppSidebarTab/AppSidebarTab.vue b/src/components/AppSidebarTab/AppSidebarTab.vue
@@ -46,7 +46,7 @@ export default {
 	},
 	computed: {
 		id() {
-			return this.name.toLowerCase().replace(/ /g, '-')
+			return 'tab-' + this.name.toLowerCase().replace(/ /g, '-')
 		},
 		isActive() {
 			return this.$parent.activeTab === this.id