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

CM display fields

Browse Source
This commit is contained in:
Virginie Ky 2019-10-16 19:59:00 +02:00 committed by Alexandre Bodin
parent 8ba7bee43d
commit f47ef79e53
5 changed files with 115 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/strapi-plugin-content-manager/admin/src/components/DraggedField/Wrapper.js
View File

@ -1,48 +1,49 @@
import styled from 'styled-components';
const centered = `
display: flex;
flex-direction: column;
justify-content: center;
height: 28px;
`;
import PropTypes from 'prop-types';
const Wrapper = styled.div`
display: table-cell;
height: 30px;
padding: 0 5px;
padding: 0 10px 0 0;
margin-right: 4px;
flex-basis: calc(100% / ${props => props.count});
flex-shrink: 1;
min-width: 130px;
.sub_wrapper {
display: flex;
position: relative;
height: 30px;
padding-left: 10px;
line-height: 30px;
background: #fafafb;
border: 1px solid #e3e9f3;
border-radius: 2px;
.name {
flex-grow: 2;
position: relative;
padding-left: 38px;
padding-right: 38px;
overflow: hidden;
text-overflow: ellipsis;
word-break: nowrap;
white-space: nowrap;
cursor: pointer;
}
.grab {
${centered};
margin-right: 10px;
border-right: 1px solid #e9eaeb;
position: absolute;
top: 0;
left: 0;
padding-left: 10px;
}
.remove {
${centered};
width: 30px;
text-align: center;
background-color: #e9eaeb;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
svg {
align-self: center;
}
@ -50,4 +51,12 @@ const Wrapper = styled.div`
}
`;
Wrapper.defaultProps = {
count: 1,
};
Wrapper.propTypes = {
count: PropTypes.number,
};
export default Wrapper;

9
packages/strapi-plugin-content-manager/admin/src/components/DraggedField/index.js
View File

@ -4,9 +4,9 @@ import GrabIcon from '../../icons/GrabIcon';
import RemoveIcon from '../../icons/RemoveIcon';
import Wrapper from './Wrapper';
const DraggedField = ({ name, onRemove }) => {
const DraggedField = ({ count, name, onRemove }) => {
return (
<Wrapper>
<Wrapper count={count}>
<div className="sub_wrapper">
<div className="grab">
<GrabIcon style={{ marginRight: 10, cursor: 'move' }} />
@ -20,7 +20,12 @@ const DraggedField = ({ name, onRemove }) => {
);
};
DraggedField.defaultProps = {
count: 1,
};
DraggedField.propTypes = {
count: PropTypes.number,
name: PropTypes.string.isRequired,
onRemove: PropTypes.func.isRequired,
};

6
packages/strapi-plugin-content-manager/admin/src/components/SortWrapper/index.js
View File

@ -1,12 +1,6 @@
import styled from 'styled-components';
const SortWrapper = styled.div`
margin-top: 7px;
margin-bottom: 10px;
padding-top: 11px;
border: 1px dashed #e3e9f3;
border-radius: 2px;
// &:after {
// content: '';
// clear: both;

21
packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/DragWrapper.js Normal file
View File

@ -0,0 +1,21 @@
import styled from 'styled-components';
const DragWrapper = styled.div`
position: relative;
padding: 11px 40px 11px 11px;
margin-top: 7px;
margin-bottom: 10px;
border: 1px dashed #e3e9f3;
border-radius: 2px;
> div,
> div > div {
margin: 0;
padding: 0;
}
> div > div {
overflow-x: auto;
overflow-y: hidden;
}
`;
export default DragWrapper;

117
packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js
View File

@ -15,6 +15,7 @@ import SettingsViewWrapper from '../../components/SettingsViewWrapper';
import SortWrapper from '../../components/SortWrapper';
import MenuDropdown from './MenuDropdown';
import DropdownButton from './DropdownButton';
import DragWrapper from './DragWrapper';
import Toggle from './Toggle';
import reducer, { initialState } from './reducer';
import forms from './forms.json';
@ -187,67 +188,71 @@ const ListSettingsView = ({
},
}}
>
<div className="row">
<div className="col-12">
<SortWrapper
style={{
display: 'table',
paddingLeft: 5,
paddingRight: 5,
paddingBottom: 11,
width: '100%',
overflow: 'auto',
}}
>
{getListDisplayedFields().map((item, index) => {
return (
<DraggedField
key={item}
name={item}
onRemove={() => {
if (getListDisplayedFields().length === 1) {
strapi.notification.info(
`${pluginId}.notification.info.minimumFields`
);
} else {
dispatch({
type: 'REMOVE_FIELD',
index,
});
}
}}
/>
);
})}
<DropdownButton
isOpen={isOpen}
toggle={() => {
if (getListRemainingFields().length > 0) {
setIsOpen(prevState => !prevState);
}
<DragWrapper>
<div className="row">
<div className="col-12">
<SortWrapper
style={{
display: 'flex',
width: '100%',
}}
direction="down"
>
<Toggle disabled={getListRemainingFields().length === 0} />
<MenuDropdown>
{getListRemainingFields().map(item => (
<DropdownItem
{getListDisplayedFields().map((item, index) => {
return (
<DraggedField
count={getListDisplayedFields().length}
key={item}
onClick={() => {
dispatch({
type: 'ADD_FIELD',
item,
});
name={item}
onRemove={() => {
if (getListDisplayedFields().length === 1) {
strapi.notification.info(
`${pluginId}.notification.info.minimumFields`
);
} else {
dispatch({
type: 'REMOVE_FIELD',
index,
});
}
}}
>
{item}
</DropdownItem>
))}
</MenuDropdown>
</DropdownButton>
</SortWrapper>
/>
);
})}
</SortWrapper>
</div>
</div>
</div>
<DropdownButton
isOpen={isOpen}
toggle={() => {
if (getListRemainingFields().length > 0) {
setIsOpen(prevState => !prevState);
}
}}
direction="down"
style={{
position: 'absolute',
top: 11,
right: 10,
}}
>
<Toggle disabled={getListRemainingFields().length === 0} />
<MenuDropdown>
{getListRemainingFields().map(item => (
<DropdownItem
key={item}
onClick={() => {
dispatch({
type: 'ADD_FIELD',
item,
});
}}
>
{item}
</DropdownItem>
))}
</MenuDropdown>
</DropdownButton>
</DragWrapper>
</SettingsViewWrapper>
<PopUpWarning
isOpen={showWarningCancel}