Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(theme): [drawer] refactor drawer theme vars #2237

Merged
merged 2 commits into from
Oct 12, 2024
Merged

refactor(theme): [drawer] refactor drawer theme vars #2237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f5d3045
refactor(theme): [drawer] refactor drawer theme vars
zzcr Oct 11, 2024
57d8f12
refactor(theme): update mask bg vars
zzcr Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,7 @@
--tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色/表格下展背景色
--tv-color-bg-gray-2: var(--tv-base-color-common-5); // #e6e6e6 灰色背景-2灰色标签背景色
--tv-color-bg-header: var(--tv-base-color-common-4); // #f0f0f0 表头背景色(如果只有表格使用，就转成组件级变量）
--tv-color-bg-mask: rgba(0, 0, 0, 30%); // 遮罩层带有透明度的背景色

/* 2.6.2 禁用 */
--tv-color-bg-disabled: var(--tv-base-color-common-4); // #f0f0f0 禁用背景色
Expand Down
77 changes: 35 additions & 42 deletions packages/theme/src/drawer/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@drawer-prefix-cls: ~'@{css-prefix}drawer';

.@{drawer-prefix-cls} {
.component-css-vars-drawer();
.inject-Drawer-vars();

.@{drawer-prefix-cls}__mask {
width: 100%;
Expand All @@ -16,7 +16,7 @@
right: 0;

&.show-bg-color {
background-color: var(--ti-drawer-mask-bg-color);
background-color: var(--tv-Drawer-mask-bg-color);
}
}

Expand All @@ -26,10 +26,8 @@
max-width: 100%;
display: flex;
flex-direction: column;
background-color: #fff;
border-color: #e8ebef;
border-style: solid;
box-shadow: var(--ti-drawer-shadow);
background-color: var(--tv-Drawer-bg-color);
box-shadow: var(--tv-Drawer-shadow);
overflow: hidden;

&.drag-effects {
Expand All @@ -52,28 +50,28 @@
top: 0;
right: 0;
border-left-width: 0.5px;
border-radius: var(--ti-drawer-radius) 0 0 var(--ti-drawer-radius);
border-radius: 0;
}

&.is-left {
top: 0;
left: 0;
border-right-width: 0.5px;
border-radius: 0 var(--ti-common-border-radius-2) var(--ti-common-border-radius-2) 0;
border-radius: 0 var(--tv-Drawer-border-radius-size) var(--tv-Drawer-border-radius-size) 0;
}

&.is-top {
top: 0;
left: 0;
border-bottom-width: 0.5px;
border-radius: 0 0 var(--ti-common-border-radius-2) var(--ti-common-border-radius-2);
border-radius: 0 0 var(--tv-Drawer-border-radius-size) var(--tv-Drawer-border-radius-size);
}

&.is-bottom {
bottom: 0;
left: 0;
border-top-width: 0.5px;
border-radius: var(--ti-common-border-radius-2) var(--ti-common-border-radius-2) 0 0;
border-radius: var(--tv-Drawer-border-radius-size) var(--tv-Drawer-border-radius-size) 0 0;
}

.@{drawer-prefix-cls}__drag-bar {
Expand Down Expand Up @@ -122,8 +120,8 @@

.@{drawer-prefix-cls}__header,
.@{drawer-prefix-cls}__footer {
margin-left: var(--ti-drawer-padding-left);
margin-right: var(--ti-drawer-padding-right);
margin-left: 32px;
margin-right: 32px;
Comment on lines +123 to +124
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider Using Variables Instead of Fixed Margins

The margin-left and margin-right properties are set to 32px. To enhance flexibility and maintain consistency across the theme, consider using variables instead of fixed pixel values.

You could define a variable in vars.less, such as @drawer-horizontal-margin, and use it here:

margin-left: @drawer-horizontal-margin;
margin-right: @drawer-horizontal-margin;

}

.@{drawer-prefix-cls}__header-wrapper {
Expand All @@ -136,44 +134,41 @@
padding: 0;
line-height: 1;
position: absolute;
top: var(--ti-drawer-btn-position-top);
right: var(--ti-drawer-btn-position-right);
top: 20px;
right: 20px;
Comment on lines +137 to +138
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use Variables for Close Button Positioning

The top and right properties of the close button are set to fixed values (20px). For better consistency and theming flexibility, consider defining these values as variables.

Define variables in vars.less:

@drawer-close-button-top: 20px;
@drawer-close-button-right: 20px;

Then apply them:

top: @drawer-close-button-top;
right: @drawer-close-button-right;

cursor: pointer;
height: var(--ti-drawer-btn-height);
width: var(--ti-drawer-btn-width);

&:hover {
background-color: var(--ti-drawer-btn-background-color-hover);
border-radius: var(--ti-drawer-btn-border-radius);
}
height: 24px;
width: 24px;
Comment on lines +140 to +141
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use Variables for Close Button Size

The height and width of the close button are hardcoded to 24px. To allow for easier adjustments and maintain consistency, consider using a variable.

Define a variable:

@drawer-close-button-size: 24px;

Then apply it:

height: @drawer-close-button-size;
width: @drawer-close-button-size;


& + .@{drawer-prefix-cls}__headerbtn {
margin-left: 8px;
}

.@{drawer-prefix-cls}__close {
font-size: var(--ti-drawer-close-icon-size);
fill: var(--ti-drawer-close-icon-color);
font-size: 24px;
fill: var(--tv-Drawer-close-icon-color);

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

.@{drawer-prefix-cls}__header {
padding: var(--ti-drawer-header-padding-top) var(--ti-drawer-header-padding-right)
var(--ti-drawer-header-padding-bottom) var(--ti-drawer-header-padding-left);
background: var(--ti-drawer-bg-color);
padding: 32px 0 24px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Replace Fixed Padding with Variables in Header

The header's padding is set to 32px 0 24px. Using variables for padding values enhances maintainability and allows for easier theme adjustments.

Define variables:

@drawer-header-padding-top: 32px;
@drawer-header-padding-bottom: 24px;

Then apply them:

padding: @drawer-header-padding-top 0 @drawer-header-padding-bottom;

background: var(--tv-Drawer-bg-color);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--ti-drawer-divider-border-color);

.@{drawer-prefix-cls}__title {
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--ti-drawer-head-title-font-size);
color: var(--ti-drawer-head-title-text-color);
font-weight: var(--ti-drawer-head-title-font-weight);
font-size: var(--tv-Drawer-head-title-font-size);
color: var(--tv-Drawer-head-title-text-color);
font-weight: var(--tv-Drawer-head-title-font-weight);
}

.@{drawer-prefix-cls}__header-left {
Expand All @@ -183,10 +178,10 @@
padding-right: 16px;

.@{drawer-prefix-cls}__help-icon {
width: var(--ti-drawer-help-icon-width-height);
height: var(--ti-drawer-help-icon-width-height);
margin-left: var(--ti-drawer-help-icon-margin-left);
fill: var(--ti-drawer-help-icon-color);
width: var(--tv-Drawer-help-icon-width-height);
height: var(--tv-Drawer-help-icon-width-height);
margin-left: 8px;
fill: var(--tv-Drawer-help-icon-color);
Comment on lines +181 to +184
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use Variable for Help Icon Margin

While the width, height, and fill are set using variables, the margin-left is hardcoded to 8px. Consider using a variable for the margin to maintain consistency.

Define a variable:

@drawer-help-icon-margin-left: 8px;

Then apply it:

margin-left: @drawer-help-icon-margin-left;

}
}

Expand All @@ -202,30 +197,28 @@
.@{drawer-prefix-cls}__body {
flex: auto;
overflow: auto;
padding: var(--ti-drawer-padding-top) var(--ti-drawer-padding-right) var(--ti-drawer-padding-bottom) var(--ti-drawer-padding-left);
border-bottom: 1px solid var(--ti-drawer-divider-body-border-color);
padding: 0 32px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use Variables for Body Padding

The padding for the body is set to 0 32px. Consider using a variable for the horizontal padding to maintain consistency.

Define a variable:

@drawer-body-horizontal-padding: 32px;

Then apply it:

padding: 0 @drawer-body-horizontal-padding;

border-bottom: 1px solid var(--tv-Drawer-divider-body-border-color);
}

.@{drawer-prefix-cls}__footer {
flex: none;
display: flex;
align-items: center;
justify-content: var(--ti-drawer-footer-justify-content);
padding: var(--ti-drawer-footer-padding-top) var(--ti-drawer-footer-padding-right)
var(--ti-drawer-footer-padding-bottom) var(--ti-drawer-footer-padding-left);
border-top: 1px solid var(--ti-drawer-divider-footer-border-color);
justify-content: flex-end;
padding: 24px 0 32px;
Comment on lines +208 to +209
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use Variables for Footer Padding

The footer's padding is set to 24px 0 32px. Replacing fixed values with variables enhances consistency and makes future adjustments easier.

Define variables:

@drawer-footer-padding-top: 24px;
@drawer-footer-padding-bottom: 32px;

Then apply them:

padding: @drawer-footer-padding-top 0 @drawer-footer-padding-bottom;


.@{drawer-prefix-cls}__confirm-btn {
order: 0;

&.reverse {
margin-left: var(--ti-drawer-divider-footer-button-margin-left);
margin-left: 8px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use Variables for Button Spacing

The margin-left for the confirm and cancel buttons is set to 8px. Using a variable for this spacing would improve consistency and ease adjustments.

Define a variable:

@drawer-button-spacing: 8px;

Then apply it:

margin-left: @drawer-button-spacing;

Also applies to: 221-221

order: 1;
}
}

.@{drawer-prefix-cls}__cancel-btn {
margin-left: var(--ti-drawer-divider-footer-button-margin-left);
margin-left: 8px;
order: 1;

&.reverse {
Expand Down
98 changes: 17 additions & 81 deletions packages/theme/src/drawer/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,97 +10,33 @@
*
*/

.component-css-vars-drawer() {
.inject-Drawer-vars() {
// 最小宽度
--ti-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50);
--tv-Drawer-min-width: 500px;
// 最大宽度
--ti-drawer-max-width: calc(var(--ti-common-space-10, 10px) * 100);
--tv-Drawer-max-width: 1000px;
Comment on lines +15 to +17
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider parameterizing width values for flexibility

The minimum and maximum width variables are now set to fixed pixel values (500px and 1000px). Consider using relative units (like em, rem, or percentages) or referencing global sizing variables to enhance responsiveness and maintainability.

Apply this diff if you decide to use global variables:

 - --tv-Drawer-min-width: 500px;
 - --tv-Drawer-max-width: 1000px;
+ --tv-Drawer-min-width: var(--tv-size-min-width);
+ --tv-Drawer-max-width: var(--tv-size-max-width);

Committable suggestion was skipped due to low confidence.

// 背景色
--ti-drawer-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
// 左内边距
--ti-drawer-padding-left: var(--ti-common-space-8x, 32px);
// 右内边距
--ti-drawer-padding-right: var(--ti-common-space-8x, 32px);
--tv-Drawer-bg-color: var(--tv-color-bg-secondary);
// 内容底部边框色
--tv-Drawer-divider-body-border-color: var(--tv-color-border-divider);
// 抽屉组件圆角
--tv-Drawer-border-radius-size: var(--tv-border-radius-sm);
// 遮罩层背景色
--ti-drawer-mask-bg-color: rgba(0, 0, 0, 16%);
--tv-Drawer-mask-bg-color: var(--tv-color-bg-mask);
// 阴影
--ti-drawer-shadow: 0 8px 24px rgba(0, 0, 0, 30%);
// 头部与底部边框颜色
--ti-drawer-divider-border-color: transparent;
// 边框圆角
--ti-drawer-radius: var(--ti-common-space-0, 0px);
// 遮罩层背景色
--ti-drawer-mask-bg-color: var(--ti-mobile-color-bg-mask);

// 头部上内边距
--ti-drawer-header-padding-top: var(--ti-common-space-8x, 32px);
// 头部下内边距
--ti-drawer-header-padding-bottom: var(--ti-common-space-6x, 24px);
// 头部左内边距
--ti-drawer-header-padding-left: var(--ti-common-space-0, 0px);
// 头部右内边距
--ti-drawer-body-padding-right: var(--ti-common-space-0, 0px);
--tv-Drawer-shadow: var(--tv-shadow-4-left);
// 头部字号
--ti-drawer-head-title-font-size: var(--ti-common-font-size-4, 20px);
// 头部文本色(hide)
--ti-drawer-head-text-color: var(--ti-common-color-text-primary, #191919);
--tv-Drawer-head-title-font-size: var(--tv-font-size-heading-md);
// 头部标题字重
--ti-drawer-head-title-font-weight: var(--ti-common-font-weight-7, bold);
--tv-Drawer-head-title-font-weight: var(--tv-font-weight-bold);
// 头部标题字体色
--ti-drawer-head-title-text-color: var(--ti-common-color-text-gray, #191919);
// 关闭按钮宽度
--ti-drawer-btn-width: var(--ti-common-size-width-mini, 24px);
// 关闭按钮高度
--ti-drawer-btn-height: var(--ti-common-size-width-mini, 24px);
// 关闭按钮图标尺寸
--ti-drawer-close-icon-size: var(--ti-common-font-size-5, 24px);
// 关闭按钮圆角
--ti-drawer-btn-border-radius: var(--ti-common-border-radius-1, 2px);
--tv-Drawer-head-title-text-color: var(--tv-color-text);
// 关闭按钮图标色
--ti-drawer-close-icon-color: var(--ti-common-color-icon-normal, #808080);
--tv-Drawer-close-icon-color: var(--tv-color-icon);
// 关闭按钮悬浮图标色
--ti-drawer-close-icon-color-hover: var(--ti-common-color-icon-hover, #191919);
// 关闭按钮与上边框的距离(hide)
--ti-drawer-btn-position-top: var(--ti-common-space-5x, 20px);
// 关闭按钮与右边框的距离(hide)
--ti-drawer-btn-position-right: var(--ti-common-space-5x, 20px);
// 标题与帮助图标间距
--ti-drawer-help-icon-margin-left: var(--ti-common-space-2x, 8px);
--tv-Drawer-close-icon-color-hover: var(--tv-color-icon-hover);
// 帮助图标宽高
--ti-drawer-help-icon-width-height: var(--ti-common-space-4x, 16px);
--tv-Drawer-help-icon-width-height: var(--tv-icon-size);
// 帮助图标色
--ti-drawer-help-icon-color: var(--ti-common-color-icon, #191919);

// 内容上内边距
--ti-drawer-body-padding-top: var(--ti-common-space-0, 0px);
// 内容下内边距
--ti-drawer-body-padding-bottom: var(--ti-common-space-0, 0px);
// 内容左内边距
--ti-drawer-body-padding-left: var(--ti-common-space-0, 0px);
// 内容右内边距
--ti-drawer-header-padding-right: var(--ti-common-space-0, 0px);
// 内容底部边框色(hide)
--ti-drawer-divider-body-border-color: var(--ti-common-color-line-dividing, #f0f0f0);
// 底部按钮对齐方式
--ti-drawer-footer-justify-content: flex-end;
// 底部上内边距
--ti-drawer-footer-padding-top: var(--ti-common-space-6x, 24px);
// 底部下内边距
--ti-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px);
// 底部左内边距
--ti-drawer-footer-padding-left: var(--ti-common-space-0, 0px);
// 底部右内边距
--ti-drawer-footer-padding-right: var(--ti-common-space-0, 0px);
// 底部左外边距
--ti-drawer-footer-margin-left: var(--ti-common-space-8x, 32px);
// 底部右外边距
--ti-drawer-footer-margin-right: var(--ti-common-space-10x, 40px);
// 底部按钮间距
--ti-drawer-divider-footer-button-margin-left: var(--ti-common-space-2x, 8px);
// 底部边框色(hide)
--ti-drawer-divider-footer-border-color: var(--ti-common-color-transparent, transparent);
// 内容区域上边距
--ti-drawer-padding-top: 0px;
// 内容区域下边距
--ti-drawer-padding-bottom: 0px;
--tv-Drawer-help-icon-color: var(--tv-color-icon-control);
}
Loading