Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX refinements #8

Merged
merged 13 commits into from
Aug 29, 2023
13 changes: 6 additions & 7 deletions i18n/en.json
Original file line number Diff line number Diff line change
@@ -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."
}
137 changes: 99 additions & 38 deletions ui/apos/components/AposExportModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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" />

Expand All @@ -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"
/>
Expand All @@ -116,6 +129,10 @@
</template>

<script>
const CONTAINER_ITEM_HEIGHT = 24;
const CONTAINER_DESCRIPTION_HEIGHT = 95;
falkodev marked this conversation as resolved.
Show resolved Hide resolved
const CONTAINER_MINIMUM_HEIGHT = 120;

export default {
props: {
moduleName: {
Expand All @@ -142,6 +159,7 @@ export default {
return {
modal: {
active: false,
type: 'overlay',
showModal: false,
disableHeader: true
},
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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 {
Expand All @@ -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);
Expand All @@ -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 {
Expand All @@ -317,6 +343,10 @@ export default {
min-width: 100%;
}

.apos-export__section-container {
overflow: hidden;
}

.apos-export__settings {
@include type-base;
font-weight: 600;
Expand All @@ -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);
Expand All @@ -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>
42 changes: 40 additions & 2 deletions ui/apos/components/AposImportModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -26,6 +26,9 @@
@upload-file="uploadImportFile"
@update="updateImportFile"
/>

<div class="apos-import__separator" />

<div class="apos-import__btns">
<AposButton
ref="cancelButton"
Expand All @@ -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"
Expand All @@ -50,7 +53,18 @@

<script>
export default {

props: {
labels: {
type: Object,
default: () => ({
singular: '',
plural: ''
})
}
},
emits: [ 'safe-close' ],

data () {
return {
modal: {
Expand All @@ -62,9 +76,11 @@ export default {
selectedFile: null
};
},

mounted() {
this.modal.active = true;
},

methods: {
ready() {
this.$refs.cancelButton.$el.querySelector('button').focus();
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -145,6 +179,10 @@ export default {
flex-direction: column;
align-items: baseline;
}

.apos-modal__body {
padding: 30px 20px;
}
}

</style>