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

fix(theme):　[tree,tooltip,transfer, cascader] update unsolved smb components #2124

Merged
merged 9 commits into from
Sep 14, 2024
Merged

fix(theme):　[tree,tooltip,transfer, cascader] update unsolved smb components #2124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
730fb26
fix(theme): remove after's class
shenjunjian Sep 12, 2024
6b75d63
fix(tooltip): refactor tooltip's arrow style by rotate a div
shenjunjian Sep 12, 2024
b298a59
fix(theme): update cascader style
shenjunjian Sep 13, 2024
aef9051
Merge branch 'dev' of github.com:opentiny/tiny-vue into dev-unsolved-smb
shenjunjian Sep 13, 2024
00e5cbb
Merge branch 'dev' of github.com:opentiny/tiny-vue into dev-unsolved-smb
shenjunjian Sep 13, 2024
1d2ada9
Merge branch 'dev' of github.com:opentiny/tiny-vue into dev-unsolved-smb
shenjunjian Sep 13, 2024
6f5f9e9
fix(theme): update tooltip/transfer style
shenjunjian Sep 13, 2024
cb3c0b4
fix(theme): update unresolved smb style
shenjunjian Sep 13, 2024
9ad105e
fix(tree): fix e2e error
shenjunjian Sep 14, 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
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/tree/icons-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ import { Tree as TinyTree } from '@opentiny/vue'
import { iconPutAway, iconExpand, iconRightO, iconEditorTable, iconFile } from '@opentiny/vue-icon'

const icon = iconRightO()
const shrinkIcon = iconPutAway()
const expandIcon = iconExpand()
const shrinkIcon = iconExpand()
const expandIcon = iconPutAway()
const tinyIconEditorTable = iconEditorTable()
const tinyIconFile = iconFile()

Expand Down
10 changes: 3 additions & 7 deletions examples/sites/demos/pc/app/tree/icons.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,13 @@ test('测试自定义图标', async ({ page }) => {
const tree2 = preview.locator('.tiny-tree').nth(1)

const icon1 = tree1.locator('svg path').nth(0)
const icon2 = tree2.locator('svg path').nth(0)
const icon2 = tree2.locator('svg').nth(0)

// 测试tree1
await expect(tree1.getByText('数据 2')).toHaveCount(1)
await expect(icon1).toHaveAttribute('d', 'm6 2 13 10L6 22V2zm2 4v12l8-6.1L8 6z')
await expect(icon2).toHaveClass(/tiny-tree-node__expand-icon/)

// 测试tree2
await expect(tree2.getByText('数据 2')).toHaveCount(1)
await expect(icon2).toHaveAttribute(
'd',
'M13 11h4c.6 0 1 .4 1 1s-.4 1-1 1h-4v4c0 .6-.4 1-1 1s-1-.4-1-1v-4H7c-.6 0-1-.4-1-1s.4-1 1-1h4V7c0-.6.4-1 1-1s1 .4 1 1v4zM3 1h18c.9 0 2 1.1 2 2v18c0 .9-1 2-2 2H3c-.9 0-2-1.1-2-2V3c0-.9 1.1-2 2-2zm0 2v18h18V3H3z'
)
await expect(icon2).toHaveCSS('fill', 'rgb(255, 0, 0)')
await expect(icon2).toHaveClass(/tiny-tree-node__expand-icon/)
})
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/tree/icons.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ export default {
data() {
return {
icon: iconRightO(),
shrinkIcon: iconPutAway(),
expandIcon: iconExpand(),
shrinkIcon: iconExpand(),
expandIcon: iconPutAway(),
tinyIconEditorTable: iconEditorTable(),
tinyIconFile: iconFile(),
data: [
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/tree/props.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@ test('测试自定义映射列', async ({ page }) => {
await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)

// 测试disabled
await expect(tree.getByText('数据 2-2')).toHaveCSS('color', 'rgb(173, 176, 184)')
await expect(tree.getByText('数据 2-2')).toHaveCSS('color', 'rgb(194, 194, 194)')
})
6 changes: 1 addition & 5 deletions packages/theme/src/cascader-menu/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,9 @@
// 下拉菜单为空时的文本色
--ti-cascader-menu-empty-text-color: var(--ti-common-color-text-weaken, #8a8e99);
// 下拉菜单列表垂直方向的内边距
--ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0, 0px);
--ti-cascader-menu-list-padding-vertical: var(--ti-common-space-2x);
// 下拉菜单列表水平方向的内边距
--ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px);
// 下拉菜单列表垂直方向的外边距
--ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0, 0px);
// 下拉菜单列表水平方向的外边距
--ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px);
// 下拉菜单的宽度
--ti-cascader-menu-width: 159px;
}
2 changes: 1 addition & 1 deletion packages/theme/src/cascader/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
margin-bottom: var(--ti-cascader-dropdown-margin-bottom);
font-size: var(--ti-cascader-font-size);
background: var(--ti-cascader-dropdown-bg-color);
border: 1px solid #e4e7ed;
border: none;
border-radius: var(--ti-cascader-border-radius);
box-shadow: var(--ti-cascader-dropdown-box-shadow);
&.is-auto-size {
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/cascader/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
// 搜索框的占位符的文本色（没有生效）
--ti-cascader-search-input-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8);
// 下拉框的阴影
--ti-cascader-dropdown-box-shadow: var(--ti-common-box-shadow);
--ti-cascader-dropdown-box-shadow: var(--ti-common-shadow-3-left);
// 多选模式输入框宽度
--ti-cascader-width: '100%';
// 下拉框的左侧外边距
Expand Down
70 changes: 2 additions & 68 deletions packages/theme/src/mixins/tooltip.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,73 +14,7 @@
background: @bgcolor;
color: @color;

&[x-placement^='top'] .popper__arrow {
border-top-color: @border-color;

&::after {
border-top-color: @border-color;
}
}

&[x-placement^='bottom'] .popper__arrow {
border-bottom-color: @border-color;

&::after {
border-bottom-color: @border-color;
}
}

&[x-placement^='left'] .popper__arrow {
border-left-color: @border-color;

&::after {
border-left-color: @border-color;
}
}

&[x-placement^='right'] .popper__arrow {
border-right-color: @border-color;

&::after {
border-right-color: @border-color;
}
}
}

.tooltip-light (@color, @bgcolor, @border-color) {
background: @bgcolor;
color: @color;
border: 1px solid @border-color;

&[x-placement^='top'] .popper__arrow {
border-top-color: @border-color;

&::after {
border-top-color: @bgcolor;
}
}

&[x-placement^='bottom'] .popper__arrow {
border-bottom-color: @border-color;

&::after {
border-bottom-color: @bgcolor;
}
}

&[x-placement^='left'] .popper__arrow {
border-left-color: @border-color;

&::after {
border-left-color: @bgcolor;
}
}

&[x-placement^='right'] .popper__arrow {
border-right-color: @border-color;

&::after {
border-right-color: @bgcolor;
}
& .popper__arrow {
background-color: @bgcolor;
}
}
72 changes: 12 additions & 60 deletions packages/theme/src/tooltip/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,94 +43,46 @@
word-wrap: break-word;
box-shadow: var(--ti-tooltip-box-shadow);

.popper__arrow,
.popper__arrow::after {
.popper__arrow {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
/* 控制箭头尺寸
6px: var(--ti-tooltip-popper-border-width);
-6px: var(--ti-tooltip-popper-neg-border-width);
*/
.popper__arrow {
border-width: var(--ti-tooltip-popper-border-width);
}

.popper__arrow::after {
content: ' ';
border-width: var(--ti-tooltip-popper-border-width);
// 原来是用border来模拟三角形的，现在是通过div模拟，所以将border-width赋值给div的width.
width: var(--ti-tooltip-popper-border-width);
height: var(--ti-tooltip-popper-border-height);
background-color: var(--ti-tooltip-popper-border-color);
transform: rotateZ(45deg);
border-radius: 2px;
}

&[x-placement^='top'] {
margin-bottom: 12px;

.popper__arrow {
bottom: var(--ti-tooltip-popper-neg-border-width);
border-top-color: var(--ti-tooltip-popper-border-color);
border-bottom-width: 0;

&::after {
bottom: 1px;
margin-left: var(--ti-tooltip-popper-neg-border-width);
border-top-color: var(--ti-tooltip-popper-border-color);
border-bottom-width: 0;
}
bottom: -7px;
}
}

&[x-placement^='bottom'] {
margin-top: 12px;

.popper__arrow {
top: var(--ti-tooltip-popper-neg-border-width);
border-top-width: 0;
border-bottom-color: var(--ti-tooltip-popper-border-color);

&::after {
top: 1px;
margin-left: var(--ti-tooltip-popper-neg-border-width);
border-top-width: 0;
border-bottom-color: var(--ti-tooltip-popper-border-color);
}
top: -7px;
}
}

&[x-placement^='right'] {
margin-left: 12px;

.popper__arrow {
left: var(--ti-tooltip-popper-neg-border-width);
border-right-color: var(--ti-tooltip-popper-border-color);
border-left-width: 0;

&::after {
bottom: var(--ti-tooltip-popper-neg-border-width);
left: 1px;
border-right-color: var(--ti-tooltip-popper-border-color);
border-left-width: 0;
}
left: -3px;
}
}

&[x-placement^='left'] {
margin-right: 12px;

.popper__arrow {
right: var(--ti-tooltip-popper-neg-border-width);
border-right-width: 0;
border-left-color: var(--ti-tooltip-popper-border-color);

&::after {
right: 1px;
bottom: var(--ti-tooltip-popper-neg-border-width);
margin-left: var(--ti-tooltip-popper-neg-border-width);
border-right-width: 0;
border-left-color: var(--ti-tooltip-popper-border-color);
}
right: -3px;
}
}
&.is-normal {
Expand Down Expand Up @@ -184,7 +136,7 @@
}

&.is-light {
.tooltip-light(
.tooltip-type(
var(--ti-tooltip-popper-light-text-color),
var(--ti-tooltip-popper-light-bg-color),
var(--ti-tooltip-popper-light-border-color)
Expand Down
21 changes: 12 additions & 9 deletions packages/theme/src/tooltip/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,14 @@
*/

.component-css-vars-tooltip() {
// 弹框箭头的尺寸,(hide)
--ti-tooltip-popper-border-width: 8px;
// 弹框箭头的负尺寸,用于偏移(hide)
--ti-tooltip-popper-neg-border-width: calc(var(--ti-tooltip-popper-border-width) * -1);
// 弹框箭头的宽度,(hide)
--ti-tooltip-popper-border-width: 12px;
// 弹框箭头的高度,(hide)
--ti-tooltip-popper-border-height: 20px;
// 弹框箭头的圆角(hide)
--ti-tooltip-popper-border-radius: 2px;
// 弹框三角默认边框色
--ti-tooltip-popper-border-color: #191919;
// 弹框字体行高(hide)
--ti-tooltip-popper-font-line-height: var(--ti-common-line-height-number);
// 弹框字体(hide)
Expand All @@ -32,8 +36,7 @@
--ti-tooltip-popper-border-radius: 8px;
// 悬浮弹出框字号
--ti-tooltip-popper-font-size: var(--ti-common-font-size-base, 12px);
// 弹框三角默认边框色
--ti-tooltip-popper-border-color: #191919;

// 正常背景色 (hide)
--ti-tooltip-popper-normal-bg-color: var(--ti-common-color-bg-dark-deep, #464c59);
// 文字提示正常文本色(hide)
Expand All @@ -42,11 +45,11 @@
--ti-tooltip-popper-normal-border-color: var(--ti-common-color-bg-dark-deep, #464c59);

// info类型弹框背景色
--ti-tooltip-popper-info-bg-color: #1476FF;
--ti-tooltip-popper-info-bg-color: #1476ff;
// info类型弹框文本色
--ti-tooltip-popper-info-text-color: var(--ti-common-color-light, #fff);
// info类型弹框三角边框色
--ti-tooltip-popper-info-border-color: #1476FF;
--ti-tooltip-popper-info-border-color: #1476ff;

// error类型弹框背景色
--ti-tooltip-popper-error-bg-color: var(--ti-common-color-danger-normal, #c7000b);
Expand Down Expand Up @@ -82,7 +85,7 @@
--ti-tooltip-popper-light-border-color: #fff;

// 弹框阴影
--ti-tooltip-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.08);
--ti-tooltip-box-shadow: 0px 5px 9px 0px rgba(51, 56, 84, 0.25);
// 弹框垂直内边距
--ti-tooltip-padding-vertical: 12px;
// 弹框水平内边距
Expand Down
10 changes: 10 additions & 0 deletions packages/theme/src/transfer/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,16 @@
display: inline-block;
box-sizing: border-box;
border-radius: var(--ti-transfer-panel-filter-border-radius);
border-bottom-color: #f0f0f0 !important;
padding-left: 24px;
padding-right: 0;
}
.@{input-prefix-cls}__prefix {
left: 0;
}

.@{input-prefix-cls}__suffix {
right: 4px;
}
}

Expand Down
6 changes: 3 additions & 3 deletions packages/theme/src/transfer/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
// 面板头部背景色
--ti-transfer-header-bg-color: #fff;
// 面板头部边框色
--ti-transfer-header-border-color: rgba(0,0,0,0.08);
--ti-transfer-header-border-color: rgba(0, 0, 0, 0.08);
// 面板头部文本色
--ti-transfer-header-text-color: var(--ti-common-color-info-normal, #252b3a);
// 面板头部span文本色
Expand Down Expand Up @@ -162,9 +162,9 @@
// 面板多选框左侧内边距
--ti-transfer-panel-item-checkbox-padding-left: calc(var(--ti-common-space-5x, 20px) + 2px);
// 面板搜索框左侧内边距
--ti-transfer-panel-filter-padding-left: var(--ti-common-space-2x, 8px);
--ti-transfer-panel-filter-padding-left: var(--ti-common-space-4x, 8px);
// 面板搜索框右侧内边距
--ti-transfer-panel-filter-padding-right: var(--ti-common-space-2x, 8px);
--ti-transfer-panel-filter-padding-right: var(--ti-common-space-4x, 8px);
// 面板搜索框顶部内边距
--ti-transfer-panel-filter-padding-top: var(--ti-common-space-2x, 8px);
// 面板搜索框底部内边距
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/tree/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
.@{tree-node-prefix-cls}.is-current:not(.show-checkbox) > .@{tree-node-prefix-cls}__content {
.@{tree-node-prefix-cls}__content-box,
.@{tree-node-prefix-cls}__content-right {
background-color: var(--ti-tree-node-content-current-bg-color);
background-color: var(--ti-tree-node-highlight-bg-color);
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/tree/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
// 节点左内边距
--ti-tree-node-padding-left: var(--ti-common-space-4x);
// 节点高亮背景色
--ti-tree-node-highlight-bg-color: var(--ti-common-color-light);
--ti-tree-node-highlight-bg-color: var(--ti-base-text-color-2);
// 节点内容高度
--ti-tree-node-content-height: var(--ti-common-space-8x);
// 节点内容边框弧度
Expand Down Expand Up @@ -103,7 +103,7 @@
// small尺寸节点高度
--ti-tree-small-node-content-height: calc(var(--ti-common-space-base, 4px) * 7);
// small尺寸节点高度
--ti-tree-small-node-font-size: var(--ti-common-line-height-base, 12px);
--ti-tree-small-node-font-size: 12px;

// 平铺模式节点高度
--ti-tree-plain-node-height: calc(var(--ti-common-space-base, 4px) * 7);
Expand Down
Loading
Loading