Skip to content

Commit c06bde0

Browse files
cycleccccycleccc
committed
fix(table): polish property modal ui
1 parent 14b150f commit c06bde0

5 files changed

Lines changed: 205 additions & 58 deletions

File tree

‎packages/table-module/__tests__/menu/property-menu.test.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,10 @@ describe('table property menus', () => {
8080
const borderWidth = elem.querySelector('[name="borderWidth"]') as HTMLInputElement
8181
const borderColorTrigger = elem.querySelector('[data-mark="color"]') as HTMLElement
8282
const backgroundColorTrigger = elem.querySelector('[data-mark="bgColor"]') as HTMLElement
83-
const width = elem.querySelector('[name="width"]') as HTMLSelectElement
83+
const width = elem.querySelector('[name="width"]') as HTMLInputElement
84+
const fullWidthButton = elem.querySelector(
85+
'.w-e-table-property-segment-button[data-value="100%"]'
86+
) as HTMLButtonElement
8487
const textAlign = elem.querySelector('[name="textAlign"]') as HTMLInputElement | null
8588
const button = elem.querySelector('.button-container button') as HTMLButtonElement
8689

@@ -94,7 +97,7 @@ describe('table property menus', () => {
9497
return {} as any
9598
})
9699

97-
changeInputValue(width, '100%')
100+
fullWidthButton.click()
98101
changeInputValue(borderStyle, 'dashed')
99102
changeInputValue(borderWidth, '2')
100103
borderColorTrigger.click()
@@ -103,6 +106,8 @@ describe('table property menus', () => {
103106
;(backgroundColorTrigger.querySelector('li[data-value="#00ff00"]') as HTMLElement).click()
104107

105108
expect(textAlign).toBeNull()
109+
expect(width.value).toBe('100%')
110+
expect(fullWidthButton.classList.contains('active')).toBe(true)
106111

107112
button.click()
108113
vi.runAllTimers()

‎packages/table-module/src/assets/index.less‎

Lines changed: 120 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -161,22 +161,24 @@
161161

162162
.w-e-modal {
163163
.w-e-table-property-modal {
164+
min-width: 310px;
165+
164166
.babel-container {
165167
display: flex;
166-
align-items: flex-start;
167-
margin-bottom: 14px;
168+
align-items: center;
169+
margin-bottom: 10px;
168170

169171
> span {
170172
margin-bottom: 0;
171173
}
172174
}
173175

174176
.w-e-table-property-label {
175-
flex: 0 0 72px;
177+
flex: 0 0 82px;
176178
min-height: 32px;
177-
padding-top: 6px;
178179
color: @toolbar-color;
179180
line-height: 20px;
181+
white-space: nowrap;
180182
}
181183

182184
.w-e-table-property-controls {
@@ -185,42 +187,39 @@
185187
}
186188

187189
span.babel-container-width,
188-
span.babel-container-border {
189-
display: grid;
190-
column-gap: 8px;
191-
192-
& > * {
193-
min-height: 32px;
194-
border: 1px solid var(--w-e-modal-button-border-color);
195-
border-radius: 4px;
196-
}
197-
198-
select {
199-
width: 100%;
200-
height: 32px;
201-
padding: 4px 8px;
202-
color: @toolbar-color;
203-
background-color: @toolbar-bg-color;
204-
}
190+
span.babel-container-select,
191+
span.babel-container-number {
192+
display: block;
205193
}
206194

207195
span.babel-container-width {
208-
grid-template-columns: minmax(108px, 1fr);
196+
width: 100%;
209197
}
210198

211-
span.babel-container-border {
212-
grid-template-columns: minmax(108px, 1fr) 32px 86px;
199+
span.babel-container-select select {
200+
width: 100%;
201+
height: 32px;
202+
padding: 4px 8px;
203+
color: @toolbar-color;
204+
background-color: @toolbar-bg-color;
205+
border: 1px solid @modal-button-border-color;
206+
border-radius: 4px;
213207
}
214208

215209
.w-e-table-property-number {
216210
position: relative;
217211
display: block;
212+
width: 128px;
213+
height: 32px;
214+
border: 1px solid @modal-button-border-color;
215+
border-radius: 4px;
218216

219217
input[type='number'] {
220218
width: 100%;
221219
height: 30px;
222220
padding-right: 28px;
223221
border: 0;
222+
background-color: transparent;
224223
}
225224
}
226225

@@ -235,7 +234,7 @@
235234
transform: translateY(-50%);
236235
}
237236

238-
span.babel-container-background {
237+
span.babel-container-color {
239238
display: flex;
240239
min-height: 32px;
241240
}
@@ -252,10 +251,21 @@
252251
.w-e-table-property-segment {
253252
display: inline-flex;
254253
overflow: hidden;
255-
border: 1px solid var(--w-e-modal-button-border-color);
254+
width: fit-content;
255+
border: 1px solid @modal-button-border-color;
256256
border-radius: 4px;
257257
}
258258

259+
.w-e-table-property-segment-fill {
260+
display: grid;
261+
width: 100%;
262+
grid-template-columns: repeat(2, minmax(0, 1fr));
263+
264+
.w-e-table-property-segment-button {
265+
min-width: 0;
266+
}
267+
}
268+
259269
.w-e-table-property-align-button,
260270
.w-e-table-property-segment-button {
261271
display: inline-flex;
@@ -264,17 +274,24 @@
264274
height: 32px;
265275
padding: 0;
266276
border: 0;
267-
border-right: 1px solid var(--w-e-modal-button-border-color);
277+
border-right: 1px solid @modal-button-border-color;
268278
border-radius: 0;
269-
background-color: @toolbar-bg-color;
279+
color: @toolbar-color;
280+
background-color: @modal-button-bg-color;
281+
transition: background-color .2s ease, color .2s ease;
270282

271283
&:last-child {
272284
border-right: 0;
273285
}
274286

287+
&:hover {
288+
background-color: @toolbar-active-bg-color;
289+
}
290+
275291
&.active {
276292
color: @toolbar-active-color;
277293
background-color: @toolbar-active-bg-color;
294+
box-shadow: inset 0 -2px 0 @toolbar-active-color;
278295
}
279296

280297
svg {
@@ -289,34 +306,98 @@
289306
}
290307

291308
.w-e-table-property-segment-button {
292-
min-width: 44px;
309+
min-width: 48px;
293310
padding: 0 10px;
294311
}
295312

296313
.color-group {
297314
position: relative;
298-
width: 32px;
315+
display: inline-flex;
316+
align-items: center;
317+
width: 100%;
318+
max-width: 168px;
299319
height: 32px;
300320
margin-bottom: 0;
301-
border: 1px solid var(--w-e-modal-button-border-color);
321+
padding: 4px 22px 4px 6px;
322+
border: 1px solid @modal-button-border-color;
302323
border-radius: 4px;
324+
background-color: @modal-button-bg-color;
303325
cursor: pointer;
304326

327+
&::after {
328+
position: absolute;
329+
right: 8px;
330+
top: 50%;
331+
width: 0;
332+
height: 0;
333+
border-top: 4px solid @toolbar-disabled-color;
334+
border-right: 4px solid transparent;
335+
border-left: 4px solid transparent;
336+
content: '';
337+
transform: translateY(-50%);
338+
}
339+
340+
&[data-mixed='true'] {
341+
.color-group-block {
342+
opacity: .28;
343+
}
344+
345+
.color-group-label {
346+
color: @toolbar-disabled-color;
347+
}
348+
}
349+
350+
&:hover {
351+
background-color: @toolbar-active-bg-color;
352+
}
353+
305354
.w-e-drop-panel {
306-
margin-top: 32px;
355+
margin-top: 30px;
307356
}
308357
}
309358

359+
.color-group-wide {
360+
width: 100%;
361+
}
362+
310363
.color-group-block {
311-
display: block;
312-
width: 80%;
313-
height: 80%;
314-
margin: 10%;
364+
display: inline-flex;
365+
flex: 0 0 18px;
366+
width: 18px;
367+
height: 18px;
368+
min-height: 18px;
369+
margin-right: 8px;
370+
border: 1px solid @textarea-slight-border-color;
371+
border-radius: 3px;
372+
background-clip: padding-box;
315373

316374
svg {
317-
width: 20px;
318-
height: 20px;
319-
margin: 2px 1px;
375+
width: 14px;
376+
height: 14px;
377+
margin: 1px;
378+
}
379+
}
380+
381+
.color-group-label {
382+
overflow: hidden;
383+
color: @toolbar-color;
384+
line-height: 20px;
385+
text-overflow: ellipsis;
386+
white-space: nowrap;
387+
}
388+
389+
.button-container {
390+
display: flex;
391+
justify-content: flex-end;
392+
margin-top: 2px;
393+
margin-bottom: 0;
394+
padding-top: 10px;
395+
border-top: 1px solid @textarea-slight-border-color;
396+
397+
button {
398+
min-width: 72px;
399+
color: @toolbar-active-color;
400+
background-color: @toolbar-active-bg-color;
320401
}
321402
}
322403
}

‎packages/table-module/src/locale/en.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export default {
88
modal: {
99
border: 'Border',
1010
borderColor: 'Border color',
11-
borderWidth: 'Width',
11+
borderStyle: 'Border style',
12+
borderWidth: 'Border width',
1213
bgColor: 'Back color',
1314
align: 'Text Align',
1415
verticalAlign: 'Vertical Align',

‎packages/table-module/src/locale/zh-CN.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export default {
88
modal: {
99
border: '边框',
1010
borderColor: '边框颜色',
11-
borderWidth: '宽度',
11+
borderStyle: '边框样式',
12+
borderWidth: '边框粗细',
1213
bgColor: '背景色',
1314
align: '对齐方式',
1415
verticalAlign: '垂直对齐',

0 commit comments

Comments
 (0)