Skip to content

refactor(theme): [popeditor] refactor popeditor theme vars #2298

New issue

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

#

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

Already on GitHub? # to your account

Merged
merged 2 commits into from
Oct 19, 2024
Merged

refactor(theme): [popeditor] refactor popeditor theme vars #2298

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
8a0b982
refactor(theme): [popeditor] refactor popeditor theme vars
zzcr Oct 18, 2024
70ca32b
refactor(theme): [popeditor] refactor popeditor theme vars
zzcr Oct 18, 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
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/size-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
text-split="@"
></tiny-popeditor>
<tiny-popeditor
size="small"
v-model="value"
:grid-op="gridOp"
text-field="name"
Expand All @@ -19,6 +18,7 @@
text-split="@"
></tiny-popeditor>
<tiny-popeditor
size="small"
v-model="value"
:grid-op="gridOp"
text-field="name"
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/popeditor/size.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
text-split="@"
></tiny-popeditor>
<tiny-popeditor
size="small"
v-model="value"
:grid-op="gridOp"
text-field="name"
Expand All @@ -19,6 +18,7 @@
text-split="@"
></tiny-popeditor>
<tiny-popeditor
size="small"
v-model="value"
:grid-op="gridOp"
text-field="name"
Expand Down
91 changes: 43 additions & 48 deletions packages/theme/src/popeditor/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,16 @@
@svg-prefix-cls: ~'@{css-prefix}svg';

.@{popeditor-prefix-cls} {
.component-css-vars-popeditor();
.inject-Popeditor-vars();

.@{input-prefix-cls} {
&.@{popeditor-prefix-cls}-readonly .@{input-prefix-cls}__inner {
padding-left: var(--ti-popeditor-input-padding-left);
padding-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

Consider using a variable for padding-left

Hardcoding padding-left: 8px; reduces flexibility. Using a variable allows for easier theming and future adjustments.


&:hover,
&:focus,
&:active {
cursor: pointer;
border-color: var(--ti-popeditor-border-color);
}
}

Expand All @@ -43,7 +42,7 @@

& + .@{input-prefix-cls}__suffix {
.@{svg-prefix-cls}__popeditor {
fill: var(--ti-popeditor-icon-color-disabled);
fill: var(--tv-Popeditor-icon-color-disabled);
}
}
}
Expand All @@ -54,7 +53,7 @@

.@{svg-prefix-cls}__popeditor,
.@{svg-prefix-cls}__popeditor:hover {
fill: var(--ti-popeditor-icon-color-disabled);
fill: var(--tv-Popeditor-icon-color-disabled);
cursor: not-allowed;
}
}
Expand All @@ -80,7 +79,7 @@
cursor: not-allowed;

.@{svg-prefix-cls}__popeditor {
fill: var(--ti-popeditor-icon-color-hover);
fill: var(--tv-Popeditor-icon-color-hover);
}
}
}
Expand All @@ -90,14 +89,14 @@
cursor: pointer;

.@{svg-prefix-cls}__popeditor {
height: var(--ti-popeditor-icon-height);
line-height: var(--ti-popeditor-icon-line-height);
font-size: var(--ti-popeditor-icon-font-size);
fill: var(--ti-popeditor-icon-color);
height: var(--tv-Popeditor-icon-height);
line-height: var(--tv-Popeditor-icon-line-height);
font-size: var(--tv-Popeditor-icon-font-size);
fill: var(--tv-Popeditor-icon-color);
cursor: pointer;

&:hover {
fill: var(--ti-popeditor-icon-color-hover);
fill: var(--tv-Popeditor-icon-color-hover);
}
}
}
Expand All @@ -122,21 +121,21 @@
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: var(--ti-popeditor-search-item-margin-bottom);
margin-bottom: 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

Consider using a variable for margin-bottom

Using margin-bottom: 24px; directly may limit flexibility. A variable would allow for easier theme adjustments.


.@{popeditor-prefix-cls}__search-label {
text-align: var(--ti-popeditor-search-item-text-align);
text-align: left;
padding-right: 8px;
font-size: var(--ti-common-font-size-base);
width: var(--ti-popeditor-search-item-width);
width: var(--tv-Popeditor-search-item-width);
}

&:nth-child(2n + 1) {
padding-right: var(--ti-popeditor-search-item-padding-right);
padding-right: 16px;
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 a variable for padding-right

Hardcoding padding-right: 16px; may reduce adaptability. A variable would enhance theme flexibility.

}

&:nth-child(2n) {
padding-left: var(--ti-popeditor-search-item-padding-left);
padding-left: 16px;
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 a variable for padding-left

Using a variable instead of padding-left: 16px; can improve maintainability and theming capabilities.

}
}

Expand All @@ -147,9 +146,8 @@

.@{popeditor-prefix-cls}__search-footer {
width: 100%;
text-align: var(--ti-popeditor-search-footer-text-align);
margin: var(--ti-popeditor-search-footer-margin-top) var(--ti-popeditor-search-footer-margin-horizontal)
var(--ti-popeditor-search-footer-margin-bottom);
text-align: right;
margin: 0 auto 24px;
Comment on lines +149 to +150
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 for text-align and margin

Replacing text-align: right; and margin: 0 auto 24px; with theme variables can enhance consistency.

}
}

Expand All @@ -160,13 +158,11 @@
align-items: flex-start;

&__left {
padding: var(--ti-popeditor-tabs-body-left-padding-top) var(--ti-popeditor-tabs-body-left-padding-right)
var(--ti-popeditor-tabs-body-left-padding-bottom) var(--ti-popeditor-tabs-body-left-padding-left);
padding: 0 16px 0 0;
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 a variable for padding in &__left

Using padding: 0 16px 0 0; directly may limit theming flexibility. A variable could improve maintainability.

}

&__right {
padding: var(--ti-popeditor-tabs-body-right-padding-top) var(--ti-popeditor-tabs-body-right-padding-right)
var(--ti-popeditor-tabs-body-right-padding-bottom) var(--ti-popeditor-tabs-body-right-padding-left);
padding: 0 0 0 16px;
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 a variable for padding in &__right

Hardcoding padding: 0 0 0 16px; reduces adaptability. Using a variable enhances theming options.

}

&__left,
Expand All @@ -183,45 +179,43 @@
.@{popeditor-prefix-cls}__tabs-head {
white-space: nowrap;
margin: 0;
padding: 0 var(--ti-popeditor-tabs-header-padding-horizontal);
padding: 0;
overflow: hidden;
height: var(--ti-popeditor-tabs-li-height);
height: var(--tv-Popeditor-tabs-li-height);
width: 100%;
position: relative;

ul {
height: var(--ti-popeditor-tabs-li-height);
border-bottom: 1px solid var(--ti-popeditor-border-color);
height: var(--tv-Popeditor-tabs-li-height);
border-bottom: 1px solid transparent;
box-sizing: border-box;

li {
float: left;
margin-right: -1px;
cursor: pointer;
padding: var(--ti-popeditor-tabs-li-padding-vertical) var(--ti-popeditor-tabs-li-padding-horizontal);
color: var(--ti-popeditor-tabs-text-color);
padding: 0 32px 0 0;
color: var(--tv-Popeditor-tabs-text-color);
min-width: 90px;
height: var(--ti-popeditor-tabs-li-height);
line-height: var(--ti-popeditor-tabs-li-line-height);
font-size: var(--ti-popeditor-tabs-font-size);
margin-right: var(--ti-popeditor-tabs-li-margin-right);
height: var(--tv-Popeditor-tabs-li-height);
Comment on lines +197 to +200
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 for padding and min-width in tabs

Using variables instead of padding: 0 32px 0 0; and min-width: 90px; can enhance maintainability and theming flexibility.

line-height: var(--tv-Popeditor-tabs-li-line-height);
font-size: var(--tv-Popeditor-tabs-font-size);

&.@{popeditor-prefix-cls}__tabs-selected {
color: var(--ti-popeditor-tabs-selected-text-color);
border-bottom: 3px solid var(--ti-popeditor-tabs-selected-text-color);
font-weight: var(--ti-popeditor-tabs-selected-font-weight);
color: var(--tv-Popeditor-tabs-selected-text-color);
border-bottom: 3px solid var(--tv-Popeditor-tabs-selected-text-color);
font-weight: var(--tv-Popeditor-tabs-selected-font-weight);
}
}
}
}

.@{popeditor-prefix-cls}__tabs-body {
.tabs-body-item {
padding: var(--ti-popeditor-tabs-body-item-padding-top) var(--ti-popeditor-tabs-body-item-padding-horizontal)
var(--ti-popeditor-tabs-body-item-padding-bottom);
padding: 16px 0 0;
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 a variable for padding in tab body

Replacing padding: 16px 0 0; with a theme variable can improve maintainability.


.@{pager-prefix-cls} {
padding-top: var(--ti-popeditor-pager-padding-top);
padding-top: 12px;
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 a variable for padding-top in pager

Using padding-top: 12px; directly may reduce flexibility. A variable would allow for consistent theming.

padding-bottom: 0;
}
}
Expand All @@ -233,16 +227,17 @@
.@{popeditor-prefix-cls}__filter-input {
margin-bottom: 20px;

.tiny-input__inner {
padding-left: var(--ti-popeditor-tree-input-padding-left);
padding-right: var(--ti-popeditor-tree-input-padding-right);
.tiny-input__inner {
padding-left: 28px;
padding-right: 8px;
Comment on lines +230 to +232
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 for padding in .tiny-input__inner

Hardcoding padding-left: 28px; and padding-right: 8px; limits theming capabilities. Variables would enhance flexibility.

}

.tiny-input__prefix {
visibility: var(--ti-popeditor-tree-input-prefix-visibility);
visibility: visible;
}

.tiny-input__suffix {
visibility: var(--ti-popeditor-tree-input-sufffix-visibility);
visibility: hidden;
}
}

Expand All @@ -253,10 +248,10 @@
}

.@{popeditor-prefix-cls}__dialog-box {
.component-css-vars-popeditor();
.inject-Popeditor-vars();

.@{dialog-box-prefix-cls}__footer {
text-align: var(--ti-popeditor-footer-text-align);
padding-top: var(--ti-popeditor-footer-padding-top);
text-align: right;
padding-top: 24px;
Comment on lines +254 to +255
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 a variable for padding-top in dialog footer

Using padding-top: 24px; directly may limit flexibility. A variable allows for better theme customization.

}
}
96 changes: 16 additions & 80 deletions packages/theme/src/popeditor/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,95 +10,31 @@
*
*/

.component-css-vars-popeditor() {
// 弹出框标题底部边框色和输入框边框色
--ti-popeditor-border-color: var(--ti-common-border-color-transparent-8, var(--ti-base-bg-color-transparent-8));
// 输入框左内边距
--ti-popeditor-input-padding-left: var(--ti-common-space-2x, 8px);
.inject-Popeditor-vars() {
// 输入框右侧默认图标色
--ti-popeditor-icon-color: var(--ti-common-color-icon-active, #191919);
--tv-Popeditor-icon-color: var(--tv-color-icon);
// 输入框右侧禁用图标色
--ti-popeditor-icon-color-disabled: var(--ti-common-color-placeholder, #808080);
--tv-Popeditor-icon-color-disabled: var(--tv-color-icon-disabled);
// 输入框右侧默认图标悬浮色
--ti-popeditor-icon-color-hover: var(--ti-common-color-primary-hover, #595959);
--tv-Popeditor-icon-color-hover: var(--tv-color-icon-hover);
// 输入框右侧默认图标字号
--ti-popeditor-icon-font-size: var(--ti-common-font-size-1, 14px);
--tv-Popeditor-icon-font-size: var(--tv-font-size-md);
// 输入框右侧默认图标高度
--ti-popeditor-icon-height: var(--ti-common-size-height-normal, 32px);
--tv-Popeditor-icon-height: var(--tv-size-height-md);
// 输入框右侧默认图标行高
--ti-popeditor-icon-line-height: var(--ti-popeditor-icon-height);
--tv-Popeditor-icon-line-height: var(--tv-Popeditor-icon-height);
// 弹出框头部标题选中文本色和边框色
--ti-popeditor-tabs-selected-text-color: var(--ti-common-color-line-active, #191919);
--tv-Popeditor-tabs-selected-text-color: var(--tv-color-text);
// 弹出框头部标题高度
--ti-popeditor-tabs-li-height: calc(var(--ti-common-size-8x, 32px) + 2px);
// 出框头部标题行高
--ti-popeditor-tabs-li-line-height: var(--ti-common-line-height-2, 24px);
--tv-Popeditor-tabs-li-height: 34px;
// 弹出框头部标题行高
--tv-Popeditor-tabs-li-line-height: var(--tv-line-height-number);
// 出框头部标题字体大小
--ti-popeditor-tabs-font-size: var(--ti-common-font-size-2, 16px);
--tv-Popeditor-tabs-font-size: var(--tv-font-size-lg);
// 弹出框头部标题选中文本字重
--ti-popeditor-tabs-selected-font-weight: var(--ti-common-font-weight-bold, 600);
// 弹出框查询条件item底部外边距
--ti-popeditor-search-item-margin-bottom: var(--ti-common-space-6x, 24px);
// 弹出框查询条件页脚顶部外边距
--ti-popeditor-search-footer-margin-top: var(--ti-common-space-0, 0px);
// 弹出框查询条件页脚底部外边距
--ti-popeditor-search-footer-margin-bottom: var(--ti-common-space-6x, 24px);
// 弹出框查询条件页脚水平外边距
--ti-popeditor-search-footer-margin-horizontal: auto;
// 弹出编辑头部标签页文本色(hide)
--ti-popeditor-tabs-text-color: var(--ti-common-color-info-normal, #191919);
// 弹出表格头部标签页item垂直内边距
--ti-popeditor-tabs-li-padding-vertical: var(--ti-common-space-0, 0px);
// 弹出表格头部标签页item水平内边距
--ti-popeditor-tabs-li-padding-horizontal: var(--ti-common-space-0, 0px);
// 弹出表格头部标签页item右侧外边距
--ti-popeditor-tabs-li-margin-right: var(--ti-common-space-8x, 32px);
// 弹出表格(左侧）标签页内容区顶部内边距
--ti-popeditor-tabs-body-left-padding-top: var(--ti-common-space-0, 0px);
// 弹出表格(左侧）标签页内容区右侧内边距
--ti-popeditor-tabs-body-left-padding-right: var(--ti-common-space-4x, 16px);
// 弹出表格(左侧）标签页内容区底部内边距
--ti-popeditor-tabs-body-left-padding-bottom: var(--ti-common-space-0, 0px);
// 弹出表格(左侧）标签页内容区左侧内边距
--ti-popeditor-tabs-body-left-padding-left: var(--ti-common-space-0, 0px);
// 弹出表格(右侧）标签页内容区顶部内边距
--ti-popeditor-tabs-body-right-padding-top: var(--ti-common-space-0, 0px);
// 弹出表格(右侧）标签页内容区右侧内边距
--ti-popeditor-tabs-body-right-padding-right: var(--ti-common-space-0, 0px);
// 弹出表格(右侧）标签页内容区底部内边距
--ti-popeditor-tabs-body-right-padding-bottom: var(--ti-common-space-0, 0px);
// 弹出表格(右侧）标签页内容区左侧内边距
--ti-popeditor-tabs-body-right-padding-left: var(--ti-common-space-4x, 16px);
// 弹出表格内容顶部内边距
--ti-popeditor-tabs-body-item-padding-top: var(--ti-common-space-4x, 16px);
// 弹出表格内容水平内边距
--ti-popeditor-tabs-body-item-padding-horizontal: var(--ti-common-space-0, 0px);
// 弹出表格内容底部内边距
--ti-popeditor-tabs-body-item-padding-bottom: var(--ti-common-space-0, 0px);
// 弹出表格标签页水平方向内边距
--ti-popeditor-tabs-header-padding-horizontal: var(--ti-common-space-0, 0px);
// 弹出表格分页顶部内边距
--ti-popeditor-pager-padding-top: var(--ti-common-space-3x, 12px);
// 弹框底部对齐方式
--ti-popeditor-footer-text-align: right;
// 弹框底部顶部内边距
--ti-popeditor-footer-padding-top: var(--ti-common-space-6x, 24px);
--tv-Popeditor-tabs-selected-font-weight: var(--tv-font-weight-bold);
// 弹出编辑头部标签页文本色
--tv-Popeditor-tabs-text-color: var(--tv-color-text);
// 弹出表格搜索项左侧标签文本默认宽度
--ti-popeditor-search-item-width: 80px;
// 弹出表格搜索项左侧标签文本对齐方式
--ti-popeditor-search-item-text-align: left;
// 弹出表格搜索项左侧标签文本右侧内边距
--ti-popeditor-search-item-padding-right: var(--ti-common-space-4x, 16px);
// 弹出表格搜索项左侧标签文本左侧内边距
--ti-popeditor-search-item-padding-left: var(--ti-common-space-4x, 16px);
// 弹出表格搜索底部按钮对齐方式
--ti-popeditor-search-footer-text-align: right;
// 弹出树搜索框左侧内边距
--ti-popeditor-tree-input-padding-left: calc(var(--ti-common-space-8x, 32px) - 4px);
// 弹出树搜索框右侧内边距
--ti-popeditor-tree-input-padding-right: var(--ti-common-space-2x, 8px);
// 弹出树搜索框是否显示前置图标
--ti-popeditor-tree-input-prefix-visibility: visible;
// 弹出树搜索框是否显示后置图标
--ti-popeditor-tree-input-sufffix-visibility: hidden;
--tv-Popeditor-search-item-width: 80px;
}
Loading