resolve conflicts

dreammall-earth · Jun 29, 2024 · 045aefb · 045aefb
2 parents 170b548 + 7aff150
commit 045aefb
Show file tree

Hide file tree

Showing 15 changed files with 88 additions and 41 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
@@ -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
@@ -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
@@ -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"
@@ -10,8 +10,13 @@
           <v-img v-if="userImage" :src="userImage" />
           <span v-else>{{ initals?.toUpperCase() }}</span>
         </v-avatar>
-        <div class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100">
-          <v-icon icon="$ellipsis" data-test="user-dropdown"></v-icon>
+        <div class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100">
+          <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">
@@ -55,5 +64,12 @@ const userImage = authStore.user?.profile.picture
   margin: 3px !important;
   border-color: rgb(var(--v-theme-border) 0.8);
 }
+
+.ellipsis-icon {
+  transition: transform 0.3s;
+}
+
+.rotated {
+  transform: rotate(90deg);
+}
 </style>
-m
diff --git a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
@@ -1257,12 +1257,12 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
           
         </div>
         <div
-          class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+          class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
           data-v-607bdd70=""
         >
           <i
             aria-hidden="true"
-            class="v-icon notranslate v-theme--light v-icon--size-default"
+            class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
             data-test="user-dropdown"
             data-v-607bdd70=""
           >

diff --git a/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
@@ -662,12 +662,12 @@ exports[`TopMenu > renders 1`] = `
                       
                     </div>
                     <div
-                      class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+                      class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
                       data-v-607bdd70=""
                     >
                       <i
                         aria-hidden="true"
-                        class="v-icon notranslate v-theme--light v-icon--size-default"
+                        class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
                         data-test="user-dropdown"
                         data-v-607bdd70=""
                       >

diff --git a/frontend/src/components/menu/__snapshots__/UserInfo.test.ts.snap b/frontend/src/components/menu/__snapshots__/UserInfo.test.ts.snap
@@ -38,12 +38,12 @@ exports[`UserInfo > renders 1`] = `
         
       </div>
       <div
-        class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+        class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
         data-v-607bdd70=""
       >
         <i
           aria-hidden="true"
-          class="v-icon notranslate v-theme--light v-icon--size-default"
+          class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
           data-test="user-dropdown"
           data-v-607bdd70=""
         >

diff --git a/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap b/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
@@ -668,12 +668,12 @@ exports[`DefaultLayout > renders 1`] = `
                         
                       </div>
                       <div
-                        class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+                        class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
                         data-v-607bdd70=""
                       >
                         <i
                           aria-hidden="true"
-                          class="v-icon notranslate v-theme--light v-icon--size-default"
+                          class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
                           data-test="user-dropdown"
                           data-v-607bdd70=""
                         >
@@ -2100,12 +2100,12 @@ exports[`DefaultLayout > renders 1`] = `
             
           </div>
           <div
-            class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+            class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
             data-v-607bdd70=""
           >
             <i
               aria-hidden="true"
-              class="v-icon notranslate v-theme--light v-icon--size-default"
+              class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
               data-test="user-dropdown"
               data-v-607bdd70=""
             >

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -7,7 +7,7 @@
   "buttons": {
     "newProject": "Neues Projekt",
     "newTable": "Neuer Tisch",
-    "signout": "Sign Out",
+    "signout": "Logout",
     "toAdmin": "Zum Admin",
     "toAssistant": "Assistent",
     "toRoom": "Zum Treffen"

diff --git a/frontend/src/pages/index/__snapshots__/Page.test.ts.snap b/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
@@ -668,12 +668,12 @@ exports[`IndexPage > without apollo error > renders 1`] = `
                         
                       </div>
                       <div
-                        class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+                        class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
                         data-v-607bdd70=""
                       >
                         <i
                           aria-hidden="true"
-                          class="v-icon notranslate v-theme--light v-icon--size-default"
+                          class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
                           data-test="user-dropdown"
                           data-v-607bdd70=""
                         >
@@ -2732,12 +2732,12 @@ exports[`IndexPage > without apollo error > renders 1`] = `
             
           </div>
           <div
-            class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+            class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
             data-v-607bdd70=""
           >
             <i
               aria-hidden="true"
-              class="v-icon notranslate v-theme--light v-icon--size-default"
+              class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
               data-test="user-dropdown"
               data-v-607bdd70=""
             >

diff --git a/frontend/src/pages/join-room/__snapshots__/Page.test.ts.snap b/frontend/src/pages/join-room/__snapshots__/Page.test.ts.snap
@@ -668,12 +668,12 @@ exports[`JoinRoomPage > renders 1`] = `
                         
                       </div>
                       <div
-                        class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+                        class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
                         data-v-607bdd70=""
                       >
                         <i
                           aria-hidden="true"
-                          class="v-icon notranslate v-theme--light v-icon--size-default"
+                          class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
                           data-test="user-dropdown"
                           data-v-607bdd70=""
                         >
@@ -2304,12 +2304,12 @@ exports[`JoinRoomPage > renders 1`] = `
             
           </div>
           <div
-            class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+            class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
             data-v-607bdd70=""
           >
             <i
               aria-hidden="true"
-              class="v-icon notranslate v-theme--light v-icon--size-default"
+              class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
               data-test="user-dropdown"
               data-v-607bdd70=""
             >

diff --git a/frontend/src/pages/room/__snapshots__/Page.test.ts.snap b/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
@@ -669,12 +669,12 @@ exports[`Room Page > renders 1`] = `
                         
                       </div>
                       <div
-                        class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+                        class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
                         data-v-607bdd70=""
                       >
                         <i
                           aria-hidden="true"
-                          class="v-icon notranslate v-theme--light v-icon--size-default"
+                          class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
                           data-test="user-dropdown"
                           data-v-607bdd70=""
                         >
@@ -2107,12 +2107,12 @@ exports[`Room Page > renders 1`] = `
             
           </div>
           <div
-            class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+            class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
             data-v-607bdd70=""
           >
             <i
               aria-hidden="true"
-              class="v-icon notranslate v-theme--light v-icon--size-default"
+              class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
               data-test="user-dropdown"
               data-v-607bdd70=""
             >