aring
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(theme): [theme] Standardize Style Files (#950)

This commit is contained in:
chenxi-20 2023-11-29 14:24:49 +08:00 committed by GitHub
parent 84704ea59b
commit 5d6c7a60ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 140 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/sites/demos/pc/app/color-picker/history.spec.ts
View File

@ -3,7 +3,7 @@ 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()
@ -11,10 +11,12 @@ test('测试历史记录', async ({ page }) => {
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()
@ -22,8 +24,10 @@ test('测试历史记录', async ({ page }) => {
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
examples/sites/demos/pc/app/color-picker/predefine.spec.ts
View File

@ -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
examples/sites/demos/pc/app/color-picker/size.spec.ts
View File

@ -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')
})

208
packages/theme/src/color-picker/index.less
View File

@ -1,130 +1,128 @@
@import '../custom.less';
@import './vars.less';
@colorPickerPrefix: ~'@{css-prefix}color-picker';
@color-picker-prefix-cls: ~'@{css-prefix}color-picker';
.@{colorPickerPrefix} {
.component-css-vars-colorpicker();
.@{color-picker-prefix-cls} {
.component-css-vars-color-picker();
&__trigger {
position: relative;
width: 32px;
height: 32px;
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;
}
.tiny-button-group {
flex: 0 0 auto;
}
}
&__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;
}
}
&__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;
}
}
}
&__alpha {
gap: 12px;
&__color-select {
width: 280px;
height: 180px;
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%;
.white {
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
&__thumb {
width: 4px;
height: 100%;
.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;
}
}
&__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;
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);

2
packages/theme/src/color-picker/vars.less
View File

@ -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);
// 按钮边框色

8
packages/theme/src/color-select-panel/index.less
View File

@ -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;
@ -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;

2
packages/vue/src/color-picker/__tests__/color-picker.spec.ts
View File

@ -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 () => {

2
packages/vue/src/color-picker/src/pc.vue
View File

@ -2,7 +2,7 @@
<div
:class="[
{
'tiny-color-picker__trigger': true
'tiny-color-picker': true
},
state.size ? 'tiny-color-picker--' + state.size : ''
]"

6
packages/vue/src/color-select-panel/src/components/alpha-select.vue
View File

@ -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

6
packages/vue/src/color-select-panel/src/components/hue-select.vue
View File

@ -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
@ -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>

4
packages/vue/src/color-select-panel/src/pc.vue
View File

@ -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">