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>

dashboard/src/views/AppConfigureView.vue

@@ -210,23 +210,25 @@ onBeforeUnmount(() => {
           <div class="configure-menu-item" @click="onSetView('uninstall')" :active="view === 'uninstall' ? true : null" v-if="app.accessLevel === 'admin'">{{ $t('app.uninstallTabTitle') }}</div>
         </div>
         <div class="configure-content">
-          <Info v-if="view === 'info'" :app="app"/>
-          <Display :app="app" v-if="view === 'display'"/>
-          <Location :app="app" v-if="view === 'location'"/>
-          <div v-if="view === 'proxy'"></div>
-          <Access :app="app" v-if="view === 'access'"/>
-          <Resources :app="app" v-if="view === 'resources'"/>
-          <div v-if="view === 'services'"></div>
-          <Storage :app="app" v-if="view === 'storage'"/>
-          <div v-if="view === 'graphs'"></div>
-          <Security :app="app" v-if="view === 'security'"/>
-          <Email :app="app" v-if="view === 'email'"/>
-          <Cron :app="app" v-if="view === 'cron'"/>
-          <Updates :app="app" v-if="view === 'updates'"/>
-          <Backups :app="app" v-if="view === 'backups'"/>
-          <Repair :app="app" v-if="view === 'repair'"/>
-          <Eventlog :app="app" v-if="view === 'eventlog'"/>
-          <Uninstall :app="app" v-if="view === 'uninstall'"/>
+          <Transition name="slide-fade" mode="out-in">
+            <Info v-if="view === 'info'" :app="app"/>
+            <Display v-else-if="view === 'display'" :app="app"/>
+            <Location v-else-if="view === 'location'" :app="app"/>
+            <div v-else-if="view === 'proxy'"></div>
+            <Access v-else-if="view === 'access'" :app="app"/>
+            <Resources v-else-if="view === 'resources'" :app="app"/>
+            <div v-else-if="view === 'services'"></div>
+            <Storage v-else-if="view === 'storage'" :app="app"/>
+            <div v-else-if="view === 'graphs'"></div>
+            <Security v-else-if="view === 'security'" :app="app"/>
+            <Email v-else-if="view === 'email'" :app="app"/>
+            <Cron v-else-if="view === 'cron'" :app="app"/>
+            <Updates v-else-if="view === 'updates'" :app="app"/>
+            <Backups v-else-if="view === 'backups'" :app="app"/>
+            <Repair v-else-if="view === 'repair'" :app="app"/>
+            <Eventlog v-else-if="view === 'eventlog'" :app="app"/>
+            <Uninstall v-else-if="view === 'uninstall'" :app="app"/>
+          </Transition>
         </div>
       </div>
     </div>
@@ -235,6 +237,20 @@ onBeforeUnmount(() => {
 
 <style scoped>
 
+.slide-fade-enter-active {
+  transition: all 0.2s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
 .applink {
   display: flex;
   align-items: center;