mirror of
https://github.com/strapi/strapi.git
synced 2025-11-13 16:52:18 +00:00
Design pencil control
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette
parent
1a4ca1fcec
commit
f82aaeb6fd
@ -0,0 +1,16 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e3e9f3;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
> svg {
|
||||
margin: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
export default Wrapper;
|
||||
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Pencil } from '@buffetjs/icons';
|
||||
import Wrapper from './Wrapper';
|
||||
|
||||
const CardControl = () => {
|
||||
return (
|
||||
<Wrapper>
|
||||
<Pencil fill="#b3b5b9" />
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardControl;
|
||||
@ -0,0 +1,10 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const CardControlsWrapper = styled.div`
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export default CardControlsWrapper;
|
||||
@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
|
||||
const CardImgWrapper = styled.div`
|
||||
position: relative;
|
||||
height: ${({ isSmall }) => (isSmall ? '127px' : '156px')};
|
||||
min-width: ${({ isSmall }) => (isSmall ? '200px' : '245px')};
|
||||
min-width: ${({ isSmall }) => (isSmall ? '100%' : '245px')};
|
||||
border-radius: 2px;
|
||||
background: ${({ withOverlay }) => (withOverlay ? '#F6F6F6' : '#333740')};
|
||||
|
||||
@ -18,6 +18,16 @@ const CardImgWrapper = styled.div`
|
||||
|
||||
return '';
|
||||
}}
|
||||
|
||||
.card-control-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.card-control-wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
CardImgWrapper.defaultProps = {
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
import styled from 'styled-components';
|
||||
import ContainerFluid from '../ContainerFluid';
|
||||
|
||||
const Container = styled(ContainerFluid)`
|
||||
margin-bottom: 4px;
|
||||
padding-top: 14px;
|
||||
max-height: 350px;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
`;
|
||||
|
||||
export default Container;
|
||||
@ -1,5 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import CardControl from '../CardControl';
|
||||
import CardControlsWrapper from '../CardControlsWrapper';
|
||||
import CardImgWrapper from '../CardImgWrapper';
|
||||
import InfiniteLoadingIndicator from '../InfiniteLoadingIndicator';
|
||||
|
||||
@ -20,6 +22,11 @@ const RowItem = ({
|
||||
<div>
|
||||
<CardImgWrapper isSmall hasError={hasError}>
|
||||
{isUploading && <InfiniteLoadingIndicator onClick={handleClick} />}
|
||||
{!isUploading && (
|
||||
<CardControlsWrapper className="card-control-wrapper">
|
||||
<CardControl />
|
||||
</CardControlsWrapper>
|
||||
)}
|
||||
</CardImgWrapper>
|
||||
<p style={{ marginBottom: 14 }}>{errorMessage || file.name}</p>
|
||||
</div>
|
||||
|
||||
@ -4,13 +4,12 @@ import { FormattedMessage } from 'react-intl';
|
||||
import { Button } from '@buffetjs/core';
|
||||
import createMatrix from '../../utils/createMatrix';
|
||||
import getTrad from '../../utils/getTrad';
|
||||
import ContainerFluid from '../ContainerFluid';
|
||||
import ModalSection from '../ModalSection';
|
||||
import Text from '../Text';
|
||||
import Container from './Container';
|
||||
import ButtonWrapper from './ButtonWrapper';
|
||||
import TextWrapper from './TextWrapper';
|
||||
import RowItem from './RowItem';
|
||||
import ListWrapper from './ListWrapper';
|
||||
|
||||
const UploadList = ({
|
||||
filesToUpload,
|
||||
@ -56,8 +55,7 @@ const UploadList = ({
|
||||
</ModalSection>
|
||||
|
||||
<ModalSection>
|
||||
<ContainerFluid>
|
||||
<ListWrapper>
|
||||
<Container>
|
||||
{matrix.map(({ key, rowContent }) => {
|
||||
return (
|
||||
<div className="row" key={key}>
|
||||
@ -71,8 +69,7 @@ const UploadList = ({
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</ListWrapper>
|
||||
</ContainerFluid>
|
||||
</Container>
|
||||
</ModalSection>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -20,7 +20,7 @@ const ModalStepper = ({ isOpen, onToggle }) => {
|
||||
const { formatMessage } = useGlobalContext();
|
||||
const [reducerState, dispatch] = useReducer(reducer, initialState, init);
|
||||
const { currentStep, filesToUpload } = reducerState.toJS();
|
||||
const { Component, headerTradId, next, prev } = stepper[currentStep];
|
||||
const { Component, headers, next, prev } = stepper[currentStep];
|
||||
const filesToUploadLength = filesToUpload.length;
|
||||
const toggleRef = useRef();
|
||||
toggleRef.current = onToggle;
|
||||
@ -28,7 +28,7 @@ const ModalStepper = ({ isOpen, onToggle }) => {
|
||||
useEffect(() => {
|
||||
if (currentStep === 'upload' && filesToUploadLength === 0) {
|
||||
// Close modal when file uploading is over
|
||||
toggleRef.current();
|
||||
// toggleRef.current();
|
||||
}
|
||||
}, [filesToUploadLength, currentStep]);
|
||||
|
||||
@ -141,12 +141,10 @@ const ModalStepper = ({ isOpen, onToggle }) => {
|
||||
<Modal isOpen={isOpen} onToggle={onToggle} onClosed={handleClosed}>
|
||||
{/* header title */}
|
||||
<ModalHeader
|
||||
headers={[
|
||||
{
|
||||
key: headerTradId,
|
||||
element: <FormattedMessage id={headerTradId} />,
|
||||
},
|
||||
]}
|
||||
headers={headers.map(headerTrad => ({
|
||||
key: headerTrad,
|
||||
element: <FormattedMessage id={headerTrad} />,
|
||||
}))}
|
||||
/>
|
||||
{/* body of the modal */}
|
||||
{Component && (
|
||||
|
||||
@ -2,7 +2,8 @@ import { fromJS } from 'immutable';
|
||||
import createNewFilesToUploadArray from './utils/createNewFilesToUploadArray';
|
||||
|
||||
const initialState = fromJS({
|
||||
currentStep: 'browse',
|
||||
// currentStep: 'browse',
|
||||
currentStep: 'upload',
|
||||
filesToUpload: [],
|
||||
});
|
||||
|
||||
|
||||
@ -5,19 +5,22 @@ import getTrad from '../../../utils/getTrad';
|
||||
const stepper = {
|
||||
browse: {
|
||||
Component: UploadForm,
|
||||
headerTradId: getTrad('modal.header.browse'),
|
||||
headers: [getTrad('modal.header.browse')],
|
||||
prev: null,
|
||||
next: 'upload',
|
||||
},
|
||||
upload: {
|
||||
Component: UploadList,
|
||||
headerTradId: getTrad('modal.header.select-files'),
|
||||
headers: [getTrad('modal.header.select-files')],
|
||||
next: null,
|
||||
prev: 'browse',
|
||||
},
|
||||
'edit-new': {
|
||||
Component: null,
|
||||
headerTradId: 'coming soon',
|
||||
Component: () => null,
|
||||
headers: [
|
||||
getTrad('modal.header.select-files'),
|
||||
getTrad('modal.header.file-detail'),
|
||||
],
|
||||
next: null,
|
||||
prev: 'upload',
|
||||
},
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"list.assets-empty.subtitle": "Add a first one to the list.",
|
||||
"modal.header.browse": "Upload assets",
|
||||
"modal.header.select-files": "Selected files",
|
||||
"modal.header.file-detail": "Details",
|
||||
"modal.nav.computer": "from computer",
|
||||
"modal.nav.url": "from url",
|
||||
"modal.upload-list.sub-header-title.plural": "{number} assets selected",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user