fix: try out modal wrap for some popovers on mobile

Signed-off-by: Alexander Trost <[email protected]>
fivenet-app · Aug 20, 2024 · 38acc37 · 38acc37
1 parent 193c761
commit 38acc37
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 16 deletions.
diff --git a/app/components/UserDropdown.vue b/app/components/UserDropdown.vue
@@ -78,27 +78,36 @@ const { game } = useAppConfig();
 const name = computed(() =>
     activeChar.value ? `${activeChar.value?.firstname} ${activeChar.value?.lastname}` : (username.value ?? t('common.na')),
 );
+
+const open = ref(false);
 </script>
 
 <template>
     <UDropdown
+        v-model:open="open"
         :items="items"
         :ui="{ width: 'w-full', item: { disabled: 'cursor-text select-text' } }"
         :popper="{ strategy: 'absolute', placement: 'top' }"
         class="w-full"
         mode="hover"
     >
-        <template #default="{ open }">
-            <UButton color="gray" variant="ghost" class="w-full" :label="name" :class="[open && 'bg-gray-50 dark:bg-gray-800']">
-                <template #leading>
-                    <UAvatar :src="activeChar?.avatar?.url" :alt="$t('common.avatar')" :text="getInitials(name)" size="2xs" />
-                </template>
+        <UButton
+            color="gray"
+            variant="ghost"
+            class="w-full"
+            :label="name"
+            :class="[open && 'bg-gray-50 dark:bg-gray-800']"
+            @click="open = !open"
+            @touchstart.passive="open = !open"
+        >
+            <template #leading>
+                <UAvatar :src="activeChar?.avatar?.url" :alt="$t('common.avatar')" :text="getInitials(name)" size="2xs" />
+            </template>
 
-                <template #trailing>
-                    <UIcon name="i-mdi-ellipsis-vertical" class="ml-auto size-5" />
-                </template>
-            </UButton>
-        </template>
+            <template #trailing>
+                <UIcon name="i-mdi-ellipsis-vertical" class="ml-auto size-5" />
+            </template>
+        </UButton>
 
         <template #account>
             <div class="truncate text-left">

diff --git a/app/components/partials/ColorPicker.vue b/app/components/partials/ColorPicker.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
 import { ColorPicker } from 'vue3-colorpicker';
 import 'vue3-colorpicker/style.css';
 
@@ -24,10 +25,64 @@ const color = computed({
         emit('close');
     },
 });
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+
+const smallerBreakpoint = breakpoints.smaller('sm');
+
+const open = ref(false);
 </script>
 
 <template>
-    <UPopover :popper="{ placement: 'bottom-start' }">
+    <template v-if="smallerBreakpoint">
+        <UButton
+            variant="outline"
+            color="white"
+            :disabled="disabled"
+            block
+            :icon="!hideIcon ? 'i-mdi-palette' : ''"
+            :label="!hideIcon ? '' : '&nbsp;'"
+            :style="{ backgroundColor: color }"
+            :class="$attrs.class"
+            @click="open = true"
+            @touchstart="open = true"
+        />
+
+        <UModal v-model="open">
+            <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+                <template #header>
+                    <div class="flex items-center justify-between">
+                        <h3 class="text-2xl font-semibold leading-6">
+                            {{ $t('common.color') }}
+                        </h3>
+
+                        <UButton color="gray" variant="ghost" icon="i-mdi-window-close" class="-my-1" @click="open = false" />
+                    </div>
+                </template>
+
+                <div class="flex flex-1 items-center">
+                    <div class="mx-auto">
+                        <ColorPicker
+                            v-model:pureColor="color"
+                            is-widget
+                            format="hex"
+                            picker-type="chrome"
+                            disable-alpha
+                            disable-history
+                        />
+                    </div>
+                </div>
+
+                <template #footer>
+                    <UButton color="black" block class="flex-1" @click="open = false">
+                        {{ $t('common.close', 1) }}
+                    </UButton>
+                </template>
+            </UCard>
+        </UModal>
+    </template>
+
+    <UPopover v-else v-model:open="open" :popper="{ placement: 'bottom-start' }">
         <UButton
             variant="outline"
             color="white"
@@ -37,6 +92,7 @@ const color = computed({
             :label="!hideIcon ? '' : '&nbsp;'"
             :style="{ backgroundColor: color }"
             :class="$attrs.class"
+            @touchstart="open = true"
         />
 
         <template #panel>

diff --git a/app/components/partials/DatePickerPopover.client.vue b/app/components/partials/DatePickerPopover.client.vue
@@ -1,7 +1,12 @@
 <script lang="ts" setup>
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
 import { format } from 'date-fns';
 import DatePickerClient from './DatePicker.client.vue';
 
+defineOptions({
+    inheritAttrs: false,
+});
+
 const props = defineProps<{
     modelValue?: Date | undefined;
     popover?: any;
@@ -15,15 +20,52 @@ const emit = defineEmits<{
 
 const date = useVModel(props, 'modelValue', emit);
 
-const open = ref(false);
+const breakpoints = useBreakpoints(breakpointsTailwind);
 
-defineOptions({
-    inheritAttrs: false,
-});
+const smallerBreakpoint = breakpoints.smaller('sm');
+
+const open = ref(false);
 </script>
 
 <template>
-    <UPopover v-bind="props.popover" v-model:open="open">
+    <template v-if="smallerBreakpoint">
+        <UButton
+            v-bind="button"
+            variant="outline"
+            color="gray"
+            block
+            icon="i-mdi-calendar-month"
+            :label="modelValue ? format(modelValue, 'dd.MM.yyyy') : 'dd.mm.yyyy'"
+            @click="open = true"
+            @touchstart="open = true"
+        />
+
+        <UModal v-model="open">
+            <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+                <template #header>
+                    <div class="flex items-center justify-between">
+                        <h3 class="text-2xl font-semibold leading-6">
+                            {{ $t('common.date') }}
+                        </h3>
+
+                        <UButton color="gray" variant="ghost" icon="i-mdi-window-close" class="-my-1" @click="open = false" />
+                    </div>
+                </template>
+
+                <div class="flex flex-1 items-center">
+                    <DatePickerClient v-bind="datePicker" v-model="date" class="mx-auto" @close="open = false" />
+                </div>
+
+                <template #footer>
+                    <UButton color="black" block class="flex-1" @click="open = false">
+                        {{ $t('common.close', 1) }}
+                    </UButton>
+                </template>
+            </UCard>
+        </UModal>
+    </template>
+
+    <UPopover v-else v-bind="props.popover" v-model:open="open">
         <UButton
             v-bind="button"
             variant="outline"