Skip to content

Commit

Permalink
refactor(theme): [pop-upload] refactor pop-upload theme vars (#2290)
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzcr
zzcr authored Oct 18, 2024
1 parent 2645de3 commit 831d4cd
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 74 deletions.
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/pop-upload/size.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@ test('PopUpload 设置组件大小', async ({ page }) => {

await expect(modalAppearBtn).toHaveClass(/tiny-button--medium/)
await expect(modalAppearBtn).toHaveCSS('height', '40px')
await expect(modalAppearBtn).toHaveCSS('min-width', '88px')
await expect(modalAppearBtn).toHaveCSS('min-width', '112px')
})
58 changes: 27 additions & 31 deletions packages/theme/src/pop-upload/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@
@alert-prefix-cls: ~'@{css-prefix}alert';

.@{popupload__modal-prefix-cls} {
.component-css-vars-pop-upload();
.inject-PopUpload-vars();
}

.@{popupload-prefix-cls} {
.component-css-vars-pop-upload();
.inject-PopUpload-vars();
display: flex;
align-items: center;
font-size: var(--ti-popupload-font-size);
font-size: var(--tv-PopUpload-font-size);

&__dialog {
width: 100%;
Expand All @@ -36,12 +36,12 @@

&__dialog-header {
.@{alert-prefix-cls} {
margin-bottom: var(--ti-popupload-dialog-header-alert-margin-bottom);
margin-bottom: 10px;
}
}

&__dialog-body {
padding-bottom: var(--ti-popupload-dialog-table-body-padding-bottom);
padding-bottom: 10px;

.@{upload-list-prefix-cls} {
display: none;
Expand All @@ -53,7 +53,7 @@
display: flex;
align-items: center;
justify-content: center;
padding-bottom: var(--ti-popupload-dialog-footer-padding-bottom);
padding-bottom: 24px;
}

&__dialog-tips {
Expand All @@ -67,33 +67,32 @@
}

&__dialog-table {
font-size: var(--ti-popupload-dialog-table-font-size);
height: var(--ti-popupload-dialog-table-height);
font-size: var(--tv-PopUpload-dialog-table-font-size);
height: var(--tv-PopUpload-dialog-table-height);
width: 100%;
margin-top: var(--ti-popupload-dialog-margin-top);
margin-top: 10px;

.header-col {
position: relative;
padding: var(--ti-popupload-table-header-col-padding-vertical)
var(--ti-popupload-table-header-col-padding-horizontal);
padding: 0 12px;

&:not(:last-child)::after {
&:not(:last-child):after {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
display: inline-block;
content: '';
width: 1px;
height: var(--ti-popupload-dialog-table-line-height);
background-color: var(--ti-popupload-dialog-table-line-bg-color);
height: var(--tv-PopUpload-dialog-table-line-height);
background-color: transparent;
}
}

.body-col {
padding: var(--ti-popupload-table-body-col-padding-vertical) var(--ti-popupload-table-body-col-padding-horizontal);
margin: var(--ti-popupload-table-body-col-margin-vertical) var(--ti-popupload-table-body-col-margin-horizontal);
line-height: var(--ti-popupload-table-body-col-line-height);
padding: 8px 12px;
margin: 0;
line-height: var(--tv-PopUpload-table-body-col-line-height);
}

.col1 {
Expand All @@ -114,22 +113,20 @@
}

&__dialog-table-header {
height: var(--ti-popupload-dialog-table-header-height);
height: var(--tv-PopUpload-dialog-table-header-height);
width: 100%;
color: var(--ti-popupload-dialog-table-header-text-color);
font-weight: var(--ti-popupload-dialog-table-header-font-weight);
color: var(--tv-PopUpload-dialog-table-header-text-color);
font-weight: var(--tv-PopUpload-dialog-table-header-font-weight);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--ti-popupload-dialog-table-header-bg-color);
border-bottom: 1px solid var(--ti-popupload-dialog-table-border-color);
background: var(--tv-PopUpload-dialog-table-header-bg-color);
}

&__dialog-table-body {
width: 100%;
height: calc(100% - var(--ti-popupload-dialog-table-header-height));
height: calc(100% - var(--tv-PopUpload-dialog-table-header-height));
overflow-y: auto;
border-bottom: 1px solid var(--ti-popupload-dialog-table-border-color);
}

&__dialog-table-list {
Expand All @@ -139,7 +136,7 @@
margin-top: 12px;

& > .footer-error-tip {
color: var(--ti-popupload-status-fail-icon-color);
color: var(--tv-PopUpload-status-fail-icon-color);
}
}
}
Expand All @@ -149,14 +146,13 @@
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--ti-popupload-table-item-border-color);

&:nth-child(even) {
background: var(--ti-popupload-table-item-even-bg-color);
background: var(--tv-PopUpload-table-item-even-bg-color);
}

.del-col {
color: var(--ti-popupload-dialog-delete-text-color);
color: var(--tv-PopUpload-dialog-delete-text-color);
width: 100%;
cursor: pointer;
}
Expand Down Expand Up @@ -184,15 +180,15 @@
margin-right: 7px;
height: 8px;
width: 8px;
border: 2px solid var(--ti-popupload-status-icon-color);
border: 2px solid var(--tv-PopUpload-status-icon-border-color);
border-radius: 50%;

&&-success {
border-color: var(--ti-popupload-status-success-icon-color);
border-color: var(--tv-PopUpload-status-success-icon-border-color);
}

&&-fail {
border-color: var(--ti-popupload-status-fail-icon-color);
border-color: var(--tv-PopUpload-status-fail-icon-color);
}
}
}
58 changes: 16 additions & 42 deletions packages/theme/src/pop-upload/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,59 +10,33 @@
*
*/

.component-css-vars-pop-upload() {
// 上传按钮文字大小(hide)
--ti-popupload-font-size: var(--ti-common-font-size-base, 14px);
// 弹窗头部alert提示底部外边距
--ti-popupload-dialog-header-alert-margin-bottom: var(--ti-common-space-10, 10px);
.inject-PopUpload-vars() {
// 上传按钮文字大小
--tv-PopUpload-font-size: var(--tv-font-size-md);
// 弹窗表格高度
--ti-popupload-dialog-table-height: calc(var(--ti-common-size-35x, 140px) * 2);
--tv-PopUpload-dialog-table-height: 280px;
// 弹窗表格字号
--ti-popupload-dialog-table-font-size: var(--ti-common-font-size-1, 14px);
// 弹窗表格顶部外边距
--ti-popupload-dialog-margin-top: var(--ti-common-space-10, 10px);
// 弹窗表格头部横向分割线颜色
--ti-popupload-dialog-table-border-color: var(--ti-common-color-transparent, transparent);
// 弹窗表格头部竖向分割线颜色(new)
--ti-popupload-dialog-table-line-bg-color: var(--ti-common-bg-color-transparent-15, var(--ti-base-bg-color-transparent-15));
--tv-PopUpload-dialog-table-font-size: var(--tv-font-size-md);
// 弹窗表格头部竖向分割线高度(new)
--ti-popupload-dialog-table-line-height: var(--ti-common-size-4x, 16px);
--tv-PopUpload-dialog-table-line-height: 16px;
// 弹窗表格头部高度
--ti-popupload-dialog-table-header-height: var(--ti-common-size-height-small, 24px);
--tv-PopUpload-dialog-table-header-height: var(--tv-size-height-xs);
// 弹窗表格头部文本色
--ti-popupload-dialog-table-header-text-color: var(--ti-common-color-text-primary, #191919);
--tv-PopUpload-dialog-table-header-text-color: var(--tv-color-text);
// 弹窗表格头部字重
--ti-popupload-dialog-table-header-font-weight: var(--ti-common-font-weight-bold, 600);
--tv-PopUpload-dialog-table-header-font-weight: var(--tv-font-weight-bold);
// 弹窗表格头部背景色
--ti-popupload-dialog-table-header-bg-color: var(--ti-common-color-bg-normal, #f5f5f5);
// 弹窗表格头部item垂直内边距
--ti-popupload-table-header-col-padding-vertical: var(--ti-common-space-0, 0px);
// 弹窗表格头部item水平内边距
--ti-popupload-table-header-col-padding-horizontal: var(--ti-common-space-3x, 12px);
// 弹窗表格内容item垂直内边距
--ti-popupload-table-body-col-padding-vertical: var(--ti-common-space-2x, 8px);
// 弹窗表格内容item水平内边距
--ti-popupload-table-body-col-padding-horizontal: var(--ti-common-space-3x, 12px);
// 弹窗表格内容item垂直外边距
--ti-popupload-table-body-col-margin-vertical: var(--ti-common-space-0, 0px);
// 弹窗表格内容item水平外边距
--ti-popupload-table-body-col-margin-horizontal: var(--ti-common-space-0, 0px);
--tv-PopUpload-dialog-table-header-bg-color: var(--tv-color-bg);
// 弹窗表格内容item行高
--ti-popupload-table-body-col-line-height: var(--ti-common-line-height-4, 30px);
--tv-PopUpload-table-body-col-line-height: 30px;
// 弹窗表格内容偶数行背景色
--ti-popupload-table-item-even-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
// 弹窗表格每行底部边框色(new)
--ti-popupload-table-item-border-color: var(--ti-common-border-color-transparent-8, var(--ti-base-bg-color-transparent-8));
// 弹窗表格底部内边距
--ti-popupload-dialog-table-body-padding-bottom: var(--ti-common-space-10, 10px);
// 弹窗底部内边距
--ti-popupload-dialog-footer-padding-bottom: var(--ti-common-space-6x, 24px);
--tv-PopUpload-table-item-even-bg-color: var(--tv-color-bg-secondary);
// 弹窗已上传文件的删除文本色
--ti-popupload-dialog-delete-text-color: var(--ti-common-color-text-link, #1476ff);
--tv-PopUpload-dialog-delete-text-color: var(--tv-color-text-link);
// 弹窗文件列表等待上传圆圈色
--ti-popupload-status-icon-color: var(--ti-common-color-line-normal, #c2c2c2);
--tv-PopUpload-status-icon-border-color: var(--tv-color-border);
// 弹窗文件列表上传成功圆圈色
--ti-popupload-status-success-icon-color: var(--ti-common-color-success, #5cb300);
--tv-PopUpload-status-success-icon-border-color: var(--tv-color-success-border);
// 弹窗文件列表上传失败圆圈色
--ti-popupload-status-fail-icon-color: var(--ti-common-color-error-border, #f23030);
--tv-PopUpload-status-fail-icon-color: var(--tv-color-error-border);
}

0 comments on commit 831d4cd

Please sign in to comment.