forked from opentiny/tiny-vue
feat(image): [image] Adapt to SMB themes (#1895)
* feat(image): [image] Adapt to SMB themes * test(image): [image] Test case modification * test(image): [image] Test case modification * test(image): [image] Test case modification * feat(image): [image] Modify test cases
This commit is contained in:
MomoPoppy
GitHub
parent
c5d7f7cb8d
commit
d95853bfc3
|
|
@ -18,7 +18,7 @@ test('测试样式属性保持', async ({ page }) => {
|
|||
await expect(viewerImage).toHaveCount(1)
|
||||
await expect(canvas).toHaveCount(1)
|
||||
await expect(mask).toHaveCSS('position', 'absolute')
|
||||
await expect(mask).toHaveCSS('opacity', '0.5')
|
||||
await expect(mask).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.5)')
|
||||
await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
|
||||
|
||||
// 点击缩小
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>滚动下面的容器，通过开发者工具中的观察网络请求：</div>
|
||||
<br />
|
||||
<div class="demo-image__lazy">
|
||||
<tiny-image v-for="url in srcList" :key="url" :src="url" lazy></tiny-image>
|
||||
</div>
|
||||
|
|
@ -22,10 +23,11 @@ const srcList = ref([
|
|||
.demo-image__lazy {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
margin-top: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.demo-image__lazy .tiny-image {
|
||||
display: block;
|
||||
min-height: 500px;
|
||||
min-height: 400px;
|
||||
margin: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>滚动下面的容器，通过开发者工具中的观察网络请求：</div>
|
||||
<br />
|
||||
<div class="demo-image__lazy">
|
||||
<tiny-image v-for="url in srcList" :key="url" :src="url" lazy></tiny-image>
|
||||
</div>
|
||||
|
|
@ -29,11 +30,12 @@ export default {
|
|||
<style scoped>
|
||||
.demo-image__lazy {
|
||||
height: 300px;
|
||||
margin-top: 20px;
|
||||
overflow-y: auto;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.demo-image__lazy .tiny-image {
|
||||
display: block;
|
||||
min-height: 500px;
|
||||
min-height: 400px;
|
||||
margin: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<div class="demo-image__preview">
|
||||
<tiny-image :src="url" :preview-src-list="srcList" :z-index="3000" show-index></tiny-image>
|
||||
<div>
|
||||
<div>点击图片预览大图</div>
|
||||
<br />
|
||||
<div class="demo-image__preview">
|
||||
<tiny-image :src="url" :preview-src-list="srcList" :z-index="3000" show-index></tiny-image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<tiny-button @click="show = true"> 弹出Dialog </tiny-button>
|
||||
<tiny-dialog-box v-model:visible="show" title="消息" width="30%">
|
||||
<tiny-dialog-box v-model:visible="show" class="demo-image__preview-dialog-box" title="消息" width="30%">
|
||||
<div class="demo-image__preview__in">
|
||||
<tiny-image :src="url" :preview-src-list="srcList"></tiny-image>
|
||||
</div>
|
||||
|
|
@ -23,9 +23,19 @@ const srcList = ref([
|
|||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.demo-image__preview__in {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.demo-image__preview-dialog-box {
|
||||
:deep(.tiny-dialog-box) {
|
||||
> .tiny-dialog-box__footer {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="show = true"> 弹出Dialog </tiny-button>
|
||||
<tiny-dialog-box v-model:visible="show" title="消息" width="30%">
|
||||
<tiny-dialog-box class="demo-image__preview-dialog-box" v-model:visible="show" title="消息" width="30%">
|
||||
<div class="demo-image__preview__in">
|
||||
<tiny-image :src="url" :preview-src-list="srcList"></tiny-image>
|
||||
</div>
|
||||
|
|
@ -35,9 +35,19 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.demo-image__preview__in {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.demo-image__preview-dialog-box {
|
||||
:deep(.tiny-dialog-box) {
|
||||
> .tiny-dialog-box__footer {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ test('测试图片预览大图', async ({ page }) => {
|
|||
await expect(viewerImage).toHaveCount(1)
|
||||
await expect(canvas).toHaveCount(1)
|
||||
await expect(mask).toHaveCSS('position', 'absolute')
|
||||
await expect(mask).toHaveCSS('opacity', '0.5')
|
||||
await expect(mask).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.5)')
|
||||
await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
|
||||
|
||||
// 点击缩小
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<div class="demo-image__preview">
|
||||
<tiny-image :src="url" :preview-src-list="srcList" :z-index="3000" show-index></tiny-image>
|
||||
<div>
|
||||
<div>点击图片预览大图</div>
|
||||
<br />
|
||||
<div class="demo-image__preview">
|
||||
<tiny-image :src="url" :preview-src-list="srcList" :z-index="3000" show-index></tiny-image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -89,7 +89,8 @@
|
|||
|
||||
svg {
|
||||
fill: var(--ti-image-viewer-actions-inner-text-color);
|
||||
margin-right: 20px;
|
||||
margin-right: var(--ti-image-viewer-actions-icon-margin-right);
|
||||
font-size: var(--ti-image-viewer-actions-icon-size);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -97,14 +98,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__actions-divider {
|
||||
display: var(--ti-image-viewer-actions-divider-display);
|
||||
}
|
||||
|
||||
&__actions-count {
|
||||
font-size: 20px;
|
||||
font-size: var(--ti-image-viewer-actions-count-font-size);
|
||||
color: #fff;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: 10px;
|
||||
margin-left: var(--ti-image-viewer-actions-count-margin-left);
|
||||
}
|
||||
|
||||
|
||||
&__next,
|
||||
&__prev {
|
||||
top: 50%;
|
||||
|
|
@ -121,12 +125,12 @@
|
|||
|
||||
&__prev {
|
||||
transform: translateY(-50%);
|
||||
left: 40px;
|
||||
left: var(--ti-image-viewer-prev-left);
|
||||
}
|
||||
|
||||
&__next {
|
||||
transform: translateY(-50%);
|
||||
right: 40px;
|
||||
right: var(--ti-image-viewer-next-right);
|
||||
text-indent: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -136,7 +140,6 @@
|
|||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
background: var(--ti-image-viewer-mask-bg-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
export const tinyImageViewerSmbTheme = {
|
||||
'ti-image-viewer-close-bg-color': 'rgba(0,0,0,0.10)',
|
||||
'ti-image-viewer-mask-bg-color': 'var(--ti-common-border-color-transparent-8)',
|
||||
'ti-image-viewer-actions-height': 'var(--ti-common-size-10x)',
|
||||
'ti-image-viewer-actions-width': 'calc(var(--ti-common-size-50x) + var(--ti-common-size-12x))',
|
||||
'ti-image-viewer-actions-icon-margin-right': 'var(--ti-common-size-0)',
|
||||
'ti-image-viewer-actions-icon-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-image-viewer-actions-count-font-size': 'var(--ti-common-font-size-1)',
|
||||
'ti-image-viewer-actions-count-margin-left': 'var(--ti-common-size-0)',
|
||||
'ti-image-viewer-actions-divider-display': 'none',
|
||||
'ti-image-viewer-btn-opacity': '1',
|
||||
'ti-image-viewer-prev-left': 'var(--ti-common-size-8x)',
|
||||
'ti-image-viewer-next-right': 'var(--ti-common-size-8x)',
|
||||
'ti-image-viewer-actions-bottom': 'var(--ti-common-size-8x)'
|
||||
}
|
||||
|
|
@ -31,5 +31,12 @@
|
|||
--ti-image-viewer-next-height: 44px;
|
||||
--ti-image-viewer-mask-wrap-bg-color: none;
|
||||
--ti-image-viewer-btn-opacity: 0.8;
|
||||
--ti-image-viewer-mask-bg-color: #000;
|
||||
--ti-image-viewer-mask-bg-color: rgba(0, 0, 0, 0.5);
|
||||
--ti-image-viewer-actions-icon-margin-right: var(--ti-common-size-5x);
|
||||
--ti-image-viewer-actions-icon-size: 1rem;
|
||||
--ti-image-viewer-actions-count-font-size: var(--ti-common-font-size-4);
|
||||
--ti-image-viewer-actions-count-margin-left: 10px;
|
||||
--ti-image-viewer-actions-divider-display: 'inline-block';
|
||||
--ti-image-viewer-prev-left: var(--ti-common-size-10x);
|
||||
--ti-image-viewer-next-right: var(--ti-common-size-10x);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export const tinyImageAuroraTheme = {}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export const tinyImageSmbTheme = {}
|
||||
|
|
@ -86,8 +86,8 @@ export default {
|
|||
'year-table': 'year-table',
|
||||
'skeleton-item': 'skeleton-item',
|
||||
'radio-button': 'radio-button',
|
||||
'radio': 'radio',
|
||||
'radio-group': 'radio-group',
|
||||
'split': 'split-wrapper',
|
||||
'image-viewer': 'image-viewer',
|
||||
'float-bar': 'float-bar'
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue