From 4ae6049d823b672cce15d36613a4b46df5d9e5e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?= =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?= =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?= Date: Mon, 16 Dec 2024 10:31:55 +0100 Subject: [PATCH] feat(editor): Use a single SVG for logo and favicon (no-changelog) (#11811) --- cypress/e2e/18-user-management.cy.ts | 15 --- packages/design-system/src/css/_tokens.scss | 1 + packages/editor-ui/package.json | 1 + .../public/static/logo/channel/beta-dark.svg | 1 - .../public/static/logo/channel/beta.svg | 1 - .../public/static/logo/channel/dev-dark.svg | 1 - .../public/static/logo/channel/dev.svg | 1 - .../static/logo/channel/nightly-dark.svg | 1 - .../public/static/logo/channel/nightly.svg | 1 - .../public/static/logo/collapsed.svg | 1 - .../public/static/logo/expanded-dark.svg | 1 - .../editor-ui/public/static/logo/expanded.svg | 1 - packages/editor-ui/src/components/Logo.vue | 22 ---- .../editor-ui/src/components/Logo/Logo.vue | 119 ++++++++++++++++++ .../components/Logo/__tests__/Logo.test.ts | 38 ++++++ .../__tests__/__snapshots__/Logo.test.ts.snap | 49 ++++++++ .../src/components/Logo/logo-icon.svg | 3 + .../src/components/Logo/logo-text.svg | 6 + .../editor-ui/src/components/MainSidebar.vue | 19 ++- packages/editor-ui/src/stores/ui.store.ts | 9 -- packages/editor-ui/src/views/AuthView.vue | 16 ++- packages/editor-ui/src/views/MfaView.vue | 17 ++- packages/editor-ui/vite.config.mts | 2 + pnpm-lock.yaml | 76 +++++++++++ 24 files changed, 317 insertions(+), 85 deletions(-) delete mode 100644 packages/editor-ui/public/static/logo/channel/beta-dark.svg delete mode 100644 packages/editor-ui/public/static/logo/channel/beta.svg delete mode 100644 packages/editor-ui/public/static/logo/channel/dev-dark.svg delete mode 100644 packages/editor-ui/public/static/logo/channel/dev.svg delete mode 100644 packages/editor-ui/public/static/logo/channel/nightly-dark.svg delete mode 100644 packages/editor-ui/public/static/logo/channel/nightly.svg delete mode 100644 packages/editor-ui/public/static/logo/collapsed.svg delete mode 100644 packages/editor-ui/public/static/logo/expanded-dark.svg delete mode 100644 packages/editor-ui/public/static/logo/expanded.svg delete mode 100644 packages/editor-ui/src/components/Logo.vue create mode 100644 packages/editor-ui/src/components/Logo/Logo.vue create mode 100644 packages/editor-ui/src/components/Logo/__tests__/Logo.test.ts create mode 100644 packages/editor-ui/src/components/Logo/__tests__/__snapshots__/Logo.test.ts.snap create mode 100644 packages/editor-ui/src/components/Logo/logo-icon.svg create mode 100644 packages/editor-ui/src/components/Logo/logo-text.svg diff --git a/cypress/e2e/18-user-management.cy.ts b/cypress/e2e/18-user-management.cy.ts index fe91a72935..d4eb5841cf 100644 --- a/cypress/e2e/18-user-management.cy.ts +++ b/cypress/e2e/18-user-management.cy.ts @@ -148,24 +148,9 @@ describe('User Management', { disableAutoLogin: true }, () => { personalSettingsPage.actions.changeTheme('Dark'); cy.get('body').should('have.attr', 'data-theme', 'dark'); - settingsSidebar.actions.back(); - mainSidebar.getters - .logo() - .should('have.attr', 'src') - .then((src) => { - expect(src).to.include('/static/logo/channel/dev-dark.svg'); - }); - cy.visit(personalSettingsPage.url); personalSettingsPage.actions.changeTheme('Light'); cy.get('body').should('have.attr', 'data-theme', 'light'); - settingsSidebar.actions.back(); - mainSidebar.getters - .logo() - .should('have.attr', 'src') - .then((src) => { - expect(src).to.include('/static/logo/channel/dev.svg'); - }); }); it('should delete user and their data', () => { diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss index 87951534ee..b8f3049cf2 100644 --- a/packages/design-system/src/css/_tokens.scss +++ b/packages/design-system/src/css/_tokens.scss @@ -588,6 +588,7 @@ --border-width-base: 1px; --border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base); + --font-size-4xs: 0.5rem; --font-size-3xs: 0.625rem; --font-size-2xs: 0.75rem; --font-size-xs: 0.8125rem; diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json index 3d3c6fd25c..3cf113d98f 100644 --- a/packages/editor-ui/package.json +++ b/packages/editor-ui/package.json @@ -103,6 +103,7 @@ "unplugin-icons": "^0.19.0", "unplugin-vue-components": "^0.27.2", "vite": "catalog:frontend", + "vite-svg-loader": "5.1.0", "vitest": "catalog:frontend", "vitest-mock-extended": "catalog:frontend", "vue-tsc": "catalog:frontend" diff --git a/packages/editor-ui/public/static/logo/channel/beta-dark.svg b/packages/editor-ui/public/static/logo/channel/beta-dark.svg deleted file mode 100644 index 7253fbe02b..0000000000 --- a/packages/editor-ui/public/static/logo/channel/beta-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/editor-ui/public/static/logo/channel/beta.svg b/packages/editor-ui/public/static/logo/channel/beta.svg deleted file mode 100644 index d4fb970c62..0000000000 --- a/packages/editor-ui/public/static/logo/channel/beta.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/editor-ui/public/static/logo/channel/dev-dark.svg b/packages/editor-ui/public/static/logo/channel/dev-dark.svg deleted file mode 100644 index 23c8b05711..0000000000 --- a/packages/editor-ui/public/static/logo/channel/dev-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/editor-ui/public/static/logo/channel/dev.svg b/packages/editor-ui/public/static/logo/channel/dev.svg deleted file mode 100644 index f8f2b2d437..0000000000 --- a/packages/editor-ui/public/static/logo/channel/dev.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/editor-ui/public/static/logo/channel/nightly-dark.svg b/packages/editor-ui/public/static/logo/channel/nightly-dark.svg deleted file mode 100644 index a1b5661dcb..0000000000 --- a/packages/editor-ui/public/static/logo/channel/nightly-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/editor-ui/public/static/logo/channel/nightly.svg b/packages/editor-ui/public/static/logo/channel/nightly.svg deleted file mode 100644 index bb4746df56..0000000000 --- a/packages/editor-ui/public/static/logo/channel/nightly.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/editor-ui/public/static/logo/collapsed.svg b/packages/editor-ui/public/static/logo/collapsed.svg deleted file mode 100644 index f65407694a..0000000000 --- a/packages/editor-ui/public/static/logo/collapsed.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/editor-ui/public/static/logo/expanded-dark.svg b/packages/editor-ui/public/static/logo/expanded-dark.svg deleted file mode 100644 index d9a71faffe..0000000000 --- a/packages/editor-ui/public/static/logo/expanded-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/editor-ui/public/static/logo/expanded.svg b/packages/editor-ui/public/static/logo/expanded.svg deleted file mode 100644 index 337b52be1c..0000000000 --- a/packages/editor-ui/public/static/logo/expanded.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/editor-ui/src/components/Logo.vue b/packages/editor-ui/src/components/Logo.vue deleted file mode 100644 index 4909c77de7..0000000000 --- a/packages/editor-ui/src/components/Logo.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - - - diff --git a/packages/editor-ui/src/components/Logo/Logo.vue b/packages/editor-ui/src/components/Logo/Logo.vue new file mode 100644 index 0000000000..f10c168e28 --- /dev/null +++ b/packages/editor-ui/src/components/Logo/Logo.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/packages/editor-ui/src/components/Logo/__tests__/Logo.test.ts b/packages/editor-ui/src/components/Logo/__tests__/Logo.test.ts new file mode 100644 index 0000000000..49b8d1a22f --- /dev/null +++ b/packages/editor-ui/src/components/Logo/__tests__/Logo.test.ts @@ -0,0 +1,38 @@ +import { createComponentRenderer } from '@/__tests__/render'; +import Logo from '../Logo.vue'; + +vi.stubGlobal('URL', { + createObjectURL: vi.fn(), +}); + +describe('Logo', () => { + const renderComponent = createComponentRenderer(Logo); + + it('renders the logo for authView location', () => { + const wrapper = renderComponent({ + props: { location: 'authView', releaseChannel: 'stable' }, + }); + expect(wrapper.html()).toMatchSnapshot(); + }); + + it('renders the logo for sidebar location when sidebar is expanded', () => { + const wrapper = renderComponent({ + props: { location: 'sidebar', collapsed: false, releaseChannel: 'stable' }, + }); + expect(wrapper.html()).toMatchSnapshot(); + }); + + it('renders the logo for sidebar location when sidebar is collapsed', () => { + const wrapper = renderComponent({ + props: { location: 'sidebar', collapsed: true, releaseChannel: 'stable' }, + }); + 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(); + }); +}); diff --git a/packages/editor-ui/src/components/Logo/__tests__/__snapshots__/Logo.test.ts.snap b/packages/editor-ui/src/components/Logo/__tests__/__snapshots__/Logo.test.ts.snap new file mode 100644 index 0000000000..5947e5d0a5 --- /dev/null +++ b/packages/editor-ui/src/components/Logo/__tests__/__snapshots__/Logo.test.ts.snap @@ -0,0 +1,49 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Logo > renders the logo for authView location 1`] = ` +"
+ + + + + + +
" +`; + +exports[`Logo > renders the logo for sidebar location when sidebar is collapsed 1`] = ` +"
+ + +
" +`; + +exports[`Logo > renders the logo for sidebar location when sidebar is expanded 1`] = ` +"
+ + + + + + +
" +`; + +exports[`Logo > renders the releaseChannelTag for non-stable releaseChannel 1`] = ` +"
+ + + + + +
dev
+
" +`; diff --git a/packages/editor-ui/src/components/Logo/logo-icon.svg b/packages/editor-ui/src/components/Logo/logo-icon.svg new file mode 100644 index 0000000000..90a0081f12 --- /dev/null +++ b/packages/editor-ui/src/components/Logo/logo-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/editor-ui/src/components/Logo/logo-text.svg b/packages/editor-ui/src/components/Logo/logo-text.svg new file mode 100644 index 0000000000..6b8c963894 --- /dev/null +++ b/packages/editor-ui/src/components/Logo/logo-text.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue index 5847722fe5..40ace711e1 100644 --- a/packages/editor-ui/src/components/MainSidebar.vue +++ b/packages/editor-ui/src/components/MainSidebar.vue @@ -25,6 +25,7 @@ import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper import { useGlobalEntityCreation } from '@/composables/useGlobalEntityCreation'; import { N8nNavigationDropdown } from 'n8n-design-system'; import { onClickOutside, type VueInstance } from '@vueuse/core'; +import Logo from './Logo/Logo.vue'; const becomeTemplateCreatorStore = useBecomeTemplateCreatorStore(); const cloudPlanStore = useCloudPlanStore(); @@ -165,10 +166,6 @@ const createBtn = ref>(); const isCollapsed = computed(() => uiStore.sidebarMenuCollapsed); -const logoPath = computed( - () => basePath.value + (isCollapsed.value ? 'static/logo/collapsed.svg' : uiStore.logo), -); - const hasVersionUpdates = computed( () => settingsStore.settings.releaseChannel === 'stable' && versionsStore.hasVersionUpdates, ); @@ -321,7 +318,11 @@ onClickOutside(createBtn as Ref, () => {
- n8n + , () => { &.sideMenuCollapsed { width: $sidebar-width; - padding-top: 90px; + padding-top: 100px; .logo { flex-direction: column; - gap: 16px; - } - - .logo img { - left: 0; + gap: 12px; } } } diff --git a/packages/editor-ui/src/stores/ui.store.ts b/packages/editor-ui/src/stores/ui.store.ts index abd463d57e..3ed595261c 100644 --- a/packages/editor-ui/src/stores/ui.store.ts +++ b/packages/editor-ui/src/stores/ui.store.ts @@ -188,14 +188,6 @@ export const useUIStore = defineStore(STORES.UI, () => { return theme.value === 'system' ? getPreferredTheme() : theme.value; }); - const logo = computed(() => { - const { releaseChannel } = settingsStore.settings; - const suffix = appliedTheme.value === 'dark' ? '-dark.svg' : '.svg'; - return `static/logo/${ - releaseChannel === 'stable' ? 'expanded' : `channel/${releaseChannel}` - }${suffix}`; - }); - const contextBasedTranslationKeys = computed(() => { const deploymentType = settingsStore.deploymentType; @@ -563,7 +555,6 @@ export const useUIStore = defineStore(STORES.UI, () => { return { appGridWidth, appliedTheme, - logo, contextBasedTranslationKeys, getLastSelectedNode, isVersionsOpen, diff --git a/packages/editor-ui/src/views/AuthView.vue b/packages/editor-ui/src/views/AuthView.vue index 1bc9267c8c..426fac0345 100644 --- a/packages/editor-ui/src/views/AuthView.vue +++ b/packages/editor-ui/src/views/AuthView.vue @@ -1,6 +1,8 @@