diff --git a/packages/strapi-plugin-content-manager/admin/src/components/Block/styles.scss b/packages/strapi-plugin-content-manager/admin/src/components/Block/styles.scss index bb594ce73c..a37d677fea 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/Block/styles.scss +++ b/packages/strapi-plugin-content-manager/admin/src/components/Block/styles.scss @@ -10,8 +10,8 @@ .ctmBlockTitle { padding-top: 0px; line-height: 18px; - font-weight: 400; > span { + font-weight: 600; color: #333740; font-size: 18px; } diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/index.js b/packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/index.js index 604e83a5ad..c9cd5ded9a 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/index.js @@ -18,9 +18,7 @@ import cn from 'classnames'; import styles from './styles.scss'; const draggableAttrSource = { - beginDrag: (props, monitor, component) => { - const el = findDOMNode(component); - el.className = styles.dragged; + beginDrag: (props) => { props.updateSiblingHoverState(); return { @@ -28,10 +26,7 @@ const draggableAttrSource = { index: props.index, }; }, - endDrag: (props, monitor, component) => { - const el = findDOMNode(component); - const className = props.isEditing ? `${styles.draggableAttr} ${styles.editingAttr}` : styles.draggableAttr; - el.className = className; + endDrag: (props) => { props.updateSiblingHoverState(); return {}; @@ -86,7 +81,7 @@ const draggableAttrTarget = { }; class DraggableAttr extends React.Component { - state = { isHover: false }; + state = { isOver: false, dragStart: false }; componentDidUpdate(prevProps) { const { isDraggingSibling } = this.props; @@ -104,11 +99,11 @@ class DraggableAttr extends React.Component { handleMouseEnter = () => { if (!this.props.isDraggingSibling) { - this.setState({ isHover: true }); + this.setState({ isOver: true }); } }; - handleMouseLeave = () => this.setState({ isHover: false }); + handleMouseLeave = () => this.setState({ isOver: false }); handleRemove = (e) => { e.preventDefault(); @@ -118,14 +113,18 @@ class DraggableAttr extends React.Component { render() { const { label, name, isDragging, isEditing, connectDragSource, connectDropTarget } = this.props; - const { isHover } = this.state; + const { isOver, dragStart } = this.state; const opacity = isDragging ? 0.2 : 1; + const overClass = isOver ? styles.draggableAttrOvered : ''; + const className = dragStart ? styles.dragged : styles.draggableAttr; return ( connectDragSource( connectDropTarget(
this.setState({ dragStart: true })} + onDragEnd={() => this.setState({ dragStart: false })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClickEdit} @@ -133,20 +132,20 @@ class DraggableAttr extends React.Component { >