feat(theme):[carousel,transfer,divider]Add SMB theme and Style fixed (#1195)

* fix(theme)Add transfer's smb-theme

* fix(theme):[carousel,transfer]Add SMB theme

* fix:carousel smb theme

* fix:carousel smb theme

* fix:e2e test

* fix(theme): update divider smb theme

* fix: update theme
This commit is contained in:
James 2023-12-29 10:18:51 +08:00 committed by GitHub
parent 58a6ebbc49
commit 705d0ddcb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
43 changed files with 164 additions and 91 deletions

View File

@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -2,7 +2,9 @@ import { test, expect } from '@playwright/test'
test('自动切换', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('carousel#autoplay')
await page.waitForTimeout(100)
const preview = page.locator('#autoplay')
const carousel = preview.locator('.tiny-carousel')
const carouselItems = preview.locator('div.tiny-carousel__item')

View File

@ -19,10 +19,10 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -5,15 +5,8 @@ test('基础用法', async ({ page }) => {
await page.goto('carousel#basic-usage')
const preview = page.locator('#basic-usage')
await page.locator('div').filter({ hasText: /^1$/ }).click()
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
await preview.locator('.tiny-carousel__arrow').first().click()
await preview.locator('.tiny-carousel__arrow').first().click()
await preview.locator('.tiny-carousel__arrow').first().click()
await preview.locator('.tiny-carousel__arrow').first().click()
await preview.getByRole('list').getByRole('button').nth(1).click()
await preview.getByRole('list').getByRole('button').nth(2).click()
await preview.getByRole('list').getByRole('button').nth(3).click()
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
await preview.locator('.tiny-carousel__arrow').first().click()
})

View File

@ -19,10 +19,10 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -19,10 +19,10 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -19,10 +19,10 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -19,10 +19,10 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -19,10 +19,10 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -25,11 +25,11 @@ function handleChange(value, oldValue) {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
.carousel-tip {
margin: 16px 0 0;

View File

@ -35,11 +35,11 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
.carousel-tip {
margin: 16px 0 0;

View File

@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -19,10 +19,10 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -24,10 +24,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
}
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -31,10 +31,10 @@ export default {
}
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -19,10 +19,10 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -19,10 +19,10 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -5,12 +5,17 @@
<h3>{{ item }}</h3>
</tiny-carousel-item>
</tiny-carousel>
<label for="num">切换到</label>
<tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
<tiny-button-group>
<tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
<tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
</tiny-button-group>
<div class="manual-layoutset">
<div>
<tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
</div>
<div>
<tiny-button-group>
<tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
<tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
</tiny-button-group>
</div>
</div>
</div>
</template>
@ -46,10 +51,16 @@ function prev() {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
.manual-layoutset {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
</style>

View File

@ -5,12 +5,17 @@
<h3>{{ item }}</h3>
</tiny-carousel-item>
</tiny-carousel>
<label for="num">切换到</label>
<tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
<tiny-button-group>
<tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
<tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
</tiny-button-group>
<div class="manual-layoutset">
<div>
<tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
</div>
<div>
<tiny-button-group>
<tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
<tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
</tiny-button-group>
</div>
</div>
</div>
</template>
@ -50,10 +55,15 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
.manual-layoutset {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
</style>

View File

@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -19,10 +19,10 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -19,10 +19,10 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -19,10 +19,10 @@ export default {
<style scoped>
.carousel-item-demo:nth-child(2n) {
background-color: #99a9bf;
background-color: #fafafa;
}
.carousel-item-demo:nth-child(2n + 1) {
background-color: #d3dce6;
background-color: #edf0f3;
}
</style>

View File

@ -49,20 +49,22 @@ resolve: {
```js
import TinyThemeTool from' @opentiny/vue-theme/theme-tool.js'
import {tinyInfinityTheme} from'@opentiny/vue-theme/theme' //Infinite theme
const theme = new TinyThemeTool(tinyInfinityTheme,'tinyStyleSheetId') / / Initialize the infinite theme.
// Infinite theme
import {tinyInfinityTheme} from'@opentiny/vue-theme/theme'
//Customize the theme data format.
// Initialize the infinite theme.
const theme = new TinyThemeTool(tinyInfinityTheme,'tinyStyleSheetId')
// Customize the theme data format.
const tinyTestTheme = {
id: 'tiny-test-theme', //Unique ID of a topic. Each topic must be unique.
name: 'testTheme', //English name of the theme
cnName:'Test Topic', //Chinese name of the topic
data: {'ti-base-color':'#f2f2f3'} //Subject data
id: 'tiny-test-theme', // Unique ID of a topic. Each topic must be unique.
name: 'testTheme', // English name of the theme
cnName:'Test Topic', // Chinese name of the topic
data: {'ti-base-color':'#f2f2f3'} // Subject data
}
//Dynamic theme switching
// Dynamic theme switching
theme.changeTheme(tinyTestTheme)
```

View File

@ -266,7 +266,7 @@
/* 顶部导航背景色,用于navMenu*/
--ti-common-color-bg-navigation: var(--ti-base-color-common-8); // 顶部导航背景色/顶部导航下拉悬浮背景色
--ti-common-color-bg-dark-select: var(--ti-base-color-common-9); // 顶部导航下拉背景色
/**
* 这里类选择组件都使用这里的状态颜色Select、Autocomplete、Cascader、DatePicker、DropTimes、Search、TimePicker、Roles
* TimeSelect、Amount、Area、Company、Country、Currency、Dept、DropRoles、Hrapprover、User、Calendar

View File

@ -0,0 +1,4 @@
export const tinyCarouselItemSmbTheme = {
// SMB主题
'ti-carousel-item-title-bg-color': 'var(--ti-common-color-bg-dark-disabled)'
}

View File

@ -55,6 +55,7 @@
display: flex;
align-items: center;
justify-content: center;
opacity: var(--ti-carousel-opacity);
.@{svg-prefix-cls} {
fill: var(--ti-carousel-indicator-active-text-color);
@ -62,6 +63,7 @@
&.@{carousel-prefix-cls}__arrow-left {
left: 16px;
color: var(--ti-carousel-arrow-text-color);
}
&.@{carousel-prefix-cls}__arrow-right {

View File

@ -0,0 +1,22 @@
export const tinyCarouselSmbTheme = {
// SMB主题
'ti-carousel-arrow-height': 'var(--ti-common-size-8x)',
'ti-carousel-arrow-width': 'var(--ti-common-size-8x)',
'ti-carousel-arrow-font-size': 'var(--ti-common-font-size-2)',
'ti-carousel-arrow-bg-color': 'var(--ti-common-color-dark)',
'ti-carousel-indicator-active-text-color': 'var(--ti-common-color-text-weaken)',
'ti-carousel-arrow-text-color': 'var(--ti-common-color-text-weaken)',
'ti-carousel-arrow-hover-text-color': 'var(--ti-common-color-primary-normal)',
'ti-carousel-arrow-disabled-text-color': 'var(--ti-common-color-text-link-darkbg-hover)',
'ti-carousel-indicator-active-button-width': 'var(--ti-common-size-5x)',
'ti-carousel-indicator-active-background-color': 'var(--ti-common-color-primary-active)',
'ti-carousel-indicator-button-bg-color': 'var(--ti-common-color-primary-active)',
'ti-carousel-outside-button-active-bg-color': 'var(--ti-common-color-primary-active)',
'ti-carousel-indicator-active-border-radius': 'var(--ti-common-space-base)',
'ti-carousel-indicator-padding-horizontal': 'var(--ti-common-space-0)',
'ti-carousel-indicator-margin-right': 'var(--ti-common-space-10)',
'ti-carousel-indicator-active-width': 'var(--ti-common-size-5x)',
'ti-carousel-indicators-bg-color': 'none',
'ti-carousel-opacity': '0.5',
'ti-carousel-hover-opacity': '0.8'
}

View File

@ -23,6 +23,8 @@
--ti-carousel-arrow-bg-color: rgba(0, 0, 0, 0.3);
// 左右箭头阴影(hide)
--ti-carousel-arrow-box-shadow: var(--ti-common-shadow-none, none);
// 箭头正常颜色
--ti-carousel-arrow-text-color: var(--ti-common-color-light, #fff);
// 箭头点击瞬间文本色(hide)
--ti-carousel-arrow-active-text-color: var(--ti-common-color-light, #fff);
// 指示器盒子的背景色
@ -65,6 +67,8 @@
--ti-carousel-outside-button-active-bg-color: var(--ti-common-color-bg-dark-deep, #464c59);
// 标签按钮的字号(hide)
--ti-carousel-labels-button-font-size: var(--ti-common-font-size-base, 12px);
// 正常透明度颜色
--ti-carousel-opacity: 1;
// 幻灯片悬浮时的透明度(hide)
--ti-carousel-hover-opacity: 0.6;
}

View File

@ -12,6 +12,7 @@
height: 1px;
margin: 24px 0;
border-top: var(--ti-divider-dividing-line);
opacity: var(--ti-divider-horizontal-opacity);
}
&&--vertical {
@ -21,6 +22,7 @@
margin: 0 8px;
vertical-align: middle;
border-left: var(--ti-divider-dividing-line);
opacity: var(--ti-divider-vertical-opacity);
}
&__text {

View File

@ -0,0 +1,7 @@
export const tinyDialogSelectAuroraTheme = {
'ti-divider-dividing-line': 'var(--ti-common-color-dark)',
'ti-divider-horizontal-opacity': 0.5,
'ti-divider-vertical-opacity': 0.5,
'ti-divider-text-color': 'var(--ti-common-color-text-primary)',
'ti-divider-text-bg-color': 'var(--ti-base-color-white)'
}

View File

@ -5,4 +5,8 @@
--ti-divider-text-bg-color: var(--ti-base-color-bg-1, #ffffff);
// 文案文本色
--ti-divider-text-color: var(--ti-common-color-text-primary, #252b3a);
//分割线横向透明度
--ti-divider-horizontal-opacity: 0.8;
//分割线纵向透明度
--ti-divider-vertical-opacity: 0.8;
}

View File

@ -0,0 +1,9 @@
export const tinyTransferSmbTheme = {
// transfer-SMB主题
'ti-transfer-panel-item-text-color': 'var(--ti-common-color-info-normal)',
'ti-transfer-button-bg-color': 'var(--ti-common-color-prompt)',
'ti-transfer-font-size': 'var(--ti-common-font-size-1)',
'ti-transfer-button-border-radius': 'var(--ti-common-space-6)',
'ti-transfer-panel-border-color': 'var(--ti-common-color-line-disabled)',
'ti-transfer-panel-item-hover-bg-color': 'var(--ti-common-color-hover-background)'
}

View File

@ -64,3 +64,4 @@
@import './user-contact/vars.less';
@import './user-head/vars.less';
@import './year-table/vars.less';
@import './transfer/vars.less'