Attempt some transition between app configure views

dashboard/src/components/app/Backups.vue

@@ -155,71 +155,72 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Dialog ref="editDialog"
-    :title="$t('backups.backupEdit.title')"
-    :reject-label="$t('main.dialog.cancel')"
-     reject-style="secondary"
-    :confirm-label="$t('main.dialog.save')"
-    :confirm-active="true"
-    :confirm-busy="editBusy"
-    @confirm="onEditSubmit()"
-  >
-    <div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
-        <div class="info-value">{{ editBackup.id }}</div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
-        <div class="info-value">{{ editBackup.emotePath }}</div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
-        <div class="info-value">{{ prettyLongDate(editBackup.creationTime) }}</div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
-        <div class="info-value">{{ editBackup.packageVersion }}</div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('backups.backupDetails.format') }}</div>
-        <div class="info-value">{{ editBackup.format }}</div>
-      </div>
-
-      <form @submit.prevent="onEditSubmit()" autocomplete="off">
-        <fieldset :disabled="editBusy">
-          <p class="has-error" v-show="editError">{{ editError }}</p>
-
-          <FormGroup>
-            <label for="labelInput">{{ $t('backups.backupEdit.label') }}</label>
-            <TextInput v-model="editLabel" id="labelInput" />
-          </FormGroup>
-
-          <br/>
-
-          <Checkbox v-model="editPersist" :label="$t('backups.backupEdit.preserved.description')"/>
-        </fieldset>
-      </form>
-    </div>
-  </Dialog>
-
-  <Dialog ref="restoreDialog"
-    :title="$t('app.restoreDialog.title', { app: app.fqdn })"
-    :reject-label="$t('main.dialog.close')"
-     reject-style="secondary"
-    :confirm-label="$t('app.restoreDialog.restoreAction')"
-    :confirm-active="true"
-    :confirm-busy="restoreBusy"
-    @confirm="onRestoreSubmit()"
-  >
-    <div>
-      <p>{{ $t('app.restoreDialog.description', { creationTime: prettyLongDate(restoreBackup.creationTime) }) }}</p>
-      <p class="text-danger">{{ $t('app.restoreDialog.warning') }}</p>
-      <br/>
-    </div>
-  </Dialog>
 
   <div>
+    <Dialog ref="editDialog"
+      :title="$t('backups.backupEdit.title')"
+      :reject-label="$t('main.dialog.cancel')"
+       reject-style="secondary"
+      :confirm-label="$t('main.dialog.save')"
+      :confirm-active="true"
+      :confirm-busy="editBusy"
+      @confirm="onEditSubmit()"
+    >
+      <div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
+          <div class="info-value">{{ editBackup.id }}</div>
+        </div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
+          <div class="info-value">{{ editBackup.emotePath }}</div>
+        </div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
+          <div class="info-value">{{ prettyLongDate(editBackup.creationTime) }}</div>
+        </div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
+          <div class="info-value">{{ editBackup.packageVersion }}</div>
+        </div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.backupDetails.format') }}</div>
+          <div class="info-value">{{ editBackup.format }}</div>
+        </div>
+
+        <form @submit.prevent="onEditSubmit()" autocomplete="off">
+          <fieldset :disabled="editBusy">
+            <p class="has-error" v-show="editError">{{ editError }}</p>
+
+            <FormGroup>
+              <label for="labelInput">{{ $t('backups.backupEdit.label') }}</label>
+              <TextInput v-model="editLabel" id="labelInput" />
+            </FormGroup>
+
+            <br/>
+
+            <Checkbox v-model="editPersist" :label="$t('backups.backupEdit.preserved.description')"/>
+          </fieldset>
+        </form>
+      </div>
+    </Dialog>
+
+    <Dialog ref="restoreDialog"
+      :title="$t('app.restoreDialog.title', { app: app.fqdn })"
+      :reject-label="$t('main.dialog.close')"
+       reject-style="secondary"
+      :confirm-label="$t('app.restoreDialog.restoreAction')"
+      :confirm-active="true"
+      :confirm-busy="restoreBusy"
+      @confirm="onRestoreSubmit()"
+    >
+      <div>
+        <p>{{ $t('app.restoreDialog.description', { creationTime: prettyLongDate(restoreBackup.creationTime) }) }}</p>
+        <p class="text-danger">{{ $t('app.restoreDialog.warning') }}</p>
+        <br/>
+      </div>
+    </Dialog>
+
     <label>{{ $t('app.backups.backups.title') }}</label>
     <p>{{ $t('app.backups.backups.description') }}</p>
 

dashboard/src/components/app/Uninstall.vue

@@ -59,9 +59,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <InputDialog ref="inputDialog" />
-
   <div>
+    <InputDialog ref="inputDialog" />
+
     <div>
       <label>{{ $t('app.uninstall.startStop.title') }}</label>
       <p>{{ $t('app.uninstall.startStop.description') }}</p>

dashboard/src/components/app/Updates.vue

@@ -85,32 +85,32 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Dialog v-if="update" ref="dialog"
-    :title="$t('app.updateDialog.title', { app: app.fqdn })"
-    :reject-label="$t('main.dialog.cancel')"
-     reject-style="secondary"
-    :confirm-label="$t('app.updateDialog.updateAction')"
-    :confirm-active="!busyUpdate && update.manifest.dockerImage"
-    :confirm-busy="busyUpdate"
-    :alternate-label="!update.manifest.dockerImage && profile.isAtLeastOwner ? $t('app.updateDialog.setupSubscriptionAction') : ''"
-     alternate-style="success"
-    @confirm="onUpdate()"
-    @alternate="onSetupSubscription()"
-  >
-    <div>
-      <p class="text-danger" v-if="update.unstable">{{ $t('app.updateDialog.unstableWarning') }}</p>
-      <p>{{ $t('app.updateDialog.changelogHeader', { version: update.manifest.version }) }}</p>
-      <div v-html="marked.parse(update.manifest.changelog)"></div>
-      <p class="text-danger text-bold" v-if="!update.manifest.dockerImage">
-        <br/>
-        {{ $t('app.updateDialog.subscriptionExpired') }}
-      </p>
-
-      <Checkbox v-if="update.manifest.dockerImage" v-model="skipBackup" :label="$t('app.updateDialog.skipBackupCheckbox')" />
-    </div>
-  </Dialog>
-
   <div>
+    <Dialog v-if="update" ref="dialog"
+      :title="$t('app.updateDialog.title', { app: app.fqdn })"
+      :reject-label="$t('main.dialog.cancel')"
+       reject-style="secondary"
+      :confirm-label="$t('app.updateDialog.updateAction')"
+      :confirm-active="!busyUpdate && update.manifest.dockerImage"
+      :confirm-busy="busyUpdate"
+      :alternate-label="!update.manifest.dockerImage && profile.isAtLeastOwner ? $t('app.updateDialog.setupSubscriptionAction') : ''"
+       alternate-style="success"
+      @confirm="onUpdate()"
+      @alternate="onSetupSubscription()"
+    >
+      <div>
+        <p class="text-danger" v-if="update.unstable">{{ $t('app.updateDialog.unstableWarning') }}</p>
+        <p>{{ $t('app.updateDialog.changelogHeader', { version: update.manifest.version }) }}</p>
+        <div v-html="marked.parse(update.manifest.changelog)"></div>
+        <p class="text-danger text-bold" v-if="!update.manifest.dockerImage">
+          <br/>
+          {{ $t('app.updateDialog.subscriptionExpired') }}
+        </p>
+
+        <Checkbox v-if="update.manifest.dockerImage" v-model="skipBackup" :label="$t('app.updateDialog.skipBackupCheckbox')" />
+      </div>
+    </Dialog>
+
     <label>{{ $t('app.updatesTabTitle') }}</label>
 
     <p v-html="$t('app.updates.auto.description', { appStoreLink: 'https://www.cloudron.io/store/index.html' })"></p>