Merge master and resolve conflicts.

dreammall-earth · Jun 28, 2024 · 4d084b9 · 4d084b9
2 parents 2efe23d + 7aff150
commit 4d084b9
Show file tree

Hide file tree

Showing 24 changed files with 511 additions and 4,541 deletions.
diff --git 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/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<IconAliases> = {
   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
diff --git a/frontend/src/assets/scss/dark.module.scss b/frontend/src/assets/scss/dark.module.scss
@@ -7,12 +7,13 @@ $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%);
 $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
@@ -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/BottomMenu.vue b/frontend/src/components/menu/BottomMenu.vue
@@ -9,12 +9,10 @@
   <div
     class="bottom-menu d-flex w-100 position-fixed bottom-0 justify-space-around align-center py-2 bg-surface d-md-none d-lg-none"
   >
-    <MessageIndicator :number-of-messages="3" />
-    <NewsIndicator :has-news="true" />
-    <CreateButtonMobile />
-    <Circle @click="toggleDrawer">
+    <Circle @click="toggleDrawer" class="camera-button">
       <v-icon icon="$camera"></v-icon>
     </Circle>
+    <CreateButtonMobile />
     <UserInfo />
   </div>
 </template>
@@ -26,8 +24,6 @@ import CreateButtonMobile from '#components/buttons/CreateButtonMobile.vue'
 import ListWithNavigationDrawer from '#components/vuetify/Organisms/ListWithNavigationDrawer.vue'
 
 import Circle from './CircleElement.vue'
-import MessageIndicator from './MessageIndicator.vue'
-import NewsIndicator from './NewsIndicator.vue'
 import UserInfo from './UserInfo.vue'
 
 const drawer = ref(false)

diff --git a/frontend/src/components/menu/MessageIndicator.test.ts 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<typeof Wrapper>
+
+  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
@@ -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<typeof Wrapper>
+
+  beforeEach(() => {
+    wrapper = Wrapper()
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('renders', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})
diff --git a/frontend/src/components/menu/TopMenu.vue b/frontend/src/components/menu/TopMenu.vue
@@ -3,7 +3,9 @@
     <v-app-bar flat class="app-bar" height="70px">
       <v-row class="ma-1">
         <v-col class="d-none d-md-flex align-center">
-          <MessageIndicator :number-of-messages="3" />
+          <a href="/" class="logo">
+            <LogoImage size="small" />
+          </a>
         </v-col>
         <v-col class="d-flex align-center justify-center">
           <TabControl />
@@ -17,7 +19,6 @@
               <Circle @click="toggleDrawer">
                 <v-icon icon="$camera"></v-icon>
               </Circle>
-              <NewsIndicator :has-news="true" class="ml-2" />
               <UserInfo class="ml-2" />
             </v-col>
           </v-row>
@@ -31,14 +32,13 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-import LightDarkSwitch from '#components/menu/LightDarkSwitch.vue'
-import MessageIndicator from '#components/menu/MessageIndicator.vue'
-import NewsIndicator from '#components/menu/NewsIndicator.vue'
-import TabControl from '#components/menu/TabControl.vue'
-import UserInfo from '#components/menu/UserInfo.vue'
 import ListWithNavigationDrawer from '#components/vuetify/Organisms/ListWithNavigationDrawer.vue'
 
 import Circle from './CircleElement.vue'
+import LightDarkSwitch from './LightDarkSwitch.vue'
+import LogoImage from './LogoImage.vue'
+import TabControl from './TabControl.vue'
+import UserInfo from './UserInfo.vue'
 
 const drawer = ref(false)
 const toggleDrawer = () => {
@@ -57,6 +57,10 @@ const location = ref<'bottom' | 'right' | 'left' | 'end' | 'top' | 'start'>('rig
   background: transparent !important;
 }
 
+.logo {
+  width: 140px;
+}
+
 .top-menu {
   position: sticky;
   top: 0;

diff --git a/frontend/src/components/menu/UserDropdown.vue b/frontend/src/components/menu/UserDropdown.vue
@@ -1,23 +1,21 @@
 <template>
-  <MainButton class="sign-out mr-4" variant="third" label="Sign Out" size="auto" @click="signOut"
-    >{{ $t('buttons.signout') }}
-  </MainButton>
-  <MainButton
-    v-if="auth.isAdmin"
-    class="admin-button mr-4"
-    variant="third"
-    label="To Admin"
-    size="auto"
-    @click="enterAdmin"
-  >
-    {{ $t('buttons.toAdmin') }}
-  </MainButton>
+  <ul class="dropdown border-sm pa-3 pb-2 my-2 bg-dropdown-background">
+    <li>
+      <button class="sign-out" @click="signOut">
+        <v-icon icon="$logout"></v-icon>{{ $t('buttons.signout') }}
+      </button>
+    </li>
+    <li v-if="auth.isAdmin">
+      <button class="admin-button" @click="enterAdmin">
+        <v-icon icon="$logout"></v-icon>{{ $t('buttons.toAdmin') }}
+      </button>
+    </li>
+  </ul>
 </template>
 
 <script lang="ts" setup>
 import { inject } from 'vue'
 
-import MainButton from '#components/buttons/MainButton.vue'
 import GlobalErrorHandler from '#plugins/globalErrorHandler'
 import { AUTH } from '#src/env'
 import AuthService from '#src/services/AuthService'
@@ -39,3 +37,26 @@ const enterAdmin = async () => {
   window.location.href = AUTH.ADMIN_REDIRECT_URI
 }
 </script>
+
+<style scoped lang="scss">
+.dropdown {
+  font-size: 14px;
+  list-style: none;
+  border-radius: 20px;
+}
+
+.dropdown li {
+  padding: 5px;
+}
+
+.dropdown button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.dropdown button i {
+  margin-top: -2px;
+  margin-right: 8px;
+}
+</style>
diff --git a/frontend/src/components/menu/UserInfo.vue b/frontend/src/components/menu/UserInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-menu>
+  <v-menu v-model="isOpen">
     <template #activator="{ props }">
       <button
         v-bind="props"
@@ -11,7 +11,12 @@
           <span v-else>{{ initals?.toUpperCase() }}</span>
         </v-avatar>
         <div class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100">
-          <v-icon icon="$ellipsis" data-test="user-dropdown"></v-icon>
+          <v-icon
+            icon="$ellipsis"
+            data-test="user-dropdown"
+            class="ellipsis-icon"
+            :class="isOpen && 'rotated'"
+          ></v-icon>
         </div>
       </button>
     </template>
@@ -20,6 +25,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
+
 import { useAuthStore } from '#stores/authStore'
 
 import UserDropdown from './UserDropdown.vue'
@@ -32,6 +39,8 @@ const initals = name
   .map((n) => n.charAt(0))
   .join('')
 const userImage = authStore.user?.profile.picture
+
+const isOpen = ref(false)
 </script>
 
 <style scoped lang="scss">
@@ -50,7 +59,17 @@ 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);
 }
+
+.ellipsis-icon {
+  transition: transform 0.3s;
+}
+
+.rotated {
+  transform: rotate(90deg);
+}
 </style>
-m