CM display fields

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

@@ -1,48 +1,49 @@
 import styled from 'styled-components';
-
+import PropTypes from 'prop-types';
-const centered = `
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 28px;
-`;
 
 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;

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 (
-    <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,
 };

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;

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;

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 = ({
           },
         }}
       >
-        <div className="row">
+        <DragWrapper>
-          <div className="col-12">
+          <div className="row">
-            <SortWrapper
+            <div className="col-12">
-              style={{
+              <SortWrapper
-                display: 'table',
+                style={{
-                paddingLeft: 5,
+                  display: 'flex',
-                paddingRight: 5,
+                  width: '100%',
-                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);
-                  }
                 }}
-                direction="down"
               >
-                <Toggle disabled={getListRemainingFields().length === 0} />
+                {getListDisplayedFields().map((item, index) => {
-                <MenuDropdown>
+                  return (
-                  {getListRemainingFields().map(item => (
+                    <DraggedField
-                    <DropdownItem
+                      count={getListDisplayedFields().length}
                       key={item}
-                      onClick={() => {
+                      name={item}
-                        dispatch({
+                      onRemove={() => {
-                          type: 'ADD_FIELD',
+                        if (getListDisplayedFields().length === 1) {
-                          item,
+                          strapi.notification.info(
-                        });
+                            `${pluginId}.notification.info.minimumFields`
+                          );
+                        } else {
+                          dispatch({
+                            type: 'REMOVE_FIELD',
+                            index,
+                          });
+                        }
                       }}
-                    >
+                    />
-                      {item}
+                  );
-                    </DropdownItem>
+                })}
-                  ))}
+              </SortWrapper>
-                </MenuDropdown>
+            </div>
-              </DropdownButton>
-            </SortWrapper>
           </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}