Skip to content

Commit 277bcae

Browse files
Youyou-smilesYouyou-smiles
committed
refactor(image): [image] refactor the image theme
1 parent feea189 commit 277bcae

File tree

6 files changed

+58
-72
lines changed

6 files changed

+58
-72
lines changed

‎examples/sites/demos/pc/app/image/keep-style.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ test('测试样式属性保持', async ({ page }) => {
1818
await expect(viewerImage).toHaveCount(1)
1919
await expect(canvas).toHaveCount(1)
2020
await expect(mask).toHaveCSS('position', 'absolute')
21-
await expect(mask).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.5)')
21+
await expect(mask).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.08)')
2222
await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
2323

2424
// 点击缩小

‎examples/sites/demos/pc/app/image/preview.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ test('测试图片预览大图', async ({ page }) => {
1818
await expect(viewerImage).toHaveCount(1)
1919
await expect(canvas).toHaveCount(1)
2020
await expect(mask).toHaveCSS('position', 'absolute')
21-
await expect(mask).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.5)')
21+
await expect(mask).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.08)')
2222
await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
2323

2424
// 点击缩小

‎packages/theme/src/image-viewer/index.less

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
.component-css-vars-image-viewer();
2121

2222
&__wrapper {
23-
background: var(--ti-image-viewer-mask-wrap-bg-color);
23+
background: none;
2424
position: fixed;
2525
top: 0;
2626
right: 0;
@@ -35,30 +35,32 @@
3535
align-items: center;
3636
justify-content: center;
3737
border-radius: 50%;
38-
opacity: var(--ti-image-viewer-btn-opacity);
38+
opacity: 1;
3939
box-sizing: border-box;
4040
.user-select(none);
4141

4242
svg {
43-
fill: var(--ti-image-viewer-text-color);
43+
width: 20px;
44+
height: 20px;
45+
fill: var(--tv-Image-viewer-text-color);
4446
}
4547
}
4648

4749
&__close {
48-
top: var(--ti-image-viewer-close-top);
49-
right: var(--ti-image-viewer-close-right);
50-
width: var(--ti-image-viewer-close-width);
51-
height: var(--ti-image-viewer-close-height);
52-
font-size: var(--ti-image-viewer-close-font-size);
53-
background-color: var(--ti-image-viewer-close-bg-color);
50+
top: 32px;
51+
right: 32px;
52+
width: 40px;
53+
height: 40px;
54+
font-size: var(--tv-Image-viewer-close-font-size);
55+
background-color: var(--tv-Image-viewer-close-bg-color);
5456

5557
&:hover {
5658
cursor: pointer;
57-
background-color: var(--ti-image-viewer-close-bg-color-hover);
59+
background-color: #606266;
5860
}
5961
}
6062

61-
&__canvas {
63+
&__canvas {
6264
width: 100%;
6365
height: 100%;
6466
display: flex;
@@ -68,29 +70,26 @@
6870

6971
&__actions {
7072
left: 50%;
71-
bottom: var(--ti-image-viewer-actions-bottom);
73+
bottom: 32px;
7274
transform: translateX(-50%);
73-
width: var(--ti-image-viewer-actions-width);
74-
height: var(--ti-image-viewer-actions-height);
75-
padding: 0 23px;
76-
background-color: var(--ti-image-viewer-close-bg-color);
77-
border-radius: var(--ti-image-viewer-actions-border-radius);
75+
width: 248px;
76+
height: var(--tv-Image-viewer-actions-height);
77+
padding: 10px 24px;
78+
background-color: var(--tv-Image-viewer-close-bg-color);
79+
border-radius: var(--tv-Image-viewer-actions-border-radius);
7880
}
7981

8082
&__actions-inner {
8183
width: 100%;
8284
height: 100%;
83-
text-align: justify;
8485
cursor: default;
85-
font-size: var(--ti-image-viewer-actions-inner-font-size);
8686
display: flex;
8787
align-items: center;
88-
justify-content: var(--ti-image-viewer-actions-inner-justify-content);
88+
justify-content: space-around;
8989

9090
svg {
91-
fill: var(--ti-image-viewer-actions-inner-text-color);
92-
margin-right: var(--ti-image-viewer-actions-icon-margin-right);
93-
font-size: var(--ti-image-viewer-actions-icon-size);
91+
fill: var(--tv-Image-viewer-actions-inner-text-color);
92+
margin-right: var(--tv-Image-viewer-actions-icon-margin-right);
9493

9594
&:hover {
9695
cursor: pointer;
@@ -99,38 +98,41 @@
9998
}
10099

101100
&__actions-divider {
102-
display: var(--ti-image-viewer-actions-divider-display);
101+
display: inline-block;
103102
}
104103

105104
&__actions-count {
106-
font-size: var(--ti-image-viewer-actions-count-font-size);
105+
display: inline-block;
106+
width: 20px;
107+
height: 20px;
108+
line-height: 20px;
109+
font-size: var(--tv-Image-viewer-actions-count-font-size);
107110
color: #fff;
108111
position: relative;
109-
margin-left: var(--ti-image-viewer-actions-count-margin-left);
110112
}
111113

112114
&__next,
113115
&__prev {
114116
top: 50%;
115-
width: var(--ti-image-viewer-next-width);
116-
height: var(--ti-image-viewer-next-height);
117-
font-size: var(--ti-image-viewer-next-font-size);
118-
background-color: var(--ti-image-viewer-close-bg-color);
117+
width: var(--tv-Image-viewer-next-width);
118+
height: var(--tv-Image-viewer-next-height);
119+
font-size: var(--tv-Image-viewer-next-font-size);
120+
background-color: var(--tv-Image-viewer-close-bg-color);
119121

120122
&:hover {
121123
cursor: pointer;
122-
background-color: var(--ti-image-viewer-close-bg-color-hover);
124+
background-color: #606266;
123125
}
124126
}
125127

126128
&__prev {
127129
transform: translateY(-50%);
128-
left: var(--ti-image-viewer-prev-left);
130+
left: var(--tv-Image-viewer-prev-left);
129131
}
130132

131133
&__next {
132134
transform: translateY(-50%);
133-
right: var(--ti-image-viewer-next-right);
135+
right: var(--tv-Image-viewer-next-right);
134136
text-indent: 2px;
135137
}
136138

@@ -140,6 +142,6 @@
140142
height: 100%;
141143
top: 0;
142144
left: 0;
143-
background: var(--ti-image-viewer-mask-bg-color);
145+
background: rgba(0,0,0,0.08);
144146
}
145147
}

‎packages/theme/src/image-viewer/vars.less

Lines changed: 14 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,18 @@
1111
*/
1212

1313
.component-css-vars-image-viewer() {
14-
--ti-image-viewer-text-color: var(--ti-common-color-light, #ffffff);
15-
--ti-image-viewer-actions-inner-text-color: var(--ti-common-color-light, #ffffff);
16-
--ti-image-viewer-close-font-size: var(--ti-common-font-size-4, 20px);
17-
--ti-image-viewer-close-bg-color: rgba(0,0,0,0.10);
18-
--ti-image-viewer-close-top: 40px;
19-
--ti-image-viewer-close-right: 40px;
20-
--ti-image-viewer-close-width: 40px;
21-
--ti-image-viewer-close-height: 40px;
22-
--ti-image-viewer-close-bg-color-hover: #606266;
23-
--ti-image-viewer-actions-border-radius: 22px;
24-
--ti-image-viewer-actions-inner-font-size: 23px;
25-
--ti-image-viewer-actions-width: calc(var(--ti-common-size-50x, 200px) + var(--ti-common-size-12x));
26-
--ti-image-viewer-actions-height: var(--ti-common-size-10x, 40px);
27-
--ti-image-viewer-actions-bottom: var(--ti-common-size-8x, 32px);
28-
--ti-image-viewer-actions-inner-justify-content: space-around;
29-
--ti-image-viewer-next-font-size: var(--ti-common-font-size-5, 24px);
30-
--ti-image-viewer-next-width: 44px;
31-
--ti-image-viewer-next-height: 44px;
32-
--ti-image-viewer-mask-wrap-bg-color: none;
33-
--ti-image-viewer-btn-opacity: 1;
34-
--ti-image-viewer-mask-bg-color: var(--ti-common-border-color-transparent-8, var(--ti-base-bg-color-transparent-8));
35-
--ti-image-viewer-actions-icon-margin-right: var(--ti-common-size-0, 0px);
36-
--ti-image-viewer-actions-icon-size: var(--ti-common-font-size-2, 16px);
37-
--ti-image-viewer-actions-count-font-size: var(--ti-common-font-size-1, 14px);
38-
--ti-image-viewer-actions-count-margin-left: var(--ti-common-size-0, 0px);
39-
--ti-image-viewer-actions-divider-display: none;
40-
--ti-image-viewer-prev-left: var(--ti-common-size-8x, 32px);
41-
--ti-image-viewer-next-right: var(--ti-common-size-8x, 32px);
14+
--tv-Image-viewer-text-color: var(--tv-color-success-text-white);
15+
--tv-Image-viewer-actions-inner-text-color: var(--tv-color-success-text-white);
16+
--tv-Image-viewer-close-font-size: var(--tv-font-size-xxl);
17+
--tv-Image-viewer-close-bg-color: var(--tv-color-bg-control-unactive);
18+
--tv-Image-viewer-actions-border-radius: var(--tv-border-radius-round);
19+
--tv-Image-viewer-actions-height: var(--tv-size-height-lg);
20+
--tv-Image-viewer-next-font-size: calc(var(--tv-size-base) * 6);
21+
--tv-Image-viewer-next-width: var(--tv-size-height-lg);
22+
--tv-Image-viewer-next-height: var(--tv-size-height-lg);
23+
--tv-Image-viewer-btn-opacity: 1;
24+
--tv-Image-viewer-actions-icon-margin-right: var(--tv-space-xl);
25+
--tv-Image-viewer-actions-count-font-size: var(--tv-font-size-md);
26+
--tv-Image-viewer-prev-left: calc(var(--tv-space-base) * 8);
27+
--tv-Image-viewer-next-right: calc(var(--tv-space-base) * 8);
4228
}

‎packages/theme/src/image/index.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,12 @@
4848

4949
&-text {
5050
margin-top: 4px;
51-
display: var(--ti-image-error-display);
51+
display: inline-block;
5252
}
5353

5454
& > .tiny-svg {
5555
font-size: 16px;
56-
display: var(--ti-image-error-display);
56+
display: inline-block;
5757
}
5858
}
5959

0 commit comments

Comments
 (0)