UX refinements (#8)

* Fix modal transition * Fix export translations and select input * Animate transition * Animation when expanding related documents * Animation when expanding related documents * Default value for container height * Import Modal UX refinements * Lint * Fix translation * Add constants for section height calculation * lint * Use ref for container and limit container height
apostrophecms · Aug 29, 2023 · e4f0157 · e4f0157
1 parent f78cd6d
commit e4f0157
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 47 deletions.
diff --git a/i18n/en.json b/i18n/en.json
@@ -1,16 +1,15 @@
 {
-  "export": "Export",
-  "exported": "Exported {{ count }} {{ type }}",
-  "exporting": "Exporting {{ type }}...",
-  "exportModalDescription": "You've selected {{ count }} {{ type }} for export",
+  "export": "Download {{ type }}",
+  "exported": "Downloaded {{ count }} {{ type }}",
+  "exporting": "Downloading {{ type }}...",
+  "exportModalDescription": "You've selected {{ count }} {{ type }} for download",
   "exportModalRelatedDocumentDescription": "Include the following document types where applicable",
   "exportModalSettingsLabel": "Export Settings",
   "exportModalDocumentFormat": "Document Format",
   "exportModalIncludeRelated": "Include related documents",
   "exportModalIncludeChildren": "Include children of this page",
   "exportModalIncludeRelatedSettings": "Related Documents Settings",
   "exportModalNoRelatedTypes": "No Related Types",
-  "import": "Import",
-  "importDocuments": "Import Documents",
-  "importModalDescription": "Importing content requires a zip file. See our <a href=\"https://v3.docs.apostrophecms.org/\" target=\"_blank\">guide to importing content</a> in Apostrophe."
+  "import": "Upload {{ type }}",
+  "importModalDescription": "Uploading content requires a zip file. See our <a href=\"https://v3.docs.apostrophecms.org/\" target=\"_blank\">guide to importing content</a> in Apostrophe."
 }
diff --git a/ui/apos/components/AposExportModal.vue b/ui/apos/components/AposExportModal.vue
@@ -12,7 +12,7 @@
       <AposModalBody>
         <template #bodyMain>
           <h2 class="apos-export__heading">
-            {{ $t('aposImportExport:export') }} {{ moduleLabel }}
+            {{ $t('aposImportExport:export', { type: moduleLabel }) }}
           </h2>
           <p
             class="apos-export__description"
@@ -57,40 +57,53 @@
             </div>
           </div>
 
-          <div
-            v-show="!relatedDocumentsDisabled"
-            class="apos-export__section"
+          <transition
+            name="fade"
+            :duration="200"
           >
-            <div class="apos-export__settings">
-              {{ $t('aposImportExport:exportModalIncludeRelatedSettings') }}
-            </div>
-            <div class="apos-export__separator" />
-            <div class="apos-export__settings-row apos-export__settings-row--column">
-              <div class="apos-export__related-description">
-                {{ $t('aposImportExport:exportModalRelatedDocumentDescription') }}
-              </div>
-              <div v-if="relatedTypes && relatedTypes.length">
-                <AposCheckbox
-                  v-for="relatedType in relatedTypes"
-                  :key="relatedType"
-                  v-model="checkedProxy"
-                  tabindex="-1"
-                  :choice="{
-                    value: relatedType,
-                    label: getRelatedTypeLabel(relatedType)
-                  }"
-                  :field="{
-                    label: getRelatedTypeLabel(relatedType),
-                    name: relatedType
-                  }"
-                  @updated="checkRelatedTypes"
-                />
-              </div>
-              <div v-else>
-                {{ $t('aposImportExport:exportModalNoRelatedTypes') }}
+            <div
+              v-show="!relatedDocumentsDisabled"
+              class="apos-export__section"
+            >
+              <div
+                ref="container"
+                class="apos-export__section-container"
+              >
+                <div class="apos-export__settings">
+                  {{ $t('aposImportExport:exportModalIncludeRelatedSettings') }}
+                </div>
+                <div class="apos-export__separator" />
+                <div class="apos-export__settings-row apos-export__settings-row--column">
+                  <div class="apos-export__related-description">
+                    {{ $t('aposImportExport:exportModalRelatedDocumentDescription') }}
+                  </div>
+                  <div
+                    v-if="relatedTypes && relatedTypes.length"
+                    class="apos-export__related-list"
+                  >
+                    <AposCheckbox
+                      v-for="relatedType in relatedTypes"
+                      :key="relatedType"
+                      v-model="checkedProxy"
+                      tabindex="-1"
+                      :choice="{
+                        value: relatedType,
+                        label: getRelatedTypeLabel(relatedType)
+                      }"
+                      :field="{
+                        label: getRelatedTypeLabel(relatedType),
+                        name: relatedType
+                      }"
+                      @updated="checkRelatedTypes"
+                    />
+                  </div>
+                  <div v-else>
+                    {{ $t('aposImportExport:exportModalNoRelatedTypes') }}
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
+          </transition>
 
           <div class="apos-export__separator apos-export__separator--full-width" />
 
@@ -104,7 +117,7 @@
               ref="exportDocs"
               icon="apos-import-export-download-icon"
               class="apos-export__btn"
-              label="aposImportExport:export"
+              :label="$t('aposImportExport:export', { type: moduleLabel })"
               type="primary"
               @click="exportDocs"
             />
@@ -116,6 +129,10 @@
 </template>
 
 <script>
+const CONTAINER_ITEM_HEIGHT = 24;
+const CONTAINER_DESCRIPTION_HEIGHT = 95;
+const CONTAINER_MINIMUM_HEIGHT = 120;
+
 export default {
   props: {
     moduleName: {
@@ -142,6 +159,7 @@ export default {
     return {
       modal: {
         active: false,
+        type: 'overlay',
         showModal: false,
         disableHeader: true
       },
@@ -229,6 +247,9 @@ export default {
             type: this.type
           }
         });
+        this.checkedRelatedTypes = this.relatedTypes;
+        const height = this.checkedRelatedTypes.length ? this.checkedRelatedTypes.length * CONTAINER_ITEM_HEIGHT + CONTAINER_DESCRIPTION_HEIGHT : CONTAINER_MINIMUM_HEIGHT;
+        this.$refs.container.style.setProperty('--container-height', `${height}px`);
       }
     },
     toggleRelatedChildren() {
@@ -281,8 +302,8 @@ export default {
 }
 
 ::v-deep .apos-modal__body {
-  padding: 20px 30px;
-  width: 335px;
+  padding: 30px 20px;
+  width: 375px;
 }
 
 ::v-deep .apos-modal__body-main {
@@ -295,6 +316,10 @@ export default {
   display: flex;
 }
 
+::v-deep .apos-input--select {
+  text-transform: capitalize;
+}
+
 .apos-export__heading {
   @include type-title;
   line-height: var(--a-line-tall);
@@ -307,6 +332,7 @@ export default {
   font-size: var(--a-type-large);
   text-align: left;
   line-height: var(--a-line-tallest);
+  margin-top: 5px;
 }
 
 .apos-export__section {
@@ -317,6 +343,10 @@ export default {
   min-width: 100%;
 }
 
+.apos-export__section-container {
+  overflow: hidden;
+}
+
 .apos-export__settings {
   @include type-base;
   font-weight: 600;
@@ -343,16 +373,16 @@ export default {
 }
 
 .apos-export__separator {
-  background-color: var(--a-base-8);
+  background-color: var(--a-base-9);
   position: relative;
   height: 1px;
-  width: 100%;
+  width: calc(100% - 10px);
   margin: 10px 0;
 }
 
 .apos-export__separator--full-width::before {
   content: "";
-  background-color: var(--a-base-8);
+  background-color: var(--a-base-9);
   position: absolute;
   height: 100%;
   width: calc(100% + 60px);
@@ -371,4 +401,35 @@ export default {
   width: 100%;
   gap: 20px;
 }
+
+.apos-export__btn ::v-deep .apos-button__label {
+  text-transform: capitalize;
+}
+
+.apos-export__related-list {
+  max-height: 210px;
+  overflow-y: overlay;
+  width: 100%;
+}
+
+.fade-enter-active {
+  .apos-export__section-container {
+    animation: expand .3s;
+  }
+}
+.fade-leave-active {
+  .apos-export__section-container {
+    animation: expand .3s reverse;
+  }
+}
+
+@keyframes expand {
+  0% {
+    height: 0;
+  }
+
+  100% {
+    height: var(--container-height);
+  }
+}
 </style>
diff --git a/ui/apos/components/AposImportModal.vue b/ui/apos/components/AposImportModal.vue
@@ -12,7 +12,7 @@
       <AposModalBody>
         <template #bodyMain>
           <h2 class="apos-import__heading">
-            {{ $t('aposImportExport:importDocuments') }}
+            {{ $t('aposImportExport:import', { type: $t(labels.plural) }) }}
           </h2>
           <!-- eslint-disable vue/no-v-html -->
           <p
@@ -26,6 +26,9 @@
             @upload-file="uploadImportFile"
             @update="updateImportFile"
           />
+
+          <div class="apos-import__separator" />
+
           <div class="apos-import__btns">
             <AposButton
               ref="cancelButton"
@@ -36,7 +39,7 @@
             <AposButton
               class="apos-import__btn"
               icon="apos-import-export-upload-icon"
-              label="aposImportExport:import"
+              :label="$t('aposImportExport:import', { type: $t(labels.plural) })"
               type="primary"
               :disabled="!selectedFile"
               @click="runImport"
@@ -50,7 +53,18 @@
 
 <script>
 export default {
+
+  props: {
+    labels: {
+      type: Object,
+      default: () => ({
+        singular: '',
+        plural: ''
+      })
+    }
+  },
   emits: [ 'safe-close' ],
+
   data () {
     return {
       modal: {
@@ -62,9 +76,11 @@ export default {
       selectedFile: null
     };
   },
+
   mounted() {
     this.modal.active = true;
   },
+
   methods: {
     ready() {
       this.$refs.cancelButton.$el.querySelector('button').focus();
@@ -115,6 +131,24 @@ export default {
     min-width: 370px;
   }
 
+  &__separator {
+    background-color: var(--a-base-9);
+    position: relative;
+    height: 1px;
+    width: calc(100% - 10px);
+    margin: 10px 0;
+
+    &::before {
+      content: "";
+      background-color: var(--a-base-9);
+      position: absolute;
+      height: 100%;
+      width: calc(100% + 60px);
+      left: -30px;
+      right: 0;
+    }
+  }
+
   &__btns {
     display: flex;
     justify-content: space-between;
@@ -145,6 +179,10 @@ export default {
     flex-direction: column;
     align-items: baseline;
   }
+
+  .apos-modal__body {
+    padding: 30px 20px;
+  }
 }
 
 </style>