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

style: 优化input-tag、input-year-range、list-select等组件样式 (#9477)

Browse Source 
* style: 优化tag组件样式

* 组件样式优化

* 修复编辑器组件提示溢出问题

* 优化年份\季度\月份范围选择器组件样式

* 更新快照

* 更新快照

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
This commit is contained in:
qkiroc 2024-01-23 18:34:32 +08:00 committed by GitHub
parent e82b604e37
commit 002b824c41
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 84 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/amis-editor-core/scss/_renderers.scss
View File

@ -271,7 +271,7 @@
.ae-Renderer-preview {
position: relative;
max-height: 200px;
// overflow: hidden;
overflow: auto;
}
}

4
packages/amis-theme-editor-helper/src/systemTheme/component.ts
View File

@ -4428,7 +4428,7 @@ const component: ThemeDefinition['component'] = {
paddingLeft: 'var(--sizes-size-3)',
paddingRight: 'var(--sizes-size-3)',
marginTop: 'var(--sizes-size-0)',
marginBottom: 'var(--sizes-size-2)',
marginBottom: 'var(--sizes-size-0)',
marginLeft: 'var(--sizes-size-0)',
marginRight: 'var(--sizes-size-3)'
},
@ -5701,7 +5701,7 @@ const component: ThemeDefinition['component'] = {
paddingRight: 'var(--sizes-size-6)'
},
'bg-color': 'var(--colors-neutral-fill-11)',
'hover-color': 'var(--colors-brand-5)',
'hover-color': 'var(--colors-neutral-text-2)',
'hover-bg-color': 'var(--colors-brand-10)'
}
}

6
packages/amis-ui/scss/_components.scss
View File

@ -2805,7 +2805,7 @@
--select-multiple-paddingLeft: var(--sizes-size-3);
--select-multiple-paddingRight: var(--sizes-size-3);
--select-multiple-marginTop: var(--sizes-size-0);
--select-multiple-marginBottom: var(--sizes-size-2);
--select-multiple-marginBottom: var(--sizes-size-0);
--select-multiple-marginLeft: var(--sizes-size-0);
--select-multiple-marginRight: var(--sizes-size-3);
--select-multiple-color: var(--colors-neutral-text-2);
@ -2910,7 +2910,7 @@
--Form-selectValue-onInvalid-color: var(--danger);
--Form-valueLabel-maxWidth: #{px2rem(120px)};
--Form-select-onFocus-boxShadow: none;
--ResultBox-tag-height: #{px2rem(24px)};
--ResultBox-tag-height: #{px2rem(22px)};
--ResultBox-tag-marginBottom: var(--select-multiple-marginBottom);
--ResultBox-icon--onDisabled-color: #ebebeb;
--ResultBox-icon--onHover-color: var(--select-multiple-icon-hover-color);
@ -3797,7 +3797,7 @@
--inputTag-option-paddingLeft: var(--sizes-size-6);
--inputTag-option-paddingRight: var(--sizes-size-6);
--inputTag-option-bg-color: var(--colors-neutral-fill-11);
--inputTag-option-hover-color: var(--colors-brand-5);
--inputTag-option-hover-color: var(--colors-neutral-text-2);
--inputTag-option-hover-bg-color: var(--colors-brand-10);
--inputTag-popover-maxHeight: 300px;

2
packages/amis-ui/scss/_properties.scss
View File

@ -819,7 +819,7 @@ $Table-strip-bg: transparent;
--SearchBox-hover-color: var(--colors-brand-5);
--SearchBox-focus-color: var(--colors-brand-4);
--SearchBox-search-icon-color: var(--colors-neutral-text-5);
--SearchBox-enhonce-icon-color: var(--button-default-default-font-color);
--SearchBox-enhonce-icon-color: var(--button-primary-default-font-color);
--SearchBox-clearable-icon-color: var(--colors-neutral-text-7);
--SearchBox-clearable-icon-size: var(--sizes-size-9);
--SearchBox-height: var(--sizes-base-15);

8
packages/amis-ui/scss/components/_search-box.scss
View File

@ -15,7 +15,6 @@
transition: all var(--animation-duration) ease-in-out;
border: var(--Form-input-borderWidth) solid transparent;
border-radius: var(--Form-input-borderRadius);
overflow: hidden;
&:hover {
background: var(--Form-input-onHover-bg);
@ -25,6 +24,7 @@
background: var(--Form-input-bg);
border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
width: var(--SearchBox-width);
position: relative;
> input {
flex-grow: 1;
}
@ -121,9 +121,13 @@
}
&--enhance.is-active &-searchBtn {
height: 100%;
color: var(--SearchBox-enhonce-icon-color);
background: var(--SearchBox-hover-color);
position: absolute;
top: px2rem(-1px);
bottom: px2rem(-1px);
right: px2rem(-1px);
border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
svg {
top: px2rem(2px);
}

24
packages/amis-ui/scss/components/form/_date.scss
View File

@ -719,7 +719,7 @@ td.rdtQuarter {
> span {
display: inline-block;
color: var(--inputDate-other-color);
background: var(--inputDate-other-bg-color);
// background: var(--inputDate-other-bg-color);
border-radius: var(--inputDate-other-top-left-border-radius)
var(--inputDate-other-top-right-border-radius)
var(--inputDate-other-bottom-right-border-radius)
@ -760,7 +760,7 @@ td.rdtQuarter {
}
}
.rdtPicker .rdtActive.rdtBetween.rdtStartDay {
.rdtPicker .rdtActive.rdtBetween.rdtStart {
background: linear-gradient(
to right,
transparent 0%,
@ -770,6 +770,16 @@ td.rdtQuarter {
);
}
.rdtPicker .rdtActive.rdtBetween.rdtEnd {
background: linear-gradient(
to right,
var(--Calendar-cell-onBetween-bg) 0%,
var(--Calendar-cell-onBetween-bg) 50%,
transparent 51%,
transparent 100%
);
}
.rdt .rdtPicker td.is-disabled {
cursor: not-allowed !important;
background: var(--Calendar-cell-onDisabled-bg);
@ -785,16 +795,6 @@ td.rdtQuarter {
}
}
.rdtPicker .rdtActive.rdtBetween.rdtEndDay {
background: linear-gradient(
to right,
var(--Calendar-cell-onBetween-bg) 0%,
var(--Calendar-cell-onBetween-bg) 50%,
transparent 51%,
transparent 100%
);
}
.#{$ns}DateCalendar {
display: inline-block;
border-width: var(--DatePicker-borderWidth);

10
packages/amis-ui/scss/components/form/_list.scss
View File

@ -161,14 +161,14 @@
&:after {
content: '';
position: absolute;
width: px2rem(10px);
height: var(--gap-xs);
border-color: var(--ListControl-item-onActive-after-borderColor);
border-style: solid;
border-width: 0 0 px2rem(2px) px2rem(2px);
right: px2rem(1px);
border-width: 0 0 px2rem(1px) px2rem(1px);
right: px2rem(2px);
bottom: px2rem(6px);
transform: rotate(-40deg);
width: var(--Checkbox--full-inner-size);
height: calc(var(--Checkbox--full-inner-size) / 2);
border-color: #fff;
}
}

7
packages/amis-ui/scss/components/form/_select.scss
View File

@ -595,6 +595,11 @@
// PopOver 上已经配置了，这个要是配置就会覆盖，所以先干掉好了
// z-index: 10;
}
.#{$ns}InputGroup:hover {
.#{$ns}Select-popover {
border-color: var(--Form-select-outer-borderColor) !important;
}
}
.#{$ns}SelectControl {
&:not(.is-inline) > .#{$ns}Select {
@ -607,8 +612,6 @@
}
.#{$ns}TransferDropDown-popover {
border: none;
.#{$ns}Tree-list {
.#{$ns}Tree-item {
.#{$ns}Tree-itemLabel,

2
packages/amis-ui/scss/components/form/_tag.scss
View File

@ -11,9 +11,7 @@
}
> .#{$ns}TagControl-popover {
// box-shadow: none;
padding: 0;
border: none;
width: 100%;
margin-top: px2rem(4px);

4
packages/amis-ui/scss/components/form/_transfer.scss
View File

@ -251,10 +251,6 @@
var(--transfer-search-bottom-right-border-radius)
var(--transfer-search-bottom-left-border-radius);
box-shadow: var(--transfer-search-shadow);
padding: var(--transfer-search-input-paddingTop)
var(--transfer-search-input-paddingRight)
var(--transfer-search-input-paddingBottom)
var(--transfer-search-input-paddingLeft);
&:hover {
border-color: var(--transfer-search-border-hover-color);

43
packages/amis-ui/src/components/DateRangePicker.tsx
View File

@ -1552,11 +1552,11 @@ export class DateRangePicker extends React.Component<
}
if (startDate && currentDate.isSame(startDate, 'day')) {
props.className += ' rdtActive rdtStartDay';
props.className += ' rdtActive rdtStart';
}
if (endDate && currentDate.isSame(endDate, 'day')) {
props.className += ' rdtActive rdtEndDay';
props.className += ' rdtActive rdtEnd';
}
const {className, ...others} = this.getDisabledElementProps(
@ -1591,6 +1591,19 @@ export class DateRangePicker extends React.Component<
props.className += ' rdtBetween';
}
// 如果已经选择了开始时间和结束时间，那么中间的时间都不应该高亮
if (startDate && endDate && props.className.includes('rdtActive')) {
props.className = props.className.replace('rdtActive', '');
}
if (startDate && currentDate.isSame(startDate, 'month')) {
props.className += ' rdtActive rdtStart';
}
if (endDate && currentDate.isSame(endDate, 'month')) {
props.className += ' rdtActive rdtEnd';
}
const {className, ...others} = this.getDisabledElementProps(
currentDate,
'month'
@ -1616,6 +1629,19 @@ export class DateRangePicker extends React.Component<
props.className += ' rdtBetween';
}
// 如果已经选择了开始时间和结束时间，那么中间的时间都不应该高亮
if (startDate && endDate && props.className.includes('rdtActive')) {
props.className = props.className.replace('rdtActive', '');
}
if (startDate && currentDate.isSame(startDate, 'quarter')) {
props.className += ' rdtActive rdtStart';
}
if (endDate && currentDate.isSame(endDate, 'quarter')) {
props.className += ' rdtActive rdtEnd';
}
const {className, ...others} = this.getDisabledElementProps(
currentDate,
'quarter'
@ -1640,6 +1666,19 @@ export class DateRangePicker extends React.Component<
props.className += ' rdtBetween';
}
// 如果已经选择了开始时间和结束时间，那么中间的时间都不应该高亮
if (startDate && endDate && props.className.includes('rdtActive')) {
props.className = props.className.replace('rdtActive', '');
}
if (startDate && currentDate.isSame(startDate, 'year')) {
props.className += ' rdtActive rdtStart';
}
if (endDate && currentDate.isSame(endDate, 'year')) {
props.className += ' rdtActive rdtEnd';
}
const {className, ...others} = this.getDisabledElementProps(
currentDate,
'year'

4
packages/amis/__tests__/renderers/Form/__snapshots__/inputMonthRange.test.tsx.snap
View File

@ -192,7 +192,7 @@ exports[`Renderer:inputMonthRange with embed 1`] = `
</tr>
<tr>
<td
class="rdtMonth rdtActive rdtBetween"
class="rdtMonth rdtBetween rdtActive rdtStart"
data-value="9"
>
<span>
@ -343,7 +343,7 @@ exports[`Renderer:inputMonthRange with embed 1`] = `
</span>
</td>
<td
class="rdtMonth rdtActive rdtBetween"
class="rdtMonth rdtBetween rdtActive rdtEnd"
data-value="10"
>
<span>

4
packages/amis/__tests__/renderers/Form/__snapshots__/inputQuarterRange.test.tsx.snap
View File

@ -141,7 +141,7 @@ exports[`Renderer:InputQuarterRange with embed 1`] = `
</span>
</td>
<td
class="rdtQuarter rdtActive rdtBetween"
class="rdtQuarter rdtBetween rdtActive rdtStart rdtActive rdtEnd"
data-value="4"
>
<span>
@ -218,7 +218,7 @@ exports[`Renderer:InputQuarterRange with embed 1`] = `
</span>
</td>
<td
class="rdtQuarter rdtActive rdtBetween"
class="rdtQuarter rdtBetween rdtActive rdtStart rdtActive rdtEnd"
data-value="4"
>
<span>

4
packages/amis/__tests__/renderers/Form/__snapshots__/inputYearRange.test.tsx.snap
View File

@ -166,7 +166,7 @@ exports[`Renderer:inputYearRange with embed 1`] = `
</tr>
<tr>
<td
class="rdtYear rdtActive rdtBetween"
class="rdtYear rdtBetween rdtActive rdtStart"
data-value="1995"
>
<span>
@ -317,7 +317,7 @@ exports[`Renderer:inputYearRange with embed 1`] = `
</span>
</td>
<td
class="rdtYear rdtActive rdtBetween"
class="rdtYear rdtBetween rdtActive rdtEnd"
data-value="2076"
>
<span>

4
packages/amis/__tests__/renderers/Form/dateRange.test.tsx
View File

@ -221,7 +221,7 @@ test('Renderer:dateRange with minDuration & maxDuration', async () => {
expect(
container.querySelector(
'.cxd-DateRangePicker-picker-wrap .rdtDay.rdtActive.rdtEndDay.rdtDisabled'
'.cxd-DateRangePicker-picker-wrap .rdtDay.rdtActive.rdtEnd.rdtDisabled'
)!
).toBeInTheDocument();
@ -238,7 +238,7 @@ test('Renderer:dateRange with minDuration & maxDuration', async () => {
expect(
container.querySelector(
'.cxd-DateRangePicker-picker-wrap .rdtDay.rdtActive.rdtEndDay.rdtDisabled'
'.cxd-DateRangePicker-picker-wrap .rdtDay.rdtActive.rdtEnd.rdtDisabled'
)!
).toBeInTheDocument();
});