From dcab3b96306d63905efe0d3bbf9883e070cc8941 Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Mon, 14 Nov 2022 12:47:42 +0100 Subject: [PATCH 1/8] AssetCard: Improve badge alignment --- .../src/components/AssetCard/AssetCardBase.js | 15 +++++++++------ .../components/AssetCard/UploadingAssetCard.js | 15 ++++++++------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js b/packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js index 2b04521bbc..1ab68aaf5b 100644 --- a/packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js +++ b/packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js @@ -13,6 +13,7 @@ import { CardTitle, CardSubtitle, } from '@strapi/design-system/Card'; +import { Flex } from '@strapi/design-system/Flex'; import { IconButton } from '@strapi/design-system/IconButton'; import Pencil from '@strapi/icons/Pencil'; import Trash from '@strapi/icons/Trash'; @@ -116,12 +117,14 @@ export const AssetCardBase = ({ {subtitle} - - {formatMessage({ - id: getTrad(`settings.section.${variant.toLowerCase()}.label`), - defaultMessage: variant, - })} - + + + {formatMessage({ + id: getTrad(`settings.section.${variant.toLowerCase()}.label`), + defaultMessage: variant, + })} + + ); diff --git a/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js index cab6826c93..4892ea92e7 100644 --- a/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js +++ b/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js @@ -15,6 +15,7 @@ import { import { Typography } from '@strapi/design-system/Typography'; import { Stack } from '@strapi/design-system/Stack'; import { Box } from '@strapi/design-system/Box'; +import { Flex } from '@strapi/design-system/Flex'; import { getTrad } from '../../utils'; import { AssetType } from '../../constants'; @@ -40,7 +41,10 @@ export const UploadingAssetCard = ({ const { upload, cancel, error, progress, status } = useUpload(); const { formatMessage } = useIntl(); - let badgeContent; + let badgeContent = formatMessage({ + id: getTrad('settings.section.doc.label'), + defaultMessage: 'Doc', + }); if (asset.type === AssetType.Image) { badgeContent = formatMessage({ @@ -57,11 +61,6 @@ export const UploadingAssetCard = ({ id: getTrad('settings.section.audio.label'), defaultMessage: 'Audio', }); - } else { - badgeContent = formatMessage({ - id: getTrad('settings.section.doc.label'), - defaultMessage: 'Doc', - }); } useEffect(() => { @@ -103,7 +102,9 @@ export const UploadingAssetCard = ({ {asset.ext} - {badgeContent} + + {badgeContent} + {error ? ( From fcf1504f6fdd32350ee2e3e6c33717280871f5e5 Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Mon, 14 Nov 2022 12:47:56 +0100 Subject: [PATCH 2/8] UploadProgress: Remove border-radius bottom-left and bottom-right --- .../core/upload/admin/src/components/UploadProgress/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/upload/admin/src/components/UploadProgress/index.js b/packages/core/upload/admin/src/components/UploadProgress/index.js index 641578fbdf..8b5ae4a541 100644 --- a/packages/core/upload/admin/src/components/UploadProgress/index.js +++ b/packages/core/upload/admin/src/components/UploadProgress/index.js @@ -9,6 +9,7 @@ import { ProgressBar } from '@strapi/design-system/ProgressBar'; import { useIntl } from 'react-intl'; const BoxWrapper = styled(Flex)` + border-radius: ${({ theme }) => `${theme.borderRadius} ${theme.borderRadius} 0 0`}; width: 100%; height: 100%; flex-direction: column; @@ -44,7 +45,6 @@ export const UploadProgress = ({ onCancel, progress, error }) => { background={error ? 'danger100' : 'neutral700'} justifyContent="center" error={error} - hasRadius > {error ? ( From 280edc92f2e30011f0345d71636ee6577e38b645 Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Mon, 14 Nov 2022 13:05:46 +0100 Subject: [PATCH 3/8] UploadProgress: Update colors and fix alignments --- .../src/components/UploadProgress/index.js | 51 ++++++++----------- 1 file changed, 21 insertions(+), 30 deletions(-) diff --git a/packages/core/upload/admin/src/components/UploadProgress/index.js b/packages/core/upload/admin/src/components/UploadProgress/index.js index 8b5ae4a541..610b81b6bf 100644 --- a/packages/core/upload/admin/src/components/UploadProgress/index.js +++ b/packages/core/upload/admin/src/components/UploadProgress/index.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; import Cross from '@strapi/icons/Cross'; import { Typography } from '@strapi/design-system/Typography'; -import { Box } from '@strapi/design-system/Box'; import { Flex } from '@strapi/design-system/Flex'; +import { Stack } from '@strapi/design-system/Stack'; import { ProgressBar } from '@strapi/design-system/ProgressBar'; import { useIntl } from 'react-intl'; @@ -12,7 +12,6 @@ const BoxWrapper = styled(Flex)` border-radius: ${({ theme }) => `${theme.borderRadius} ${theme.borderRadius} 0 0`}; width: 100%; height: 100%; - flex-direction: column; svg { path { @@ -24,16 +23,15 @@ const BoxWrapper = styled(Flex)` const CancelButton = styled.button` border: none; background: none; - display: flex; - align-items: center; + width: min-content; svg { - path { - fill: ${({ theme }) => theme.colors.neutral200}; - } + height: ${({ theme }) => theme.spaces[2]}; + width: ${({ theme }) => theme.spaces[2]}; - height: 10px; - width: 10px; + path { + fill: ${({ theme }) => theme.colors.neutral600}; + } } `; @@ -41,33 +39,26 @@ export const UploadProgress = ({ onCancel, progress, error }) => { const { formatMessage } = useIntl(); return ( - + {error ? ( ) : ( - <> - - - {`${progress}/100%`} - - + + {`${progress}/100%`} - - {formatMessage({ - id: 'app.components.Button.cancel', - defaultMessage: 'Cancel', - })} - - - - + + + {formatMessage({ + id: 'app.components.Button.cancel', + defaultMessage: 'Cancel', + })} + + + + - + )} ); From cebbe1d1999718c07a4dad901b24db30ad44f1c7 Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Mon, 14 Nov 2022 13:31:49 +0100 Subject: [PATCH 4/8] chore: Update snapshot tests --- .../AssetCard/tests/DocAssetCard.test.js | 52 ++++-- .../AssetCard/tests/ImageAssetCard.test.js | 52 ++++-- .../__snapshots__/AssetList.test.js.snap | 116 +++++++----- .../PendingAssetStep.test.js.snap | 162 ++++++++++------- .../UploadProgress/tests/index.test.js | 171 +++++++++++------- 5 files changed, 352 insertions(+), 201 deletions(-) diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js index 8ec5fe6872..5022395887 100644 --- a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js +++ b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js @@ -29,7 +29,7 @@ describe('DocAssetCard', () => { ); expect(container).toMatchInlineSnapshot(` - .c31 { + .c33 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -46,6 +46,14 @@ describe('DocAssetCard', () => { height: 5.5rem; } + .c26 { + padding-top: 4px; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + } + .c16 { -webkit-align-items: center; -webkit-box-align: center; @@ -64,6 +72,20 @@ describe('DocAssetCard', () => { justify-content: center; } + .c27 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + .c22 { padding-top: 4px; } @@ -191,7 +213,7 @@ describe('DocAssetCard', () => { padding-left: 12px; } - .c27 { + .c29 { background: #f6f6f9; padding: 4px; border-radius: 4px; @@ -244,7 +266,7 @@ describe('DocAssetCard', () => { flex-direction: row; } - .c28 { + .c30 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -296,7 +318,7 @@ describe('DocAssetCard', () => { line-height: 1.33; } - .c30 { + .c32 { color: #666687; font-weight: 600; font-size: 0.6875rem; @@ -304,14 +326,14 @@ describe('DocAssetCard', () => { text-transform: uppercase; } - .c26 { + .c28 { margin-left: auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } - .c29 { + .c31 { margin-left: 4px; } @@ -530,23 +552,27 @@ describe('DocAssetCard', () => {
- - Doc - + + Doc + +

{ ); expect(container).toMatchInlineSnapshot(` - .c29 { + .c31 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -69,7 +69,7 @@ describe('ImageAssetCard', () => { padding-left: 12px; } - .c25 { + .c27 { background: #f6f6f9; padding: 4px; border-radius: 4px; @@ -122,7 +122,7 @@ describe('ImageAssetCard', () => { flex-direction: row; } - .c26 { + .c28 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -198,7 +198,7 @@ describe('ImageAssetCard', () => { line-height: 1.33; } - .c28 { + .c30 { color: #666687; font-weight: 600; font-size: 0.6875rem; @@ -206,14 +206,14 @@ describe('ImageAssetCard', () => { text-transform: uppercase; } - .c24 { + .c26 { margin-left: auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } - .c27 { + .c29 { margin-left: 4px; } @@ -298,6 +298,28 @@ describe('ImageAssetCard', () => { padding-top: 4px; } + .c24 { + padding-top: 4px; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + } + + .c25 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + .c13 { display: -webkit-box; display: -webkit-flex; @@ -510,23 +532,27 @@ describe('ImageAssetCard', () => {

- - Image - + + Image + +

- - Image - + + Image + +
@@ -497,7 +523,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = ` class="c8" >
mov_bbb.mp4
@@ -520,10 +546,10 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `