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

Fix edit view drag-n-drop design

Browse Source
This commit is contained in:
soupette 2018-08-09 18:21:31 +02:00
parent 3d42a91a0c
commit 3feae01952
13 changed files with 100 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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':

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

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

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

@ -155,9 +155,9 @@ class DraggableAttr extends React.Component {
>
<i className="fa fa-th" aria-hidden="true" />
<span>{name}</span>
<ClickOverHint show={isOver && !isDragging} />
{ !isOver && name.toLowerCase() !== label.toLowerCase() && (
<div className={styles.info}>
<ClickOverHint show={isOver && !isDragging && !isEditing} />
{ (!isOver || isEditing) && name.toLowerCase() !== label.toLowerCase() && (
<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>
),

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

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

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

@ -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}
/>

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

@ -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;
@ -53,4 +53,23 @@
margin: auto;
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');
}
}

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

@ -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),
@ -226,25 +232,25 @@ class VariableDraggableAttr extends React.Component {
if (dragStart && isFullSize) {
return <Carret style={carretStyle} />;
}
return (
<div style={{ display: 'flex' }}>
{ 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} />
{!isOver && get(data, 'name', '').toLowerCase() !== get(data, 'label', '').toLowerCase() && (
<div className={styles.info}>
<ClickOverHint show={isOver && !isEditing} />
{(!isOver || isEditing) && get(data, 'name', '').toLowerCase() !== get(data, 'label', '').toLowerCase() && (
<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} />}

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

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

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

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

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

@ -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());
updatedList = newList;
const newList = manager.getLayout();
updatedList = reorderList(manager, newList);
return newList;
})

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

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

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

@ -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':