From 5393e0e326ce5c8b155a350560a714a810400884 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Mon, 8 Apr 2019 15:02:41 +0200
Subject: [PATCH] Implement sidebar component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/components/AppSidebar/AppSidebar.vue      | 444 +++++++++++++++++-
 .../AppSidebarTab/AppSidebarTab.vue           |  71 +++
 src/components/AppSidebarTab/index.js         |  24 +
 src/components/index.js                       |   2 +
 4 files changed, 517 insertions(+), 24 deletions(-)
 create mode 100644 src/components/AppSidebarTab/AppSidebarTab.vue
 create mode 100644 src/components/AppSidebarTab/index.js

diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue
index cd964bfce4..20e3394253 100644
--- a/src/components/AppSidebar/AppSidebar.vue
+++ b/src/components/AppSidebar/AppSidebar.vue
@@ -1,31 +1,427 @@
 <!--
- - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
- -
- - @author Christoph Wurst <christoph@winzerhof-wurst.at>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
+  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<!-- Follows the tab aria guidelines
+	https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->
 
 <template>
-	<div id="app-sidebar">
-		<slot />
-	</div>
+	<transition name="slide-right">
+		<aside id="app-sidebar">
+			<header class="app-sidebar-header">
+				<!-- close sidebar button -->
+				<a href="#" class="icon-close" :title="t('core', 'close')"
+					@click="closeSidebar" />
+				<!-- sidebar header illustration/figure -->
+				<div v-if="hasFigure" class="app-sidebar-header__figure" :style="{
+					backgroundImage: `url(${background})`
+				}">
+					<slot class="app-sidebar-header__background" name="header" />
+				</div>
+				<!-- sidebar details -->
+				<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['action']" class="app-sidebar-header__action">
+					<slot name="action" />
+				</div>
+			</header>
+			<!-- tabs navigation -->
+			<nav class="app-sidebar-tabs__nav"
+				@keydown.left.exact.prevent="focusPreviousTab"
+				@keydown.right.exact.prevent="focusNextTab"
+				@keydown.tab.exact.prevent="focusActiveTabContent"
+				@keydown.page-up.exact.prevent="focusFirstTab"
+				@keydown.page-down.exact.prevent="focusLastTab">
+				<ul>
+					<li v-for="tab in tabs" :key="tab.id" class="app-sidebar-tabs__tab">
+						<a :id="tab.id"
+							:aria-controls="`tab-${tab.id}`"
+							:aria-selected="activeTab === tab.id"
+							:class="[tab.icon, { active: activeTab === tab.id }]"
+							:data-id="tab.id"
+							:href="`#tab-${tab.id}`"
+							:tabindex="activeTab === tab.id ? null : -1"
+							role="tab"
+							@click.prevent="setActive">
+							{{ tab.name }}
+						</a>
+					</li>
+				</ul>
+			</nav>
+			<!-- tabs content -->
+			<div class="app-sidebar-tabs__content">
+				<slot :active-tab="activeTab" />
+			</div>
+		</aside>
+	</transition>
 </template>
 
 <script>
-export default {}
+import Action from 'Components/Action'
+
+export default {
+	name: 'AppSidebar',
+	components: {
+		Action
+	},
+	props: {
+		actions: {
+			type: Array,
+			default: () => ([])
+		},
+		active: {
+			type: String,
+			default: ''
+		},
+		title: {
+			type: String,
+			default: '',
+			required: true
+		},
+		subtitle: {
+			type: String,
+			default: ''
+		},
+		background: {
+			type: String,
+			default: ''
+		},
+		starred: {
+			type: Boolean,
+			default: null
+		}
+	},
+	data() {
+		return {
+			tabs: [],
+			activeTab: '',
+			isStarred: this.starred
+		}
+	},
+	computed: {
+		canStar() {
+			return this.isStarred !== null
+		},
+		hasFigure() {
+			return this.$slots['header'] || this.background
+		},
+		currentTabIndex() {
+			return this.tabs.findIndex(tab => tab.id === this.activeTab)
+		}
+	},
+	watch: {
+		active: function(active) {
+			// prevent running it twice
+			if (active !== this.activeTab) {
+				this.updateActive()
+			}
+		},
+		starred: function() {
+			this.isStarred = this.starred
+		}
+	},
+	mounted() {
+		// Init tabs from $children
+		this.tabs = this.$children.reduce((tabs, tab) => {
+			if (tab.name && typeof tab.name === 'string'
+				&& tab.id && typeof tab.id === 'string' && tab.id.indexOf(' ') === -1
+				&& tab.icon && typeof tab.icon === 'string' && tab.icon.indexOf(' ') === -1) {
+				tabs.push(tab)
+			}
+			return tabs
+		}, [])
+
+		// init active tab
+		this.updateActive()
+	},
+	methods: {
+		closeSidebar() {
+			this.$emit('close')
+		},
+		setActive({ target }) {
+			const id = target.dataset.id
+			this.activeTab = id
+			this.$emit('update:active', id)
+
+		},
+		focusPreviousTab(e) {
+			if (this.currentTabIndex > 0) {
+				this.activeTab = this.tabs[this.currentTabIndex - 1].id
+				this.$emit('update:active', this.activeTab)
+			}
+			this.focusActiveTab() // focus nav item
+		},
+		focusNextTab(e) {
+			if (this.currentTabIndex < this.tabs.length - 1) {
+				this.activeTab = this.tabs[this.currentTabIndex + 1].id
+				this.$emit('update:active', this.activeTab)
+			}
+			this.focusActiveTab() // focus nav item
+		},
+		focusFirstTab(e) {
+			this.activeTab = this.tabs[0].id
+			this.$emit('update:active', this.activeTab)
+			this.focusActiveTab() // focus nav item
+		},
+		focusLastTab(e) {
+			this.activeTab = this.tabs[this.tabs.length - 1].id
+			this.$emit('update:active', this.activeTab)
+			this.focusActiveTab() // focus nav item
+		},
+		focusActiveTab() {
+			this.$el.querySelector('#' + this.activeTab).focus()
+		},
+		// focus the content on tab
+		// see aria accessibility guidelines
+		focusActiveTabContent() {
+			this.$el.querySelector('#tab-' + this.activeTab).focus()
+		},
+		updateActive() {
+			this.activeTab = this.active
+				&& this.tabs.findIndex(tab => tab.id === this.active) !== -1
+				? this.active
+				: this.tabs
+					? this.tabs[0].id
+					: ''
+		},
+		toggleStarred() {
+			this.isStarred = !this.isStarred
+			this.$emit('update:starred', this.isStarred)
+		}
+	}
+}
 </script>
+<style lang="scss" scoped>
+$header-height: 50px;
+$sidebar-min-width: 300px;
+$sidebar-max-width: 500px;
+
+$desc-menu-right-margin: 22px;
+$desc-vertical-padding: 18px;
+
+/*
+	Sidebar: to be used within #content
+	#app-content will be shrinked properly
+*/
+#app-sidebar {
+	z-index: 1500;
+	height: calc(100vh - #{$header-height});
+	width: 27vw;
+	min-width: $sidebar-min-width;
+	max-width: $sidebar-max-width;
+	top: $header-height;
+	right:0;
+
+	display: flex;
+	flex-shrink: 0;
+	flex-direction: column;
+	position: -webkit-sticky; // Safari support
+	position: sticky;
+
+	overflow-y: auto;
+	overflow-x: hidden;
+
+	background: var(--color-main-background);
+	border-left: 1px solid var(--color-border);
+	.app-sidebar-header {
+		> .icon-close {
+			position: absolute;
+			width: 44px;
+			height: 44px;
+			top: 0;
+			right: 0;
+			opacity: .7;
+			&:hover,
+			&:active,
+			&:focus {
+				opacity: 1;
+			}
+		}
+		&__figure {
+			max-height: 250px;
+			height: 250px;
+			width: 100%;
+			background-size: contain;
+			background-position: center;
+			background-repeat: no-repeat;
+		}
+		&__desc {
+			position: relative;
+			padding: #{$desc-vertical-padding} #{$desc-menu-right-margin * 4} #{$desc-vertical-padding} 10px;
+			&--with-star {
+				padding-left: 44px;
+			}
+			h3, h4 {
+				width: 100%;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				margin: 0;
+			}
+			h3 {
+				font-size: 16px;
+				padding: 0;
+				+ h4 {
+					padding-top: 10px;
+				}
+			}
+			h4 {
+				font-size: 14px;
+				padding: 0;
+				opacity: .7;
+			}
+			.app-sidebar-header__star {
+				display: block;
+				width: 44px;
+				height: 44px;
+				padding: 14px;
+				position: absolute;
+				top: $desc-vertical-padding - 12px; // aligned with main title
+				left: 0;
+			}
+			.app-sidebar-header__menu {
+				position: absolute;
+				// aligned vertically in the middle
+				right: $desc-menu-right-margin;
+				top: 50%;
+				margin-top: -22px;
+				background-color: var(--color-background-dark);
+				border-radius: 44px;
+			}
+		}
+		&__action {
+			display: flex;
+			margin: 10px;
+			max-height: 50px;
+			align-items: center;
+		}
+	}
+	.app-sidebar-tabs {
+		&__nav {
+			margin-top: 10px;
+			ul {
+				display: flex;
+				justify-content: stretch;
+			}
+		}
+		&__tab {
+			display: block;
+			text-align: center;
+			flex: 1 1;
+			a {
+				background-position: center 8px;
+				background-size: 16px;
+				display: block;
+				padding-top: 30px;
+				border-bottom: 1px solid var(--color-main-background);
+				text-align: center;
+				opacity: .7;
+				color: var(--color-main-text);
+				transition: opacity var(--animation-quick), border-color var(--animation-quick);
+				&:hover,
+				&:focus,
+				&:active,
+				&.active {
+					opacity: 1;
+				}
+				&:active,
+				&.active {
+					border-bottom-color: var(--color-main-text);
+				}
+				// differentiate the two for accessibility purpose
+				// make sure the user knows she's focusing the navigation
+				// and can use arrows/home/pageup...
+				&:focus {
+					border-bottom-color: var(--color-primary);
+				}
+			}
+		}
+		&__content {
+			position: relative;
+			flex: 1 1 100%; // take full available height
+			> :not(section) {
+				display: none;
+			}
+		}
+	}
+}
+
+.slide-right-leave-active,
+.slide-right-enter-active {
+	transition-duration: var(--animation-quick);
+	transition-property: max-width, min-width;
+}
+
+.slide-right-enter-to,
+.slide-right-leave {
+	min-width: $sidebar-min-width;
+	max-width: $sidebar-max-width;
+}
+
+.slide-right-enter,
+.slide-right-leave-to {
+	min-width: 0 !important;
+	max-width: 0 !important;
+}
+
+.fade-leave-active,
+.fade-enter-active {
+	transition-duration: var(--animation-quick);
+	transition-property: opacity;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	opacity: 1;
+}
+
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}
+
+</style>
+
+<style lang="scss">
+// ! slots specific designs, cannot be scoped
+// if any button inside the action slot, icrease visual padding
+.app-sidebar-header__action {
+	button, .button,
+	input[type='button'],
+	input[type='submit'],
+	input[type='reset'] {
+		padding: 6px 22px;
+	}
+}
+</style>
diff --git a/src/components/AppSidebarTab/AppSidebarTab.vue b/src/components/AppSidebarTab/AppSidebarTab.vue
new file mode 100644
index 0000000000..cae3c5f304
--- /dev/null
+++ b/src/components/AppSidebarTab/AppSidebarTab.vue
@@ -0,0 +1,71 @@
+<!--
+  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<!-- Follows the tab aria guidelines
+	https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->
+
+<template>
+	<section v-show="isActive"
+		:id="`tab-${id}`"
+		:aria-hidden="!isActive"
+		:aria-labelledby="name"
+		tabindex="0"
+		role="tabpanel">
+		<slot />
+	</section>
+</template>
+
+<script>
+export default {
+	props: {
+		name: {
+			type: String,
+			default: '',
+			required: true
+		},
+		icon: {
+			type: String,
+			default: '',
+			required: true
+		}
+	},
+	computed: {
+		id() {
+			return this.name.toLowerCase().replace(/ /g, '-')
+		},
+		isActive() {
+			return this.$parent.activeTab === this.id
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+section {
+	padding: 10px;
+	min-height: 100%; // fill available height
+	&:focus {
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0.2em var(--color-primary);
+		outline: 0;
+	}
+}
+</style>
diff --git a/src/components/AppSidebarTab/index.js b/src/components/AppSidebarTab/index.js
new file mode 100644
index 0000000000..3def814d37
--- /dev/null
+++ b/src/components/AppSidebarTab/index.js
@@ -0,0 +1,24 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import AppSidebarTab from './AppSidebarTab'
+
+export default AppSidebarTab
+export { AppSidebarTab }
diff --git a/src/components/index.js b/src/components/index.js
index cc2fd64472..c1ab3abc20 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -28,6 +28,7 @@ import AppNavigationNew from './AppNavigationNew'
 import AppNavigationSettings from './AppNavigationSettings'
 import AppNavigationSpacer from './AppNavigationSpacer'
 import AppSidebar from './AppSidebar'
+import AppSidebarTab from './AppSidebarTab'
 import Avatar from './Avatar'
 import Content from './Content'
 import DatetimePicker from './DatetimePicker'
@@ -44,6 +45,7 @@ export {
 	AppNavigationSettings,
 	AppNavigationSpacer,
 	AppSidebar,
+	AppSidebarTab,
 	Avatar,
 	Content,
 	DatetimePicker,