From 172bb82f3075b204724f716524a2b3ea5f6375dc Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Thu, 31 Mar 2022 14:06:05 +0200
Subject: [PATCH] add scroll buttons

---
 .../src/components/N8nTabs/Tabs.vue           | 120 +++++++++++++++---
 1 file changed, 99 insertions(+), 21 deletions(-)

diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue
index 67e3c3d9c6..2b13c9b4b1 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/design-system/src/components/N8nTabs/Tabs.vue
@@ -1,26 +1,30 @@
 <template>
-	<div :class="$style.tabs">
-		<div v-for="option in options" :key="option.value" :class="{ [$style.alignRight]: option.align === 'right' }">
-			<a
-				v-if="option.href"
-				target="_blank"
-				:href="option.href"
-				:class="[$style.link, $style.tab]"
-				@click="handleTabClick"
-			>
-				<div>
-					{{ option.label }}
-					<span :class="$style.external"><n8n-icon icon="external-link-alt" size="small" /></span>
-				</div>
-			</a>
+	<div :class="$style.container">
+		<div :class="$style.back" v-if="scrollPosition > 0" @click="scrollLeft"><</div>
+		<div :class="$style.next" v-if="canScrollRight" @click="scrollRight">></div>
+		<div ref="tabs" :class="$style.tabs">
+			<div  v-for="option in options" :key="option.value" :class="{ [$style.alignRight]: option.align === 'right' }">
+				<a
+					v-if="option.href"
+					target="_blank"
+					:href="option.href"
+					:class="[$style.link, $style.tab]"
+					@click="handleTabClick"
+				>
+					<div>
+						{{ option.label }}
+						<span :class="$style.external"><n8n-icon icon="external-link-alt" size="small" /></span>
+					</div>
+				</a>
 
-			<div
-				v-else
-				:class="{ [$style.tab]: true, [$style.activeTab]: value === option.value }"
-				@click="() => handleTabClick(option.value)"
-			>
-				<n8n-icon v-if="option.icon" :icon="option.icon" size="small" />
-				<span v-if="option.label">{{ option.label }}</span>
+				<div
+					v-else
+					:class="{ [$style.tab]: true, [$style.activeTab]: value === option.value }"
+					@click="() => handleTabClick(option.value)"
+				>
+					<n8n-icon v-if="option.icon" :icon="option.icon" size="small" />
+					<span v-if="option.label">{{ option.label }}</span>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -35,6 +39,27 @@ export default Vue.extend({
 	components: {
 		N8nIcon,
 	},
+	mounted() {
+		const container = this.$refs.tabs;
+		if (container) {
+			container.addEventListener('scroll', (e) => {
+				const width = container.clientWidth;
+				const scrollWidth = container.scrollWidth;
+				this.scrollPosition = e.srcElement.scrollLeft;
+				this.canScrollRight = scrollWidth - width > this.scrollPosition;
+			});
+
+			const width = container.clientWidth;
+			const scrollWidth = container.scrollWidth;
+			this.canScrollRight = scrollWidth - width > this.scrollPosition;
+		}
+	},
+	data() {
+		return {
+			scrollPosition: 0,
+			canScrollRight: false,
+		};
+	},
 	props: {
 		value: {
 		},
@@ -45,17 +70,47 @@ export default Vue.extend({
 		handleTabClick(tab: string) {
 			this.$emit('input', tab);
 		},
+		scrollLeft() {
+			this.scroll(-50);
+		},
+		scrollRight() {
+			this.scroll(50);
+		},
+		scroll(left: number) {
+			const container = this.$refs.tabs;
+			if (container) {
+				container.scrollBy({ left, top: 0, behavior: 'smooth' });
+			}
+		},
 	},
 });
 </script>
 
 
 <style lang="scss" module>
+.container {
+	position: relative;
+	height: 24px;
+	min-height: 24px;
+	width: 100%;
+}
+
 .tabs {
 	color: var(--color-text-base);
 	font-weight: var(--font-weight-bold);
 	display: flex;
 	width: 100%;
+	position: absolute;
+	overflow-x: scroll;
+
+	/* Hide scrollbar for Chrome, Safari and Opera */
+	&::-webkit-scrollbar {
+		display: none;
+	}
+
+	/* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
 }
 
 .tab {
@@ -96,4 +151,27 @@ export default Vue.extend({
 	display: none;
 }
 
+.button {
+	position: absolute;
+	background-color: var(--color-background-light);
+	z-index: 1;
+	height: 24px;
+	width: 10px;
+	display: flex;
+	align-items: center;
+	font-weight: var(--font-weight-bold);
+}
+
+.back {
+	composes: tab;
+	composes: button;
+	left: 0;
+}
+
+.next {
+	composes: tab;
+	composes: button;
+	right: 0;
+}
+
 </style>