mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-20 18:49:27 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add scroll buttons

Browse source
This commit is contained in:
Mutasem 2022-03-31 14:06:05 +02:00
parent f951ec08f1
commit 172bb82f30
1 changed files with 99 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
packages/design-system/src/components/N8nTabs/Tabs.vue
View file

@ -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>