test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:58:07 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

样式优化

Browse Source
This commit is contained in:
liaoxuezhi 2020-12-25 00:13:14 +08:00
parent c597ec2edd
commit 5de38ac568
9 changed files with 122 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
docs/components/table.md
View File

@ -560,7 +560,31 @@ order: 67
- `mode` 可配置成 `popOver`、`dialog` 或者 `drawer`。 默认为 `popOver`。
- `size` 当配置成 `dialog` 或者 `drawer` 的时候有用。
- `position` 配置弹出位置，只有 `popOver` 模式有用。可选参数：`center`、`left-top`、`right-top`、`left-bottom`、`right-bottom`、`fixed-center`、`fixed-left-top`、`fixed-right-top`、`fixed-left-bottom`、`fixed-right-bottom`。
- `position` 配置弹出位置，只有 `popOver` 模式有用。
可选参数：
- `center`
- `left-top`
- `right-top`
- `left-bottom`
- `right-bottom`
atX-atY-myX-myY
即：对齐目标的位置-对齐自己的位置
- `left-top-right-bottom` 在目标位置的左上角显示。
- `left-center-right-center` 在目标的左侧显示，垂直对齐。
- ...
固定位置
- `fixed-center`
- `fixed-left-top`
- `fixed-right-top`
- `fixed-left-bottom`
- `fixed-right-bottom`。
- `offset` 默认 `{top: 0, left: 0}`，如果要来一定的便宜请设置这个。
- `trigger` 触发弹出的条件。可配置为 `click` 或者 `hover`。默认为 `click`。
- `showIcon` 是否显示图标。默认会有个放大形状的图标出现在列里面。如果配置成 false，则触发事件出现在列上就会触发弹出。

3
examples/components/CRUD/PopOver.tsx
View File

@ -21,7 +21,8 @@ export default {
trigger: 'hover',
showIcon: false,
body: 'Popover 内容：${platform}',
position: 'right-bottom'
popOverClassName: 'min-w-0',
position: 'left-center-right-center right-center-left-center'
}
},
{

13
scss/_properties.scss
View File

@ -459,18 +459,7 @@
--Combo--vertical-item-onHover-borderColor: var(--info);
--Combo--vertical-item-paddingX: #{px2rem(10px)};
--Combo--vertical-item-paddingY: #{px2rem(10px)};
--Combo--vertical-itemToolbar-bg: var(--info);
--Combo--vertical-itemToolbar-borderColor: #{darken($info, 5%)};
--Combo--vertical-itemToolbar-borderRadius: #{px2rem(3px)};
--Combo--vertical-itemToolbar-borderWidth: var(--borderWidth);
--Combo--vertical-itemToolbar-color: #{darken($white, 5%)};
--Combo--vertical-itemToolbar-height: #{px2rem(25px)};
--Combo--vertical-itemToolbar-onHover-color: var(--white);
--Combo--vertical-itemToolbar-positionRight: #{px2rem(5px)};
--Combo--vertical-itemToolbar-positionTop: var(
--Combo--vertical-itemToolbar-height
);
--Combo--vertical-itemToolbar-transion: all 0.25s ease-in-out;
--Combo-addBtn-bg: var(--Button--info-bg);
--Combo-addBtn-border: var(--Button--info-border);
--Combo-addBtn-borderRadius: var(--Button-borderRadius);

64
scss/components/form/_combo.scss
View File

@ -56,6 +56,27 @@
}
}
&-delBtn {
color: var(--icon-color);
cursor: pointer;
&:hover {
color: var(--icon-onHover-color);
}
}
&-tab-delBtn {
color: var(--icon-color);
cursor: pointer;
position: absolute;
top: -8px;
right: 4px;
&:hover {
color: var(--icon-onHover-color);
}
}
&-items {
&:empty {
display: none;
@ -115,14 +136,14 @@
}
}
.#{$ns}Combo-itemToolbar {
.#{$ns}Combo-delBtn {
margin-left: var(--gap-xs);
display: flex;
white-space: nowrap;
align-items: flex-start;
padding-top: var(--Form-label-paddingTop);
> .is-disabled {
&.is-disabled {
pointer-events: none;
opacity: var(--Button-onDisabled-opacity);
}
@ -178,39 +199,11 @@
margin: calc(var(--Combo--vertical-item-gap) * 2);
}
> .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar,
> .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar {
opacity: 0;
> .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-delBtn {
position: absolute;
right: var(--Combo--vertical-itemToolbar-positionRight);
top: calc(var(--Combo--vertical-itemToolbar-positionTop) / 2);
transition: var(--Combo--vertical-itemToolbar-transion);
height: var(--Combo--vertical-itemToolbar-height);
line-height: var(--Combo--vertical-itemToolbar-height);
background: var(--Combo--vertical-itemToolbar-bg);
color: var(--Combo--vertical-itemToolbar-color);
border-top-left-radius: var(--Combo--vertical-itemToolbar-borderRadius);
border-top-right-radius: var(--Combo--vertical-itemToolbar-borderRadius);
padding: 0 px2rem(3px);
border-style: solid;
border-color: var(--Combo--vertical-itemToolbar-borderColor);
border-width: var(--Combo--vertical-itemToolbar-borderWidth)
var(--Combo--vertical-itemToolbar-borderWidth) 0
var(--Combo--vertical-itemToolbar-borderWidth);
// margin-top: px2rem(-1px);
.#{$ns}Combo-toolbarBtn {
color: inherit;
line-height: var(--Combo--vertical-itemToolbar-height);
// font-size: px2rem(14px);
&:hover {
color: var(--Combo--vertical-itemToolbar-onHover-color);
}
}
// top: var(--Combo--vertical-itemToolbar-positionTop);
// opacity: 1;
opacity: 0;
top: var(--gap-xs);
right: var(--gap-xs);
}
&:not(.is-disabled) > .#{$ns}Combo-item:hover,
@ -218,8 +211,7 @@
border-color: var(--Combo--vertical-item-onHover-borderColor);
// border-style: solid;
> .#{$ns}Combo-itemToolbar {
top: var(--Combo--vertical-itemToolbar-positionTop);
> .#{$ns}Combo-delBtn {
opacity: 1;
}
}

11
scss/components/form/_tree.scss
View File

@ -169,7 +169,7 @@
&-itemArrow {
cursor: pointer;
width: var(--Tree-itemArrowWidth);
display: inline-block;
display: inline-flex;
margin-right: px2rem(5px);
// &:before {
@ -180,7 +180,7 @@
> svg {
width: var(--Tree-itemArrowWidth);
height: var(--Tree-itemArrowWidth);
display: inline-block;
display: block;
transition: transform 0.2s;
top: 0;
transform: rotate(90deg);
@ -197,7 +197,7 @@
}
&-itemIcon {
display: inline-block;
display: inline-flex;
margin-right: px2rem(5px);
}
@ -205,6 +205,7 @@
&-folderIcon,
&-leafIcon {
> svg {
top: 0;
width: px2rem(14px);
height: px2rem(14px);
}
@ -223,8 +224,8 @@
}
> .#{$ns}Checkbox {
line-height: 1;
display: inline-block;
display: inline-flex;
align-self: center;
}
}

3
scss/themes/_cxd-variables.scss
View File

@ -153,6 +153,9 @@ $Wizard-steps-liAfterBorder: none !important;
--Checkbox-size: #{px2rem(14px)};
--Checkbox-inner-size: #{px2rem(8px)};
--Checkbox--full-inner-size: #{px2rem(10px)};
--Checkbox--sm-size: #{px2rem(14px)};
--Checkbox--sm-inner-size: #{px2rem(8px)};
--Checkbox--sm--full-inner-size: #{px2rem(10px)};
--Radio-size: #{px2rem(16px)};
--Radio-inner-size: #{px2rem(10px)};

27
src/renderers/Form/Combo.tsx
View File

@ -997,7 +997,7 @@ export default class ComboControl extends React.Component<ComboProps> {
onClick={this.removeItem.bind(this, index)}
key="remove"
className={cx(
`Combo-toolbarBtn ${!store.removable ? 'is-disabled' : ''}`
`Combo-tab-delBtn ${!store.removable ? 'is-disabled' : ''}`
)}
data-tooltip={__('删除')}
data-position="bottom"
@ -1163,34 +1163,19 @@ export default class ComboControl extends React.Component<ComboProps> {
<div className={cx(`Combo-items`)}>
{Array.isArray(value) && value.length ? (
value.map((value, index, thelist) => {
const toolbar: Array<any> = [];
// if (!disabled && draggable && thelist.length > 1) {
// toolbar.push(
// <a
// key="drag"
// className={cx(`Combo-toolbarBtn Combo-itemDrager`)}
// data-tooltip="拖拽排序"
// data-position="bottom"
// >
// <i className={dragIcon} />
// </a>
// );
// }
let delBtn: any = null;
if (
finnalRemovable && // 表达式判断单条是否可删除
(!itemRemovableOn ||
evalExpression(itemRemovableOn, value) !== false)
) {
toolbar.push(
delBtn = (
<a
onClick={this.removeItem.bind(this, index)}
key="remove"
className={cx(
`Combo-toolbarBtn ${
!store.removable ? 'is-disabled' : ''
}`
`Combo-delBtn ${!store.removable ? 'is-disabled' : ''}`
)}
data-tooltip={__('删除')}
data-position="bottom"
@ -1292,9 +1277,7 @@ export default class ComboControl extends React.Component<ComboProps> {
</Alert2>
)}
</div>
{toolbar.length ? (
<div className={cx(`Combo-itemToolbar`)}>{toolbar}</div>
) : null}
{delBtn}
</div>
);
})

60
src/renderers/PopOver.tsx
View File

@ -41,9 +41,45 @@ export interface SchemaPopOverObject {
position?:
| 'center'
| 'left-top'
| 'left-top-left-top'
| 'left-top-left-center'
| 'left-top-left-bottom'
| 'left-top-center-top'
| 'left-top-center-center'
| 'left-top-center-bottom'
| 'left-top-right-top'
| 'left-top-right-center'
| 'left-top-right-bottom'
| 'right-top'
| 'right-top-left-top'
| 'right-top-left-center'
| 'right-top-left-bottom'
| 'right-top-center-top'
| 'right-top-center-center'
| 'right-top-center-bottom'
| 'right-top-right-top'
| 'right-top-right-center'
| 'right-top-right-bottom'
| 'left-bottom'
| 'left-bottom-left-top'
| 'left-bottom-left-center'
| 'left-bottom-left-bottom'
| 'left-bottom-center-top'
| 'left-bottom-center-center'
| 'left-bottom-center-bottom'
| 'left-bottom-right-top'
| 'left-bottom-right-center'
| 'left-bottom-right-bottom'
| 'right-bottom'
| 'right-bottom-left-top'
| 'right-bottom-left-center'
| 'right-bottom-left-bottom'
| 'right-bottom-center-top'
| 'right-bottom-center-center'
| 'right-bottom-center-bottom'
| 'right-bottom-right-top'
| 'right-bottom-right-center'
| 'right-bottom-right-bottom'
| 'fixed-center'
| 'fixed-left-top'
| 'fixed-right-top'
@ -90,9 +126,11 @@ export interface PopOverState {
isOpened: boolean;
}
export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
Component: React.ComponentType<any>
): any => {
export const HocPopOver = (
config: {
targetOutter?: boolean; // 定位目标为整个外层
} = {}
) => (Component: React.ComponentType<any>): any => {
let lastOpenedInstance: PopOverComponent | null = null;
class PopOverComponent extends React.Component<PopOverProps, PopOverState> {
target: HTMLElement;
@ -304,7 +342,7 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
className={cx(`Field--popOverAble`, className, {
in: this.state.isOpened
})}
ref={this.targetRef}
ref={config.targetOutter ? this.targetRef : undefined}
>
{(popOver as SchemaPopOverObject)?.showIcon !== false ? (
<>
@ -313,6 +351,7 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
key="popover-btn"
className={cx('Field-popOverBtn')}
{...triggerProps}
ref={config.targetOutter ? undefined : this.targetRef}
>
<Icon icon="zoom-in" className="icon" />
</span>
@ -320,13 +359,12 @@ export const HocPopOver = (config: Partial<SchemaPopOverObject> = {}) => (
</>
) : (
<>
<div className={cx('Field-popOverWrap')} {...triggerProps}>
<Component
{...this.props}
wrapperComponent={''}
noHoc
ref={this.targetRef}
/>
<div
className={cx('Field-popOverWrap')}
{...triggerProps}
ref={config.targetOutter ? undefined : this.targetRef}
>
<Component {...this.props} wrapperComponent={''} noHoc />
</div>
{this.state.isOpened ? this.renderPopOver() : null}
</>

4
src/renderers/Table/TableCell.tsx
View File

@ -112,7 +112,9 @@ export class TableCell extends React.Component<RendererProps> {
name: 'table-cell'
})
@QuickEdit()
@PopOverable()
@PopOverable({
targetOutter: true
})
@Copyable()
@observer
export class TableCellRenderer extends TableCell {