From f5789768ed4dd2c1b432a2bd0d85bf27046097a6 Mon Sep 17 00:00:00 2001 From: Maximilian Harz Date: Tue, 18 Jun 2024 17:54:27 +0200 Subject: [PATCH 01/14] Remove MessageIndicator from TopMenu and put the logo instead --- frontend/src/components/menu/TopMenu.vue | 10 ++++++++-- frontend/src/layouts/DefaultLayout.vue | 12 ------------ 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/menu/TopMenu.vue b/frontend/src/components/menu/TopMenu.vue index a30bf3ccb6..4acd434f7a 100644 --- a/frontend/src/components/menu/TopMenu.vue +++ b/frontend/src/components/menu/TopMenu.vue @@ -3,7 +3,9 @@ - + @@ -30,7 +32,7 @@ From e3d9d0061041e21daac71ee8b6792f52962bea0e Mon Sep 17 00:00:00 2001 From: Maximilian Harz Date: Thu, 20 Jun 2024 23:40:37 +0200 Subject: [PATCH 03/14] Adapt border opacity in dark mode --- frontend/src/assets/scss/dark.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/assets/scss/dark.module.scss b/frontend/src/assets/scss/dark.module.scss index 599cb3c90a..05eaa133c3 100644 --- a/frontend/src/assets/scss/dark.module.scss +++ b/frontend/src/assets/scss/dark.module.scss @@ -7,7 +7,7 @@ $info-color: #2196f3; $success-color: #4caf50; $warning-color: #ffeb3b; $border-color: #d6dfe9; -$border-opacity: 0.1; +$border-opacity: 0.4; $font-color: #222; $icon-color: #F5F5F5; $icon-background: rgb(61 71 83 / 85%); From a99f5021b2460af5265f8e8832ceb4cd2adca38d Mon Sep 17 00:00:00 2001 From: Maximilian Harz Date: Thu, 20 Jun 2024 23:40:54 +0200 Subject: [PATCH 04/14] Fix UserInfo spacings --- frontend/src/components/menu/UserInfo.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/src/components/menu/UserInfo.vue b/frontend/src/components/menu/UserInfo.vue index 6047afb18e..b5a453282a 100644 --- a/frontend/src/components/menu/UserInfo.vue +++ b/frontend/src/components/menu/UserInfo.vue @@ -50,6 +50,9 @@ const userImage = authStore.user?.profile.picture } .avatar { + width: calc(var(--menu-icon-height) - 6px) !important; + height: calc(var(--menu-icon-height) - 6px) !important; + margin: 3px !important; border-color: rgb(var(--v-theme-border) 0.8); } From 628804de4a251755531067b15227566c7b4669d1 Mon Sep 17 00:00:00 2001 From: Maximilian Harz Date: Sun, 23 Jun 2024 19:28:29 +0200 Subject: [PATCH 05/14] Remove messages and news from BottomMenu --- frontend/src/components/menu/BottomMenu.vue | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/frontend/src/components/menu/BottomMenu.vue b/frontend/src/components/menu/BottomMenu.vue index e40243062e..b449801740 100644 --- a/frontend/src/components/menu/BottomMenu.vue +++ b/frontend/src/components/menu/BottomMenu.vue @@ -2,12 +2,10 @@
- - - +
@@ -16,8 +14,6 @@ import CreateButtonMobile from '#components/buttons/CreateButtonMobile.vue' import Circle from './CircleElement.vue' -import MessageIndicator from './MessageIndicator.vue' -import NewsIndicator from './NewsIndicator.vue' import UserInfo from './UserInfo.vue' From 1d7109915fa28afba61ab2877b5f5724b9d36c56 Mon Sep 17 00:00:00 2001 From: Maximilian Harz Date: Sun, 23 Jun 2024 19:29:17 +0200 Subject: [PATCH 06/14] Add tests for MessageIndicator and NewsIndicator so they remain tested; update snapshots --- .../components/menu/MessageIndicator.test.ts | 31 +++ .../src/components/menu/NewsIndicator.test.ts | 24 ++ .../__snapshots__/BottomMenu.test.ts.snap | 116 ++------ .../MessageIndicator.test.ts.snap | 40 +++ .../__snapshots__/NewsIndicator.test.ts.snap | 40 +++ .../menu/__snapshots__/TopMenu.test.ts.snap | 103 +++---- .../__snapshots__/DefaultLayout.test.ts.snap | 262 ++++-------------- .../auth/__snapshots__/Page.test.ts.snap | 262 ++++-------------- .../index/__snapshots__/Page.test.ts.snap | 262 ++++-------------- .../join-room/__snapshots__/Page.test.ts.snap | 262 ++++-------------- .../room/__snapshots__/Page.test.ts.snap | 262 ++++-------------- .../__snapshots__/Page.test.ts.snap | 262 ++++-------------- 12 files changed, 520 insertions(+), 1406 deletions(-) create mode 100644 frontend/src/components/menu/MessageIndicator.test.ts create mode 100644 frontend/src/components/menu/NewsIndicator.test.ts create mode 100644 frontend/src/components/menu/__snapshots__/MessageIndicator.test.ts.snap create mode 100644 frontend/src/components/menu/__snapshots__/NewsIndicator.test.ts.snap diff --git a/frontend/src/components/menu/MessageIndicator.test.ts b/frontend/src/components/menu/MessageIndicator.test.ts new file mode 100644 index 0000000000..c50b5e3511 --- /dev/null +++ b/frontend/src/components/menu/MessageIndicator.test.ts @@ -0,0 +1,31 @@ +import { mount } from '@vue/test-utils' +import { describe, it, expect, beforeEach, afterEach } from 'vitest' + +import MessageIndicator from './MessageIndicator.vue' + +describe('LogoImage', () => { + const Wrapper = () => { + return mount(MessageIndicator) + } + + let wrapper: ReturnType + + beforeEach(() => { + wrapper = Wrapper() + }) + + afterEach(() => { + wrapper.unmount() + }) + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot() + }) + + it('displays the number of messages', async () => { + await wrapper.setProps({ numberOfMessages: 1 }) + expect(wrapper.text()).toContain('1') + await wrapper.setProps({ numberOfMessages: 5 }) + expect(wrapper.text()).toContain('5') + }) +}) diff --git a/frontend/src/components/menu/NewsIndicator.test.ts b/frontend/src/components/menu/NewsIndicator.test.ts new file mode 100644 index 0000000000..ceca37748c --- /dev/null +++ b/frontend/src/components/menu/NewsIndicator.test.ts @@ -0,0 +1,24 @@ +import { mount } from '@vue/test-utils' +import { describe, it, expect, beforeEach, afterEach } from 'vitest' + +import NewsIndicator from './NewsIndicator.vue' + +describe('LogoImage', () => { + const Wrapper = () => { + return mount(NewsIndicator) + } + + let wrapper: ReturnType + + beforeEach(() => { + wrapper = Wrapper() + }) + + afterEach(() => { + wrapper.unmount() + }) + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap index 861a22836c..fd345851ae 100644 --- a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap +++ b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap @@ -13,80 +13,30 @@ exports[`BottomMenu > renders BottomMenu 1`] = ` data-v-96a196cc="" >
-
- - - -
-
- 3 -
-
-
- -
+ + + +
renders BottomMenu 1`] = `
-
- - - -
diff --git a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap index fd345851ae..acd0e7febf 100644 --- a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap +++ b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap @@ -564,7 +564,7 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
renders 1`] = `
renders 1`] = `
renders 1`] = `
renders 1`] = `
signin callback without error > renders 1`] = `
signin callback without error > renders 1`] = `
without apollo error > renders 1`] = `
without apollo error > renders 1`] = `
renders 1`] = `
renders 1`] = `
without apollo error > renders 1`] = `
without apollo error > renders 1`] = `
auth service with succes > renders 1`] = `
auth service with succes > renders 1`] = `
Date: Wed, 26 Jun 2024 19:48:00 +0200 Subject: [PATCH 08/14] Turn ellipsis when dropdown is open --- frontend/src/components/menu/UserInfo.vue | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/menu/UserInfo.vue b/frontend/src/components/menu/UserInfo.vue index 6047afb18e..97a7fc8803 100644 --- a/frontend/src/components/menu/UserInfo.vue +++ b/frontend/src/components/menu/UserInfo.vue @@ -1,5 +1,5 @@ m From 734387e137290a510925c170d92a5527eb692a39 Mon Sep 17 00:00:00 2001 From: Maximilian Harz Date: Wed, 26 Jun 2024 20:12:47 +0200 Subject: [PATCH 09/14] Add logout item --- frontend/src/assets/icons/index.ts | 2 ++ frontend/src/assets/icons/logout.svg | 3 +++ 2 files changed, 5 insertions(+) create mode 100644 frontend/src/assets/icons/logout.svg diff --git a/frontend/src/assets/icons/index.ts b/frontend/src/assets/icons/index.ts index 6ce054e21d..ad2dcfd3b5 100644 --- a/frontend/src/assets/icons/index.ts +++ b/frontend/src/assets/icons/index.ts @@ -2,6 +2,7 @@ import Bell from './bell.svg?component' import Camera from './camera.svg?component' import Cockpit from './cockpit.svg?component' import Ellipsis from './ellipsis.svg?component' +import Logout from './logout.svg?component' import Mall from './mall.svg?component' import Message from './message.svg?component' import WorldCafe from './worldCafe.svg?component' @@ -13,6 +14,7 @@ const aliases: Partial = { camera: Camera, cockpit: Cockpit, ellipsis: Ellipsis, + logout: Logout, mall: Mall, message: Message, 'world-cafe': WorldCafe, diff --git a/frontend/src/assets/icons/logout.svg b/frontend/src/assets/icons/logout.svg new file mode 100644 index 0000000000..c6e2b6d625 --- /dev/null +++ b/frontend/src/assets/icons/logout.svg @@ -0,0 +1,3 @@ + + + From 19938e7df33579d6969805022ac9f3e1bd473d10 Mon Sep 17 00:00:00 2001 From: Maximilian Harz Date: Wed, 26 Jun 2024 20:13:14 +0200 Subject: [PATCH 10/14] Adapt UserDropdown to Figma (WIP) --- frontend/src/components/menu/UserDropdown.vue | 38 ++++++++++++------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/menu/UserDropdown.vue b/frontend/src/components/menu/UserDropdown.vue index 916d61533e..8e1f1e673a 100644 --- a/frontend/src/components/menu/UserDropdown.vue +++ b/frontend/src/components/menu/UserDropdown.vue @@ -1,23 +1,19 @@ + + From f882101ea63b17f90f3bbd41f0e9a7b52771ea51 Mon Sep 17 00:00:00 2001 From: Maximilian Harz Date: Thu, 27 Jun 2024 18:41:31 +0200 Subject: [PATCH 11/14] Add theme colors for dropdown, adjust spacing and wording --- frontend/renderer/plugins/vuetify.ts | 1 + frontend/src/assets/scss/dark.module.scss | 2 ++ frontend/src/assets/scss/light.module.scss | 2 ++ frontend/src/components/menu/UserDropdown.vue | 27 ++++++++++++------- frontend/src/locales/de.json | 2 +- 5 files changed, 24 insertions(+), 10 deletions(-) diff --git a/frontend/renderer/plugins/vuetify.ts b/frontend/renderer/plugins/vuetify.ts index d248b1e7f9..3e40499981 100644 --- a/frontend/renderer/plugins/vuetify.ts +++ b/frontend/renderer/plugins/vuetify.ts @@ -25,6 +25,7 @@ function makeThemeFromCssModule(theme: CSSModuleClasses, isDark: boolean): Theme error: theme.errorColor, font: theme.fontColor, icon: theme.iconColor, + 'dropdown-background': theme.dropdownBackgroundColor, }, variables: { 'border-color': theme.borderColor, diff --git a/frontend/src/assets/scss/dark.module.scss b/frontend/src/assets/scss/dark.module.scss index 599cb3c90a..88eef30776 100644 --- a/frontend/src/assets/scss/dark.module.scss +++ b/frontend/src/assets/scss/dark.module.scss @@ -13,6 +13,7 @@ $icon-color: #F5F5F5; $icon-background: rgb(61 71 83 / 85%); $bottom-menu-background: rgb(78 91 107 / 60%); $sidebar-background: rgb(61 71 83 / 60%); +$dropdown-background-color: #3D4753; :export { backgroundColor: $background-color; @@ -30,4 +31,5 @@ $sidebar-background: rgb(61 71 83 / 60%); iconBackground: $icon-background; bottomMenuBackground: $bottom-menu-background; sidebarBackground: $sidebar-background; + dropdownBackgroundColor: $dropdown-background-color; } diff --git a/frontend/src/assets/scss/light.module.scss b/frontend/src/assets/scss/light.module.scss index f936a033b3..9097074397 100644 --- a/frontend/src/assets/scss/light.module.scss +++ b/frontend/src/assets/scss/light.module.scss @@ -13,6 +13,7 @@ $icon-color: #3D4753; $icon-background: rgb(255 255 255); $bottom-menu-background: rgb(225 230 237 / 60%); $sidebar-background: rgb(225 230 237); +$dropdown-background-color: #fff; :export { backgroundColor: $background-color; @@ -30,5 +31,6 @@ $sidebar-background: rgb(225 230 237); iconBackground: $icon-background; bottomMenuBackground: $bottom-menu-background; sidebarBackground: $sidebar-background; + dropdownBackgroundColor: $dropdown-background-color; } diff --git a/frontend/src/components/menu/UserDropdown.vue b/frontend/src/components/menu/UserDropdown.vue index 8e1f1e673a..be96173561 100644 --- a/frontend/src/components/menu/UserDropdown.vue +++ b/frontend/src/components/menu/UserDropdown.vue @@ -1,11 +1,11 @@