Skip to content

Commit

Permalink
refactor(date-picker): [date-picker] modify variable names and styles…
Browse files Browse the repository at this point in the history 
… for date-picker (#2340)
  • Loading branch information
@MomoPoppy
MomoPoppy authored Oct 21, 2024
1 parent 014aa1d commit 2930ff0
Show file tree
Hide file tree
Showing 31 changed files with 981 additions and 912 deletions.
1 change: 1 addition & 0 deletions packages/renderless/src/picker/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1238,6 +1238,7 @@ export const isValidValue =
return true
}

// TODO: 这个方法有问题
export const watchIsRange =
({ api, state, TimePanel, TimeRangePanel }) =>
(value) => {
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/base/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@
--tv-color-text-active: var(--tv-base-color-brand-6); // #1476ff 选中文本色 / 文本高亮色（搜索关键字高亮）
--tv-color-text-important: var(--tv-base-color-common-11); // #191919 重要文本色-文本_金额
--tv-color-text-white: var(--tv-base-color-common-1); // #fff 深色背景上-文本色
--tv-color-text-link: var(--tv-base-color-brand-6); // #1476ff 链接色
--tv-color-text-link: var(--tv-base-color-brand-6); // #1476ff 链接色（链接按钮）
--tv-color-text-link-hover: var(--tv-base-color-brand-6); // #1476ff 链接悬浮色

/** 2.5 图标色 **/
Expand Down Expand Up @@ -382,7 +382,7 @@
/** 4. 圆角变量 **/
--tv-border-radius-xs: 2px;
--tv-border-radius-sm: 4px;
--tv-border-radius-md: 6px;
--tv-border-radius-md: 6px; // 默认
--tv-border-radius-lg: 8px;
--tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 999px是 tiny3的做法。

Expand Down
263 changes: 146 additions & 117 deletions packages/theme/src/date-panel/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,181 +14,210 @@
@import './vars.less';

@picker-panel-prefix-cls: ~'@{css-prefix}picker-panel';
@button-primary-prefix-cls: ~'@{css-prefix}button--primary';
@date-picker-prefix-cls: ~'@{css-prefix}date-picker';

.@{picker-panel-prefix-cls} {
.component-css-vars-picker-panel();

color: var(--ti-picker-panel-text-color);
font-size: var(--ti-picker-panel-font-size);
border: 1px solid var(--ti-picker-panel-border-color);
box-shadow: var(--ti-picker-panel-box-shadow);
background: var(--ti-picker-panel-bg-color);
border-radius: var(--ti-common-border-radius-normal);
line-height: var(--ti-picker-panel-line-height);
margin: var(--ti-common-dropdown-gap) 0;

&__body-wrapper::after,
&__body::after {
content: '';
display: table;
clear: both;
color: var(--tv-DatePanel-text-color);
font-size: var(--tv-DatePanel-font-size);
box-shadow: var(--tv-DatePanel-box-shadow);
background: var(--tv-DatePanel-bg-color);
border-radius: var(--tv-DatePanel-border-radius);
line-height: var(--tv-DatePanel-line-height);
margin: var(--tv-DatePanel-margin);
width: var(--tv-DatePanel-width);

&.has-sidebar.has-time {
width: 434px;
}

&__body {
padding-bottom: 8px;
&.has-sidebar {
width: 398px;
}

&__content {
position: relative;
border-top: solid 1px var(--ti-picker-panel-content-border-color);
padding-top: var(--ti-picker-panel-content-padding-top);
padding-left: var(--ti-picker-panel-content-padding-left);
padding-right: var(--ti-picker-panel-content-padding-right);
&.has-time {
.@{picker-panel-prefix-cls}__body-wrapper {
position: relative;
}
}

&__footer {
border-top: 1px solid var(--ti-picker-panel-border-color);
padding: var(--ti-picker-panel-footer-padding-verticals) 16px;
background-color: var(--ti-picker-panel-bg-color);
display: flex;
justify-content: space-between;
align-items: center;

.@{button-prefix-cls} {
min-width: 60px;

&:only-child {
float: right;
}
}
// 快捷选项
[slot='sidebar'],
&__sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 110px;
border-right: 1px solid var(--tv-DatePanel-border-color-divider);
padding-top: var(--tv-DatePanel-sidebar-padding-top);
overflow: auto;

.@{button-prefix-cls}--text {
.@{picker-panel-prefix-cls}__shortcut {
display: block;
width: 100%;
border: 0;
background-color: transparent;
line-height: var(--tv-DatePanel-line-height);
font-size: var(--tv-DatePanel-font-size);
color: var(--tv-DatePanel-text-color);
padding: var(--tv-DatePanel-shortcut-padding);
text-align: left;
}
}

&__shortcut {
display: block;
width: 100%;
border: 0;
background-color: transparent;
line-height: 28px;
font-size: var(--ti-picker-panel-shortcut-font-size);
color: var(--ti-picker-panel-text-color);
padding-left: 12px;
text-align: left;
outline: 0;
cursor: pointer;
outline: 0;
cursor: pointer;

&:hover {
background-color: var(--ti-picker-panel-hover-bg-color);
&:hover {
background-color: var(--tv-DatePanel-bg-color-hover);
}
}

&.active {
background-color: var(--ti-picker-panel-selected-bg-color);
& + .@{picker-panel-prefix-cls}__body {
margin-left: 110px;
}
}

&__shortcut-selected[type='button'] {
color: var(--ti-picker-panel-shortcut-selected-text-color);
background-color: var(--ti-picker-panel-shortcut-selected-bg-color);
// 面板主体
&__body-wrapper::after,
&__body::after {
content: '';
display: table;
clear: both;
}

&__btn {
color: var(--ti-picker-panel-text-color);
border: 1px solid var(--ti-picker-panel-border-color);
font-size: var(--ti-picker-panel-font-size);
line-height: 24px;
border-radius: var(--ti-picker-panel-border-radius);
padding: 0 20px;
cursor: pointer;
outline: 0;
background-color: transparent;
&__body {
padding-bottom: 8px;

[disabled] {
color: var(--ti-picker-panel-disabled-text-color);
cursor: not-allowed;
}
}
// 头部-时间选择输入框
.@{date-picker-prefix-cls}__time-header {
padding: var(--tv-DatePanel-time-header-padding);
position: relative;
display: table;
width: 100%;

&__icon-btn {
font-size: var(--ti-picker-panel-font-size);
line-height: var(--ti-picker-panel-icon-btn-line-height);
fill: var(--ti-picker-panel-icon-color-btn);
border: 0;
background: 0 0;
cursor: pointer;
outline: 0;
.@{date-picker-prefix-cls}__editor-wrap {
position: relative;
display: table-cell;

svg {
fill: var(--ti-picker-panel-svg-fill);
&:first-child {
padding-right: var(--tv-DatePanel-editor-wrap-padding-right);
}
}
}

svg:hover {
fill: var(--ti--picker-panel-svg-hover-fill)
}
// 头部-年月选择
.@{date-picker-prefix-cls}__header {
padding: var(--tv-DatePanel-header-padding);
text-align: center;

&:hover {
fill: var(--ti-picker-panel-icon-color-btn-hover);
}
.@{date-picker-prefix-cls}__prev-btn {
float: left;
}

.@{date-picker-prefix-cls}__next-btn {
float: right;
}

&.is-disabled {
color: var(--ti-picker-panel-icon-color-btn-disabled);
&-label {
padding: var(--tv-DatePanel-header-label-padding);
cursor: pointer;

&:hover {
cursor: not-allowed;
&.active,
&:hover {
color: var(--tv-DatePanel-text-color-heightlight);
}
}
}
}

//
.@{picker-panel-prefix-cls}__content {
position: relative;
border-top: solid 1px var(--tv-DatePanel-border-color-divider);
padding: var(--tv-DatePanel-content-padding);

[slot='sidebar'],
&__sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 110px;
border-right: 1px solid var(--ti-picker-panel-border-color);
box-sizing: border-box;
padding-top: 6px;
background-color: var(--ti-picker-panel-bg-color);
overflow: auto;

& + .@{picker-panel-prefix-cls}__body {
margin-left: 110px;
table {
table-layout: fixed;
width: 100%;
}
}
}

// 时区选择
&__timezone {
margin-bottom: 10px;
margin-bottom: 8px;
padding: 8px 0;

.@{picker-panel-prefix-cls}__tzlist {
z-index: 10;
overflow-y: hidden;

&-li {
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px;
border: 1px solid #f4f0f0;
padding: var(--tv-DatePanel-timezone-li-padding);
cursor: pointer;

&:hover {
background-color: var(--tv-DatePanel-bg-color-hover);
}
}

.@{css-prefix}popup {
position: absolute;
width: 238px;
bottom: 77px;
max-height: 260px;
box-shadow: 0 -1px 2px 0 rgba(53, 29, 29, 0.5);
box-shadow: var(--tv-DatePanel-box-shadow);
}
}

.@{input-prefix-cls} {
position: relative;
}
}

// 底部
&__footer {
border-top: 1px solid var(--tv-DatePanel-border-color-divider);
padding: var(--tv-DatePanel-footer-padding);
display: flex;
justify-content: space-between;
align-items: center;

.@{button-prefix-cls} {
min-width: 60px;

&:only-child {
float: right;
}
}

.@{button-prefix-cls}--text {
text-align: left;
}
}

/* 公共样式 */
// 头部按钮
.@{picker-panel-prefix-cls}__icon-btn {
height: var(--tv-DatePanel-header-btn-height);
padding: var(--tv-DatePanel-header-btn-padding);
border: 0;
background: unset;
cursor: pointer;
outline: 0;

.tiny-svg {
font-size: var(--tv-DatePanel-icon-size);
fill: var(--tv-DatePanel-icon-color);

&:hover {
fill: var(--tv-DatePanel-icon-color-hover);
}
}
}

.tiny-picker-panel__table {
padding: 0 16px;
}
}
Loading

0 comments on commit 2930ff0

Please sign in to comment.