yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-09 01:07:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5705 from strapi/media-lib/ui-fixes

Browse Source 
Some ui fixes
This commit is contained in:
virginieky 2020-04-06 12:08:04 +02:00 committed by GitHub
commit a940bbc8c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 101 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/strapi-admin/package.json
View File

@ -22,12 +22,12 @@
"@babel/preset-env": "^7.4.3", "@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0", "@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.4.3", "@babel/runtime": "^7.4.3",
"@buffetjs/core": "3.0.4", "@buffetjs/core": "3.0.5",
"@buffetjs/custom": "3.0.4", "@buffetjs/custom": "3.0.5",
"@buffetjs/hooks": "3.0.4", "@buffetjs/hooks": "3.0.5",
"@buffetjs/icons": "3.0.4", "@buffetjs/icons": "3.0.5",
"@buffetjs/styles": "3.0.4", "@buffetjs/styles": "3.0.5",
"@buffetjs/utils": "3.0.4", "@buffetjs/utils": "3.0.5",
"@fortawesome/fontawesome-free": "^5.11.2", "@fortawesome/fontawesome-free": "^5.11.2",
"@fortawesome/fontawesome-svg-core": "^1.2.25", "@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-brands-svg-icons": "^5.11.2", "@fortawesome/free-brands-svg-icons": "^5.11.2",
@ -116,4 +116,4 @@
}, },
"license": "MIT", "license": "MIT",
"gitHead": "c85658a19b8fef0f3164c19693a45db305dc07a9" "gitHead": "c85658a19b8fef0f3164c19693a45db305dc07a9"
} }

5
packages/strapi-plugin-upload/admin/src/components/Card/index.js
View File

@ -8,6 +8,7 @@ import Border from '../CardBorder';
import CardImgWrapper from '../CardImgWrapper'; import CardImgWrapper from '../CardImgWrapper';
import CardPreview from '../CardPreview'; import CardPreview from '../CardPreview';
import ErrorMessage from '../CardErrorMessage'; import ErrorMessage from '../CardErrorMessage';
import FileInfos from '../FileInfos';
import Title from '../CardTitle'; import Title from '../CardTitle';
import Tag from '../Tag'; import Tag from '../Tag';
import Wrapper from '../CardWrapper'; import Wrapper from '../CardWrapper';
@ -58,9 +59,7 @@ const Card = ({
<Title>{name}</Title> <Title>{name}</Title>
<Tag label={getType(fileType)} /> <Tag label={getType(fileType)} />
</Flex> </Flex>
<Text color="grey" fontSize="xs" ellipsis> {!withoutFileInfo && <FileInfos extension={getExtension(fileType)} size={fileSize} />}
{!withoutFileInfo && `${getExtension(fileType)} - ${fileSize}`}
</Text>
</> </>
) : ( ) : (
<Text lineHeight="13px" /> <Text lineHeight="13px" />

4
packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js
View File

@ -7,8 +7,8 @@ const Wrapper = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: ${({ small }) => (small ? '24px' : '30px')}; width: ${({ small }) => (small ? '25px' : '30px')};
height: ${({ small }) => (small ? '24px' : '30px')}; height: ${({ small }) => (small ? '25px' : '30px')};
margin-left: 5px; margin-left: 5px;
background-color: ${({ theme }) => theme.main.colors.white}; background-color: ${({ theme }) => theme.main.colors.white};
border: 1px solid ${({ theme }) => theme.main.colors.darkGrey}; border: 1px solid ${({ theme }) => theme.main.colors.darkGrey};

1
packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js
View File

@ -5,6 +5,7 @@ const CardImgWrapper = styled.div`
position: relative; position: relative;
width: 100%; width: 100%;
height: 0; height: 0;
overflow: hidden;
padding-top: ${({ small }) => (small ? '62.8%' : '63.8%')}; padding-top: ${({ small }) => (small ? '62.8%' : '63.8%')};
margin-bottom: 6px; margin-bottom: 6px;
border-radius: 2px; border-radius: 2px;

26
packages/strapi-plugin-upload/admin/src/components/FileInfos/index.js Normal file
View File

@ -0,0 +1,26 @@
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
const FileInfos = ({ extension, size }) => {
return (
<Text color="grey" fontSize="xs" ellipsis>
{extension.toUpperCase()}
&nbsp;&mdash;&nbsp;
{size}
</Text>
);
};
FileInfos.defaultProps = {
extension: null,
size: null,
};
FileInfos.propTypes = {
extension: PropTypes.string,
size: PropTypes.string,
};
export default FileInfos;

8
packages/strapi-plugin-upload/admin/src/components/List/ListRow.js Normal file
View File

@ -0,0 +1,8 @@
import styled from 'styled-components';
import { Row } from 'reactstrap';
const ListRow = styled(Row)`
padding-top: 13px;
`;
export default ListRow;

17
packages/strapi-plugin-upload/admin/src/components/List/index.js
View File

@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
import { Checkbox } from '@buffetjs/core'; import { Checkbox } from '@buffetjs/core';
import { get } from 'lodash'; import { get } from 'lodash';
import { prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin'; import { prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin';
import { getTrad } from '../../utils';
import Card from '../Card'; import Card from '../Card';
import CardControlsWrapper from '../CardControlsWrapper'; import CardControlsWrapper from '../CardControlsWrapper';
import ListWrapper from '../ListWrapper'; import ListWrapper from '../ListWrapper';
import IntlText from '../IntlText';
import ListCell from './ListCell'; import ListCell from './ListCell';
import ListRow from './ListRow';
const List = ({ const List = ({
clickable, clickable,
@ -19,13 +21,22 @@ const List = ({
canSelect, canSelect,
renderCardControl, renderCardControl,
}) => { }) => {
const selectedAssets = selectedItems.length;
const handleClick = e => { const handleClick = e => {
e.stopPropagation(); e.stopPropagation();
}; };
return ( return (
<ListWrapper> <ListWrapper>
<div className="row"> {selectedAssets > 0 && (
<IntlText
id={getTrad(`list.assets.selected.${selectedAssets > 1 ? 'plural' : 'singular'}`)}
values={{ number: selectedAssets }}
lineHeight="18px"
/>
)}
<ListRow>
{data.map(item => { {data.map(item => {
const { id } = item; const { id } = item;
const url = get(item, ['formats', 'thumbnail', 'url'], item.url); const url = get(item, ['formats', 'thumbnail', 'url'], item.url);
@ -63,7 +74,7 @@ const List = ({
</ListCell> </ListCell>
); );
})} })}
</div> </ListRow>
</ListWrapper> </ListWrapper>
); );
}; };

2
packages/strapi-plugin-upload/admin/src/components/ListWrapper/index.js
View File

@ -2,7 +2,7 @@ import styled from 'styled-components';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const ListWrapper = styled.div` const ListWrapper = styled.div`
margin-top: ${({ small }) => (small ? '2px' : '26px')}; margin-top: ${({ small }) => (small ? '2px' : '13px')};
`; `;
ListWrapper.defaultProps = { ListWrapper.defaultProps = {

6
packages/strapi-plugin-upload/admin/src/components/SelectedAssets/DraggableCard.js
View File

@ -5,11 +5,11 @@ import { getEmptyImage } from 'react-dnd-html5-backend';
import { formatBytes, getExtension, getType, ItemTypes } from '../../utils'; import { formatBytes, getExtension, getType, ItemTypes } from '../../utils';
import Flex from '../Flex'; import Flex from '../Flex';
import Text from '../Text';
import Border from '../CardBorder'; import Border from '../CardBorder';
import CardImgWrapper from '../CardImgWrapper'; import CardImgWrapper from '../CardImgWrapper';
import CardPreview from '../CardPreview'; import CardPreview from '../CardPreview';
import ErrorMessage from '../CardErrorMessage'; import ErrorMessage from '../CardErrorMessage';
import FileInfos from '../FileInfos';
import Title from '../CardTitle'; import Title from '../CardTitle';
import Tag from '../Tag'; import Tag from '../Tag';
import Wrapper from '../CardWrapper'; import Wrapper from '../CardWrapper';
@ -99,9 +99,7 @@ const DraggableCard = ({
<Title>{name}</Title> <Title>{name}</Title>
<Tag label={getType(fileType)} /> <Tag label={getType(fileType)} />
</Flex> </Flex>
<Text color="grey" fontSize="xs" ellipsis> <FileInfos extension={getExtension(fileType)} size={fileSize} />
{`${getExtension(fileType)} - ${fileSize}`}
</Text>
{hasError && <ErrorMessage>{errorMessage}</ErrorMessage>} {hasError && <ErrorMessage>{errorMessage}</ErrorMessage>}
</Wrapper> </Wrapper>
); );

5
packages/strapi-plugin-upload/admin/src/components/Tag/Wrapper.js
View File

@ -2,10 +2,11 @@ import styled from 'styled-components';
import { themePropTypes } from 'strapi-helper-plugin'; import { themePropTypes } from 'strapi-helper-plugin';
const Wrapper = styled.div` const Wrapper = styled.div`
background-color: ${({ theme }) => theme.main.colors.mediumGrey};
padding: 0 5px; padding: 0 5px;
height: 14px;
margin-top: 6px; margin-top: 6px;
height: 14px;
background-color: ${({ theme }) => theme.main.colors.mediumGrey};
border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
`; `;
Wrapper.propTypes = { Wrapper.propTypes = {

2
packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js
View File

@ -316,7 +316,7 @@ const HomePage = () => {
actions: [ actions: [
{ {
disabled: dataToDelete.length === 0, disabled: dataToDelete.length === 0,
color: 'cancel', color: 'delete',
// TradId from the strapi-admin package // TradId from the strapi-admin package
label: formatMessage({ id: 'app.utils.delete' }), label: formatMessage({ id: 'app.utils.delete' }),
onClick: () => setIsPopupOpen(true), onClick: () => setIsPopupOpen(true),

4
packages/strapi-plugin-upload/admin/src/translations/en.json
View File

@ -30,6 +30,8 @@
"list.assets-empty.title": "There is no asset yet", "list.assets-empty.title": "There is no asset yet",
"list.assets-empty.title-withSearch": "There is no asset with the applied filters", "list.assets-empty.title-withSearch": "There is no asset with the applied filters",
"list.assets-empty.subtitle": "Add a first one to the list.", "list.assets-empty.subtitle": "Add a first one to the list.",
"list.assets.selected.plural": "{number} assets selected",
"list.assets.selected.singular": "{number} asset selected",
"modal.header.browse": "Upload assets", "modal.header.browse": "Upload assets",
"modal.header.select-files": "Pending assets", "modal.header.select-files": "Pending assets",
"modal.header.file-detail": "Details", "modal.header.file-detail": "Details",
@ -67,4 +69,4 @@
"sort.updated_at_desc": "Most recent updates", "sort.updated_at_desc": "Most recent updates",
"window.confirm.close-modal.files": "Are you sure? You have some files that have not been uploaded yet.", "window.confirm.close-modal.files": "Are you sure? You have some files that have not been uploaded yet.",
"window.confirm.close-modal.file": "Are you sure? Your changes will be lost." "window.confirm.close-modal.file": "Are you sure? Your changes will be lost."
} }

62
yarn.lock
View File

@ -844,15 +844,15 @@
lodash "^4.17.13" lodash "^4.17.13"
to-fast-properties "^2.0.0" to-fast-properties "^2.0.0"
"@buffetjs/core@3.0.4": "@buffetjs/core@3.0.5":
version "3.0.4" version "3.0.5"
resolved "https://registry.yarnpkg.com/@buffetjs/core/-/core-3.0.4.tgz#834076181674bde456af0a9a1e0a26bc4d5cc31e" resolved "https://registry.yarnpkg.com/@buffetjs/core/-/core-3.0.5.tgz#52b7f38603814c761bf3382159b769590d8306e6"
integrity sha512-52cq9IDKmpoeAxWgEEt7r1mbadJWpaZF65QJtGndcnjP8oGBiw07+WDd+OamYWpiftbeKfIihcojHFZ3Zk/W7A== integrity sha512-xY5xIi8b6QRFdYjGoPjWr6LmTV35wlsG6o3LeopkDViBVKtiVkmifv7mq64TcrHfuR8haolG8UsdE46Gy8HPoQ==
dependencies: dependencies:
"@buffetjs/hooks" "3.0.4" "@buffetjs/hooks" "3.0.5"
"@buffetjs/icons" "3.0.4" "@buffetjs/icons" "3.0.5"
"@buffetjs/styles" "3.0.4" "@buffetjs/styles" "3.0.5"
"@buffetjs/utils" "3.0.4" "@buffetjs/utils" "3.0.5"
"@fortawesome/fontawesome-svg-core" "^1.2.25" "@fortawesome/fontawesome-svg-core" "^1.2.25"
"@fortawesome/free-regular-svg-icons" "^5.11.2" "@fortawesome/free-regular-svg-icons" "^5.11.2"
"@fortawesome/free-solid-svg-icons" "^5.11.2" "@fortawesome/free-solid-svg-icons" "^5.11.2"
@ -863,31 +863,31 @@
react-dates "^21.5.1" react-dates "^21.5.1"
react-moment-proptypes "^1.7.0" react-moment-proptypes "^1.7.0"
"@buffetjs/custom@3.0.4": "@buffetjs/custom@3.0.5":
version "3.0.4" version "3.0.5"
resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-3.0.4.tgz#d7f4669640f377343851a59ae280b010943650ec" resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-3.0.5.tgz#ead4e52220b6254737717f9cb549e73ae46d17bc"
integrity sha512-yO63Aab/Y61Em+FUsIEfmi5d2WgdoWilTkUAQX2eb9wPxZTcUpPedYK/38Zdx2rudKA+VHBsFOoM92vQRGthgw== integrity sha512-VvzZtmngFVBxWj+3cd4nZ6ccWzis8SEb8ClzYV5n+EhMRLBiYDRJ8sjIIYSbDtu4HQv87p7Hh1MkFKy1FMbpjg==
dependencies: dependencies:
"@buffetjs/core" "3.0.4" "@buffetjs/core" "3.0.5"
"@buffetjs/styles" "3.0.4" "@buffetjs/styles" "3.0.5"
"@buffetjs/utils" "3.0.4" "@buffetjs/utils" "3.0.5"
moment "^2.24.0" moment "^2.24.0"
react-moment-proptypes "^1.7.0" react-moment-proptypes "^1.7.0"
"@buffetjs/hooks@3.0.4": "@buffetjs/hooks@3.0.5":
version "3.0.4" version "3.0.5"
resolved "https://registry.yarnpkg.com/@buffetjs/hooks/-/hooks-3.0.4.tgz#0f761014f37caa4c7fa9abd0187d7ed17a146f12" resolved "https://registry.yarnpkg.com/@buffetjs/hooks/-/hooks-3.0.5.tgz#b48301102ec69c0ebc10d83eb8ace70adb0a2a58"
integrity sha512-PlS1lEt7mY8/bDkDi1AIjVZUgM/EDG4do13G7DeHAP5swjJ05yRRi/dLT144BbdJEfezaNE5j6CBKcPgnegERA== integrity sha512-6NSETsJ3EfPzLXRGHAcsRAImCTrzm6oAc3V8ijqSTajf0e70UPhntfCbcN+l0vpDVlqut3YArLQmfVznva2xsw==
"@buffetjs/icons@3.0.4": "@buffetjs/icons@3.0.5":
version "3.0.4" version "3.0.5"
resolved "https://registry.yarnpkg.com/@buffetjs/icons/-/icons-3.0.4.tgz#4a623ba2766c263c56ce5e3f6dcd0c3c4fc7fa4c" resolved "https://registry.yarnpkg.com/@buffetjs/icons/-/icons-3.0.5.tgz#6784c60026e4ed1b7633c5d59dd0193e7c9467c8"
integrity sha512-b4/1+x31mM96ycFDeGOBMA4XZRaAm0BPGsrh2mTI23smvn/2pSkcDvV7ughHp+0ezdNKYtDc7xKg136ILmF0ZQ== integrity sha512-GZgYLMJ7nkDhAiczK3vRj9OEkjw2pLMaHNVfQxeBgZk2JdWrMXFSPxeJrw4BLGExO7m1L6F9aEuLsw2R/OBR5w==
"@buffetjs/styles@3.0.4": "@buffetjs/styles@3.0.5":
version "3.0.4" version "3.0.5"
resolved "https://registry.yarnpkg.com/@buffetjs/styles/-/styles-3.0.4.tgz#d9343721ba01adbcd592c5195b2f42ab17c0f8ce" resolved "https://registry.yarnpkg.com/@buffetjs/styles/-/styles-3.0.5.tgz#102b3aa25bad017657dd3e87bf59c7cc979892f0"
integrity sha512-Px7WN1ZmeBHTRzxxQ6KSRoJ5aoDI8oxB24OJIAXpKqr075F4Q7TjZlp3oBUSWaVVVFtJFIR+hjkOO3uOn86y+g== integrity sha512-c4OFX/SBnevMZNofjiboxU/Ixx3eHS2Fb4dqVrKvHYAdTQhHVzcoECCqz2RZcRfUNpaLuJKhE9EeRGj2lmgHVA==
dependencies: dependencies:
"@fortawesome/fontawesome-free" "^5.12.0" "@fortawesome/fontawesome-free" "^5.12.0"
"@fortawesome/fontawesome-svg-core" "^1.2.22" "@fortawesome/fontawesome-svg-core" "^1.2.22"
@ -896,10 +896,10 @@
"@fortawesome/react-fontawesome" "^0.1.4" "@fortawesome/react-fontawesome" "^0.1.4"
react-dates "^21.1.0" react-dates "^21.1.0"
"@buffetjs/utils@3.0.4": "@buffetjs/utils@3.0.5":
version "3.0.4" version "3.0.5"
resolved "https://registry.yarnpkg.com/@buffetjs/utils/-/utils-3.0.4.tgz#efc87822a5a26c1070714b078a7aff1f3153349b" resolved "https://registry.yarnpkg.com/@buffetjs/utils/-/utils-3.0.5.tgz#24bd3f3c6f30a9f7d0851a7741dae5c70f8272ea"
integrity sha512-XUdMV2UvZXKM3JMaEIZXRzBCmbdKJlyec9NhjEAXYuVnUhT9vsfyH2SiD+C4fsxSj+LmBx/JU4VWOYc+OTxSRw== integrity sha512-HFhqBBi8N8MTOkTa1/AuET26gET2tI8El1d10aCscLFx5mT7O94LUbspL6RwqTd62SkEli528aV/gBA5fHdTjA==
dependencies: dependencies:
yup "^0.27.0" yup "^0.27.0"