p85126437
/
amis
forked from p96170835/amis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #344 from 2betop/master 

样式优化
This commit is contained in:
liaoxuezhi 2019-11-12 15:05:19 +08:00 committed by GitHub
parent 6ed9614d1d 2ce658b4c9
commit cfe6299256
15 changed files with 117 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_variables.scss
View File

@ -450,6 +450,7 @@ $Table-thead-color: $text--loud-color !default;
$Table-thead-borderColor: $Table-borderColor !default;
$Table-thead-borderWidth: $Table-borderWidth !default;
$Table-thead-iconColor: $icon-color !default;
$Table-tree-borderColor: $Table-borderColor !default;
$TableCell-height: px2rem(40px) !default;
$TableCell-paddingX: $gap-sm !default;
$TableCell--edge-paddingX: $gap-md !default;

143
scss/components/_table.scss
View File

@ -40,19 +40,19 @@
z-index: $zindex-affix;
}
> .#{$ns}Table-fixedLeft,
> .#{$ns}Table-fixedRight {
>.#{$ns}Table-fixedLeft,
>.#{$ns}Table-fixedRight {
z-index: $zindex-affix + 10;
// box-shadow: none;
background: transparent;
border-top: $Table-borderWidth solid $Table-borderColor;
> table {
>table {
margin-bottom: px2rem(5px);
}
}
> .#{$ns}Table-wrapper {
>.#{$ns}Table-wrapper {
border-top: $Table-borderWidth solid $Table-borderColor;
}
}
@ -60,8 +60,7 @@
&-heading {
background: $Table-heading-bg;
border-bottom: $Table-borderWidth solid $Table-borderColor;
padding: ($Table-heading-height - $Table-fontSize * $lineHeightBase) / 2
$Table-toolbar-paddingX;
padding: ($Table-heading-height - $Table-fontSize * $lineHeightBase) / 2 $Table-toolbar-paddingX;
}
&--unsaved &-heading {
@ -84,7 +83,7 @@
background-color: transparent !important;
}
> td {
>td {
vertical-align: middle !important;
text-align: center;
}
@ -93,9 +92,9 @@
&-header {
padding: $Table-toolbar-paddingY $Table-toolbar-paddingX;
> * + .#{$ns}Button,
> * + .#{$ns}ButtonGroup,
> * + .#{$ns}ButtonToolbar {
>*+.#{$ns}Button,
>*+.#{$ns}ButtonGroup,
>*+.#{$ns}ButtonToolbar {
margin-left: $Crud-toolbar-gap;
}
}
@ -106,7 +105,7 @@
padding: $Table-toolbar-paddingY $Table-toolbar-paddingX;
}
&-header + &-toolbar {
&-header+&-toolbar {
padding-top: 0;
}
@ -114,8 +113,8 @@
position: relative;
}
&-header + &-contentWrap,
&-toolbar + &-contentWrap {
&-header+&-contentWrap,
&-toolbar+&-contentWrap {
border-top: $Table-borderWidth solid $Table-borderColor;
}
@ -126,7 +125,7 @@
&-actions {
display: inline-block;
> * {
>* {
margin-right: $Crud-toolbar-gap;
}
}
@ -146,8 +145,9 @@
background-color: $Table-bg;
&--withCombine {
> thead > tr > th,
> tbody > tr > td {
>thead>tr>th,
>tbody>tr>td {
&:first-child {
padding-left: $TableCell-paddingX !important;
}
@ -158,7 +158,7 @@
}
// reset
> tbody > tr {
>tbody>tr {
@if $Table-strip-bg !=transparent {
&.#{$ns}Table-tr--odd {
background-color: transparent;
@ -169,20 +169,20 @@
background-color: transparent;
}
> td {
>td {
vertical-align: middle;
}
> td:not(:last-child) {
>td:not(:last-child) {
border-right: $Table-borderWidth solid $Table-borderColor;
}
}
}
> thead > tr {
>thead>tr {
background-color: $Table-thead-bg;
> th {
>th {
&[colspan] {
text-align: center;
}
@ -198,8 +198,7 @@
}
&:not(:last-child) {
border-right: $Table-thead-borderWidth solid
$Table-thead-borderColor;
border-right: $Table-thead-borderWidth solid $Table-thead-borderColor;
}
font-size: $Table-thead-fontSize;
@ -213,14 +212,14 @@
}
}
> thead > tr + tr {
>thead>tr+tr {
border-top: $Table-borderWidth solid $Table-borderColor;
}
> tbody > tr {
>tbody>tr {
border-top: $Table-borderWidth solid $Table-borderColor;
> td {
>td {
padding: $TableCell-paddingY $TableCell-paddingX;
vertical-align: top;
@ -247,7 +246,7 @@
border-color: $Table-onHover-borderColor;
color: $Table-onHover-color;
& + tr {
&+tr {
border-color: $Table-onHover-borderColor;
}
}
@ -257,7 +256,7 @@
border-color: $Table-onChecked-borderColor;
color: $Table-onChecked-color;
& + tr {
&+tr {
border-color: $Table-onChecked-borderColor;
}
@ -267,7 +266,7 @@
border-color: $Table-onChecked-onHover-borderColor;
color: $Table-onChecked-onHover-color;
& + tr {
&+tr {
border-color: $Table-onChecked-onHover-borderColor;
}
}
@ -279,7 +278,7 @@
border-color: $Table-onModified-borderColor;
color: $Table-onModified-color;
& + tr {
&+tr {
border-color: $Table-onModified-borderColor;
}
@ -289,7 +288,7 @@
border-color: $Table-onModified-onHover-borderColor;
color: $Table-onModified-onHover-color;
& + tr {
&+tr {
border-color: $Table-onModified-onHover-borderColor;
}
}
@ -306,13 +305,14 @@
right: px2rem(9px) + px2rem(-20px) * ($i - 1);
}
}
tr.#{$ns}Table-tr--#{$i}th {
.#{$ns}Table-expandBtn {
position: relative;
right: - px2rem(20px) * ($i - 1);
}
.#{$ns}Table-expandCell + td {
.#{$ns}Table-expandCell+td {
position: relative;
&::before {
@ -323,7 +323,7 @@
bottom: 0;
left: px2rem(-10px) + px2rem(20px) * ($i - 2);
height: auto;
background-color: $Table-borderColor;
background-color: $Table-tree-borderColor;
}
&::after {
@ -333,22 +333,22 @@
top: px2rem(20px);
left: px2rem(-10px) + px2rem(20px) * ($i - 2);
width: px2rem(10px);
background-color: $Table-borderColor;
background-color: $Table-tree-borderColor;
}
padding-left: px2rem(20px) * ($i - 1) - px2rem(20px);
padding-left: px2rem(20px) * $i - px2rem(20px);
}
}
tr.#{$ns}Table-tr--#{$i}th.is-expandable {
.#{$ns}Table-expandCell + td {
.#{$ns}Table-expandCell+td {
padding-left: px2rem(20px) * ($i - 1);
}
}
tr.#{$ns}Table-tr--#{$i}th.is-last:not(.is-expanded) {
.#{$ns}Table-expandCell + td {
.#{$ns}Table-expandCell+td {
&::before {
height: px2rem(20px);
bottom: auto;
@ -356,11 +356,11 @@
}
}
}
> thead > tr > th.#{$ns}Table-checkCell,
> tbody > tr > td.#{$ns}Table-checkCell {
>thead>tr>th.#{$ns}Table-checkCell,
>tbody>tr>td.#{$ns}Table-checkCell {
border-right: 0;
width: px2rem(1px);
@ -369,22 +369,23 @@
}
}
> thead > tr > th.#{$ns}Table-expandCell,
> tbody > tr > td.#{$ns}Table-expandCell {
>thead>tr>th.#{$ns}Table-expandCell,
>tbody>tr>td.#{$ns}Table-expandCell {
border-right: 0;
width: px2rem(1px);
padding-right: 0;
}
> thead > tr > th.#{$ns}Table-dragCell,
> tbody > tr > td.#{$ns}Table-dragCell {
>thead>tr>th.#{$ns}Table-dragCell,
>tbody>tr>td.#{$ns}Table-dragCell {
border-right: 0;
width: px2rem(1px);
padding-right: 0;
}
> tbody > tr > td.#{$ns}Table-expandCell {
>tbody>tr>td.#{$ns}Table-expandCell {
position: relative;
@for $i from 1 through 7 {
.#{$ns}Table-divider-#{$i} {
position: absolute;
@ -392,15 +393,15 @@
top: 0;
bottom: 0;
height: 100%;
background-color: $Table-borderColor;
background-color: $Table-tree-borderColor;
right: px2rem(9px) + px2rem(-20px) * ($i - 1);
}
}
}
> tbody > tr.is-expanded > td.#{$ns}Table-expandCell {
>tbody>tr.is-expanded>td.#{$ns}Table-expandCell {
// position: relative;
&::before {
content: '';
position: absolute;
@ -409,26 +410,26 @@
bottom: 0;
right: px2rem(9px);
height: auto;
background-color: $Table-borderColor;
background-color: $Table-tree-borderColor;
}
}
> thead > tr > th.#{$ns}TableCell--sortable {
>thead>tr>th.#{$ns}TableCell--sortable {
padding-right: $TableCell-paddingX + $TableCell-sortBtn-width;
position: relative;
}
> thead > tr > th.#{$ns}TableCell--searchable {
>thead>tr>th.#{$ns}TableCell--searchable {
padding-right: $TableCell-paddingX + $TableCell-searchBtn-width;
position: relative;
}
> thead > tr > th.#{$ns}TableCell--filterable {
>thead>tr>th.#{$ns}TableCell--filterable {
padding-right: $TableCell-paddingX + $TableCell-filterBtn-width;
position: relative;
}
}
&Cell-sortBtn {
@ -569,12 +570,10 @@
pointer-events: all;
position: absolute;
// background: $Table-onHover-bg;
background: linear-gradient(
90deg,
rgba($Table-onHover-bg, 0) 0%,
rgba($Table-onHover-bg, 1) 20%,
rgba($Table-onHover-bg, 1) 100%
);
background: linear-gradient(90deg,
rgba($Table-onHover-bg, 0) 0%,
rgba($Table-onHover-bg, 1) 20%,
rgba($Table-onHover-bg, 1) 100%);
top: $Table-borderWidth;
bottom: 0;
right: 0;
@ -616,28 +615,28 @@
margin-bottom: 0;
background: transparent;
> tbody > tr > th {
>tbody>tr>th {
width: px2rem(120px);
text-align: right;
padding: $TableCell-paddingY $TableCell-paddingX;
}
> tbody > tr > td {
>tbody>tr>td {
word-break: break-all;
padding: $TableCell-paddingY $TableCell-paddingX;
}
> tbody > tr:not(:first-child) {
border-top: $Table-borderWidth solid
lighten($Table-thead-borderColor, 2.5%);
>tbody>tr:not(:first-child) {
border-top: $Table-borderWidth solid lighten($Table-thead-borderColor, 2.5%);
}
}
&-expandBtn {
position: relative;
z-index: 1;
> i {
>i {
display: inline-block;
width: px2rem(16px);
text-align: center;
@ -655,7 +654,7 @@
}
}
&.is-active > i::before {
&.is-active>i::before {
transform: rotate(90deg);
transform-origin: 50% 50%;
}
@ -668,9 +667,9 @@
cursor: move;
}
&-table > tbody > tr:hover .#{$ns}Table-dragBtn,
&-table > tbody > tr.is-dragging .#{$ns}Table-dragBtn,
&-table > tbody > tr.is-drop-allowed .#{$ns}Table-dragBtn {
&-table>tbody>tr:hover .#{$ns}Table-dragBtn,
&-table>tbody>tr.is-dragging .#{$ns}Table-dragBtn,
&-table>tbody>tr.is-drop-allowed .#{$ns}Table-dragBtn {
visibility: visible;
}
}
@ -678,7 +677,7 @@
.#{$ns}OperationField {
margin: px2rem(-3px);
> .#{$ns}Button {
>.#{$ns}Button {
margin: px2rem(3px);
}
}
}

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

@ -33,8 +33,7 @@
position: relative;
flex-grow: 1;
line-height: 1;
max-width: 100%;
overflow: hidden;
}
&-placeholder {
@ -48,6 +47,9 @@
&-value {
line-height: $Form-input-lineHeight * $Form-input-fontSize;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
@ -292,6 +294,11 @@
.#{$ns}Form-control--sizeMd>.#{$ns}Select,
.#{$ns}Form-control--sizeLg>.#{$ns}Select {
min-width: 100%;
max-width: 100%;
display: inline-flex !important;
.#{$ns}Select-valueWrap {
width: 0; // ! 没有这个会撑开。
}
}
}

1
scss/themes/cxd.scss
View File

@ -244,6 +244,7 @@ $Table-color: #333;
$Table-thead-color: #333;
$Table-lineHeight: 20 / 12;
$Table-borderColor: #F5F5F5;
$Table-tree-borderColor: darken($Table-borderColor, 10%);
$Table-thead-bg: #F5F5F5;
$Table-thead-borderColor: #fff;
$Table-thead-iconColor: #999;

6
src/components/Select.tsx
View File

@ -343,8 +343,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
onBlur(e: any) {
this.setState({
isFocused: false,
inputValue: ''
isFocused: false
});
this.props.onBlur && this.props.onBlur(e);
@ -440,7 +439,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
case DownshiftChangeTypes.clickItem:
update = {
...update,
inputValue: '',
isOpen: multiple ? true : false,
isFocused: multiple && checkAll ? true : false
};
@ -632,7 +630,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
return (
<div
{...getItemProps({
key: index,
key: item.value || index,
index,
item,
disabled: item.disabled

2
src/renderers/Action.tsx
View File

@ -223,7 +223,7 @@ export class ActionRenderer extends React.Component<
onAction={this.handleAction}
isCurrentUrl={this.isCurrentAction}
tooltipContainer={
env.getModalContainer ? env.getModalContainer() : undefined
env.getModalContainer ? env.getModalContainer : undefined
}
/>
);

2
src/renderers/Cards.tsx
View File

@ -707,7 +707,7 @@ export default class Cards extends React.Component<GridProps, object> {
key="dragging-toggle"
tooltip="对卡片进行排序操作"
tooltipContainer={
env && env.getModalContainer ? env.getModalContainer() : undefined
env && env.getModalContainer ? env.getModalContainer : undefined
}
size="sm"
active={store.dragging}

5
src/renderers/Dialog.tsx
View File

@ -59,7 +59,8 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
'show',
'body',
'showCloseButton',
'actions'
'actions',
'popOverContainer'
];
static defaultProps: Partial<DialogProps> = {
title: '弹框',
@ -399,7 +400,7 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
onEntered={this.handleEntered}
onExited={this.handleExited}
container={
env && env.getModalContainer ? env.getModalContainer() : undefined
env && env.getModalContainer ? env.getModalContainer : undefined
}
enforceFocus={false}
disabled={store.loading}

13
src/renderers/Drawer.tsx
View File

@ -39,6 +39,7 @@ export interface DrawerProps extends RendererProps {
resizable?: boolean;
overlay?: boolean;
closeOnOutside?: boolean;
drawerContainer?: () => HTMLElement;
}
export default class Drawer extends React.Component<DrawerProps, object> {
@ -55,7 +56,8 @@ export default class Drawer extends React.Component<DrawerProps, object> {
'show',
'resizable',
'overlay',
'body'
'body',
'popOverContainer'
];
static defaultProps: Partial<DrawerProps> = {
title: '',
@ -432,7 +434,8 @@ export default class Drawer extends React.Component<DrawerProps, object> {
overlay,
closeOnOutside,
classPrefix: ns,
classnames: cx
classnames: cx,
drawerContainer
} = this.props;
const Container = wrapperComponent || DrawerContainer;
@ -453,7 +456,11 @@ export default class Drawer extends React.Component<DrawerProps, object> {
!store.drawerOpen && !store.dialogOpen && closeOnOutside
}
container={
env && env.getModalContainer ? env.getModalContainer() : undefined
drawerContainer
? drawerContainer
: env && env.getModalContainer
? env.getModalContainer
: undefined
}
>
<div className={cx('Drawer-header')}>

18
src/renderers/Form/Item.tsx
View File

@ -284,7 +284,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
className: cx(`Form-labelRemark`),
container:
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
})
: null}
@ -313,7 +313,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
className: cx(`Form-remark`),
container:
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
})
: null}
@ -386,7 +386,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
className: cx(`Form-lableRemark`),
container:
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
})
: null}
@ -408,9 +408,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
className: cx(`Form-remark`),
tooltip: remark,
container:
env && env.getModalContainer
? env.getModalContainer()
: undefined
env && env.getModalContainer ? env.getModalContainer : undefined
})
: null}
@ -480,7 +478,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
className: cx(`Form-lableRemark`),
container:
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
})
: null}
@ -504,7 +502,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
tooltip: remark,
container:
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
})
: null}
@ -578,7 +576,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
className: cx(`Form-lableRemark`),
container:
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
})
: null}
@ -601,7 +599,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
tooltip: remark,
container:
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
})
: null}

2
src/renderers/Form/Picker.tsx
View File

@ -428,7 +428,7 @@ export default class PickerControl extends React.PureComponent<
// classPrefix={ns}
// className={`${ns}Picker-pickBtn`}
// tooltip="点击选择"
// tooltipContainer={env && env.getModalContainer ? env.getModalContainer() : undefined}
// tooltipContainer={env && env.getModalContainer ? env.getModalContainer : undefined}
// level="info"
// size="sm"
// disabled={disabled}

10
src/renderers/Form/Table.tsx
View File

@ -341,7 +341,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
tooltip="新增一行"
tooltipContainer={
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
}
onClick={this.addItem.bind(this, rowIndex, undefined)}
@ -392,7 +392,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
tooltip="编辑当前行"
tooltipContainer={
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
}
onClick={() => this.startEdit(rowIndex)}
@ -418,7 +418,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
tooltip="保存"
tooltipContainer={
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
}
onClick={this.confirmEdit}
@ -444,7 +444,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
tooltip="取消"
tooltipContainer={
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
}
onClick={this.cancelEdit}
@ -480,7 +480,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
tooltip="删除当前行"
tooltipContainer={
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
}
onClick={this.removeItem.bind(this, rowIndex)}

2
src/renderers/List.tsx
View File

@ -689,7 +689,7 @@ export default class List extends React.Component<ListProps, object> {
key="dragging-toggle"
tooltip="对列表进行排序操作"
tooltipContainer={
env && env.getModalContainer ? env.getModalContainer() : undefined
env && env.getModalContainer ? env.getModalContainer : undefined
}
size="sm"
active={store.dragging}

2
src/renderers/Page.tsx
View File

@ -377,7 +377,7 @@ export default class Page extends React.Component<PageProps> {
tooltip: remark,
container:
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
})
: null}

4
src/renderers/Table.tsx
View File

@ -1064,7 +1064,7 @@ export default class Table extends React.Component<TableProps, object> {
tooltip: column.remark,
container:
env && env.getModalContainer
? env.getModalContainer()
? env.getModalContainer
: undefined
})
: null}
@ -1384,7 +1384,7 @@ export default class Table extends React.Component<TableProps, object> {
key="dragging-toggle"
tooltip="点击开始排序"
tooltipContainer={
env && env.getModalContainer ? env.getModalContainer() : undefined
env && env.getModalContainer ? env.getModalContainer : undefined
}
size="sm"
active={store.dragging}