From 76dcdb32399176ea18c096ec4a0dc24b9169deae Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 2 Jun 2022 19:38:26 +0200 Subject: [PATCH] added divider between FolderList/AssetList, fixed list UI for BrowseStep --- .../AssetDialog/BrowseStep/index.js | 109 +++-- .../tests/__snapshots__/index.test.js.snap | 401 +++--------------- .../BrowseStep/tests/index.test.js | 2 +- .../admin/src/pages/App/MediaLibrary.js | 24 +- 4 files changed, 139 insertions(+), 397 deletions(-) diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js index 4612e65d6a..e7c83c80b1 100644 --- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js +++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js @@ -6,6 +6,7 @@ import { Button } from '@strapi/design-system/Button'; import { Flex } from '@strapi/design-system/Flex'; import { Stack } from '@strapi/design-system/Stack'; import { Box } from '@strapi/design-system/Box'; +import { Divider } from '@strapi/design-system/Divider'; import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox'; import { GridItem } from '@strapi/design-system/Grid'; import { Typography } from '@strapi/design-system/Typography'; @@ -72,6 +73,7 @@ export const BrowseStep = ({ ); const isSearching = !!queryObject?._q; const isFiltering = queryObject?.filters?.$and?.length > 0; + const isSearchingOrFiltering = isSearching || isFiltering; return ( @@ -119,12 +121,54 @@ export const BrowseStep = ({ )} + {assets.length === 0 && folders.length === 0 && ( + + } onClick={onAddAsset}> + {formatMessage({ + id: getTrad('header.actions.add-assets'), + defaultMessage: 'Add new assets', + })} + + ) + } + content={ + // eslint-disable-next-line no-nested-ternary + isFiltering + ? formatMessage({ + id: getTrad('list.assets-empty.title-withSearch'), + defaultMessage: 'There are no assets with the applied filters', + }) + : canCreate && !isSearching + ? formatMessage({ + id: getTrad('list.assets.empty'), + defaultMessage: 'Upload your first assets...', + }) + : formatMessage({ + id: getTrad('list.assets.empty.no-permissions'), + defaultMessage: 'The asset list is empty', + }) + } + /> + + )} + {folders.length > 0 && ( 0) || !isSearchingOrFiltering) && + formatMessage({ + id: getTrad('list.folders.title'), + defaultMessage: 'Folders', + })) || + '' + } > {folders.map(folder => { return ( @@ -165,7 +209,13 @@ export const BrowseStep = ({ )} - {assets.length > 0 ? ( + {assets.length > 0 && folders.length > 0 && ( + + + + )} + + {assets.length > 0 && ( 0)) && + queryObject.page === 1 && + formatMessage({ + id: getTrad('list.assets.title'), + defaultMessage: 'Assets', + })) || + '' + } /> - ) : ( - - } onClick={onAddAsset}> - {formatMessage({ - id: getTrad('header.actions.add-assets'), - defaultMessage: 'Add new assets', - })} - - ) - } - content={ - // eslint-disable-next-line no-nested-ternary - isFiltering - ? formatMessage({ - id: getTrad('list.assets-empty.title-withSearch'), - defaultMessage: 'There are no assets with the applied filters', - }) - : canCreate && !isSearching - ? formatMessage({ - id: getTrad('list.assets.empty'), - defaultMessage: 'Upload your first assets...', - }) - : formatMessage({ - id: getTrad('list.assets.empty.no-permissions'), - defaultMessage: 'The asset list is empty', - }) - } - /> - )} {pagination.pageCount > 0 && ( diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap index 754986fc1d..530ac773ba 100644 --- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap +++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`BrowseStep renders and match snapshot 1`] = ` -.c84 { +.c73 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -158,88 +158,6 @@ exports[`BrowseStep renders and match snapshot 1`] = ` fill: #32324d; } -.c61 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 8px 16px; - background: #4945ff; - border: 1px solid #4945ff; - border: 1px solid #d9d8ff; - background: #f0f0ff; -} - -.c61 .c15 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c61 .c18 { - color: #ffffff; -} - -.c61[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c61[aria-disabled='true'] .c18 { - color: #666687; -} - -.c61[aria-disabled='true'] svg > g, -.c61[aria-disabled='true'] svg path { - fill: #666687; -} - -.c61[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; -} - -.c61[aria-disabled='true']:active .c18 { - color: #666687; -} - -.c61[aria-disabled='true']:active svg > g, -.c61[aria-disabled='true']:active svg path { - fill: #666687; -} - -.c61:hover { - background-color: #ffffff; -} - -.c61:active { - background-color: #ffffff; - border: 1px solid #4945ff; -} - -.c61:active .c18 { - color: #4945ff; -} - -.c61:active svg > g, -.c61:active svg path { - fill: #4945ff; -} - -.c61 .c18 { - color: #271fe0; -} - -.c61 svg > g, -.c61 svg path { - fill: #271fe0; -} - .c36 { position: relative; overflow: hidden; @@ -327,7 +245,7 @@ exports[`BrowseStep renders and match snapshot 1`] = ` flex-direction: column; } -.c62 { +.c51 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -357,10 +275,6 @@ exports[`BrowseStep renders and match snapshot 1`] = ` cursor: pointer; } -.c56 { - text-align: center; -} - .c0 { -webkit-align-items: stretch; -webkit-box-align: stretch; @@ -398,15 +312,6 @@ exports[`BrowseStep renders and match snapshot 1`] = ` margin-top: 16px; } -.c58 > * { - margin-top: 0; - margin-bottom: 0; -} - -.c58 > * + * { - margin-top: 24px; -} - .c33 > * { margin-left: 0; margin-right: 0; @@ -443,22 +348,7 @@ exports[`BrowseStep renders and match snapshot 1`] = ` max-width: 100%; } -.c51 { - padding-bottom: 24px; -} - -.c53 { - border-radius: 4px; - height: 138px; -} - -.c55 { - position: absolute; - top: 64px; - width: 100%; -} - -.c75 { +.c64 { padding-left: 8px; } @@ -502,20 +392,13 @@ exports[`BrowseStep renders and match snapshot 1`] = ` line-height: 1.33; } -.c60 { - color: #666687; - font-weight: 500; - font-size: 1rem; - line-height: 1.25; -} - -.c76 { +.c65 { color: #666687; font-size: 0.875rem; line-height: 1.43; } -.c82 { +.c71 { font-weight: 600; color: #32324d; font-size: 0.75rem; @@ -534,11 +417,6 @@ exports[`BrowseStep renders and match snapshot 1`] = ` width: 1px; } -.c59 { - width: 160px; - height: 88px; -} - .c23 { display: -webkit-box; display: -webkit-flex; @@ -637,7 +515,7 @@ exports[`BrowseStep renders and match snapshot 1`] = ` fill: #666687; } -.c67 { +.c56 { position: absolute; left: 0; right: 0; @@ -648,24 +526,24 @@ exports[`BrowseStep renders and match snapshot 1`] = ` border: none; } -.c67:focus { +.c56:focus { outline: none; } -.c67[aria-disabled='true'] { +.c56[aria-disabled='true'] { cursor: not-allowed; } -.c70 { +.c59 { padding-right: 16px; padding-left: 16px; } -.c72 { +.c61 { padding-left: 12px; } -.c63 { +.c52 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -679,7 +557,7 @@ exports[`BrowseStep renders and match snapshot 1`] = ` flex-direction: column; } -.c65 { +.c54 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -693,7 +571,7 @@ exports[`BrowseStep renders and match snapshot 1`] = ` flex-direction: row; } -.c68 { +.c57 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -711,7 +589,7 @@ exports[`BrowseStep renders and match snapshot 1`] = ` justify-content: space-between; } -.c71 { +.c60 { color: #32324d; display: block; white-space: nowrap; @@ -721,12 +599,12 @@ exports[`BrowseStep renders and match snapshot 1`] = ` line-height: 1.43; } -.c64 > * { +.c53 > * { margin-top: 0; margin-bottom: 0; } -.c66 { +.c55 { position: relative; border: 1px solid #dcdce4; padding-right: 12px; @@ -742,28 +620,28 @@ exports[`BrowseStep renders and match snapshot 1`] = ` transition-duration: 0.2s; } -.c66:focus-within { +.c55:focus-within { border: 1px solid #4945ff; box-shadow: #4945ff 0px 0px 0px 2px; } -.c73 { +.c62 { background: transparent; border: none; position: relative; z-index: 1; } -.c73 svg { +.c62 svg { height: 0.6875rem; width: 0.6875rem; } -.c73 svg path { +.c62 svg path { fill: #666687; } -.c74 { +.c63 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -772,11 +650,11 @@ exports[`BrowseStep renders and match snapshot 1`] = ` border: none; } -.c74 svg { +.c63 svg { width: 0.375rem; } -.c69 { +.c58 { width: 100%; } @@ -812,24 +690,6 @@ exports[`BrowseStep renders and match snapshot 1`] = ` top: 12px; } -.c54 { - background: linear-gradient( 180deg, rgba(234,234,239,0) 0%, #dcdce4 100% ); - opacity: 0.33; -} - -.c52 { - display: grid; - grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); - grid-gap: 16px; -} - -.c57 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - .c9 { font-weight: 600; color: #32324d; @@ -1017,15 +877,15 @@ exports[`BrowseStep renders and match snapshot 1`] = ` user-select: none; } -.c77 > * + * { +.c66 > * + * { margin-left: 4px; } -.c83 { +.c72 { line-height: revert; } -.c78 { +.c67 { padding: 12px; border-radius: 4px; -webkit-text-decoration: none; @@ -1038,7 +898,7 @@ exports[`BrowseStep renders and match snapshot 1`] = ` outline: none; } -.c78:after { +.c67:after { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; @@ -1053,11 +913,11 @@ exports[`BrowseStep renders and match snapshot 1`] = ` border: 2px solid transparent; } -.c78:focus-visible { +.c67:focus-visible { outline: none; } -.c78:focus-visible:after { +.c67:focus-visible:after { border-radius: 8px; content: ''; position: absolute; @@ -1068,7 +928,7 @@ exports[`BrowseStep renders and match snapshot 1`] = ` border: 2px solid #4945ff; } -.c80 { +.c69 { padding: 12px; border-radius: 4px; box-shadow: 0px 1px 4px rgba(33,33,52,0.1); @@ -1082,7 +942,7 @@ exports[`BrowseStep renders and match snapshot 1`] = ` outline: none; } -.c80:after { +.c69:after { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; @@ -1097,11 +957,11 @@ exports[`BrowseStep renders and match snapshot 1`] = ` border: 2px solid transparent; } -.c80:focus-visible { +.c69:focus-visible { outline: none; } -.c80:focus-visible:after { +.c69:focus-visible:after { border-radius: 8px; content: ''; position: absolute; @@ -1112,26 +972,26 @@ exports[`BrowseStep renders and match snapshot 1`] = ` border: 2px solid #4945ff; } -.c81 { +.c70 { color: #271fe0; background: #ffffff; } -.c81:hover { +.c70:hover { box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } -.c79 { +.c68 { font-size: 0.7rem; pointer-events: none; } -.c79 svg path { +.c68 svg path { fill: #c0c0cf; } -.c79:focus svg path, -.c79:hover svg path { +.c68:focus svg path, +.c68:hover svg path { fill: #c0c0cf; } @@ -1471,163 +1331,16 @@ exports[`BrowseStep renders and match snapshot 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - -

- Upload your first assets... -

-
- -
-
-
-
-

{ it('calls onAddAsset callback', () => { const spy = jest.fn(); - const { getByText } = setup({ onAddAsset: spy }); + const { getByText } = setup({ onAddAsset: spy, folders: [] }); fireEvent.click(getByText('Add new assets')); expect(spy).toHaveBeenCalled(); diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary.js b/packages/core/upload/admin/src/pages/App/MediaLibrary.js index dbd7864cc1..23dfcaf368 100644 --- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js +++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js @@ -17,7 +17,7 @@ import { Main } from '@strapi/design-system/Main'; import { Button } from '@strapi/design-system/Button'; import Plus from '@strapi/icons/Plus'; import { Box } from '@strapi/design-system/Box'; -import { Stack } from '@strapi/design-system/Stack'; +import { Divider } from '@strapi/design-system/Divider'; import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox'; import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden'; import { IconButton } from '@strapi/design-system/IconButton'; @@ -226,13 +226,17 @@ export const MediaLibrary = () => { )} {canRead && ( - + <> {folderCount > 0 && ( 0) || !isFiltering) && + formatMessage({ + id: getTrad('list.folders.title'), + defaultMessage: 'Folders', + })) || + '' + } > {folders.map(folder => { const selectedFolders = selected.filter(({ type }) => type === 'folder'); @@ -311,6 +315,12 @@ export const MediaLibrary = () => { )} + {assetCount > 0 && folderCount > 0 && ( + + + + )} + {assetCount > 0 && ( <> { )} )} - + )}