Skip to content

Commit d6186a2

Browse files
shenjunjianshenjunjian
authored
[tooltip,datepicker,tree] fix problems when switch to old theme (#2550)
* fix(tooltip): fix tooltip's offset demo * fix(modal): fix 确定 not in center * fix(button): fix button's old-theme * fix(date-picker): fix date-picker's visibleArrow * fix(modal): fix tag's padding * fix(tree-node): increase the robustness of the location * fix(base): fix
1 parent 9a82fc8 commit d6186a2

File tree

9 files changed

+69
-13
lines changed

9 files changed

+69
-13
lines changed

‎packages/renderless/src/common/deps/popper.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -782,7 +782,7 @@ class Popper {
782782
if (this._options.updateHiddenPopperOnScroll) {
783783
this.state.updateBoundFn()
784784
} else {
785-
if (isDisplayNone(this._popper)) return
785+
if (isDisplayNone(this._reference)) return
786786
this.state.updateBoundFn()
787787
}
788788
}

‎packages/renderless/src/picker/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1328,7 +1328,7 @@ export const initPopper = ({ props, hooks, vnode }) => {
13281328
props: {
13291329
...props,
13301330
popperOptions: Object.assign({ boundariesPadding: 0, gpuAcceleration: false }, props.popperOptions),
1331-
visibleArrow: true,
1331+
visibleArrow: false,
13321332
offset: 0,
13331333
boundariesPadding: 5,
13341334
arrowOffset: 35,

‎packages/renderless/src/tree-node/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export const handleContextMenu =
164164
const treeWidth = state.tree.$parent.$el.offsetWidth
165165

166166
if (event.clientY > -10) {
167-
state.menuposition.top = `${vm.$refs.node.offsetTop + vm.$refs.node.childNodes[0].offsetHeight / 2}px`
167+
state.menuposition.top = `${vm.$refs.node.offsetTop + vm.$refs.content.offsetHeight / 2}px`
168168
}
169169

170170
if (event.clientX > -10) {

‎packages/theme/src/base/old-theme.less‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,9 @@
162162
--tv-color-act-primary-border-light-hover-1: var(--tv-base-color-brand-3); // #beccfa 幽灵hover边框色-2.2
163163
--tv-color-act-primary-border-light-active-1: var(--tv-base-color-brand-3); // #beccfa 幽灵active边框色-2.2
164164

165-
/* 成功-success */
165+
--tv-color-act-primary-plain-text-hover: var(--tv-base-color-common-1); // #fff
166+
167+
/* 成功-success */
166168
--tv-color-act-success-text: var(--tv-base-color-success-6); // #50d4ab 成功文本色-1（成功主色）： 朴素/幽灵/纯文本/链接
167169
--tv-color-act-success-text-hover: var(--tv-base-color-success-6); // #50d4ab 成功hover文本色-1
168170
--tv-color-act-success-text-active: var(--tv-base-color-success-6); // #50d4ab 成功active文本色-1
@@ -189,6 +191,8 @@
189191
--tv-color-act-success-border-light-hover: var(--tv-base-color-success-1); // #edf7df 成功hover边框色
190192
--tv-color-act-success-border-light-active: var(--tv-base-color-success-1); // #edf7df 成功active边框色
191193

194+
--tv-color-act-success-plain-text-hover: var(--tv-base-color-common-1); // #fff
195+
192196
/* 告警-warning */
193197
--tv-color-act-warning-text: var(--tv-base-color-warn-7); // #e37d29 告警文本色-1（告警主色）：朴素/幽灵/纯文本/链接
194198
--tv-color-act-warning-text-hover: var(--tv-base-color-warn-7); // #e37d29 告警hover文本色-1
@@ -216,6 +220,8 @@
216220
--tv-color-act-warning-border-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover边框色
217221
--tv-color-act-warning-border-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active边框色
218222

223+
--tv-color-act-warning-plain-text-hover: var(--tv-base-color-common-1); // #fff
224+
219225
/* 危险-danger */
220226
--tv-color-act-danger-text: var(--tv-base-color-error-12); // #c7000b 危险文本色-1（成功主色）：朴素/幽灵/纯文本/链接
221227
--tv-color-act-danger-text-hover: var(--tv-base-color-error-12); // #c7000b 危险hover文本色-1
@@ -243,6 +249,8 @@
243249
--tv-color-act-danger-border-light-hover: var(--tv-base-color-error-1); // #ffeceb 危险hover边框色
244250
--tv-color-act-danger-border-light-active: var(--tv-base-color-error-1); // #ffeceb 危险active边框色
245251

252+
--tv-color-act-danger-plain-text-hover: var(--tv-base-color-common-1); // #fff
253+
246254
/* 信息-info */
247255
--tv-color-act-info-text: var(--tv-base-color-info-7);// 信息文本色-1（信息主色）：朴素/幽灵/纯文本/链接
248256
--tv-color-act-info-text-hover: var(--tv-base-color-info-7); // #5e7ce0 信息hover文本色-1
@@ -270,6 +278,8 @@
270278
--tv-color-act-info-border-light-hover: var(--tv-base-color-info-1); // #f0f7ff 信息hover边框色
271279
--tv-color-act-info-border-light-active: var(--tv-base-color-info-1); // #f0f7ff 信息active边框色
272280

281+
--tv-color-act-info-plain-text-hover: var(--tv-base-color-common-1); // #fff
282+
273283
/** 2.4 文本色 **/
274284
--tv-color-text: var(--tv-base-color-common-8); // #252b3a 一级文本色-正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标
275285
--tv-color-text-secondary: var(--tv-base-color-common-7); // #575d6c 二级文本色-次要信息
@@ -283,6 +293,8 @@
283293
--tv-color-text-link-hover: var(--tv-base-color-brand-10); // #344899 链接悬浮色
284294
--tv-color-text-darbg: var(--tv-base-color-common-5); // 深色背景文本色，顶级导航/一级tab文本色
285295

296+
--tv-color-plain-text-hover: var(--tv-base-color-brand-6); // #5e7c60
297+
286298
/** 2.5 图标色 **/
287299
--tv-color-icon: var(--tv-base-color-common-7); // #575d6c 默认图标色
288300
--tv-color-icon-hover: var(--tv-base-color-brand-6); // #5e7ce0 图标悬浮色

‎packages/theme/src/base/vars.less‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,8 @@
166166
--tv-color-act-primary-border-light-hover-1: var(--tv-base-color-common-7); // #c2c2c2 幽灵hover边框色-2.2
167167
--tv-color-act-primary-border-light-active-1: var(--tv-base-color-common-7); // #c2c2c2 幽灵active边框色-2.2
168168

169+
--tv-color-act-primary-plain-text-hover: var(--tv-base-color-brand); // #191919
170+
169171
/* 成功-success */
170172
--tv-color-act-success-text: var(--tv-base-color-success-6); // #5cb300 成功文本色-1（成功主色）： 朴素/幽灵/纯文本/链接
171173
--tv-color-act-success-text-hover: var(--tv-base-color-success-6); // #5cb300 成功hover文本色-1
@@ -193,6 +195,8 @@
193195
--tv-color-act-success-border-light-hover: var(--tv-base-color-success-1); // #edf7df 成功hover边框色
194196
--tv-color-act-success-border-light-active: var(--tv-base-color-success-1); // #edf7df 成功active边框色
195197

198+
--tv-color-act-success-plain-text-hover: var(--tv-base-color-success-6); // #5cb300
199+
196200
/* 告警-warning */
197201
--tv-color-act-warning-text: var(--tv-base-color-warn-6); // #ff8800 告警文本色-1（告警主色）：朴素/幽灵/纯文本/链接
198202
--tv-color-act-warning-text-hover: var(--tv-base-color-warn-6); // #ff8800 告警hover文本色-1
@@ -220,6 +224,8 @@
220224
--tv-color-act-warning-border-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover边框色
221225
--tv-color-act-warning-border-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active边框色
222226

227+
--tv-color-act-warning-plain-text-hover: var(--tv-base-color-warn-6); // #ff8800
228+
223229
/* 危险-danger */
224230
--tv-color-act-danger-text: var(--tv-base-color-error-6); // #f23030 危险文本色-1（成功主色）：朴素/幽灵/纯文本/链接
225231
--tv-color-act-danger-text-hover: var(--tv-base-color-error-6); // #f23030 #f23030 危险hover文本色-1
@@ -247,6 +253,8 @@
247253
--tv-color-act-danger-border-light-hover: var(--tv-base-color-error-1); // #fff1f0 危险hover边框色
248254
--tv-color-act-danger-border-light-active: var(--tv-base-color-error-1); // #fff1f0 危险active边框色
249255

256+
--tv-color-act-danger-plain-text-hover: var(--tv-base-color-error-6); // #f23030
257+
250258
/* 信息-info */
251259
--tv-color-act-info-text: var(--tv-base-color-info-6); // #1476ff 信息文本色-1（信息主色）：朴素/幽灵/纯文本/链接
252260
--tv-color-act-info-text-hover: var(--tv-base-color-info-6); // #1476ff 信息hover文本色-1
@@ -274,6 +282,8 @@
274282
--tv-color-act-info-border-light-hover: var(--tv-base-color-info-1); // #f0f7ff 信息hover边框色
275283
--tv-color-act-info-border-light-active: var(--tv-base-color-info-1); // #f0f7ff 信息active边框色
276284

285+
--tv-color-act-info-plain-text-hover: var(--tv-base-color-info-6); // #1476ff
286+
277287
/** 2.4 文本色 **/
278288
--tv-color-text: var(--tv-base-color-common-11); // #191919 一级文本色-正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标
279289
--tv-color-text-secondary: var(--tv-base-color-common-9); // #595959 二级文本色-次要信息
@@ -286,6 +296,8 @@
286296
--tv-color-text-link: var(--tv-base-color-brand-6); // #1476ff 链接色（链接按钮）
287297
--tv-color-text-link-hover: var(--tv-base-color-brand-6); // #1476ff 链接悬浮色
288298

299+
--tv-color-plain-text-hover: var(--tv-base-color-common-11); // #191919
300+
289301
/** 2.5 图标色 **/
290302
--tv-color-icon: var(--tv-base-color-common-8); // #808080 默认图标色
291303
--tv-color-icon-hover: var(--tv-base-color-common-11); // #191919 图标悬浮色
@@ -366,7 +378,7 @@
366378
--tv-font-size-lg: 16px;
367379
--tv-font-size-xl: 18px;
368380
--tv-font-size-xxl: 20px;
369-
--tv-font-size-default:var(--tv-font-size-md);
381+
--tv-font-size-default: var(--tv-font-size-md);
370382

371383
--tv-font-size-heading-xs: 16px; // 卡片标题
372384
--tv-font-size-heading-sm: 18px; // 页面标题

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
display: inline-flex;
1212
align-items: center;
13+
justify-content: center;
1314
appearance: none;
1415
text-align: center;
1516
white-space: nowrap;
@@ -105,13 +106,15 @@
105106
.color-active-mixin(@theme, @plain) {
106107
@bg: %('var(--tv-Button-bg-color%a-active-%a)', @plain, @theme);
107108
@border: %('var(--tv-Button-border-color%a-active-%a)', @plain, @theme);
109+
@c: %('var(--tv-Button-text-color%a-active-%a)', @plain, @theme);
108110

109111
&:active,
110112
&:focus,
111113
&:hover,
112114
&.is-active {
113115
background-color: e(@bg);
114116
border-color: e(@border);
117+
color: e(@c);
115118
}
116119
}
117120
// 激活态： 叠加到 ghost 状态上。

‎packages/theme/src/button/old-theme.less‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
@import '../custom.less';
2-
@button-prefix-cls: ~'@{css-prefix}button';
3-
4-
.@{button-prefix-cls} {
5-
// 默认时按钮圆角
6-
--tv-Button-border-radius: 2px;
1+
.tiny-button {
2+
// 默认时按钮内图标的大小
3+
--tv-Button-size-icon-font-size: 14px;
4+
// 超大按钮内图标的大小
5+
--tv-Button-size-icon-font-size-large: 16px;
6+
// 中等按钮内图标的大小
7+
--tv-Button-size-icon-font-size-medium: 14px;
8+
// 小型按钮内图标的大小
9+
--tv-Button-size-icon-font-size-small: 12px;
10+
// 超小按钮内图标的大小
11+
--tv-Button-size-icon-font-size-mini: 12px;
712
}

‎packages/theme/src/button/vars.less‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,65 +221,89 @@
221221
--tv-Button-bg-color-active-default: var(--tv-color-bg-hover-secondary); // 现规范，激活态时，只影响边框和背景
222222
// 默认时按钮激活的边框色
223223
--tv-Button-border-color-active-default: var(--tv-color-border);
224+
// 默认时按钮激活的文本
225+
--tv-Button-text-color-active-default: var(--tv-color-text);
224226
// 默认时按钮激活的朴素背景色
225227
--tv-Button-bg-color-plain-active-default: var(--tv-color-bg);
226228
// 默认时按钮激活的朴素边框色
227229
--tv-Button-border-color-plain-active-default: var(--tv-color-bg); // 朴素激活都无边框，所以等于背景色。
230+
// 默认时按钮激活的朴素文本色
231+
--tv-Button-text-color-plain-active-default: var(--tv-color-plain-text-hover);
228232
// 默认时按钮激活的幽灵边框色
229233
--tv-Button-border-color-ghost-active-default: var(--tv-color-border-ghost-active);
230234

231235
// primary 主题时按钮激活的背景色
232236
--tv-Button-bg-color-active-primary: var(--tv-color-act-primary-bg-active);
233237
// primary 主题时按钮激活的边框色
234238
--tv-Button-border-color-active-primary: var(--tv-color-act-primary-border-active);
239+
// primary 主题时按钮激活的文本色
240+
--tv-Button-text-color-active-primary: var(--tv-color-act-primary-text-white-active);
235241
// primary 主题时按钮激活的朴素背景色
236242
--tv-Button-bg-color-plain-active-primary: var(--tv-color-act-primary-bg-white-active);
237243
// primary 主题时按钮激活的朴素边框色
238244
--tv-Button-border-color-plain-active-primary: var(--tv-color-act-primary-bg-white-active); // 无边框
245+
// primary 主题时按钮激活的朴素文本色
246+
--tv-Button-text-color-plain-active-primary: var(--tv-color-act-primary-plain-text-hover);
239247
// primary 主题时按钮激活的幽灵边框色
240-
--tv-Button-border-color-ghost-active-primary: var(--tv-color-act-primary-border-light-active-1);
248+
--tv-Button-border-color-ghost-active-primary: var(--tv-color-act-primary-plain-text-hover);
241249

242250
// success 主题时按钮激活的背景色
243251
--tv-Button-bg-color-active-success: var(--tv-color-act-success-bg-active);
244252
// success 主题时按钮激活的边框色
245253
--tv-Button-border-color-active-success: var(--tv-color-act-success-border-active);
254+
// success 主题时按钮激活的文本色
255+
--tv-Button-text-color-active-success: var(--tv-color-act-success-text-white-active);
246256
// success 主题时按钮激活的朴素背景色
247257
--tv-Button-bg-color-plain-active-success: var(--tv-color-act-success-bg-light-active);
248258
// success 主题时按钮激活的朴素边框色
249259
--tv-Button-border-color-plain-active-success: var(--tv-color-act-success-bg-light-active); // 无边框
260+
// success 主题时按钮激活的朴素文本色
261+
--tv-Button-text-color-plain-active-success: var(--tv-color-act-success-plain-text-hover);
250262
// success 主题时按钮激活的幽灵边框色
251263
--tv-Button-border-color-ghost-active-success: var(--tv-color-act-success-border-active-1);
252264

253265
// warning 主题时按钮激活的背景色
254266
--tv-Button-bg-color-active-warning: var(--tv-color-act-warning-bg-active);
255267
// warning 主题时按钮激活的边框色
256268
--tv-Button-border-color-active-warning: var(--tv-color-act-warning-border-active);
269+
// warning 主题时按钮激活的文本色
270+
--tv-Button-text-color-active-warning: var(--tv-color-act-warning-text-white-active);
257271
// warning 主题时按钮激活的朴素背景色
258272
--tv-Button-bg-color-plain-active-warning: var(--tv-color-act-warning-bg-light-active);
259273
// warning 主题时按钮激活的朴素边框色
260274
--tv-Button-border-color-plain-active-warning: var(--tv-color-act-warning-bg-light-active); // 无边框
275+
// warning 主题时按钮激活的朴素文本色
276+
--tv-Button-text-color-plain-active-warning: var(--tv-color-act-warning-plain-text-hover);
261277
// warning 主题时按钮激活的幽灵边框色
262278
--tv-Button-border-color-ghost-active-warning: var(--tv-color-act-warning-border-active-1);
263279

264280
// danger 主题时按钮激活的背景色
265281
--tv-Button-bg-color-active-danger: var(--tv-color-act-danger-bg-active);
266282
// danger 主题时按钮激活的边框色
267283
--tv-Button-border-color-active-danger: var(--tv-color-act-danger-border-active);
284+
// danger 主题时按钮激活的文本色
285+
--tv-Button-text-color-active-danger: var(--tv-color-act-danger-text-white-active);
268286
// danger 主题时按钮激活的朴素背景色
269287
--tv-Button-bg-color-plain-active-danger: var(--tv-color-act-danger-bg-light-active);
270288
// danger 主题时按钮激活的朴素边框色
271289
--tv-Button-border-color-plain-active-danger: var(--tv-color-act-danger-bg-light-active);
290+
// danger 主题时按钮激活的朴素文本色
291+
--tv-Button-text-color-plain-active-danger: var(--tv-color-act-danger-plain-text-hover);
272292
// danger 主题时按钮激活的幽灵边框色
273293
--tv-Button-border-color-ghost-active-danger: var(--tv-color-act-danger-border-active-1);
274294

275295
// info 主题时按钮激活的背景色
276296
--tv-Button-bg-color-active-info: var(--tv-color-act-info-bg-active);
277297
// info 主题时按钮激活的边框色
278298
--tv-Button-border-color-active-info: var(--tv-color-act-info-border-active);
299+
// info 主题时按钮激活的文本色
300+
--tv-Button-text-color-active-info: var(--tv-color-act-info-text-white-active);
279301
// info 主题时按钮激活的朴素背景色
280302
--tv-Button-bg-color-plain-active-info: var(--tv-color-act-info-bg-light-active);
281303
// info 主题时按钮激活的朴素边框色
282304
--tv-Button-border-color-plain-active-info: var(--tv-color-act-info-bg-light-active);
305+
// info 主题时按钮激活的朴素文本色
306+
--tv-Button-text-color-plain-active-info: var(--tv-color-act-info-plain-text-hover);
283307
// info 主题时按钮激活的幽灵边框色
284308
--tv-Button-border-color-ghost-active-info: var(--tv-color-act-info-border-active-1); // level3 结束------
285309

‎packages/theme/src/tag/vars.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
// 标签在仅图标模式时，图标的大小
5959
--tv-Tag-only-icon-font-size: 14px;
6060
// 标签在仅图标模式时，标签的内边距
61-
--tv-Tag-only-icon-padding: 0.5px;
61+
--tv-Tag-only-icon-padding: 4px;
6262

6363
// 中等标签字号
6464
--tv-Tag-font-size-medium: var(--tv-font-size-default);

0 commit comments

Comments
 (0)