mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -08:00
Code Issues Actions 1 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> <template>
<div :class="$style.tabs"> <div :class="$style.container">
<div v-for="option in options" :key="option.value" :class="{ [$style.alignRight]: option.align === 'right' }"> <div :class="$style.back" v-if="scrollPosition > 0" @click="scrollLeft"><</div>
<a <div :class="$style.next" v-if="canScrollRight" @click="scrollRight">></div>
v-if="option.href" <div ref="tabs" :class="$style.tabs">
target="_blank" <div v-for="option in options" :key="option.value" :class="{ [$style.alignRight]: option.align === 'right' }">
:href="option.href" <a
:class="[$style.link, $style.tab]" v-if="option.href"
@click="handleTabClick" target="_blank"
> :href="option.href"
<div> :class="[$style.link, $style.tab]"
{{ option.label }} @click="handleTabClick"
<span :class="$style.external"><n8n-icon icon="external-link-alt" size="small" /></span> >
</div> <div>
</a> {{ option.label }}
<span :class="$style.external"><n8n-icon icon="external-link-alt" size="small" /></span>
</div>
</a>
<div <div
v-else v-else
:class="{ [$style.tab]: true, [$style.activeTab]: value === option.value }" :class="{ [$style.tab]: true, [$style.activeTab]: value === option.value }"
@click="() => handleTabClick(option.value)" @click="() => handleTabClick(option.value)"
> >
<n8n-icon v-if="option.icon" :icon="option.icon" size="small" /> <n8n-icon v-if="option.icon" :icon="option.icon" size="small" />
<span v-if="option.label">{{ option.label }}</span> <span v-if="option.label">{{ option.label }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -35,6 +39,27 @@ export default Vue.extend({
components: { components: {
N8nIcon, 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: { props: {
value: { value: {
}, },
@ -45,17 +70,47 @@ export default Vue.extend({
handleTabClick(tab: string) { handleTabClick(tab: string) {
this.$emit('input', tab); 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> </script>
<style lang="scss" module> <style lang="scss" module>
.container {
position: relative;
height: 24px;
min-height: 24px;
width: 100%;
}
.tabs { .tabs {
color: var(--color-text-base); color: var(--color-text-base);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
display: flex; display: flex;
width: 100%; 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 { .tab {
@ -96,4 +151,27 @@ export default Vue.extend({
display: none; 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> </style>