Skip to content

fix(color-picker): [color-picker] Standardize Style Files #950

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

Merged
merged 1 commit into from
Nov 29, 2023
Merged

fix(color-picker): [color-picker] Standardize Style Files #950

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 9 additions & 5 deletions examples/sites/demos/pc/app/color-picker/history.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,31 @@ import { test, expect } from '@playwright/test'
test('测试历史记录', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('color-picker#history')
await page.locator('.tiny-color-picker__trigger').click()
await page.locator('.tiny-color-picker').click()
await page.waitForSelector('.tiny-collapse-item__arrow')
const arrow = page.locator('.tiny-collapse-item__arrow')
await arrow.click()
await expect(page.locator('.tiny-color-select-panel__history')).toHaveCount(1)
await page.locator('.mr20.fw-bold').click()
//用户行为更改历史记录测试
await page.getByRole('button', { name: 'Append history color' }).click()
await page.locator('.tiny-color-picker__trigger').click()
await page.locator('.tiny-color-picker').click()
await page.waitForSelector('.tiny-collapse-item__arrow')
await page.locator('.tiny-collapse-item__arrow').click()
await expect(page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(2)')).toBeVisible()
await expect(
page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(2)')
).toBeVisible()
//点击色块中心，并点击选择，历史记录增加1的测试
const black = page.locator('.black')
const center = await black.boundingBox()
const x = center?.x ?? 0 + (center?.width ?? 0) / 2
const y = center?.y ?? 0 + (center?.height ?? 0) / 2
await black.click(x, y)
await page.getByRole('button', { name: '选择' }).click()
await page.locator('.tiny-color-picker__trigger').click()
await page.locator('.tiny-color-picker').click()
await page.waitForSelector('.tiny-collapse-item__arrow')
await page.locator('.tiny-collapse-item__arrow').click()
await expect(page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(3)')).toBeVisible()
await expect(
page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(3)')
).toBeVisible()
})
14 changes: 9 additions & 5 deletions examples/sites/demos/pc/app/color-picker/predefine.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,20 @@ import { test, expect } from '@playwright/test'
test('测试预定义颜色', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('color-picker#predefine')
await page.locator('.tiny-color-picker__trigger').click()
await page.locator('.tiny-color-picker').click()
await page.waitForSelector('.tiny-collapse-item__arrow')
const arrow = page.locator('.tiny-collapse-item__arrow')
await arrow.click()
await expect(page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(8)')).toBeVisible()
await expect(
page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(8)')
).toBeVisible()
await page.locator('.mr20.fw-bold').click()
//用户行为预定义颜色测试
await page.getByRole('button', { name: 'Append predefine color' }).click()
await page.locator('.tiny-color-picker__trigger').click()
await page.locator('.tiny-color-picker').click()
await page.waitForSelector('.tiny-collapse-item__arrow')
await page.locator('.tiny-collapse-item__arrow').click()
await expect(page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(9)')).toBeVisible()
})
await expect(
page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(9)')
).toBeVisible()
})
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/color-picker/size.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
test('测试尺寸', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('color-picker#size')
await expect(page.locator('.tiny-color-picker__trigger.tiny-color-picker--large')).toHaveCSS('width', '64px')
await expect(page.locator('.tiny-color-picker__trigger.tiny-color-picker--medium')).toHaveCSS('width', '48px')
await expect(page.locator('.tiny-color-picker__trigger.tiny-color-picker--small')).toHaveCSS('width', '36px')
await expect(page.locator('.tiny-color-picker__trigger.tiny-color-picker--mini')).toHaveCSS('width', '24px')
await expect(page.locator('.tiny-color-picker.tiny-color-picker--large')).toHaveCSS('width', '64px')
await expect(page.locator('.tiny-color-picker.tiny-color-picker--medium')).toHaveCSS('width', '48px')
await expect(page.locator('.tiny-color-picker.tiny-color-picker--small')).toHaveCSS('width', '36px')
await expect(page.locator('.tiny-color-picker.tiny-color-picker--mini')).toHaveCSS('width', '24px')
})
194 changes: 96 additions & 98 deletions packages/theme/src/color-picker/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,130 +1,128 @@
@import '../custom.less';
@import './vars.less';

@colorPickerPrefix: ~'@{css-prefix}color-picker';

.@{colorPickerPrefix} {
.component-css-vars-colorpicker();

&__trigger {
position: relative;
width: 32px;
height: 32px;
@color-picker-prefix-cls: ~'@{css-prefix}color-picker';

.@{color-picker-prefix-cls} {
.component-css-vars-color-picker();

position: relative;
width: 32px;
height: 32px;
border-radius: var(--ti-color-picker-border-radius-sm);
border: var(--ti-color-picker-border-weight) solid var(--ti-color-picker-border-color);
box-sizing: content-box;
padding: var(--ti-color-picker-padding-vertical) var(--ti-color-picker-padding-horizontal);
cursor: pointer;
.component-css-vars-color-picker();

&__inner {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
border-radius: var(--ti-color-picker-border-radius-sm);
border: var(--ti-color-picker-border-weight) solid var(--ti-color-picker-border-color);
box-sizing: content-box;
padding: var(--ti-color-picker-padding-vertical) var(--ti-color-picker-padding-horizontal);
cursor: pointer;
.component-css-vars-colorpicker();
background: var(--ti-color-picker-bg-color);
}

.@{colorPickerPrefix}__inner {
&__wrapper {
display: flex;
flex-direction: column;
position: absolute;
max-width: 300px;
z-index: var(--ti-color-picker__select__wrapper-zindex);
margin-top: var(--ti-color-picker-spacing);
background: var(--ti-color-picker__wrapper-bg);
gap: var(--ti-color-picker-spacing);
padding: var(--ti-color-picker-spacing-2x);
box-shadow: var(--ti-color-picker-shadow);

&__tools {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
border-radius: var(--ti-color-picker-border-radius-sm);
background: var(--ti-color-picker-bg-color);

.tiny-input {
flex: 1 0 0;
}

.tiny-button-group {
flex: 0 0 auto;
}
}

.@{colorPickerPrefix}__wrapper {
&__inner {
display: flex;
flex-direction: column;
position: absolute;
max-width: 300px;
z-index: var(--ti-color-picker__select__wrapper-zindex);
margin-top: var(--ti-color-picker-spacing);
background: var(--ti-color-picker__wrapper-bg);
gap: var(--ti-color-picker-spacing);
padding: var(--ti-color-picker-spacing-2x);
box-shadow: var(--ti-color-picker-shadow);

&__tools {
display: flex;

.tiny-input {
flex: 1 0 0;
gap: 12px;
&__color-select {
width: 280px;
height: 180px;
position: relative;

.white {
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.tiny-button-group {
flex: 0 0 auto;
.black {
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
}

&__inner {
display: flex;
gap: 12px;
&__color-select {
width: 280px;
height: 180px;
position: relative;

.white {
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.black {
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.white,
.black {
position: absolute;
inset: 0;
}

.cursor {
position: absolute;
width: 12px;
height: 12px;
border-radius: 100%;
border: 1px solid white;
background: rgba(0, 0, 0, .15);
box-shadow: inset 0 0 1px 1px #0000004d, 0 0 1px 2px #0006;
}
.white,
.black {
position: absolute;
inset: 0;
}

&__hue-select {
position: relative;
width: 18px;
border-radius: var(--ti-color-picker-border-radius-xs);
background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);

div {
position: absolute;
top: 0;
width: 100%;
height: 4px;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
border-radius: 1px;
}
.cursor {
position: absolute;
width: 12px;
height: 12px;
border-radius: 100%;
border: 1px solid white;
background: rgba(0, 0, 0, .15);
box-shadow: inset 0 0 1px 1px #0000004d, 0 0 1px 2px #0006;
}
}

&__alpha {
&__hue-select {
position: relative;
width: 100%;
height: 20px;
width: 18px;
border-radius: var(--ti-color-picker-border-radius-xs);
margin-top: var(--ti-color-picker-spacing-2x);
&__slider {
width: 100%;
height: 100%;
}
background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);

&__thumb {
width: 4px;
height: 100%;
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
border-radius: 1px;
}
}
}

&__alpha {
position: relative;
width: 100%;
height: 20px;
border-radius: var(--ti-color-picker-border-radius-xs);
margin-top: var(--ti-color-picker-spacing-2x);
&__slider {
width: 100%;
height: 100%;
}

&__thumb {
width: 4px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
border-radius: 1px;
}
}
}
&--large {
width: var(--ti-color-picker-size-large-width);
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/color-picker/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.component-css-vars-colorpicker() {
.component-css-vars-color-picker() {
// 默认按钮背景色(hide)
--ti-color-picker-bg-color: var(--ti-common-color-transparent, transparent);
// 按钮边框色
Expand Down
8 changes: 4 additions & 4 deletions packages/theme/src/color-select-panel/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@import '../custom.less';
@import './vars.less';

@colorSelectPanelPrefix: ~'@{css-prefix}color-select-panel';
.@{colorSelectPanelPrefix}__wrapper {
@color-select-panel-prefix-cls: ~'@{css-prefix}color-select-panel';
.@{color-select-panel-prefix-cls} {
.component-css-vars-color-select-panel();
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -110,8 +110,8 @@
}
.tiny-collapse-item__content{
background: transparent;
.@{colorSelectPanelPrefix}__history,
.@{colorSelectPanelPrefix}__predefine{
.@{color-select-panel-prefix-cls}__history,
.@{color-select-panel-prefix-cls}__predefine{
display: flex;
flex-wrap: wrap;
height: auto;
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/src/color-picker/__tests__/color-picker.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ describe('PC Mode', () => {
modelValue: '#66ccff'
}
})
expect(wrapper.classes()).toContain('tiny-color-picker__trigger')
expect(wrapper.classes()).toContain('tiny-color-picker')
expect(wrapper.find('div .tiny-color-picker__inner').attributes().style).toContain('102, 204, 255')
})
test('dynmaic', async () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/src/color-picker/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div
:class="[
{
'tiny-color-picker__trigger': true
'tiny-color-picker': true
},
state.size ? 'tiny-color-picker--' + state.size : ''
]"
Expand Down
6 changes: 3 additions & 3 deletions packages/vue/src/color-select-panel/src/components/alpha-select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<div class="tiny-color-select-panel__wrapper__alpha" ref="alphaWrapper">
<div class="tiny-color-select-panel__alpha" ref="alphaWrapper">
<div
class="tiny-color-select-panel__wrapper__alpha__slider"
class="tiny-color-select-panel__alpha__slider"
:style="{
background: state.background
}"
ref="slider"
></div>
<div
class="tiny-color-select-panel__wrapper__alpha__thumb"
class="tiny-color-select-panel__alpha__thumb"
:style="{
top: 0,
left: 0
Expand Down
6 changes: 3 additions & 3 deletions packages/vue/src/color-select-panel/src/components/hue-select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="tiny-color-select-panel__wrapper__inner">
<div class="tiny-color-select-panel__inner">
<div
class="tiny-color-select-panel__wrapper__inner__color-select"
class="tiny-color-select-panel__inner__color-select"
ref="wrapper"
:style="{
background: state.background
Expand All @@ -11,7 +11,7 @@
<div class="black"></div>
<div class="cursor" ref="cursor"></div>
</div>
<div class="tiny-color-select-panel__wrapper__inner__hue-select" ref="bar">
<div class="tiny-color-select-panel__inner__hue-select" ref="bar">
<div ref="thumb"></div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/vue/src/color-select-panel/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<div class="tiny-color-select-panel__wrapper" @click.stop v-if="state.isShow" v-clickoutside="onCancel">
<div class="tiny-color-select-panel" @click.stop v-if="state.isShow" v-clickoutside="onCancel">
<hue-select :color="state.color" @hue-update="onHueUpdate" @sv-update="onSVUpdate" />
<alpha-select v-if="alpha" :color="state.color" @alpha-update="onAlphaUpdate" />
<div class="tiny-color-select-panel__wrapper__tools">
<div class="tiny-color-select-panel__tools">
<tiny-input v-model="state.res" />
<tiny-button-group>
<tiny-button type="text" @click="onCancel">
Expand Down