Skip to content

Commit

Permalink
refactor(frontend): refactor tables drawer and activate search (#1389)
Browse files Browse the repository at this point in the history 
* Refactor TablesDrawer

* Close menu when opening a room from the list

* Add apollo to story

* Add missing translations

* Rename OpenTable to TableList; add tests (WIP)

* Update snapshots

* Fix test
  • Loading branch information
@Bettelstab
Bettelstab authored Jul 11, 2024
1 parent 32fd96e commit bcde6d3
Show file tree
Hide file tree
Showing 26 changed files with 1,998 additions and 444 deletions.
27 changes: 4 additions & 23 deletions frontend/src/components/menu/BottomMenu.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
<template>
<div class="navigation-drawer-box d-md-none position-fixed mb-5 pb-5">
<ListWithNavigationDrawer
:drawer="drawer"
:location="location"
@update:drawer="updateDrawer($event)"
/>
<TablesDrawer v-model="isTablesDrawerVisible" location="bottom" />
</div>
<div
class="bottom-menu d-flex w-100 position-fixed bottom-0 justify-space-around align-center py-2 bg-surface d-md-none"
Expand All @@ -20,23 +16,16 @@
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import CreateButtonMobile from '#components/buttons/CreateButtonMobile.vue'
import ListWithNavigationDrawer from '#components/vuetify/Organisms/ListWithNavigationDrawer.vue'
import TablesDrawer from '#components/tablesDrawer/TablesDrawer.vue'
import Circle from './CircleElement.vue'
import UserInfo from './UserInfo.vue'
const drawer = ref(false)
const location = ref<'bottom' | 'right' | 'left' | 'end' | 'top' | 'start'>('bottom')
const isTablesDrawerVisible = defineModel<boolean>()
const toggleDrawer = () => {
drawer.value = !drawer.value
}
const updateDrawer = (value: boolean) => {
drawer.value = value
isTablesDrawerVisible.value = !isTablesDrawerVisible.value
}
</script>

Expand All @@ -62,12 +51,4 @@ const updateDrawer = (value: boolean) => {
.navigation-drawer-box {
bottom: 65px;
}
.v-navigation-drawer {
scrollbar-width: thin;
}
.v-navigation-drawer__content {
scrollbar-width: thin;
}
</style>
15 changes: 5 additions & 10 deletions frontend/src/components/menu/TopMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,28 +28,23 @@
</v-row>
</v-app-bar>
</div>
<ListWithNavigationDrawer :drawer="drawer" :location="location" @update:drawer="updateDrawer" />
<TablesDrawer v-model="isTablesDrawerVisible" location="right" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import LightDarkSwitch from '#components/menu/LightDarkSwitch.vue'
import LogoImage from '#components/menu/LogoImage.vue'
import TabControl from '#components/menu/TabControl.vue'
import UserInfo from '#components/menu/UserInfo.vue'
import ListWithNavigationDrawer from '#components/vuetify/Organisms/ListWithNavigationDrawer.vue'
import TablesDrawer from '#components/tablesDrawer/TablesDrawer.vue'
import Circle from './CircleElement.vue'
const drawer = ref(false)
const isTablesDrawerVisible = defineModel<boolean>()
const toggleDrawer = () => {
drawer.value = !drawer.value
}
const updateDrawer = (value: boolean) => {
drawer.value = value
isTablesDrawerVisible.value = !isTablesDrawerVisible.value
}
const location = ref<'bottom' | 'right' | 'left' | 'end' | 'top' | 'start'>('right')
</script>

<style scoped lang="scss">
Expand Down
184 changes: 166 additions & 18 deletions frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
>
<nav
class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer-top"
data-v-3308ee86=""
class="v-navigation-drawer v-navigation-drawer--bottom v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer"
data-v-cf2c9067=""
style="bottom: 0px; z-index: 1004; transform: translateY(110%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
>
<!---->
Expand All @@ -25,30 +25,178 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
class="v-navigation-drawer__content"
>
<!--
&lt;SearchField
v-model="search"
label="Open Tables, Jobs"
prepend-inner-icon="mdi-tune"
&gt;&lt;/SearchField&gt;
-->
<div
class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field mx-4 mt-4 search"
data-v-cf2c9067=""
>
<!---->
<div
class="v-input__control"
>
<div
class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-solo v-theme--light v-field--rounded v-locale--is-ltr"
>
<div
class="v-field__overlay"
/>
<div
class="v-field__loader"
>
<div
aria-hidden="true"
aria-valuemax="100"
aria-valuemin="0"
class="v-progress-linear v-theme--light v-locale--is-ltr"
role="progressbar"
style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
>
<!---->
<div
class="v-progress-linear__background"
style="width: 100%;"
/>
<transition-stub
appear="false"
css="true"
name="fade-transition"
persisted="false"
>
<div
class="v-progress-linear__indeterminate"
>
<div
class="v-progress-linear__indeterminate long"
/>
<div
class="v-progress-linear__indeterminate short"
/>
</div>
</transition-stub>
<!---->
</div>
</div>
<div
class="v-field__prepend-inner"
>
<i
aria-hidden="true"
class="mdi-tune mdi v-icon notranslate v-theme--light v-icon--size-default"
/>
<!---->
</div>
<div
class="v-field__field"
data-no-activator=""
>
<label
aria-hidden="true"
class="v-label v-field-label v-field-label--floating"
for="input-1"
>
<!---->
$t('tablesDrawer.searchPlaceholder')
</label>
<label
class="v-label v-field-label"
for="input-1"
>
<!---->
$t('tablesDrawer.searchPlaceholder')
</label>
<!---->
<input
aria-describedby="input-1-messages"
class="v-field__input"
id="input-1"
size="1"
type="text"
/>
<!---->
</div>
<transition-stub
appear="false"
css="true"
name="expand-x-transition"
persisted="false"
>
<div
class="v-field__clearable"
style="display: none;"
>
<i
aria-hidden="false"
aria-label="$vuetify.input.clear"
class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable"
role="button"
tabindex="0"
/>
</div>
</transition-stub>
<div
class="v-field__append-inner"
>
<!---->
<!---->
</div>
<div
class="v-field__outline"
>
<!---->
<!---->
</div>
</div>
</div>
<!---->
<div
class="v-input__details"
>
<transition-group-stub
appear="false"
aria-live="polite"
class="v-messages"
css="true"
id="input-1-messages"
name="slide-y-transition"
persisted="false"
role="alert"
tag="div"
>
<!---->
</transition-group-stub>
<!---->
</div>
</div>
<div
class="v-list v-theme--light bg-transparent v-list--density-default v-list--one-line"
data-v-3308ee86=""
data-v-cf2c9067=""
role="listbox"
tabindex="0"
>
<div
<h2
class="mx-4"
data-v-3308ee86=""
data-v-cf2c9067=""
>
$t('menu.roomList')
</div>
$t('tablesDrawer.header')
</h2>
<div
class="v-card v-theme--light v-card--density-default v-card--variant-elevated mx-auto"
data-v-3308ee86=""
data-v-fd6c8fbc=""
data-v-cf2c9067=""
data-v-de37061b=""
style="width: 400px;"
>
<!---->
Expand Down Expand Up @@ -95,7 +243,7 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
<div
class="v-list v-theme--light bg-transparent v-list--density-default v-list--two-line"
data-v-fd6c8fbc=""
data-v-de37061b=""
role="listbox"
tabindex="0"
>
Expand Down Expand Up @@ -665,7 +813,7 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
<button
aria-expanded="false"
aria-haspopup="menu"
aria-owns="v-menu-1"
aria-owns="v-menu-3"
class="user-info rounded-pill d-flex flex-row text-icon border-sm align-center justify-center"
data-v-607bdd70=""
targetref="[object Object]"
Expand Down
Loading

0 comments on commit bcde6d3

Please sign in to comment.