yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 16:29:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5734 from strapi/media-lib/ui-fix

Browse Source 
Fix UI in the Media Library
This commit is contained in:
cyril lopez 2020-04-07 16:59:43 +02:00 committed by GitHub
commit 64d74c8707
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 88 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/strapi-helper-plugin/lib/src/components/GlobalPagination/Wrapper.js
View File

@ -22,7 +22,7 @@ const Wrapper = styled.div`
width: 36px;
text-align: center;
line-height: 30px;
font-size: 2rem;
font-size: 1.6rem;
i,
svg {
color: #97999e;

16
packages/strapi-helper-plugin/lib/src/components/GlobalPagination/index.js
View File

@ -11,8 +11,7 @@ import cn from 'classnames';
import Wrapper from './Wrapper';
class GlobalPagination extends React.Component {
getLastPageNumber = () =>
Math.ceil(this.props.count / this.props.params._limit) || 1;
getLastPageNumber = () => Math.ceil(this.props.count / this.props.params._limit) || 1;
handleDotsClick = e => e.preventDefault();
@ -62,8 +61,7 @@ class GlobalPagination extends React.Component {
isLastPage = () => this.props.params._page === this.getLastPageNumber();
needAfterLinksDots = () =>
this.props.params._page < this.getLastPageNumber() - 1;
needAfterLinksDots = () => this.props.params._page < this.getLastPageNumber() - 1;
needPreviousLinksDots = () => this.props.params._page > 3;
@ -115,11 +113,7 @@ class GlobalPagination extends React.Component {
// Generate links
return map(linksOptions, (linksOption, key) => (
<li className={cn(linksOption.isActive && 'navLiActive')} key={key}>
<a
href=""
disabled={linksOption.isActive}
onClick={linksOption.handleClick}
>
<a href="" disabled={linksOption.isActive} onClick={linksOption.handleClick}>
{linksOption.value}
</a>
</li>
@ -136,7 +130,7 @@ class GlobalPagination extends React.Component {
onClick={this.handlePreviousPageClick}
disabled={this.isFirstPage()}
>
<i className="fa fa-angle-left" aria-hidden="true" />
<i className="fa fa-chevron-left" aria-hidden="true" />
</a>
<nav className="navWrapper">
<ul className="navUl">{this.renderLinks()}</ul>
@ -147,7 +141,7 @@ class GlobalPagination extends React.Component {
onClick={this.handleNextPageClick}
disabled={this.isLastPage()}
>
<i className="fa fa-angle-right" aria-hidden="true" />
<i className="fa fa-chevron-right" aria-hidden="true" />
</a>
</div>
</Wrapper>

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

@ -55,7 +55,7 @@ const BrowseAssets = () => {
const canSelectFile = multiple === true || (selectedFiles.length < 1 && !multiple);
const handleListCardClick = id => {
if (!canSelectFile) {
if (!canSelectFile && id !== selectedFiles[0].id) {
return;
}

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

@ -24,8 +24,34 @@ const Wrapper = styled.div`
`};
&:hover {
${({ type }) => {
if (type === 'trash-alt' || type === 'clear') {
${({ type, theme, color }) => {
if (type === 'plus') {
return `
background-color: ${theme.main.colors.darkBlue};
border: 1px solid ${theme.main.colors.darkBlue};
> svg {
> g, path {
stroke: ${theme.main.colors.mediumBlue};
}
}
color: ${theme.main.colors.mediumBlue};
`;
}
if (type === 'check' || type === 'times') {
return `
background-color: ${color};
border: 1px solid ${color};
> svg {
> g, path {
fill: ${theme.main.colors.white};
}
}
color: ${theme.main.colors.white};
`;
}
if (type === 'trash-alt') {
return `
background-color: #FFA784;
border: 1px solid #FFA784;
@ -33,29 +59,15 @@ const Wrapper = styled.div`
`;
}
if (type === 'plus') {
return `
background-color: ${({ theme }) => theme.main.colors.darkBlue};
border: 1px solid ${({ theme }) => theme.main.colors.darkBlue};
> svg {
> g, path {
stroke: ${({ theme }) => theme.main.colors.mediumBlue};
}
}
color: ${({ theme }) => theme.main.colors.mediumBlue};
`;
}
return `
background-color: ${({ theme }) => theme.main.colors.darkBlue};
border: 1px solid ${({ theme }) => theme.main.colors.darkBlue};
background-color: ${theme.main.colors.darkBlue};
border: 1px solid ${theme.main.colors.darkBlue};
> svg {
> g, path {
fill: ${({ theme }) => theme.main.colors.mediumBlue};
fill: ${theme.main.colors.mediumBlue};
}
}
color: ${({ theme }) => theme.main.colors.mediumBlue};
color: ${theme.main.colors.mediumBlue};
`;
}};
}

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

@ -5,12 +5,16 @@ const CardImgWrapper = styled.div`
position: relative;
width: 100%;
height: 0;
overflow: hidden;
padding-top: ${({ small }) => (small ? '62.8%' : '63.8%')};
margin-bottom: 6px;
border-radius: 2px;
background-color: #f6f6f6;
.card-control-wrapper-displayed {
display: flex;
z-index: 1045;
}
.card-control-wrapper {
display: none;
}

1
packages/strapi-plugin-upload/admin/src/components/CardPreview/Wrapper.js
View File

@ -5,6 +5,7 @@ const Wrapper = styled.div`
width: 100%;
height: 100%;
position: absolute;
border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
top: 0;
left: 0;
display: flex;

4
packages/strapi-plugin-upload/admin/src/components/EditForm/index.js
View File

@ -223,7 +223,7 @@ const EditForm = forwardRef(
<InfiniteLoadingIndicator onClick={onAbortUpload} />
) : (
<Fragment>
<CardControlsWrapper className="card-control-wrapper">
<CardControlsWrapper className="card-control-wrapper-displayed">
{!isCropping ? (
<>
<CardControl
@ -269,7 +269,7 @@ const EditForm = forwardRef(
onClick={handleToggleCropMode}
type="times"
title="cancel"
iconStyle={{ height: '1.4rem', width: '1.4rem' }}
iconStyle={{ height: '1.6rem', width: '1.6rem' }}
/>
<CheckButton
color="#6DBB1A"

45
packages/strapi-plugin-upload/admin/src/components/InputMedia/index.js
View File

@ -22,6 +22,7 @@ const InputMedia = ({ label, onChange, name, attribute, value, type }) => {
isOpen: false,
step: 'list',
fileToEdit: null,
isDisplayed: false,
});
const [fileToDisplay, setFileToDisplay] = useState(0);
const hasNoValue = !!value && Array.isArray(value) && value.length === 0;
@ -32,9 +33,11 @@ const InputMedia = ({ label, onChange, name, attribute, value, type }) => {
attribute.multiple && value.length > 1 ? ` (${fileToDisplay + 1}/${value.length})` : '';
const handleClickToggleModal = () => {
setModal(prev => ({ step: 'list', isOpen: !prev.isOpen, fileToEdit: null }));
setModal(prev => ({ isDisplayed: true, step: 'list', isOpen: !prev.isOpen, fileToEdit: null }));
};
const handleClosed = () => setModal(prev => ({ ...prev, isDisplayed: false }));
const handleChange = v => {
onChange({ target: { name, type, value: v } });
};
@ -68,7 +71,12 @@ const InputMedia = ({ label, onChange, name, attribute, value, type }) => {
};
const handleEditFile = () => {
setModal(() => ({ isOpen: true, step: 'edit', fileToEdit: formatFileForEditing(currentFile) }));
setModal(() => ({
isDisplayed: true,
isOpen: true,
step: 'edit',
fileToEdit: formatFileForEditing(currentFile),
}));
};
const handleCopy = () => {
@ -82,7 +90,12 @@ const InputMedia = ({ label, onChange, name, attribute, value, type }) => {
e.persist();
if (e.dataTransfer) {
setModal(() => ({ isOpen: true, step: 'upload', filesToUpload: e.dataTransfer.files }));
setModal(() => ({
isDisplayed: true,
isOpen: true,
step: 'upload',
filesToUpload: e.dataTransfer.files,
}));
}
};
@ -135,18 +148,20 @@ const InputMedia = ({ label, onChange, name, attribute, value, type }) => {
)}
<Input type="file" name={name} />
</CardPreviewWrapper>
<InputModalStepper
isOpen={modal.isOpen}
step={modal.step}
fileToEdit={modal.fileToEdit}
filesToUpload={modal.filesToUpload}
multiple={attribute.multiple}
onInputMediaChange={handleChange}
selectedFiles={value}
onToggle={handleClickToggleModal}
allowedTypes={attribute.allowedTypes}
/>
{modal.isDisplayed && (
<InputModalStepper
isOpen={modal.isOpen}
onClosed={handleClosed}
step={modal.step}
fileToEdit={modal.fileToEdit}
filesToUpload={modal.filesToUpload}
multiple={attribute.multiple}
onInputMediaChange={handleChange}
selectedFiles={value}
onToggle={handleClickToggleModal}
allowedTypes={attribute.allowedTypes}
/>
)}
</Wrapper>
);
};

3
packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/index.js
View File

@ -12,6 +12,7 @@ const InputModal = ({
fileToEdit,
isOpen,
multiple,
onClosed,
onInputMediaChange,
onToggle,
selectedFiles,
@ -30,6 +31,7 @@ const InputModal = ({
<DndProvider backend={HTML5Backend}>
<DragLayer />
<InputModalStepperProvider
onClosed={onClosed}
initialFilesToUpload={filesToUpload}
initialFileToEdit={fileToEdit}
initialFilters={nContainsFilters}
@ -65,6 +67,7 @@ InputModal.propTypes = {
fileToEdit: PropTypes.object,
isOpen: PropTypes.bool.isRequired,
multiple: PropTypes.bool.isRequired,
onClosed: PropTypes.func.isRequired,
onInputMediaChange: PropTypes.func,
onToggle: PropTypes.func,
selectedFiles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),

7
packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/index.js
View File

@ -27,6 +27,7 @@ const InputModalStepperProvider = ({
initialFilters,
isOpen,
multiple,
onClosed,
onInputMediaChange,
selectedFiles,
step,
@ -197,6 +198,7 @@ const InputModalStepperProvider = ({
type: 'RESET_PROPS',
defaultSort: `${updated_at}:DESC`,
});
onClosed();
};
const handleFileSelection = ({ target: { name } }) => {
@ -466,16 +468,17 @@ const InputModalStepperProvider = ({
};
InputModalStepperProvider.propTypes = {
allowedTypes: PropTypes.arrayOf(PropTypes.string),
children: PropTypes.node.isRequired,
initialFilesToUpload: PropTypes.object,
initialFileToEdit: PropTypes.object,
initialFilters: PropTypes.arrayOf(PropTypes.object),
initialFilesToUpload: PropTypes.object,
isOpen: PropTypes.bool,
multiple: PropTypes.bool.isRequired,
onClosed: PropTypes.func.isRequired,
onInputMediaChange: PropTypes.func,
selectedFiles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
step: PropTypes.string.isRequired,
allowedTypes: PropTypes.arrayOf(PropTypes.string),
};
InputModalStepperProvider.defaultProps = {

2
packages/strapi-plugin-upload/admin/src/containers/ModalStepper/stepper.js
View File

@ -14,7 +14,7 @@ const stepper = {
},
upload: {
Component: UploadList,
headerBreadcrumbs: [getTrad('modal.header.select-files')],
headerBreadcrumbs: [getTrad('modal.header.pending-assets')],
next: null,
prev: 'browse',
},

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

@ -33,7 +33,8 @@
"list.assets.selected.plural": "{number} assets selected",
"list.assets.selected.singular": "{number} asset selected",
"modal.header.browse": "Upload assets",
"modal.header.select-files": "Pending assets",
"modal.header.pending-assets": "Pending assets",
"modal.header.select-files": "Selected files",
"modal.header.file-detail": "Details",
"modal.nav.browse": "browse",
"modal.nav.computer": "from computer",