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 {
>
{name}
- { isHover && !isDragging && (
+ { isOver && !isDragging && (
)}
- { !isHover && upperFirst(name) !== label && (
+ { !isOver && upperFirst(name) !== label && (
{label}
)}
- {isEditing && !isHover? (
+ {isEditing && !isOver? (
) : (
-
+
)}
),
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/styles.scss b/packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/styles.scss
index e4a88542e5..36f71390c0 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/styles.scss
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/styles.scss
@@ -1,12 +1,12 @@
.draggableAttr {
position: relative;
- height: 28px;
+ height: 30px;
width: 100%;
- margin-bottom: 8px;
+ margin-bottom: 6px;
padding-left: 10px;
justify-content: space-between;
background: #FAFAFB;
- line-height: 28px;
+ line-height: 30px;
color: #333740;
border: 1px solid #E3E9F3;
border-radius: 2px;
@@ -15,13 +15,15 @@
font-size: 11px;
color: #B3B5B9;
}
- &:hover {
- border: 1px solid #AED4FB!important;
- }
+}
+
+.draggableAttrOvered {
+ border: 1px solid #AED4FB!important;
}
.editingAttr {
background: #E6F0FB!important;
+ border: 1px solid #AED4FB!important;
}
.info {
@@ -35,7 +37,26 @@
.removeIcon {
width: 30px;
background: #F3F4F4;
- height: 26px;
+ height: 28px;
+ cursor: pointer;
+ text-align: center;
+ float: right;
+
+ &:after {
+ display: inline-block;
+ content: '';
+ width: 8px;
+ height: 8px;
+ margin: auto;
+ margin-top: -3px;
+ background-image: url('../../assets/images/icon-cross.svg');
+ }
+}
+
+.removeIconDragged {
+ width: 30px;
+ background: #F3F4F4;
+ height: 28px;
cursor: pointer;
text-align: center;
float: right;
@@ -54,7 +75,7 @@
.editIcon {
width: 30px;
background: #E6F0FB;
- height: 26px;
+ height: 28px;
cursor: pointer;
text-align: center;
float: right;
@@ -72,15 +93,16 @@
.dragged {
position: relative;
- height: 28px;
+ height: 30px !important;
width: 100%;
- margin-bottom: 8px;
+ margin-bottom: 6px;
+ box-shadow: 0!important;
padding-left: 10px;
justify-content: space-between;
- background: #E6F0FB;
- line-height: 28px;
+ background: #E6F0FB !important;
+ line-height: 30px;
color: #333740;
- border: 1px solid #AED4FB;
+ border: 1px solid darken(#AED4FB, 20%)!important;
border-radius: 2px;
> i {
margin-right: 10px;
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SettingsRow/styles.scss b/packages/strapi-plugin-content-manager/admin/src/components/SettingsRow/styles.scss
index c9645640de..dcaee4c528 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/SettingsRow/styles.scss
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SettingsRow/styles.scss
@@ -28,4 +28,5 @@
.frame {
position: relative;
padding-left: 55px;
+ font-weight: 500;
}
\ No newline at end of file
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/forms.json b/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/forms.json
index a8d6d93daf..66e7de55b4 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/forms.json
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/forms.json
@@ -43,6 +43,7 @@
"customBootstrapClass": "col-md-4 ml-md-auto",
"didCheckErrors": false,
"errors": [],
+ "style": { "marginRight": "-20px" },
"name": "defaultSort",
"selectOptions": ["_id"],
"type": "select",
@@ -53,7 +54,7 @@
"customBootstrapClass": "col-md-1",
"didCheckErrors": false,
"errors": [],
- "inputStyle": { "maxWidth": "130px" },
+
"name": "sort",
"selectOptions": ["ASC", "DESC"],
"type": "select",
@@ -80,15 +81,6 @@
"name": "sortable",
"type": "toggle",
"validations": {}
- },
- {
- "label": { "id": "content-manager.form.Input.search.field" },
- "customBootstrapClass": "col-md-6",
- "didCheckErrors": false,
- "errors": [],
- "name": "searchable",
- "type": "toggle",
- "validations": {}
}
]
}
\ No newline at end of file
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/index.js
index cc7c59fa8a..f8bb6eb7a1 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/index.js
@@ -251,11 +251,14 @@ class SettingPage extends React.PureComponent {
{forms.inputs.map(input => {
const inputName = `${namePath}.${input.name}`;
-
+ console.log(input.name)
+ let inputStyle = input.name === 'defaulteSort' ? { marginRight: '-20px' } : {};
+
return (
div {
- height: 28px;
+ height: 30px;
width: 100%;
justify-content: space-between;
background: #ffffff;
@@ -72,13 +72,14 @@
position: relative;
cursor: pointer;
padding-left: 10px !important;
- line-height: 28px;
+ line-height: 30px;
width: 100%;
color: #333740;
text-align: left;
background-color: #ffffff;
border: none;
font-size: 13px;
+ font-weight: 500;
&:focus, &:active, &:hover, &:visited {
background-color: transparent!important;
box-shadow: none;
@@ -113,8 +114,8 @@
overflow: scroll;
button {
- height: 28px;
- line-height: 28px;
+ height: 30px;
+ line-height: 30px;
div {
margin: 0;
white-space: nowrap;