feat: show full-screen dialogs in small screen

Signed-off-by: Pedro Lamas <[email protected]>

src/components/ui/AppDialog.vue

@@ -3,6 +3,8 @@
     v-model="open"
     :scrollable="scrollable"
     v-bind="$attrs"
+    :fullscreen="isMobileViewport"
+    :transition="isMobileViewport ? 'dialog-bottom-transition' : undefined"
   >
     <v-form
       ref="form"
@@ -24,6 +26,19 @@
           <slot name="title">
             <span class="focus--text">{{ title }}</span>
           </slot>
+
+          <v-spacer />
+
+          <v-btn
+            fab
+            text
+            x-small
+            @click="open = false"
+          >
+            <v-icon>
+              $close
+            </v-icon>
+          </v-btn>
         </v-card-title>
 
         <v-card-subtitle
@@ -71,11 +86,12 @@
 </template>
 
 <script lang="ts">
+import BrowserMixin from '@/mixins/browser'
 import type { VForm } from '@/types'
-import { Component, Vue, Prop, VModel, Ref, PropSync } from 'vue-property-decorator'
+import { Component, Prop, VModel, Ref, PropSync, Mixins } from 'vue-property-decorator'
 
 @Component({})
-export default class AppDialog extends Vue {
+export default class AppDialog extends Mixins(BrowserMixin) {
   @VModel({ type: Boolean })
     open?: boolean
 

src/components/widgets/filesystem/FileSystemToolbar.vue

@@ -140,7 +140,7 @@
       v-if="roots && roots.length > 1"
       #extension
     >
-      <v-tabs>
+      <v-tabs show-arrows>
         <v-tab
           v-for="(root, index) in roots"
           :key="index"