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

feat:date、dialog、drawer、steps 云舍4.0样式升级 (#2846)

Browse Source 
Co-authored-by: dqc <qianchuan.deng@gmail.com>
This commit is contained in:
qianchuan 2021-11-03 21:09:20 +08:00 committed by GitHub
parent 2805ee8042
commit ce5d8e5ef7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 216 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
__tests__/renderers/Form/__snapshots__/date.test.tsx.snap
View File

@ -73,8 +73,8 @@ exports[`Renderer:date 1`] = `
class="cxd-DatePicker-toggler"
>
<icon-mock
classname="icon icon-calendar"
icon="calendar"
classname="icon icon-clock"
icon="clock"
/>
</a>
</div>

4
__tests__/renderers/Form/__snapshots__/dateRang.test.tsx.snap
View File

@ -73,8 +73,8 @@ exports[`Renderer:dateRange 1`] = `
class="cxd-DateRangePicker-toggler"
>
<icon-mock
classname="icon icon-calendar"
icon="calendar"
classname="icon icon-clock"
icon="clock"
/>
</a>
</div>

4
__tests__/renderers/Form/__snapshots__/datetime.test.tsx.snap
View File

@ -73,8 +73,8 @@ exports[`Renderer:date 1`] = `
class="cxd-DatePicker-toggler"
>
<icon-mock
classname="icon icon-calendar"
icon="calendar"
classname="icon icon-clock"
icon="clock"
/>
</a>
</div>

2
scss/components/_button.scss
View File

@ -49,7 +49,7 @@
cursor: not-allowed;
color: var(--text--muted-color);
pointer-events: auto;
border: none;
border: var(--Button-borderWidth) solid var(--Button-onDisabled-bg);
background: var(--Button-onDisabled-bg);
}

2
scss/components/_steps.scss
View File

@ -45,7 +45,7 @@
height: 1px;
left: 100%;
width: 9999px;
padding-right: 10px;
padding-right: px2rem(10px);
background-color: var(--Steps-line-bg);
}
}

2
scss/components/form/_date-range.scss
View File

@ -57,6 +57,8 @@
&-toggler {
cursor: pointer;
color: var(--DatePicker-iconColor);
display: inline-flex;
align-items: center;
&:hover {
color: var(--DatePicker-onHover-iconColor);

2
scss/components/form/_date.scss
View File

@ -58,6 +58,8 @@
&-toggler {
cursor: pointer;
color: var(--DatePicker-iconColor);
display: inline-flex;
align-items: center;
&:hover {
color: var(--DatePicker-onHover-iconColor);

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

@ -56,10 +56,10 @@ $H2: 8px;
$H3: 16px;
$H5: 24px;
$H6: 32px;
$H5: 40px;
$H6: 48px;
$H5: 56px;
$H6: 80px;
$H7: 40px;
$H8: 48px;
$H9: 56px;
$H10: 80px;
// yunshe4.0 border-radius
$R1: 0;
@ -404,21 +404,30 @@ $R8: 50%;
--FileControl-progress-borderRadius: #{$R2};
// Modal
--Modal-title-fontSize: #{$T3};
--Modal-title-color: #{$W3};
--Modal-title-fontWeight: #{$G2};
--Modal-overlay-bg: rgba(0, 0, 0, 0.7);
--Modal-content-borderWidth: 0;
--Modal-content-borderRadius: 0;
--Modal-content-minHeight: #{px2rem(193px)};
--Modal-header-bg: #f6f7fb;
--Modal-header-bg: #fff;
--Modal-header-paddingY: 0;
--Modal-header-paddingX: 0;
--Modal-title-color: #333;
--Modal-body-paddingY: var(--gap-md);
--Modal-body-paddingX: var(--gap-md);
--Modal-body-borderTop: none;
--Modal-body-borderBottom: #{px2rem(1px)} solid #eceff8;
--Modal-footer-marginX: var(--gap-md);
--Modal-footer-padding: var(--gap-base) 0;
--Modal-body-borderBottom: none;
--Modal-footer-marginX: 0;
--Modal-footer-marginY: 0;
--Modal-footer-padding: 0;
// Drawer
--Drawer-header-padding: #{px2rem(16px)} #{px2rem(24px)};
--Drawer-widthBase: #{px2rem(400px)};
--Drawer-header-bg: #fff;
--Drawer-body-padding: #{px2rem(24px)};
// Remark
--Remark-icon-fontSize: #{px2rem(12px)};

149
scss/themes/cxd.scss
View File

@ -134,6 +134,10 @@
}
}
.#{$ns}Button--iconOnly {
min-width: var(--Button-height);
}
.#{$ns}Alert {
font-weight: #{$W2};
.#{$ns}Alert-close {
@ -189,3 +193,148 @@
}
}
}
.#{$ns}Modal {
box-shadow: var(--boxShadow);
&-content {
padding: #{px2rem(24px)};
border-radius: #{$R4};
}
&-body {
padding: #{px2rem(16px)} 0 #{px2rem(24px)} 0;
font-size: #{$T2};
font-weight: #{$W2};
}
&-footer {
.#{$ns}Button {
margin-left: #{px2rem(16px)};
}
}
}
.#{$ns}Drawer {
&-content {
border-radius: #{$R4};
}
&-header {
border-radius: #{$R4} 0 0 0;
}
&-title {
font-size: #{$T3};
font-weight: #{$W3};
}
&-body {
font-size: #{$T3};
font-weight: #{$W2};
}
}
.#{$ns}Drawer--right {
.#{$ns}Drawer-footer {
justify-content: flex-end;
.#{$ns}Button {
margin-left: #{px2rem(16px)};
}
}
}
.#{$ns}Drawer--left {
.#{$ns}Drawer-footer {
.#{$ns}Button {
margin-left: #{px2rem(16px)};
}
}
}
.#{$ns}Drawer--top,
.#{$ns}Drawer--bottom {
.#{$ns}Drawer-footer {
.#{$ns}Button {
margin-left: #{px2rem(16px)};
}
}
}
.#{$ns}Steps {
.#{$ns}StepsItem {
&-container {
&Icon {
padding-right: #{px2rem(8px)};
.#{$ns}StepsItem-icon {
width: #{px2rem(24px)};
height: #{px2rem(24px)};
display: inline-flex;
align-items: center;
justify-content: center;
svg {
width: #{px2rem(12px)};
height: #{px2rem(12px)};
}
}
&Wrapper {
.#{$ns}StepsItem-body {
.#{$ns}StepsItem-title {
&:after {
padding-right: #{px2rem(8px)};
}
}
.#{$ns}StepsItem-subTitle {
padding-left: #{px2rem(8px)};
}
}
}
}
}
}
&--vertical {
.#{$ns}StepsItem {
&-container {
&Icon > .#{$ns}StepsItem-icon {
&:after {
top: px2rem(28px);
left: px2rem(10px);
transform: translate(px2rem(1px));
}
}
}
}
}
.#{$ns}StepsItem.is-finish {
.#{$ns}StepsItem-icon {
color: var(--Steps-status-success);
background-color: var(--white);
}
}
.#{$ns}StepsItem.is-error {
.#{$ns}StepsItem-icon {
color: var(--Steps-status-error);
background-color: var(--white);
border: 1px solid var(--Steps-status-error);
}
}
}
.#{$ns}Form-feedback {
list-style-type: none;
padding-left: 0;
}
.#{$ns}Form-label {
font-size: #{$T3};
color: #{$G4};
}
.#{$ns}Form-item {
&--inline {
.#{$ns}Form-label {
margin-right: #{px2rem(16px)};
font-size: #{$T3};
color: #{$G4};
}
}
}

2
src/components/DatePicker.tsx
View File

@ -618,7 +618,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
) : null}
<a className={cx(`DatePicker-toggler`)}>
<Icon icon="calendar" className="icon" />
<Icon icon="clock" className="icon" />
</a>
{isOpened ? (

34
src/components/DateRangePicker.tsx
View File

@ -438,12 +438,17 @@ export class DateRangePicker extends React.Component<
}
if (minDate && newValue && newValue.isBefore(minDate, 'second')) {
newValue = minDate
newValue = minDate;
}
this.setState(
{
startDate: this.filterDate(newValue, startDate || minDate, timeFormat, 'start')
startDate: this.filterDate(
newValue,
startDate || minDate,
timeFormat,
'start'
)
},
() => {
embed && this.confirm();
@ -479,7 +484,12 @@ export class DateRangePicker extends React.Component<
this.setState(
{
endDate: this.filterDate(newValue, endDate || maxDate, timeFormat, 'end')
endDate: this.filterDate(
newValue,
endDate || maxDate,
timeFormat,
'end'
)
},
() => {
embed && this.confirm();
@ -492,12 +502,14 @@ export class DateRangePicker extends React.Component<
const now = moment();
this.setState(
{
startDate: minDate && minDate.isValid()
? moment.max(range.startDate(now.clone()), minDate)
: range.startDate(now.clone()),
endDate: maxDate && maxDate.isValid()
? moment.min(maxDate, range.endDate(now.clone()))
: range.endDate(now.clone())
startDate:
minDate && minDate.isValid()
? moment.max(range.startDate(now.clone()), minDate)
: range.startDate(now.clone()),
endDate:
maxDate && maxDate.isValid()
? moment.min(maxDate, range.endDate(now.clone()))
: range.endDate(now.clone())
},
closeOnSelect ? this.confirm : noop
);
@ -797,7 +809,7 @@ export class DateRangePicker extends React.Component<
{
'is-disabled': disabled,
'is-focused': isFocused,
[`${ns}DateRangePicker--border${ucFirst(borderMode)}`]: borderMode,
[`${ns}DateRangePicker--border${ucFirst(borderMode)}`]: borderMode
},
className
)}
@ -821,7 +833,7 @@ export class DateRangePicker extends React.Component<
) : null}
<a className={`${ns}DateRangePicker-toggler`}>
<Icon icon="calendar" className="icon" />
<Icon icon="clock" className="icon" />
</a>
{isOpened ? (

12
src/components/MonthRangePicker.tsx
View File

@ -440,7 +440,15 @@ export class MonthRangePicker extends React.Component<
}
renderCalendar() {
const {classPrefix: ns, classnames: cx, locale, embed, ranges, inputFormat, timeFormat} = this.props;
const {
classPrefix: ns,
classnames: cx,
locale,
embed,
ranges,
inputFormat,
timeFormat
} = this.props;
const __ = this.props.translate;
const viewMode: 'months' = 'months';
const dateFormat = 'YYYY-MM';
@ -592,7 +600,7 @@ export class MonthRangePicker extends React.Component<
) : null}
<a className={`${ns}DateRangePicker-toggler`}>
<Icon icon="calendar" className="icon" />
<Icon icon="clock" className="icon" />
</a>
{isOpened ? (

3
src/components/icons.tsx
View File

@ -41,6 +41,8 @@ import ReloadIcon from '../icons/reload.svg';
import ExchangeIcon from '../icons/exchange.svg';
import ColmunsIcon from '../icons/columns.svg';
import CalendarIcon from '../icons/calendar.svg';
import ClockIcon from '../icons/clock.svg';
import CopyIcon from '../icons/copy.svg';
import FilterIcon from '../icons/filter.svg';
import CaretIcon from '../icons/caret.svg';
@ -138,6 +140,7 @@ registerIcon('reload', ReloadIcon);
registerIcon('exchange', ExchangeIcon);
registerIcon('columns', ColmunsIcon);
registerIcon('calendar', CalendarIcon);
registerIcon('clock', ClockIcon);
registerIcon('copy', CopyIcon);
registerIcon('filter', FilterIcon);
registerIcon('column-filter', ColumnFilterIcon);

1
src/icons/clock.svg Normal file
View File

@ -0,0 +1 @@
<svg width="24px" height="24px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>ic_时间</title><g id="ic_时间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="1-FL" stroke="#000" cx="8" cy="8" r="6.5" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/><polyline id="2-FLW" stroke="#000" points="7.87443646 5.5 7.87443646 8.53778873 5.5 9.28133409" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 566 B