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): [toggle-menu] refactor toggle-menu theme vars #2248

Merged
merged 4 commits into from
Oct 15, 2024
Merged

refactor(theme): [toggle-menu] refactor toggle-menu theme vars #2248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d808ed9
refactor(theme): [toggle-menu] refactor toggle-menu theme vars
zzcr Oct 12, 2024
786fe84
Merge branch 'dev' into refactor-toggle-menu-theme-vars-1012
zzcr Oct 15, 2024
cf5bf44
Merge branch 'dev' of github.com:opentiny/tiny-vue into refactor-togg…
zzcr Oct 15, 2024
a6e90ff
fix: fix e2e test error
zzcr Oct 15, 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/toggle-menu/automatic-filtering.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ test('自动过滤', async ({ page }) => {
await page.goto('toggle-menu#automatic-filtering')
await page.getByRole('textbox', { name: '请输入过滤值' }).click()
await page.getByRole('textbox', { name: '请输入过滤值' }).fill('组件')
await expect(page.getByRole('treeitem', { name: '引入组件' })).not.toBeVisible()
await page.locator('.tiny-toggle-menu__filter-search > .tiny-svg').click()
await page.getByRole('treeitem', { name: '引入组件' }).locator('div').nth(3).click()
await expect(page.locator('.tiny-tree-node__content').first()).toContainText('组件')
await expect(page.getByRole('treeitem', { name: '引入组件' })).toBeVisible()
})
3 changes: 1 addition & 2 deletions examples/sites/demos/pc/app/toggle-menu/drag-events.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ test('拖拽事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('toggle-menu#drag-events')
await page.getByRole('treeitem', { name: '开发指南' }).getByRole('img').click()
await page.getByRole('treeitem', { name: '引入组件' }).locator('div').nth(3).click()
const dragNode = page.getByRole('treeitem', { name: '引入组件' }).locator('div').nth(3).boundingBox()
const dragNode = page.getByRole('treeitem', { name: '引入组件' }).boundingBox()
// 开始拖拽
const { x, y } = await dragNode
await page.mouse.move(x, y)
Expand Down
17 changes: 4 additions & 13 deletions examples/sites/demos/pc/app/toggle-menu/draggable.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,9 @@ import { test, expect } from '@playwright/test'
test('拖拽节点', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('toggle-menu#draggable')
const dragNode = await page
.locator('div')
.filter({ hasText: /^其他组件$/ })
.nth(3)
.boundingBox()
const dragToNode = await await page
.locator('div')
.filter({ hasText: /^表单组件$/ })
.nth(3)
.boundingBox()
const demo = page.locator('#draggable')
const dragNode = await demo.getByRole('treeitem', { name: '其他组件', exact: true }).boundingBox()
const dragToNode = await demo.getByRole('treeitem', { name: '表单组件', exact: true }).boundingBox()
// 开始拖拽
const { x, y } = await dragNode
const { x: dragToNodeX, y: dragToNodeY } = await dragToNode
Expand All @@ -21,7 +14,5 @@ test('拖拽节点', async ({ page }) => {
await page.mouse.down()
await page.mouse.move(dragToNodeX, dragToNodeY)
await page.mouse.up()
await expect(page.getByRole('treeitem', { name: '其他组件', exact: true }).locator('div').nth(3)).toContainText(
/^其他组件$/
)
await expect(page.getByRole('treeitem', { name: '其他组件', exact: true })).toContainText(/^其他组件$/)
})
44 changes: 22 additions & 22 deletions packages/theme/src/toggle-menu/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
@svg-prefix-cls: ~'@{css-prefix}svg';

.@{toggle-menu-prefix-cls} {
.component-css-vars-toggle-menu();
.inject-ToggleMenu-vars();

width: var(--ti-toggle-menu-width);
width: var(--tv-ToggleMenu-width);
position: relative;

& &__body {
Expand All @@ -38,8 +38,8 @@
}

& &__name {
color: var(--ti-toggle-menu-name-text-color);
font-size: var(--ti-toggle-menu-font-size);
color: var(--tv-ToggleMenu-name-text-color);
font-size: var(--tv-ToggleMenu-font-size);
}

& &__tree {
Expand All @@ -53,18 +53,18 @@
}

& &__filter-search {
width: var(--ti-toggle-menu-filter-search-size);
height: var(--ti-toggle-menu-filter-search-size);
line-height: var(--ti-toggle-menu-filter-search-size);
width: var(--tv-ToggleMenu-filter-search-size);
height: var(--tv-ToggleMenu-filter-search-size);
line-height: var(--tv-ToggleMenu-filter-search-size);
display: block;
text-align: center;
position: absolute;
right: 0;
top: 0;

.@{svg-prefix-cls} {
fill: var(--ti-toggle-menu-filter-search-icon-color);
font-size: var(--ti-toggle-menu-filter-search-font-size);
fill: var(--tv-ToggleMenu-filter-search-icon-color);
font-size: var(--tv-ToggleMenu-filter-search-svg-size);
}
}

Expand All @@ -74,18 +74,18 @@
left: calc(100% - 14px);
z-index: 2;
width: 14px;
height: var(--ti-toggle-menu-filter-search-size);
line-height: var(--ti-toggle-menu-filter-search-size);
background: var(--ti-toggle-menu-toggle-bg-color);
height: var(--tv-ToggleMenu-filter-search-size);
line-height: var(--tv-ToggleMenu-filter-search-size);
background: var(--tv-ToggleMenu-toggle-bg-color);
cursor: pointer;
transition: 0.2s linear;

.@{svg-prefix-cls} {
fill: var(--ti-toggle-menu-toggle-icon-color);
fill: var(--tv-ToggleMenu-toggle-icon-color);
}

&:hover .@{svg-prefix-cls} {
fill: var(--ti-toggle-menu-toggle-icon-color-hover);
fill: var(--tv-ToggleMenu-toggle-icon-color-hover);
}
}

Expand All @@ -106,7 +106,7 @@
background: none;

.@{svg-prefix-cls} {
fill: var(--ti-toggle-menu-toggle-icon-color-hover);
fill: var(--tv-ToggleMenu-toggle-icon-color-hover);
}
}
}
Expand All @@ -123,7 +123,7 @@
.@{tree-prefix-cls} {
.is-current:not(.show-checkbox) {
> .@{tree-node-prefix-cls}__content > .@{tree-node-prefix-cls}__content-left {
font-weight: var(--ti-toggle-menu-toggle-font-weight);
font-weight: var(--tv-ToggleMenu-toggle-font-weight);
}
}

Expand All @@ -134,8 +134,8 @@
:not(.show-checkbox) > .@{tree-node-prefix-cls}__content .@{tree-node-prefix-cls}__label,
.@{tree-node-prefix-cls}__content-right {
&:hover {
background-color: var(--ti-toggle-menu-toggle-bg-hover-color);
font-weight: var(--ti-toggle-menu-toggle-font-weight);
background-color: var(--tv-ToggleMenu-toggle-bg-hover-color);
font-weight: var(--tv-ToggleMenu-toggle-font-weight);
}
}

Expand Down Expand Up @@ -176,7 +176,7 @@
}

.@{input-prefix-cls}__inner {
font-size: var(--ti-toggle-menu-font-size);
font-size: var(--tv-ToggleMenu-font-size);
padding-right: 30px;
border-radius: 0;
border-top: 0;
Expand All @@ -185,9 +185,9 @@
}

.@{tree-node-prefix-cls}__content {
height: var(--ti-toggle-menu-tree-node-height);
line-height: var(--ti-toggle-menu-tree-node-height);
font-size: var(--ti-toggle-menu-font-size);
height: var(--tv-ToggleMenu-tree-node-height);
line-height: var(--tv-ToggleMenu-tree-node-height);
font-size: var(--tv-ToggleMenu-font-size);
padding-left: 0;
margin-left: 0;
}
Expand Down
26 changes: 13 additions & 13 deletions packages/theme/src/toggle-menu/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,29 @@
*
*/

.component-css-vars-toggle-menu() {
.inject-ToggleMenu-vars() {
// 收缩菜单宽度
--ti-toggle-menu-width: var(--ti-common-size-50x, 200px);
--tv-ToggleMenu-width: 200px;
// 收缩菜单字号
--ti-toggle-menu-font-size: var(--ti-common-font-size-1, 14px);
--tv-ToggleMenu-font-size: var(--tv-font-size-md);
// 收缩菜单列表文本色
--ti-toggle-menu-name-text-color: var(--ti-common-color-text-primary, #191919);
--tv-ToggleMenu-name-text-color: var(--tv-color-text);
// 收缩菜单列表项高度
--ti-toggle-menu-tree-node-height: var(--ti-common-size-8x, 32px);
--tv-ToggleMenu-tree-node-height: 32px;
// 收缩菜单收缩搜索高度
--ti-toggle-menu-filter-search-size: var(--ti-common-size-7x, 28px);
--tv-ToggleMenu-filter-search-size: 28px;
// 收缩菜单输入框搜索图标尺寸
--ti-toggle-menu-filter-search-font-size: var(--ti-common-font-size-2, 16px);
--tv-ToggleMenu-filter-search-svg-size: var(--tv-icon-size);
// 收缩菜单搜索图标色
--ti-toggle-menu-filter-search-icon-color: var(--ti-base-color-brand-6, #191919);
--tv-ToggleMenu-filter-search-icon-color: var(--tv-color-icon);
// 收缩菜单收缩图标色
--ti-toggle-menu-toggle-icon-color: var(--ti-base-color-brand-6, #191919);
--tv-ToggleMenu-toggle-icon-color: var(--tv-color-icon);
// 收缩菜单收缩图标悬浮色
--ti-toggle-menu-toggle-icon-color-hover: var(--ti-common-color-primary-hover, #595959);
--tv-ToggleMenu-toggle-icon-color-hover: var(--tv-color-icon-hover);
// 收缩菜单收缩按钮背景色
--ti-toggle-menu-toggle-bg-color: var(--ti-common-color-border, #999999);
--tv-ToggleMenu-toggle-bg-color: var(--tv-color-bg-gray-2);
// 收缩菜单选中字重色
--ti-toggle-menu-toggle-font-weight: var(--ti-common-font-weight-6, 600);
--tv-ToggleMenu-toggle-font-weight: var(--tv-font-weight-bold);
// 收缩菜单收缩标签悬浮背景色
--ti-toggle-menu-toggle-bg-hover-color: var(--ti-common-color-hover-background, #f5f5f5);
--tv-ToggleMenu-toggle-bg-hover-color: var(--tv-color-bg-hover);
}
Loading