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.

Sign up for GitHub

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

Jump to bottom

Upload: Improve asset cards and upload progress visual design #14849

Merged
merged 8 commits into from
Nov 22, 2022
Merged

Upload: Improve asset cards and upload progress visual design #14849

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dcab3b9
AssetCard: Improve badge alignment
gu-stav Nov 14, 2022
fcf1504
UploadProgress: Remove border-radius bottom-left and bottom-right
gu-stav Nov 14, 2022
280edc9
UploadProgress: Update colors and fix alignments
gu-stav Nov 14, 2022
cebbe1d
chore: Update snapshot tests
gu-stav Nov 14, 2022
5169732
Merge branch 'main' into fix/card-badge
joshuaellis Nov 21, 2022
0da42fe
fix: icon size and alignment
joshuaellis Nov 21, 2022
9ed9a59
fix: define a default border color
joshuaellis Nov 22, 2022
2dbeca2
chore: update snapshots
joshuaellis Nov 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 9 additions & 6 deletions packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -116,12 +117,14 @@ export const AssetCardBase = ({
{subtitle}
</CardSubtitle>
</CardContent>
<CardBadge>
{formatMessage({
id: getTrad(`settings.section.${variant.toLowerCase()}.label`),
defaultMessage: variant,
})}
</CardBadge>
<Flex paddingTop={1} grow={1}>
<CardBadge>
{formatMessage({
id: getTrad(`settings.section.${variant.toLowerCase()}.label`),
defaultMessage: variant,
})}
</CardBadge>
</Flex>
</CardBody>
</CardContainer>
);
Expand Down
15 changes: 8 additions & 7 deletions packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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({
Expand All @@ -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(() => {
Expand Down Expand Up @@ -103,7 +102,9 @@ export const UploadingAssetCard = ({
<Extension>{asset.ext}</Extension>
</CardSubtitle>
</CardContent>
<CardBadge>{badgeContent}</CardBadge>
<Flex paddingTop={1} grow={1}>
<CardBadge>{badgeContent}</CardBadge>
</Flex>
</CardBody>
</Card>
{error ? (
Expand Down
52 changes: 39 additions & 13 deletions packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -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;
}
Expand Down Expand Up @@ -191,7 +213,7 @@ describe('DocAssetCard', () => {
padding-left: 12px;
}

.c27 {
.c29 {
background: #f6f6f9;
padding: 4px;
border-radius: 4px;
Expand Down Expand Up @@ -244,7 +266,7 @@ describe('DocAssetCard', () => {
flex-direction: row;
}

.c28 {
.c30 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
Expand Down Expand Up @@ -296,22 +318,22 @@ describe('DocAssetCard', () => {
line-height: 1.33;
}

.c30 {
.c32 {
color: #666687;
font-weight: 600;
font-size: 0.6875rem;
line-height: 1.45;
text-transform: uppercase;
}

.c26 {
.c28 {
margin-left: auto;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}

.c29 {
.c31 {
margin-left: 4px;
}

Expand Down Expand Up @@ -530,23 +552,27 @@ describe('DocAssetCard', () => {
</div>
</div>
<div
class="c26"
class="c26 c27"
>
<div
class="c27 c28 c29"
class="c28"
>
<span
class="c30"
<div
class="c29 c30 c31"
>
Doc
</span>
<span
class="c32"
>
Doc
</span>
</div>
</div>
</div>
</div>
</div>
</article>
<div
class="c31"
class="c33"
>
<p
aria-live="polite"
Expand Down
52 changes: 39 additions & 13 deletions packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ describe('ImageAssetCard', () => {
);

expect(container).toMatchInlineSnapshot(`
.c29 {
.c31 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
Expand Down Expand Up @@ -69,7 +69,7 @@ describe('ImageAssetCard', () => {
padding-left: 12px;
}

.c25 {
.c27 {
background: #f6f6f9;
padding: 4px;
border-radius: 4px;
Expand Down Expand Up @@ -122,7 +122,7 @@ describe('ImageAssetCard', () => {
flex-direction: row;
}

.c26 {
.c28 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
Expand Down Expand Up @@ -198,22 +198,22 @@ describe('ImageAssetCard', () => {
line-height: 1.33;
}

.c28 {
.c30 {
color: #666687;
font-weight: 600;
font-size: 0.6875rem;
line-height: 1.45;
text-transform: uppercase;
}

.c24 {
.c26 {
margin-left: auto;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}

.c27 {
.c29 {
margin-left: 4px;
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -510,23 +532,27 @@ describe('ImageAssetCard', () => {
</div>
</div>
<div
class="c24"
class="c24 c25"
>
<div
class="c25 c26 c27"
class="c26"
>
<span
class="c28"
<div
class="c27 c28 c29"
>
Image
</span>
<span
class="c30"
>
Image
</span>
</div>
</div>
</div>
</div>
</div>
</article>
<div
class="c29"
class="c31"
>
<p
aria-live="polite"
Expand Down