Merge pull request #3022 from threefoldtech/development_2.6_teleport_…

…modals

Implement Teleport for improved page hierarchy and dialog management

packages/playground/index.html

@@ -46,6 +46,7 @@
       </div>
     </div>
     <div id="app"></div>
+    <div id="modals"></div>
     <script defer type="module" src="/src/main.ts"></script>
     <script src="/loader/loader.js"></script>
   </body>

packages/playground/src/components/TfOfflineNotifier.vue

@@ -1,5 +1,5 @@
 <template>
-  <VDialog scrollable persistent min-width="400px" max-width="700px" :model-value="offline || failed">
+  <VDialog scrollable persistent min-width="400px" max-width="700px" :model-value="offline || failed" attach="#modals">
     <VCard>
       <VCardTitle class="v-card-title font-weight-black text-center text-h5 bg-primary py-3" v-text="title" />
       <VCardText class="text-center">

packages/playground/src/components/app_info.vue

@@ -10,6 +10,7 @@
     @update:model-value="setOpenInfo($event)"
     :width="loading ? 'auto' : '60%'"
     scrollable
+    attach="#modals"
   >
     <v-card v-if="loading" class="d-flex justify-center align-center pa-10">
       <v-progress-circular indeterminate />

packages/playground/src/components/contracts_list/contracts_table.vue

@@ -140,7 +140,7 @@
     </template>
   </weblet-layout>
 
-  <v-dialog width="800" v-model="contractStateDialog">
+  <v-dialog width="800" v-model="contractStateDialog" attach="#modals">
     <v-card>
       <v-toolbar color="primary" class="custom-toolbar">
         <p class="mb-5">Contract lock Details</p>
@@ -197,7 +197,7 @@
     </v-card>
   </v-dialog>
 
-  <v-dialog width="800" v-model="deletingDialog">
+  <v-dialog width="800" v-model="deletingDialog" attach="#modals">
     <v-card>
       <v-card-title class="bg-primary"> Delete the following contracts? </v-card-title>
       <v-alert class="ma-4" type="warning" variant="tonal"
@@ -219,7 +219,7 @@
     </v-card>
   </v-dialog>
 
-  <v-dialog width="800" v-model="unlockDialog">
+  <v-dialog width="800" v-model="unlockDialog" attach="#modals">
     <v-card>
       <v-card-title class="bg-primary">
         Unlock the following Contract<span v-if="selectedContracts.length > 1">s</span>

packages/playground/src/components/deployment_data_dialog.vue

@@ -1,6 +1,6 @@
 <template>
   <v-row justify="center">
-    <v-dialog model-value @update:model-value="$emit('close')" scrollable>
+    <v-dialog model-value @update:model-value="$emit('close')" scrollable attach="#modals">
       <v-card>
         <v-card-title class="d-flex flex-column" v-if="!onlyJson">
           <div class="d-flex justify-center">

packages/playground/src/components/deposit_dialog.vue

@@ -1,6 +1,11 @@
 <template>
   <v-container>
-    <v-dialog transition="dialog-bottom-transition" v-model="depositDialog" @update:model-value="closeDialog">
+    <v-dialog
+      transition="dialog-bottom-transition"
+      v-model="depositDialog"
+      @update:model-value="closeDialog"
+      attach="#modals"
+    >
       <v-card>
         <VCardTitle class="bg-primary">Deposit TFT</VCardTitle>
         <v-card-text>

packages/playground/src/components/k8s_deployment_table.vue

@@ -17,7 +17,7 @@
         </template>
       </v-tooltip>
 
-      <v-dialog transition="dialog-bottom-transition" v-model="showDialog">
+      <v-dialog transition="dialog-bottom-transition" v-model="showDialog" attach="#modals">
         <v-card>
           <v-card-title style="color: #ffcc00; font-weight: bold">Failed Deployments</v-card-title>
           <v-divider color="#FFCC00" />

packages/playground/src/components/logger.vue

@@ -76,7 +76,7 @@
     </v-expansion-panels>
   </VBottomNavigation>
 
-  <v-dialog max-width="400px" v-model="clearDialog">
+  <v-dialog max-width="400px" v-model="clearDialog" attach="#modals">
     <v-card>
       <VCardTitle v-text="'Clear Logs'" />
       <VCardText v-text="'This will delete all of your logs. Be careful this operation is irreversible!'" />

packages/playground/src/components/manage_caprover_worker_dialog.vue

@@ -41,7 +41,7 @@
     </template>
   </ManageWorkerDialog>
 
-  <v-dialog v-if="caproverData" v-model="deployedDialog" scrollable width="500px">
+  <v-dialog v-if="caproverData" v-model="deployedDialog" scrollable width="500px" attach="#modals">
     <v-card>
       <v-card-title> <strong>Add your worker</strong> </v-card-title>
 

packages/playground/src/components/manage_gateway_dialog.vue

@@ -5,6 +5,7 @@
       @update:model-value="$emit('close')"
       scrollable
       :persistent="deleting || layout?.status === 'deploy'"
+      attach="#modals"
     >
       <weblet-layout
         ref="layout"
@@ -40,7 +41,7 @@
           </template>
         </v-alert>
 
-        <v-dialog v-model="failedDomainDialog" max-width="400px" scrollable>
+        <v-dialog v-model="failedDomainDialog" max-width="400px" scrollable attach="#modals">
           <v-card>
             <v-card-title class="bg-warning">Failed Domains</v-card-title>
 
@@ -183,7 +184,7 @@
       </weblet-layout>
     </v-dialog>
 
-    <v-dialog v-model="requestDelete" max-width="600px">
+    <v-dialog v-model="requestDelete" max-width="600px" attach="#modals">
       <v-card>
         <v-card-title> Are you sure you want to delete the following gateways? </v-card-title>
         <v-card-text class="d-flex flex-wrap">

packages/playground/src/components/manage_worker_dialog.vue

@@ -4,6 +4,7 @@
     scrollable
     :persistent="layout?.status === 'deploy' || deleting"
     @update:model-value="$emit('close')"
+    attach="#modals"
   >
     <weblet-layout ref="layout" @back="$emit('back')">
       <template #title><slot name="title"></slot> </template>
@@ -47,7 +48,7 @@
     </weblet-layout>
   </v-dialog>
 
-  <v-dialog width="50%" v-model="deletingDialog">
+  <v-dialog width="50%" v-model="deletingDialog" attach="#modals">
     <v-card>
       <v-card-title class="text-h5"> Are you sure you want to delete the following workers? </v-card-title>
       <v-card-text>

packages/playground/src/components/node_details.vue

@@ -5,6 +5,7 @@
     @click:outside="() => $emit('close-dialog', false)"
     transition="dialog-bottom-transition"
     hide-overlay
+    attach="#modals"
   >
     <v-toolbar color="primary">
       <div class="d-flex justify-center">

packages/playground/src/components/ssh_keys/SshDataDialog.vue

@@ -4,6 +4,7 @@
     @keydown.esc="() => $emit('close')"
     v-model="$props.open"
     max-width="800"
+    attach="#modals"
   >
     <template v-slot:default>
       <v-card>

packages/playground/src/components/ssh_keys/SshFormDialog.vue

@@ -4,6 +4,7 @@
     @keydown.esc="() => $emit('close')"
     v-model="$props.open"
     max-width="800"
+    attach="#modals"
   >
     <template v-slot:default>
       <v-form v-model="isValidForm">

packages/playground/src/components/vm_deployment_table.vue

@@ -20,7 +20,13 @@
         </template>
       </v-tooltip>
 
-      <v-dialog transition="dialog-bottom-transition" v-model="showDialog" max-width="500px" scrollable>
+      <v-dialog
+        transition="dialog-bottom-transition"
+        v-model="showDialog"
+        max-width="500px"
+        scrollable
+        attach="#modals"
+      >
         <v-card>
           <v-card-title style="font-weight: bold">Failed Deployments</v-card-title>
           <v-divider color="#FFCC00" />

packages/playground/src/components/withdraw_dialog.vue

@@ -5,6 +5,7 @@
       max-width="50%"
       v-model="withdrawDialog"
       @update:model-value="closeDialog"
+      attach="#modals"
     >
       <v-card>
         <v-card-title class="bg-primary"> Withdraw TFT </v-card-title>

packages/playground/src/dashboard/components/add_ip.vue

@@ -4,7 +4,7 @@
   >
   <v-container>
     <v-container v-if="showDialogue">
-      <v-dialog v-model="showDialogue" max-width="600">
+      <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
         <v-card>
           <v-card-title class="bg-primary">Add Public IP to Farm</v-card-title>
           <v-card-text>
@@ -74,7 +74,7 @@
             </form-validator>
             <v-divider />
           </v-card-text>
-          <v-dialog v-model="showIPs" max-width="500">
+          <v-dialog v-model="showIPs" max-width="500" attach="#modals">
             <v-card>
               <v-card-title class="text-h5">IPs range</v-card-title>
               <v-card-text v-for="(IP, i) in IPs" :key="IP">{{ i + 1 }}- {{ IP }}</v-card-text>

packages/playground/src/dashboard/components/create_farm.vue

@@ -15,7 +15,7 @@
     </v-row>
 
     <v-container v-if="showDialogue">
-      <v-dialog v-model="showDialogue" max-width="600">
+      <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
         <v-card>
           <v-card-title class="bg-primary"> Create Farm </v-card-title>
           <v-card-text>

packages/playground/src/dashboard/components/public_config.vue

@@ -16,7 +16,7 @@
     </v-tooltip>
 
     <template v-if="showDialogue">
-      <v-dialog v-model="showDialogue" max-width="600" @click:outside="reset">
+      <v-dialog v-model="showDialogue" max-width="600" @click:outside="reset" attach="#modals">
         <v-card>
           <v-card-title class="bg-primary">
             Add a public config to your node with ID: {{ $props.nodeId }}
@@ -138,7 +138,7 @@
 
     <!-- Remove Config Dialog -->
     <template v-if="showClearDialogue">
-      <v-dialog v-model="showClearDialogue" width="650">
+      <v-dialog v-model="showClearDialogue" width="650" attach="#modals">
         <v-card>
           <v-card-title class="bg-primary"> Remove Public Config </v-card-title>
           <v-card-text>Are you sure you want to remove this node's public config? </v-card-text>

packages/playground/src/dashboard/components/public_ips_table.vue

@@ -33,7 +33,7 @@
         </div>
       </template>
     </ListTable>
-    <v-dialog v-model="showDialogue" max-width="600">
+    <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
       <v-card>
         <v-card-title class="text-subtitle-1">
           <strong>Delete the following IPs?</strong>

packages/playground/src/dashboard/components/reserve_action_btn.vue

@@ -1,6 +1,6 @@
 <template>
   <container>
-    <v-dialog v-model="openUnreserveDialog" max-width="600" class="custom-dialog">
+    <v-dialog v-model="openUnreserveDialog" max-width="600" class="custom-dialog" attach="#modals">
       <v-card>
         <v-card-title class="pt-4">
           <span style="display: flex; align-items: center">

packages/playground/src/dashboard/components/set_extra_fee.vue

@@ -16,7 +16,7 @@
     </v-tooltip>
 
     <span v-if="showDialogue">
-      <v-dialog v-model="showDialogue" max-width="600">
+      <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
         <v-card>
           <v-card-title class="bg-primary"> Set Additional Fees </v-card-title>
           <v-card-text>

packages/playground/src/dashboard/components/user_farms.vue

@@ -86,7 +86,7 @@
         </tr>
 
         <v-container v-if="showDialogue">
-          <v-dialog v-model="showDialogue" max-width="600">
+          <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
             <v-card>
               <v-toolbar color="primary" dark>
                 <v-toolbar-title class="custom-toolbar_title mb-6"> Add/Edit Stellar V2 Address </v-toolbar-title>

packages/playground/src/dashboard/dao_view.vue

@@ -209,7 +209,7 @@
           </v-card>
         </v-window-item>
       </v-window>
-      <v-dialog v-model="openVDialog" max-width="600" scrollable>
+      <v-dialog v-model="openVDialog" max-width="600" scrollable attach="#modals">
         <v-card>
           <v-card-title>Cast Vote</v-card-title>
           <v-card-text>
@@ -235,7 +235,7 @@
           </v-card-actions>
         </v-card>
       </v-dialog>
-      <v-dialog v-model="openInfoModal" width="50vw">
+      <v-dialog v-model="openInfoModal" width="50vw" attach="#modals">
         <v-card>
           <v-card-title class="text-h5 my-2"> Proposals Information </v-card-title>
           <v-divider></v-divider>

packages/playground/src/dashboard/twin_view.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-container v-if="editingTwin">
-      <v-dialog v-model="editingTwin" max-width="600">
+      <v-dialog v-model="editingTwin" max-width="600" attach="#modals">
         <v-card>
           <v-toolbar color="primary" dark class="custom-toolbar">Edit Twin</v-toolbar>
           <div class="text-h2 pa-10">
@@ -15,7 +15,7 @@
       </v-dialog>
     </v-container>
 
-    <v-dialog v-model="openVotePopup" max-width="600">
+    <v-dialog v-model="openVotePopup" max-width="600" attach="#modals">
       <v-card>
         <v-toolbar color="primary" dark class="custom-toolbar bold-text">Vote Reminder</v-toolbar>
         <v-card-text>There are {{ numberOfProposalsToVoteOn }} active proposals you can vote on now</v-card-text>

packages/playground/src/plugins/vuetify.ts

@@ -39,6 +39,7 @@ const defaults = {
   },
   VDialog: {
     width: "70%",
+    attach: "#modals",
   },
 };
 

packages/playground/src/views/farms.vue

@@ -114,7 +114,7 @@
       </v-data-table-server>
     </TfFiltersLayout>
 
-    <v-dialog v-model="dialog" hide-overlay transition="dialog-bottom-transition">
+    <v-dialog v-model="dialog" hide-overlay transition="dialog-bottom-transition" attach="#modals">
       <v-container>
         <v-toolbar :height="35">
           <div class="ml-auto">

packages/playground/src/weblets/profile_manager.vue

@@ -4,6 +4,7 @@
     class="mx-auto"
     :model-value="$props.modelValue"
     @update:model-value="handleProfileDialog($event)"
+    attach="#modals"
   >
     <template #activator="{ props }">
       <VCard v-bind="props" class="pa-3 d-inline-flex align-center">
@@ -201,7 +202,7 @@
                 </template>
               </VTooltip>
 
-              <v-dialog v-model="openAcceptTerms" fullscreen width="100%">
+              <v-dialog v-model="openAcceptTerms" fullscreen width="100%" attach="#modals">
                 <v-card v-if="!termsLoading">
                   <v-card-text class="pa-15" v-html="acceptTermsContent"></v-card-text>
                   <div class="terms-footer">

packages/playground/src/weblets/tf_contracts_list.vue

@@ -62,7 +62,7 @@
     </template>
   </v-card>
   <!-- locked amount Dialog -->
-  <v-dialog width="500" v-model="unlockDialog" v-if="lockedContracts?.totalAmountLocked">
+  <v-dialog width="500" v-model="unlockDialog" v-if="lockedContracts?.totalAmountLocked" attach="#modals">
     <v-card>
       <v-card-title class="bg-primary">
         Unlock All Contracts

packages/playground/src/weblets/tf_deployment_list.vue

@@ -359,7 +359,7 @@
     </template>
   </weblet-layout>
 
-  <v-dialog v-model="deletingDialog" scrollable width="600">
+  <v-dialog v-model="deletingDialog" scrollable width="600" attach="#modals">
     <v-card>
       <v-card-title>
         <strong>Delete the following deployments?</strong>