yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-07-31 21:09:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix css

Browse Source
This commit is contained in:
cyril lopez 2018-07-06 12:34:11 +02:00
parent b9b2e55d4b
commit 6af99aebdc
7 changed files with 63 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/strapi-plugin-content-manager/admin/src/components/Block/styles.scss
View File

@ -10,8 +10,8 @@
.ctmBlockTitle {
padding-top: 0px;
line-height: 18px;
font-weight: 400;
> span {
font-weight: 600;
color: #333740;
font-size: 18px;
}

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

@ -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(
<div
className={cn(styles.draggableAttr, isEditing && styles.editingAttr)}
className={cn(className, isEditing && styles.editingAttr, overClass)}
onDragStart={() => 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 {
>
<i className="fa fa-th" aria-hidden="true" />
<span>{name}</span>
{ isHover && !isDragging && (
{ isOver && !isDragging && (
<div className={styles.info}>
<FormattedMessage id="content-manager.components.DraggableAttr.edit" />
</div>
)}
{ !isHover && upperFirst(name) !== label && (
{ !isOver && upperFirst(name) !== label && (
<div className={styles.info}>
{label}
</div>
)}
{isEditing && !isHover? (
{isEditing && !isOver? (
<span className={styles.editIcon} onClick={this.handleClickEdit} />
) : (
<span className={styles.removeIcon} onClick={this.handleRemove} />
<span className={cn( dragStart ? styles.removeIconDragged : styles.removeIcon)} onClick={this.handleRemove} />
)}
</div>
),

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

@ -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;

1
packages/strapi-plugin-content-manager/admin/src/components/SettingsRow/styles.scss
View File

@ -28,4 +28,5 @@
.frame {
position: relative;
padding-left: 55px;
font-weight: 500;
}

12
packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/forms.json
View File

@ -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": {}
}
]
}

5
packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/index.js
View File

@ -251,11 +251,14 @@ class SettingPage extends React.PureComponent {
<div className="row">
{forms.inputs.map(input => {
const inputName = `${namePath}.${input.name}`;
console.log(input.name)
let inputStyle = input.name === 'defaulteSort' ? { marginRight: '-20px' } : {};
return (
<Input
{...input}
key={input.name}
// style={inputStyle}
name={inputName}
onChange={onChangeSettings}
selectOptions={this.getSelectOptions(input)}

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

@ -61,7 +61,7 @@
.dropdownWrapper {
margin-left: 30px;
> 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;