admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 18:41:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): Update Node Details View header tabs structure (#9425)

Browse Source 
Co-authored-by: Elias Meire <elias@meire.dev>
This commit is contained in:
Giulio Andreini
2024-05-17 12:37:34 +02:00
committed by GitHub
parent a7d3e59aef
commit 2782534d78
5 changed files with 232 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/design-system/src/components/N8nTabs/Tabs.vue
View File

@@ -26,9 +26,9 @@
>
<div>
{{ option.label }}
<span :class="$style.external"
><N8nIcon icon="external-link-alt" size="small"
/></span>
<span :class="$style.external">
<N8nIcon icon="external-link-alt" size="xsmall" />
</span>
</div>
</a>
<RouterLink
@@ -45,7 +45,7 @@
:data-test-id="`tab-${option.value}`"
@click="() => handleTabClick(option.value)"
>
<N8nIcon v-if="option.icon" :icon="option.icon" size="medium" />
<N8nIcon v-if="option.icon" :icon="option.icon" size="small" />
<span v-if="option.label">{{ option.label }}</span>
</div>
</n8n-tooltip>
@@ -140,6 +140,7 @@ const scrollRight = () => scroll(50);
color: var(--color-text-base);
font-weight: var(--font-weight-bold);
display: flex;
align-items: center;
width: 100%;
position: absolute;
overflow-x: scroll;
@@ -155,9 +156,10 @@ const scrollRight = () => scroll(50);
}
.tab {
--active-tab-border-width: 2px;
display: block;
padding: 0 var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
padding-bottom: var(--spacing-2xs);
padding: 0 var(--spacing-s);
padding-bottom: calc(var(--spacing-2xs) + var(--active-tab-border-width));
font-size: var(--font-size-s);
cursor: pointer;
white-space: nowrap;
@@ -165,14 +167,19 @@ const scrollRight = () => scroll(50);
&:hover {
color: var(--color-primary);
}
span + span {
margin-left: var(--spacing-4xs);
}
}
.activeTab {
color: var(--color-primary);
border-bottom: var(--color-primary) 2px solid;
padding-bottom: var(--spacing-2xs);
border-bottom: var(--color-primary) var(--active-tab-border-width) solid;
}
.alignRight {
.alignRight:not(.alignRight + .alignRight) {
margin-left: auto;
}
@@ -182,15 +189,12 @@ const scrollRight = () => scroll(50);
&:hover {
color: var(--color-primary);
.external {
display: inline-block;
}
}
}
.external {
display: none;
display: inline-block;
margin-left: var(--spacing-5xs);
}
.button {