diff --git a/scss/_variables.scss b/scss/_variables.scss index 8d3496997..7f599e2a9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1211,7 +1211,7 @@ $Combo--vertical-itemToolbar-positionTop: -$Combo--vertical-itemToolbar-height ! $Combo--vertical-itemToolbar-positionRight: px2rem(5px) !default; $Combo--horizontal-item-gap: px2rem(5px); -$Combo--horizontal-dragger-top: px2rem(8px) !default; +$Combo--horizontal-dragger-top: px2rem(10px) !default; // Sub Form $SubForm--addBtn-bg: $Button--info-bg !default; diff --git a/scss/components/_button.scss b/scss/components/_button.scss index 369bd9bf8..33df794aa 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -276,6 +276,12 @@ fieldset:disabled a.#{$ns}Button { min-width: $Button-height * $Button--iconOnly-minWidthRate; &:not(.#{$ns}Button--link) { + > svg { + width: px2rem(14px); + height: px2rem(14px); + top: px2rem(2px); + } + > .fa, > .iconfont { font-size: $fontSizeMd; diff --git a/scss/components/form/_combo.scss b/scss/components/form/_combo.scss index 799548f0a..1f5bb50b7 100644 --- a/scss/components/form/_combo.scss +++ b/scss/components/form/_combo.scss @@ -70,9 +70,17 @@ &-itemDrager { cursor: move; + > a { + color: $icon-color; + + &:hover { + color: $icon-onHover-color; + } + } + svg { - width: px2rem(20px); - height: px2rem(20px); + width: px2rem(16px); + height: px2rem(16px); top: $Combo--horizontal-dragger-top; } } diff --git a/src/components/ResultList.tsx b/src/components/ResultList.tsx index d85148a77..7e371987a 100644 --- a/src/components/ResultList.tsx +++ b/src/components/ResultList.tsx @@ -144,10 +144,7 @@ export class ResultList extends React.Component { key={index} > {sortable && !disabled && value.length > 1 ? ( - + ) : null} diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 523441ba7..d8968b445 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -64,11 +64,17 @@ import InfoIcon from '../icons/info.svg'; import LocationIcon from '../icons/location.svg'; // @ts-ignore -import ComboDraggerIcon from '../icons/combo-dragger.svg'; +import DragBarIcon from '../icons/drag-bar.svg'; // @ts-ignore import ReloadIcon from '../icons/reload.svg'; +// @ts-ignore +import ExchangeIcon from '../icons/exchange.svg'; + +// @ts-ignore +import ColmunsIcon from '../icons/columns.svg'; + // 兼容原来的用法，后续不直接试用。 // @ts-ignore export const closeIcon = ; @@ -131,8 +137,10 @@ registerIcon('back', BackIcon); registerIcon('move', MoveIcon); registerIcon('info', InfoIcon); registerIcon('location', LocationIcon); -registerIcon('combo-dragger', ComboDraggerIcon); +registerIcon('drag-bar', DragBarIcon); registerIcon('reload', ReloadIcon); +registerIcon('exchange', ExchangeIcon); +registerIcon('columns', ColmunsIcon); export function Icon({ icon, diff --git a/src/icons/columns.svg b/src/icons/columns.svg new file mode 100644 index 000000000..f9dcc8886 --- /dev/null +++ b/src/icons/columns.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/src/icons/combo-dragger.svg b/src/icons/combo-dragger.svg deleted file mode 100644 index f6e7a6ecf..000000000 --- a/src/icons/combo-dragger.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/drag-bar.svg b/src/icons/drag-bar.svg new file mode 100644 index 000000000..f229aedcb --- /dev/null +++ b/src/icons/drag-bar.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/src/icons/exchange.svg b/src/icons/exchange.svg new file mode 100644 index 000000000..b54facf1a --- /dev/null +++ b/src/icons/exchange.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx index eed983fca..b9049f89d 100644 --- a/src/renderers/Form/Combo.tsx +++ b/src/renderers/Form/Combo.tsx @@ -493,7 +493,7 @@ export default class ComboControl extends React.Component { if (minLength && (!Array.isArray(value) || value.length < minLength)) { return __( (messages && messages.minLengthValidateFailed) || - '组合表单成员数量不够，低于设定的最小{{minLenth}}个，请添加更多的成员。', + '组合表单成员数量不够，低于设定的最小{{minLength}}个，请添加更多的成员。', {minLength} ); } else if (maxLength && Array.isArray(value) && value.length > maxLength) { @@ -1050,7 +1050,7 @@ export default class ComboControl extends React.Component { {dragIcon ? ( ) : ( - + )} diff --git a/src/renderers/Form/Table.tsx b/src/renderers/Form/Table.tsx index d94437e54..c78a18c9c 100644 --- a/src/renderers/Form/Table.tsx +++ b/src/renderers/Form/Table.tsx @@ -107,7 +107,7 @@ export default class FormTable extends React.Component { if (minLength && (!Array.isArray(value) || value.length < minLength)) { return __( - '组合表单成员数量不够，低于设定的最小{{minLenth}}个，请添加更多的成员。', + '组合表单成员数量不够，低于设定的最小{{minLength}}个，请添加更多的成员。', {minLength} ); } else if (maxLength && Array.isArray(value) && value.length > maxLength) { diff --git a/src/renderers/List.tsx b/src/renderers/List.tsx index 9e7329d11..17d51119f 100644 --- a/src/renderers/List.tsx +++ b/src/renderers/List.tsx @@ -22,6 +22,7 @@ import PopOver from './PopOver'; import Sortable from 'sortablejs'; import {TableCell} from './Table'; import Copyable from './Copyable'; +import {Icon} from '../components/icons'; export interface Column { type: string; @@ -893,7 +894,7 @@ export class ListItem extends React.Component { if (dragging) { return (
- +
); } else if (selectable && !hideCheckToggler) { diff --git a/src/renderers/Table.tsx b/src/renderers/Table.tsx index 815c3dfb1..c7cda0b90 100644 --- a/src/renderers/Table.tsx +++ b/src/renderers/Table.tsx @@ -36,6 +36,7 @@ import {resizeSensor} from '../utils/resize-sensor'; import find from 'lodash/find'; import Overlay from '../components/Overlay'; import PopOverable from './PopOver'; +import {Icon} from '../components/icons'; export interface Column { type: string; @@ -158,8 +159,7 @@ export default class Table extends React.Component { primaryField: 'id', itemCheckableOn: '', itemDraggableOn: '', - hideCheckToggler: false, - dragIcon: 'glyphicon glyphicon-sort' + hideCheckToggler: false }; table?: HTMLTableElement; @@ -1237,7 +1237,7 @@ export default class Table extends React.Component { } else if (column.type === '__dragme') { return ( - {item.draggable ? : null} + {item.draggable ? : null} ); } else if (column.type === '__expandme') { @@ -1281,7 +1281,7 @@ export default class Table extends React.Component { onDragStart={this.handleDragStart} className={cx('Table-dragBtn')} > - + ); } @@ -1487,15 +1487,15 @@ export default class Table extends React.Component { classPrefix={ns} key="columns-toggable" size="sm" - label={} + label={} > {store.toggableColumns.map(column => ( -
  • - +
  • + {column.label ? render('tpl', column.label) : null}
    • @@ -1505,14 +1505,7 @@ export default class Table extends React.Component { } renderDragToggler() { - const { - store, - env, - draggable, - classPrefix: ns, - dragIcon, - translate: __ - } = this.props; + const {store, env, draggable, classPrefix: ns, translate: __} = this.props; if (!draggable || store.isNested) { return null; @@ -1536,7 +1529,7 @@ export default class Table extends React.Component { }} iconOnly > - + ); } diff --git a/src/theme.tsx b/src/theme.tsx index 80b19317d..370af7252 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -108,6 +108,7 @@ export function getTheme(theme: string): ThemeInstance { } export interface ThemeProps { + className?: string; classPrefix: string; classnames: ClassNamesFn; }