From 002b824c41639aad6ce6ac770d6705b00c14cc33 Mon Sep 17 00:00:00 2001 From: qkiroc <30946345+qkiroc@users.noreply.github.com> Date: Tue, 23 Jan 2024 18:34:32 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96input-tag=E3=80=81in?= =?UTF-8?q?put-year-range=E3=80=81list-select=E7=AD=89=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20(#9477)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: 优化tag组件样式 * 组件样式优化 * 修复编辑器组件提示溢出问题 * 优化年份\季度\月份范围选择器组件样式 * 更新快照 * 更新快照 --------- Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com> --- .../amis-editor-core/scss/_renderers.scss | 2 +- .../src/systemTheme/component.ts | 4 +- packages/amis-ui/scss/_components.scss | 6 +-- packages/amis-ui/scss/_properties.scss | 2 +- .../amis-ui/scss/components/_search-box.scss | 8 +++- .../amis-ui/scss/components/form/_date.scss | 24 +++++------ .../amis-ui/scss/components/form/_list.scss | 10 ++--- .../amis-ui/scss/components/form/_select.scss | 7 ++- .../amis-ui/scss/components/form/_tag.scss | 2 - .../scss/components/form/_transfer.scss | 4 -- .../src/components/DateRangePicker.tsx | 43 ++++++++++++++++++- .../inputMonthRange.test.tsx.snap | 4 +- .../inputQuarterRange.test.tsx.snap | 4 +- .../inputYearRange.test.tsx.snap | 4 +- .../renderers/Form/dateRange.test.tsx | 4 +- 15 files changed, 84 insertions(+), 44 deletions(-) diff --git a/packages/amis-editor-core/scss/_renderers.scss b/packages/amis-editor-core/scss/_renderers.scss index a263f8693..6314f89ed 100644 --- a/packages/amis-editor-core/scss/_renderers.scss +++ b/packages/amis-editor-core/scss/_renderers.scss @@ -271,7 +271,7 @@ .ae-Renderer-preview { position: relative; max-height: 200px; - // overflow: hidden; + overflow: auto; } } diff --git a/packages/amis-theme-editor-helper/src/systemTheme/component.ts b/packages/amis-theme-editor-helper/src/systemTheme/component.ts index 9351b42c1..b1768e008 100644 --- a/packages/amis-theme-editor-helper/src/systemTheme/component.ts +++ b/packages/amis-theme-editor-helper/src/systemTheme/component.ts @@ -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)' } } diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 02ebc5110..2b45adb97 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -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; diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index 094f9cb22..1ea53a46e 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -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); diff --git a/packages/amis-ui/scss/components/_search-box.scss b/packages/amis-ui/scss/components/_search-box.scss index e3343abfc..00dd2cf60 100644 --- a/packages/amis-ui/scss/components/_search-box.scss +++ b/packages/amis-ui/scss/components/_search-box.scss @@ -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); } diff --git a/packages/amis-ui/scss/components/form/_date.scss b/packages/amis-ui/scss/components/form/_date.scss index 4c4ad84bc..9179374ea 100644 --- a/packages/amis-ui/scss/components/form/_date.scss +++ b/packages/amis-ui/scss/components/form/_date.scss @@ -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); diff --git a/packages/amis-ui/scss/components/form/_list.scss b/packages/amis-ui/scss/components/form/_list.scss index 3cc47a3d6..0a0135885 100644 --- a/packages/amis-ui/scss/components/form/_list.scss +++ b/packages/amis-ui/scss/components/form/_list.scss @@ -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; } } diff --git a/packages/amis-ui/scss/components/form/_select.scss b/packages/amis-ui/scss/components/form/_select.scss index 7c34e1f76..7dbe9c6c9 100644 --- a/packages/amis-ui/scss/components/form/_select.scss +++ b/packages/amis-ui/scss/components/form/_select.scss @@ -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, diff --git a/packages/amis-ui/scss/components/form/_tag.scss b/packages/amis-ui/scss/components/form/_tag.scss index 42e05a512..4310058e9 100644 --- a/packages/amis-ui/scss/components/form/_tag.scss +++ b/packages/amis-ui/scss/components/form/_tag.scss @@ -11,9 +11,7 @@ } > .#{$ns}TagControl-popover { - // box-shadow: none; padding: 0; - border: none; width: 100%; margin-top: px2rem(4px); diff --git a/packages/amis-ui/scss/components/form/_transfer.scss b/packages/amis-ui/scss/components/form/_transfer.scss index dfec6c386..a9e1399d5 100644 --- a/packages/amis-ui/scss/components/form/_transfer.scss +++ b/packages/amis-ui/scss/components/form/_transfer.scss @@ -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); diff --git a/packages/amis-ui/src/components/DateRangePicker.tsx b/packages/amis-ui/src/components/DateRangePicker.tsx index 49aa71bcc..85080676e 100644 --- a/packages/amis-ui/src/components/DateRangePicker.tsx +++ b/packages/amis-ui/src/components/DateRangePicker.tsx @@ -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' diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputMonthRange.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputMonthRange.test.tsx.snap index 175d883fd..a83dc8ac3 100644 --- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputMonthRange.test.tsx.snap +++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputMonthRange.test.tsx.snap @@ -192,7 +192,7 @@ exports[`Renderer:inputMonthRange with embed 1`] = ` @@ -343,7 +343,7 @@ exports[`Renderer:inputMonthRange with embed 1`] = ` diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputQuarterRange.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputQuarterRange.test.tsx.snap index 9ed799b5b..1be294609 100644 --- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputQuarterRange.test.tsx.snap +++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputQuarterRange.test.tsx.snap @@ -141,7 +141,7 @@ exports[`Renderer:InputQuarterRange with embed 1`] = ` @@ -218,7 +218,7 @@ exports[`Renderer:InputQuarterRange with embed 1`] = ` diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputYearRange.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputYearRange.test.tsx.snap index 5c187de2a..868011408 100644 --- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputYearRange.test.tsx.snap +++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputYearRange.test.tsx.snap @@ -166,7 +166,7 @@ exports[`Renderer:inputYearRange with embed 1`] = ` @@ -317,7 +317,7 @@ exports[`Renderer:inputYearRange with embed 1`] = ` diff --git a/packages/amis/__tests__/renderers/Form/dateRange.test.tsx b/packages/amis/__tests__/renderers/Form/dateRange.test.tsx index 26b93fe6c..4d857641d 100644 --- a/packages/amis/__tests__/renderers/Form/dateRange.test.tsx +++ b/packages/amis/__tests__/renderers/Form/dateRange.test.tsx @@ -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(); });