Skip to content

Commit

Permalink
Merge branch 'master' into 709-6-Toggle-In-TopMenu
Browse files Browse the repository at this point in the history
  • Loading branch information
ogerly authored Jun 28, 2024
2 parents 55be0ea + 02ec34f commit 26366a5
Show file tree
Hide file tree
Showing 18 changed files with 3,145 additions and 721 deletions.
2 changes: 1 addition & 1 deletion frontend/src/assets/scss/dark.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/components/menu/BottomMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<Circle @click="toggleDrawer">
<v-icon icon="$camera"></v-icon>
</Circle>
<CreateButtonMobile />
<UserInfo />
</div>
</template>
Expand All @@ -34,8 +35,6 @@ import ListElement from '#components/vuetify/Atoms/ListElement.vue'
import { useRoomsStore } from '#stores/roomsStore'
import Circle from './CircleElement.vue'
import MessageIndicator from './MessageIndicator.vue'
import NewsIndicator from './NewsIndicator.vue'
import UserInfo from './UserInfo.vue'
const roomsStore = useRoomsStore()
Expand Down
31 changes: 31 additions & 0 deletions frontend/src/components/menu/MessageIndicator.test.ts
Original file line number Diff line number Diff line change
@@ -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')
})
})
24 changes: 24 additions & 0 deletions frontend/src/components/menu/NewsIndicator.test.ts
Original file line number Diff line number Diff line change
@@ -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()
})
})
9 changes: 7 additions & 2 deletions frontend/src/components/menu/TopMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand All @@ -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>
Expand Down Expand Up @@ -57,6 +58,10 @@ const location = ref<'bottom' | 'right' | 'left' | 'end' | 'top' | 'start'>('rig
background: transparent !important;
}
.logo {
width: 140px;
}
.top-menu {
position: sticky;
top: 0;
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/menu/UserInfo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<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-1 pl-3 w-100">
<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>
</button>
Expand Down Expand Up @@ -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);
}
</style>
Expand Down
92 changes: 21 additions & 71 deletions frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -127,80 +127,30 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
data-v-96a196cc=""
>
<div
class="message-indicator"
data-v-6b63f7d9=""
data-v-96a196cc=""
>
<div
class="circle rounded-circle border-sm text-icon pa-2 d-flex justify-center align-center"
data-v-39e8094e=""
data-v-6b63f7d9=""
>
<i
aria-hidden="true"
class="v-icon notranslate v-theme--light v-icon--size-default"
data-v-6b63f7d9=""
>
<svg
fill="none"
height="20"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.6199 4.28609H16.6675V11.9051C16.6675 12.4289 16.239 12.8575 15.7151 12.8575H4.28657V13.8099C4.28657 14.8575 5.14372 15.7147 6.19134 15.7147H15.7151L19.5247 19.5242V6.19085C19.5247 5.14323 18.6675 4.28609 17.6199 4.28609ZM14.7628 9.04799V2.38132C14.7628 1.33371 13.9056 0.476562 12.858 0.476562H2.38181C1.33419 0.476562 0.477051 1.33371 0.477051 2.38132V14.7623L4.28657 10.9528H12.858C13.9056 10.9528 14.7628 10.0956 14.7628 9.04799Z"
fill="currentColor"
/>
</svg>
</i>
</div>
<div
class="count d-flex justify-center align-center"
data-show-count="true"
data-v-6b63f7d9=""
>
3
</div>
</div>
<div
class="news-indicator"
data-v-5cc937bd=""
class="circle rounded-circle border-sm text-icon pa-2 d-flex justify-center align-center camera-button"
data-v-39e8094e=""
data-v-96a196cc=""
>
<div
class="circle rounded-circle border-sm text-icon pa-2 d-flex justify-center align-center"
data-v-39e8094e=""
data-v-5cc937bd=""
<i
aria-hidden="true"
class="v-icon notranslate v-theme--light v-icon--size-default"
data-v-96a196cc=""
>
<i
aria-hidden="true"
class="v-icon notranslate v-theme--light v-icon--size-default"
data-v-5cc937bd=""
<svg
fill="none"
height="17"
viewBox="0 0 21 17"
width="21"
xmlns="http://www.w3.org/2000/svg"
>
<svg
fill="none"
height="20"
viewBox="0 0 16 20"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.381348 16.7172V14.8088H2.28971V8.12956C2.28971 6.80961 2.68729 5.63676 3.48244 4.61101C4.2776 3.58526 5.31129 2.91336 6.58354 2.5953V1.92737C6.58354 1.52979 6.72269 1.19185 7.00099 0.913549C7.2793 0.635245 7.61724 0.496094 8.01481 0.496094C8.41239 0.496094 8.75033 0.635245 9.02863 0.913549C9.30694 1.19185 9.44609 1.52979 9.44609 1.92737V2.5953C10.7183 2.91336 11.752 3.58526 12.5472 4.61101C13.3423 5.63676 13.7399 6.80961 13.7399 8.12956V14.8088H15.6483V16.7172H0.381348ZM8.01481 19.5798C7.49001 19.5798 7.04075 19.3929 6.66703 19.0192C6.29331 18.6455 6.10645 18.1962 6.10645 17.6714H9.92318C9.92318 18.1962 9.73632 18.6455 9.3626 19.0192C8.98888 19.3929 8.53961 19.5798 8.01481 19.5798ZM4.19808 14.8088H11.8315V8.12956C11.8315 7.07996 11.4578 6.18143 10.7104 5.43399C9.96294 4.68655 9.06441 4.31283 8.01481 4.31283C6.96521 4.31283 6.06669 4.68655 5.31925 5.43399C4.5718 6.18143 4.19808 7.07996 4.19808 8.12956V14.8088Z"
fill="currentColor"
/>
</svg>
</i>
</div>
<div
class="marker d-flex justify-center align-center rounded-circle"
data-show-marker="true"
data-v-5cc937bd=""
/>
<path
d="M7.68844 12.4824H9.66834V9.51172H12.6382V7.53125H9.66834V4.56055H7.68844V7.53125H4.71859V9.51172H7.68844V12.4824ZM2.73869 16.4434C2.19422 16.4434 1.72812 16.2494 1.34038 15.8616C0.952654 15.4738 0.758789 15.0075 0.758789 14.4629V2.58008C0.758789 2.03545 0.952654 1.56921 1.34038 1.18137C1.72812 0.79353 2.19422 0.599609 2.73869 0.599609H14.6181C15.1626 0.599609 15.6287 0.79353 16.0164 1.18137C16.4041 1.56921 16.598 2.03545 16.598 2.58008V7.03613L20.5578 3.0752V13.9678L16.598 10.0068V14.4629C16.598 15.0075 16.4041 15.4738 16.0164 15.8616C15.6287 16.2494 15.1626 16.4434 14.6181 16.4434H2.73869ZM2.73869 14.4629H14.6181V2.58008H2.73869V14.4629Z"
fill="currentColor"
/>
</svg>
</i>
</div>
<div
class="create-button-container"
Expand Down Expand Up @@ -754,7 +704,7 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
</div>
<div
class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
data-v-607bdd70=""
>
<i
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`LogoImage > renders 1`] = `
<div
class="message-indicator"
data-v-6b63f7d9=""
>
<div
class="circle rounded-circle border-sm text-icon pa-2 d-flex justify-center align-center"
data-v-39e8094e=""
data-v-6b63f7d9=""
>
<i
aria-hidden="true"
class="v-icon notranslate v-theme--light v-icon--size-default"
data-v-6b63f7d9=""
>
<svg
fill="none"
height="20"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.6199 4.28609H16.6675V11.9051C16.6675 12.4289 16.239 12.8575 15.7151 12.8575H4.28657V13.8099C4.28657 14.8575 5.14372 15.7147 6.19134 15.7147H15.7151L19.5247 19.5242V6.19085C19.5247 5.14323 18.6675 4.28609 17.6199 4.28609ZM14.7628 9.04799V2.38132C14.7628 1.33371 13.9056 0.476562 12.858 0.476562H2.38181C1.33419 0.476562 0.477051 1.33371 0.477051 2.38132V14.7623L4.28657 10.9528H12.858C13.9056 10.9528 14.7628 10.0956 14.7628 9.04799Z"
fill="currentColor"
/>
</svg>
</i>
</div>
<div
class="count d-flex justify-center align-center"
data-show-count="false"
data-v-6b63f7d9=""
/>
</div>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`LogoImage > renders 1`] = `
<div
class="news-indicator"
data-v-5cc937bd=""
>
<div
class="circle rounded-circle border-sm text-icon pa-2 d-flex justify-center align-center"
data-v-39e8094e=""
data-v-5cc937bd=""
>
<i
aria-hidden="true"
class="v-icon notranslate v-theme--light v-icon--size-default"
data-v-5cc937bd=""
>
<svg
fill="none"
height="20"
viewBox="0 0 16 20"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.381348 16.7172V14.8088H2.28971V8.12956C2.28971 6.80961 2.68729 5.63676 3.48244 4.61101C4.2776 3.58526 5.31129 2.91336 6.58354 2.5953V1.92737C6.58354 1.52979 6.72269 1.19185 7.00099 0.913549C7.2793 0.635245 7.61724 0.496094 8.01481 0.496094C8.41239 0.496094 8.75033 0.635245 9.02863 0.913549C9.30694 1.19185 9.44609 1.52979 9.44609 1.92737V2.5953C10.7183 2.91336 11.752 3.58526 12.5472 4.61101C13.3423 5.63676 13.7399 6.80961 13.7399 8.12956V14.8088H15.6483V16.7172H0.381348ZM8.01481 19.5798C7.49001 19.5798 7.04075 19.3929 6.66703 19.0192C6.29331 18.6455 6.10645 18.1962 6.10645 17.6714H9.92318C9.92318 18.1962 9.73632 18.6455 9.3626 19.0192C8.98888 19.3929 8.53961 19.5798 8.01481 19.5798ZM4.19808 14.8088H11.8315V8.12956C11.8315 7.07996 11.4578 6.18143 10.7104 5.43399C9.96294 4.68655 9.06441 4.31283 8.01481 4.31283C6.96521 4.31283 6.06669 4.68655 5.31925 5.43399C4.5718 6.18143 4.19808 7.07996 4.19808 8.12956V14.8088Z"
fill="currentColor"
/>
</svg>
</i>
</div>
<div
class="marker d-flex justify-center align-center rounded-circle"
data-show-marker="false"
data-v-5cc937bd=""
/>
</div>
`;
Loading

0 comments on commit 26366a5

Please sign in to comment.