Fix edit view drag-n-drop design

packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/index.js

@@ -142,7 +142,7 @@ class InputNumberWithErrors extends React.Component { // eslint-disable-line rea
 InputNumberWithErrors.defaultProps = {
   autoFocus: false,
   className: '',
-  customBootstrapClass: 'col-md-6',
+  customBootstrapClass: 'col-md-4',
   deactivateErrorHighlight: false,
   didCheckErrors: false,
   disabled: false,

packages/strapi-helper-plugin/lib/src/utils/Manager.js

@@ -37,6 +37,9 @@ class Manager {
     let ret;
 
     switch(number) {
+      case 12:
+        ret = [];
+        break;
       case 9:
         ret = ['__col-md-3__', '__col-md-6__'];
         break;
@@ -77,6 +80,11 @@ class Manager {
       case 'checkbox':
       case 'boolean':
       case 'date':
+      case 'bigint':
+      case 'decimal':
+      case 'float':
+      case 'integer':
+      case 'number':
         return 4;
       case 'json':
       case 'wysiwyg':

packages/strapi-plugin-content-manager/admin/src/components/DragBox/styles.scss

@@ -7,10 +7,11 @@
   justify-content: space-between;
   background: #E6F0FB !important;
   line-height: 30px;
-  color: #333740;
+  // box-sizing: border-box;
-  border: 1px solid darken(#AED4FB, 20%)!important;
+  border: 1px solid #AED4FB!important;
   border-radius: 2px;
-  cursor: move !important;
+  color: #007EFF;
+  font-weight: 500;
 
   > i {
     margin-right: 10px;

packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/index.js

@@ -155,9 +155,9 @@ class DraggableAttr extends React.Component {
           >
             <i className="fa fa-th" aria-hidden="true" />
             <span>{name}</span>
-            <ClickOverHint show={isOver && !isDragging} />
+            <ClickOverHint show={isOver && !isDragging && !isEditing} />
-            { !isOver && name.toLowerCase() !== label.toLowerCase() && (
+            { (!isOver || isEditing) && name.toLowerCase() !== label.toLowerCase() && (
-              <div className={styles.info}>
+              <div className={styles.infoLabel}>
                 {label}
               </div>
             )}
@@ -165,7 +165,7 @@ class DraggableAttr extends React.Component {
               <VariableEditIcon onClick={this.handleClickEdit} />            
             ) : (
               
-              <DraggedRemovedIcon isDragging={dragStart} onRemove={this.handleRemove} />
+              <DraggedRemovedIcon isDragging={dragStart || isEditing} onRemove={this.handleRemove} />
             )}
           </div>
         ),

packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/styles.scss

@@ -25,6 +25,8 @@
 .editingAttr {
   background: #E6F0FB!important;
   border: 1px solid #AED4FB!important;
+  color: #007EFF;
+  font-weight: 500;
 }
 
 .info {
@@ -35,6 +37,14 @@
   font-style: italic;
 }
 
+.infoLabel {
+  position: absolute;
+  top: 0;
+  right: 40px;
+  color: #858B9A;
+  font-weight: 400;
+}
+
 .dragged {
   position: relative;
   height: 30px !important;

packages/strapi-plugin-content-manager/admin/src/components/DraggedRemovedIcon/index.js

@@ -6,13 +6,26 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 import styles from './styles.scss';
 
 function DraggedRemovedIcon({ isDragging, onRemove, withLongerHeight, ...rest }) {
+  let className = styles.removeIcon;
+
+  if (isDragging) {
+    className = styles.removeIconDragged;
+  }
+
+  if (withLongerHeight) {
+    className = styles.removeIconLonger;
+  }
+
+  if (isDragging && withLongerHeight) {
+    className = styles.removeIconLongerDragged;
+  }
+
   return (
     <span
-      className={cn( isDragging && styles.removeIconDragged, withLongerHeight ? styles.removeIconLonger : styles.removeIcon)}
+      className={className}
       onClick={onRemove}
       {...rest}
     />

packages/strapi-plugin-content-manager/admin/src/components/DraggedRemovedIcon/styles.scss

@@ -5,6 +5,7 @@
   cursor: pointer;
   text-align: center;
   float: right;
+  line-height: 28px !important;
 
   &:after {
     display: inline-block;
@@ -12,14 +13,13 @@
     width: 8px;
     height: 8px;
     margin: auto;
-    margin-top: -3px;
     background-image: url('../../assets/images/icon-cross.svg');
   }
 }
 
 .removeIconDragged {
   width: 30px;
-  background: #F3F4F4;
+  background: #AED4FB;
   height: 28px;
   cursor: pointer;
   text-align: center;
@@ -54,3 +54,22 @@
     background-image: url('../../assets/images/icon-cross.svg');
   }
 }
+
+.removeIconLongerDragged {
+  width: 30px;
+  background: #AED4FB;
+  height: 82px;
+  line-height: 82px;
+  cursor: pointer;
+  text-align: center;
+  float: right;
+
+  &:after {
+    display: inline-block;
+    content: '';
+    width: 8px;
+    height: 8px;
+    margin: auto;
+    background-image: url('../../assets/images/icon-cross-blue.svg');
+  }
+}

packages/strapi-plugin-content-manager/admin/src/components/VariableDraggableAttr/index.js

@@ -27,6 +27,11 @@ const getBootstrapClass = attrType => {
     case 'boolean':
     case 'toggle':
     case 'date':
+    case 'bigint':
+    case 'decimal':
+    case 'float':
+    case 'integer':
+    case 'number':
       return {
         bootstrap: 'col-md-4',
         wrapper: cn(styles.attrWrapper),
@@ -41,6 +46,7 @@ const getBootstrapClass = attrType => {
         withLongerHeight: true,
       };
     case 'file':
+    case 'text':
       return {
         bootstrap: 'col-md-6',
         wrapper: cn(styles.attrWrapper, styles.customHeight),
@@ -232,19 +238,19 @@ class VariableDraggableAttr extends React.Component {
         { showLeftCarret && <Carret style={carretStyle} />}
         <div className={cn(classNames.wrapper, isEditing && styles.editingVariableAttr)} style={style}>
           <i className="fa fa-th" />
-          <span className={styles.truncated}>
+          <span className={cn(isEditing && styles.editing, styles.truncated)}>
             {name}
           </span>
-          <ClickOverHint show={isOver} />
+          <ClickOverHint show={isOver && !isEditing} />
-          {!isOver && get(data, 'name', '').toLowerCase() !== get(data, 'label', '').toLowerCase() && (
+          {(!isOver || isEditing) && get(data, 'name', '').toLowerCase() !== get(data, 'label', '').toLowerCase() && (
-            <div className={styles.info}>
+            <div className={styles.infoLabel}>
               {data.label}
             </div>
           )}
           {isEditing && !isOver ? (
             <VariableEditIcon withLongerHeight={classNames.withLongerHeight} onClick={this.handleClickEdit} />
           ) : (
-            <DraggedRemovedIcon withLongerHeight={classNames.withLongerHeight} onRemove={this.handleRemove} />
+            <DraggedRemovedIcon isDragging={isEditing} withLongerHeight={classNames.withLongerHeight} onRemove={this.handleRemove} />
           )}
         </div>
         { showRightCarret && <Carret style={carretStyle} />}

packages/strapi-plugin-content-manager/admin/src/components/VariableDraggableAttr/styles.scss

@@ -55,6 +55,14 @@
   font-style: italic;
 }
 
+.infoLabel {
+  position: absolute;
+  top: 0;
+  right: 40px;
+  color: #858B9A;
+  font-weight: 400;
+}
+
 .truncated {
   overflow: hidden;
   white-space:nowrap;
@@ -71,3 +79,8 @@
   width: 10px;
   background: blue;
 }
+
+.editing {
+  color: #007EFF;
+  font-weight: 500;
+}

packages/strapi-plugin-content-manager/admin/src/containers/App/helpers.js

@@ -5,7 +5,7 @@ import Manager from 'utils/Manager';
 const stateUpdater = (obj, array, keys) => obj.updateIn(['modifiedSchema', 'models', ...keys.split('.'), 'fields'], () => array);
 const createManager = (obj, array, keys, dropIndex, layout) => new Manager(stateUpdater(obj, array, keys), array, keys, dropIndex, layout);
 const getElementsOnALine = (manager, line, list) => {
-  const firstElIndex = line === 0 ? 0 : manager.arrayOfEndLineElements[line - 1].index + 1;
+  const firstElIndex = line === 0 ? 0 : get(manager.arrayOfEndLineElements[line - 1], 'index', list.size -1) + 1;
   const lastElIndex = get(manager.arrayOfEndLineElements[line], 'index', list.size -1) + 1;
   const elements = manager.getElementsOnALine(range(firstElIndex, lastElIndex));
 

packages/strapi-plugin-content-manager/admin/src/containers/App/reducer.js

@@ -373,8 +373,8 @@ function appReducer(state = initialState, action) {
       return state
         .updateIn(['modifiedSchema', 'models', ...action.keys.split('.'), 'fields'], list => {
           const manager = new Manager(state, list, action.keys, 0, layout);
-          const newList = reorderList(manager, manager.getLayout());
+          const newList = manager.getLayout();
-          updatedList = newList;
+          updatedList = reorderList(manager, newList);
 
           return newList;
         })

packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/styles.scss

@@ -48,6 +48,7 @@
   > p {
     margin-bottom: 28px;
     color: #787E8F;
+    font-weight: 400;
   }
 }
 

packages/strapi-plugin-content-type-builder/utils/Manager.js

@@ -37,6 +37,9 @@ class Manager {
     let ret;
 
     switch(number) {
+      case 12:
+        ret = [];
+        break;
       case 9:
         ret = ['__col-md-3__', '__col-md-6__'];
         break;
@@ -76,6 +79,11 @@ class Manager {
       case 'checkbox':
       case 'boolean':
       case 'date':
+      case 'bigint':
+      case 'decimal':
+      case 'float':
+      case 'integer':
+      case 'number':
         return 4;
       case 'json':
       case 'wysiwyg':