UX refinements

[falkodev]

https://linear.app/apostrophecms/issue/PRO-4699/import-download-ux-refinements

Download flow

• In piece manager, batch operation is title Export, should be Download <PIECE_TYPE>
• In the Download modal, modal title is Export Article, should be Download Article
• Download modal has no transition animations, should follow normal modal pattern
• Change: Expand Download modal to 415px
• Include related documents expansion → document types should be pre selected
• Download modal: Export button should say Download and the button label should be pre-pended with the download icon
• The gray separator at the bottom of modal that separates the Download & Cancel buttons from the modal options color should be var(--a-base-9)
• Document Format’s select is not our standard Select input and has big padding, can this be a normal Select?
• .apos-export__description give this a margin-top of 5px
• Extra can we animate expand/contract the related doc types?
• Change give .apos-modal__body a padding of 30px 20px

Import Flow

• Import modal has no transition animations, should follow normal modal pattern
• From piece manager context menu, the Import operation label should say Import <PIECE_TYPE>
• Import button should say Import <PIECE_TYPE> and be prepended with the upload icon
• Buttons at the bottom of the modal should be separated by a gray separator, same styles as Download modal
• give .apos-modal__body a padding of 30px 20px

[linear]

PRO-4699 Import / Download UX refinements

Using https://import-export-docs.a3.apos.dev/ as a testing ground:

Download flow

• In piece manager, batch operation is title Export, should be Download <PIECE_TYPE>

• In the Download modal, modal title is Export Article, should be Download Article

• Download modal has no transition animations, should follow normal modal pattern

• Change: Expand Download modal to 415px

• Include related documents expansion → document types should be pre selected

• Download modal: Export button should say Download and the button label should be pre-pended with the download icon

  image.png

• The gray separator at the bottom of modal that separates the Download & Cancel buttons from the modal options color should be var(--a-base-9)

• Document Format’s select is not our standard Select input and has big padding, can this be a normal Select?

• .apos-export__description give this a margin-top of 5px

• Extra can we animate expand/contract the related doc types?

• Change give .apos-modal__body a padding of 30px 20px

Import Flow

• Import modal has no transition animations, should follow normal modal pattern

• From piece manager context menu, the Import operation label should say Import <PIECE_TYPE>

• Import button should say Import <PIECE_TYPE> and be prepended with the upload icon

  image.png

• Buttons at the bottom of the modal should be separated by a gray separator, same styles as Download modal

• give .apos-modal__body a padding of 30px 20px

cc etienne alex

[ETLaurent]

provided that https://github.com/apostrophecms/import-export/pull/8/files?diff=split&w=1#r1307140373 is taken into account

[ETLaurent]

height should probably not be set on document.documentElement

[ETLaurent]

typo in variable name

[ETLaurent]

you can use a ref to get the container element