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

fix(editor): Fix logo alignment issues (#13870)

Browse Source
This commit is contained in:
कारतोफ्फेलस्क्रिप्ट™
2025-03-13 11:14:30 +01:00
committed by GitHub
parent dd4f51cff5
commit d2e4706b97
4 changed files with 8 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/frontend/editor-ui/src/components/Logo/Logo.vue
View File

@@ -22,12 +22,6 @@ const props = defineProps<
const { location, releaseChannel } = props;
const showReleaseChannelTag = computed(() => {
if (releaseChannel === 'stable') return false;
if (location === 'authView') return true;
return !props.collapsed;
});
const showLogoText = computed(() => {
if (location === 'authView') return true;
return !props.collapsed;
@@ -65,7 +59,6 @@ onMounted(() => {
<div :class="containerClasses" data-test-id="n8n-logo">
<LogoIcon ref="logo" :class="$style.logo" />
<LogoText v-if="showLogoText" :class="$style.logoText" />
<div v-if="showReleaseChannelTag" :class="$style.releaseChannelTag">{{ releaseChannel }}</div>
<slot />
</div>
</template>
@@ -84,19 +77,6 @@ onMounted(() => {
}
}
.releaseChannelTag {
color: var(--color-text-dark);
padding: var(--spacing-5xs) var(--spacing-4xs);
background-color: var(--color-background-base);
border: 1px solid var(--color-foreground-base);
border-radius: var(--border-radius-base);
font-size: var(--font-size-3xs);
font-weight: var(--font-weight-bold);
text-transform: capitalize;
line-height: var(--font-line-height-regular);
margin: 8px 0 0 3px;
}
.authView {
transform: scale(2);
margin-bottom: var(--spacing-xl);
@@ -104,7 +84,7 @@ onMounted(() => {
.logo,
.logoText {
transform: scale(1.3);
transform: scale(1.3) translateY(-2px);
}
.logoText {
@@ -113,7 +93,7 @@ onMounted(() => {
}
.sidebarExpanded .logo {
margin-left: var(--spacing-3xs);
margin-left: var(--spacing-2xs);
}
.sidebarCollapsed .logo {

7
packages/frontend/editor-ui/src/components/Logo/__tests__/Logo.test.ts
View File

@@ -28,11 +28,4 @@ describe('Logo', () => {
});
expect(wrapper.html()).toMatchSnapshot();
});
it('renders the releaseChannelTag for non-stable releaseChannel', async () => {
const wrapper = renderComponent({
props: { location: 'authView', releaseChannel: 'dev' },
});
expect(wrapper.html()).toMatchSnapshot();
});
});

28
packages/frontend/editor-ui/src/components/Logo/__tests__/__snapshots__/Logo.test.ts.snap
View File

@@ -1,49 +1,31 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Logo > renders the logo for authView location 1`] = `
"<div class="logoContainer authView" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="logo">
"<div class="logoContainer authView" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="30" class="logo">
<path fill="#EA4B71" fill-rule="evenodd" d="M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"></path>
</svg><svg width="26" height="30" class="logoText">
<g fill="#101330">
<path fill-rule="evenodd" d="M15.002 16.918v-.076c.558-.28 1.116-.762 1.116-1.716 0-1.372-1.13-2.198-2.69-2.198-1.598 0-2.74.877-2.74 2.224 0 .915.533 1.41 1.116 1.69v.076a2.16 2.16 0 0 0-1.42 2.059c0 1.385 1.141 2.351 3.032 2.351 1.89 0 2.994-.966 2.994-2.351a2.16 2.16 0 0 0-1.408-2.059m-1.587-2.82c.635 0 1.104.406 1.104 1.092s-.482 1.093-1.103 1.093c-.622 0-1.142-.407-1.142-1.093 0-.699.495-1.093 1.142-1.093m0 6.01c-.735 0-1.332-.47-1.332-1.27 0-.725.495-1.272 1.32-1.272.812 0 1.307.534 1.307 1.297 0 .775-.571 1.245-1.294 1.245" clip-rule="evenodd"></path>
<path d="M18.367 21.2h1.624v-3.442c0-1.131.685-1.627 1.46-1.627.76 0 1.357.509 1.357 1.55v3.52h1.624V17.35c0-1.664-.964-2.63-2.474-2.63-.952 0-1.485.381-1.865.877h-.102l-.14-.75h-1.484zm-14.376 0H2.367v-6.352h1.485l.14.75h.1c.381-.496.914-.877 1.866-.877 1.51 0 2.474.966 2.474 2.63v3.85H6.808V17.68c0-1.041-.596-1.55-1.358-1.55-.774 0-1.459.496-1.459 1.627z"></path>
</g>
</svg>
<!--v-if-->
</div>"
</svg></div>"
`;
exports[`Logo > renders the logo for sidebar location when sidebar is collapsed 1`] = `
"<div class="logoContainer sidebar sidebarCollapsed" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="logo">
"<div class="logoContainer sidebar sidebarCollapsed" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="30" class="logo">
<path fill="#EA4B71" fill-rule="evenodd" d="M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"></path>
</svg>
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Logo > renders the logo for sidebar location when sidebar is expanded 1`] = `
"<div class="logoContainer sidebar sidebarExpanded" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="logo">
"<div class="logoContainer sidebar sidebarExpanded" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="30" class="logo">
<path fill="#EA4B71" fill-rule="evenodd" d="M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"></path>
</svg><svg width="26" height="30" class="logoText">
<g fill="#101330">
<path fill-rule="evenodd" d="M15.002 16.918v-.076c.558-.28 1.116-.762 1.116-1.716 0-1.372-1.13-2.198-2.69-2.198-1.598 0-2.74.877-2.74 2.224 0 .915.533 1.41 1.116 1.69v.076a2.16 2.16 0 0 0-1.42 2.059c0 1.385 1.141 2.351 3.032 2.351 1.89 0 2.994-.966 2.994-2.351a2.16 2.16 0 0 0-1.408-2.059m-1.587-2.82c.635 0 1.104.406 1.104 1.092s-.482 1.093-1.103 1.093c-.622 0-1.142-.407-1.142-1.093 0-.699.495-1.093 1.142-1.093m0 6.01c-.735 0-1.332-.47-1.332-1.27 0-.725.495-1.272 1.32-1.272.812 0 1.307.534 1.307 1.297 0 .775-.571 1.245-1.294 1.245" clip-rule="evenodd"></path>
<path d="M18.367 21.2h1.624v-3.442c0-1.131.685-1.627 1.46-1.627.76 0 1.357.509 1.357 1.55v3.52h1.624V17.35c0-1.664-.964-2.63-2.474-2.63-.952 0-1.485.381-1.865.877h-.102l-.14-.75h-1.484zm-14.376 0H2.367v-6.352h1.485l.14.75h.1c.381-.496.914-.877 1.866-.877 1.51 0 2.474.966 2.474 2.63v3.85H6.808V17.68c0-1.041-.596-1.55-1.358-1.55-.774 0-1.459.496-1.459 1.627z"></path>
</g>
</svg>
<!--v-if-->
</div>"
`;
exports[`Logo > renders the releaseChannelTag for non-stable releaseChannel 1`] = `
"<div class="logoContainer authView" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="logo">
<path fill="#838383" fill-rule="evenodd" d="M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"></path>
</svg><svg width="26" height="30" class="logoText">
<g fill="#101330">
<path fill-rule="evenodd" d="M15.002 16.918v-.076c.558-.28 1.116-.762 1.116-1.716 0-1.372-1.13-2.198-2.69-2.198-1.598 0-2.74.877-2.74 2.224 0 .915.533 1.41 1.116 1.69v.076a2.16 2.16 0 0 0-1.42 2.059c0 1.385 1.141 2.351 3.032 2.351 1.89 0 2.994-.966 2.994-2.351a2.16 2.16 0 0 0-1.408-2.059m-1.587-2.82c.635 0 1.104.406 1.104 1.092s-.482 1.093-1.103 1.093c-.622 0-1.142-.407-1.142-1.093 0-.699.495-1.093 1.142-1.093m0 6.01c-.735 0-1.332-.47-1.332-1.27 0-.725.495-1.272 1.32-1.272.812 0 1.307.534 1.307 1.297 0 .775-.571 1.245-1.294 1.245" clip-rule="evenodd"></path>
<path d="M18.367 21.2h1.624v-3.442c0-1.131.685-1.627 1.46-1.627.76 0 1.357.509 1.357 1.55v3.52h1.624V17.35c0-1.664-.964-2.63-2.474-2.63-.952 0-1.485.381-1.865.877h-.102l-.14-.75h-1.484zm-14.376 0H2.367v-6.352h1.485l.14.75h.1c.381-.496.914-.877 1.866-.877 1.51 0 2.474.966 2.474 2.63v3.85H6.808V17.68c0-1.041-.596-1.55-1.358-1.55-.774 0-1.459.496-1.459 1.627z"></path>
</g>
</svg>
<div class="releaseChannelTag">dev</div>
</div>"
</svg></div>"
`;

2
packages/frontend/editor-ui/src/components/Logo/logo-icon.svg
View File

@@ -1,3 +1,3 @@
<svg xmlns='http://www.w3.org/2000/svg' width="30" height="30">
<svg xmlns='http://www.w3.org/2000/svg' width="32" height="30">
<path fill="#EA4B71" fill-rule="evenodd" clip-rule="evenodd" transform="translate(0, 10)" d="M27.2 6.4A3.2 3.2 0 0 1 24.1 4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 8a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 12h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789A1.6 1.6 0 0 0 15.567 8.8h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 8a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79A3.2 3.2 0 0 1 20.433 2.4h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2M12.8 8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 863 B

After

Width:  |  Height:  |  Size: 863 B