diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/Wrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/Wrapper.js index a4ba67d145..5990203eb0 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/Wrapper.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/Wrapper.js @@ -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; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/index.js b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/index.js index 132bf4ad19..ecd64f73bd 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/index.js @@ -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 ( - +
@@ -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, }; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SortWrapper/index.js b/packages/strapi-plugin-content-manager/admin/src/components/SortWrapper/index.js index cc9b1fc406..1409f671fa 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/SortWrapper/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/SortWrapper/index.js @@ -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; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/DragWrapper.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/DragWrapper.js new file mode 100644 index 0000000000..ee63e6abfb --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/DragWrapper.js @@ -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; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js index 0fbfec9b27..95e63a07ce 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js @@ -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 = ({ }, }} > -
-
- - {getListDisplayedFields().map((item, index) => { - return ( - { - if (getListDisplayedFields().length === 1) { - strapi.notification.info( - `${pluginId}.notification.info.minimumFields` - ); - } else { - dispatch({ - type: 'REMOVE_FIELD', - index, - }); - } - }} - /> - ); - })} - { - if (getListRemainingFields().length > 0) { - setIsOpen(prevState => !prevState); - } + +
+
+ - - - {getListRemainingFields().map(item => ( - { + return ( + { - 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} - - ))} - - - + /> + ); + })} + +
-
+ { + if (getListRemainingFields().length > 0) { + setIsOpen(prevState => !prevState); + } + }} + direction="down" + style={{ + position: 'absolute', + top: 11, + right: 10, + }} + > + + + {getListRemainingFields().map(item => ( + { + dispatch({ + type: 'ADD_FIELD', + item, + }); + }} + > + {item} + + ))} + + +