test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

Fix misplace Badge when browser zoom above 100% (#4749)

Browse Source 
close #4747 #4290 #4176
This commit is contained in:
偏右 2017-02-03 14:20:42 +08:00 committed by GitHub
parent 24b1e1913a
commit f786f607cf
7 changed files with 48 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.en-US.md
View File

@ -40,6 +40,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
* Added `treeDefaultExpandedKeys` property.[#43@rc-tree-select](https://github.com/react-component/tree-select/pull/43)
* Fixed an overflow-wrap issue. [#42@rc-tree-select](https://github.com/react-component/tree-select/pull/42)
* Added less variables: `@border-style-base` `@border-width-base` `@btn-danger-color` `@btn-danger-bg` and etc.
* Fixed Badge misplace issue when browser zoom above 100%. [#4747](https://github.com/ant-design/ant-design/issues/4747) [#4290](https://github.com/ant-design/ant-design/issues/4290)
## 2.6.4

1
CHANGELOG.zh-CN.md
View File

@ -41,6 +41,7 @@ timeline: true
* 新增 `treeDefaultExpandedKeys` 属性。[#43@rc-tree-select](https://github.com/react-component/tree-select/pull/43)
* 修复了文字溢出换行问题。[#42@rc-tree-select](https://github.com/react-component/tree-select/pull/42)
* 新增 less 变量: `@border-style-base` `@border-width-base` `@btn-danger-color` `@btn-danger-bg` 等。
* 修复了 Badge 在页面放大时错位的问题。[#4747](https://github.com/ant-design/ant-design/issues/4747) [#4290](https://github.com/ant-design/ant-design/issues/4290)
## 2.6.4

14
components/badge/ScrollNumber.tsx
View File

@ -19,7 +19,6 @@ export interface ScrollNumberProps {
count?: string | number;
component?: string;
onAnimated?: Function;
height?: number;
style?: React.CSSProperties;
}
@ -29,7 +28,6 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
count: null,
onAnimated() {
},
height: 18,
};
lastCount: any;
@ -105,16 +103,14 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
renderCurrentNumber(num, i) {
const position = this.getPositionByNum(num, i);
const height = this.props.height;
const removeTransition = this.state.animateStarted ||
(getNumberArray(this.lastCount)[i] === undefined);
return createElement('span', {
className: `${this.props.prefixCls}-only`,
style: {
transition: removeTransition && 'none',
WebkitTransform: `translateY(${-position * height}px)`,
transform: `translateY(${-position * height}px)`,
height,
WebkitTransform: `translateY(${-position * 100}%)`,
transform: `translateY(${-position * 100}%)`,
},
key: i,
}, this.renderNumberList(position));
@ -139,6 +135,12 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
]), {
className: `${this.props.prefixCls} ${this.props.className}`,
});
// allow specify the border
// mock border-color by box-shadow for compatible with old usage:
// <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
if (props.style && props.style.borderColor) {
props.style.boxShadow = `0 0 0 1px ${props.style.borderColor}`;
}
return createElement(
this.props.component || 'sup',
props,

53
components/badge/__tests__/__snapshots__/demo.test.js.snap
View File

@ -7,11 +7,10 @@ exports[`test renders ./components/badge/demo/basic.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
<p
class="">
0
@ -148,11 +147,10 @@ exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
<p
class="">
0
@ -301,8 +299,7 @@ exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
height="18" />
data-show="true" />
</span>
<span
class="ant-switch"
@ -322,8 +319,7 @@ exports[`test renders ./components/badge/demo/dot.md correctly 1`] = `
class="anticon anticon-notification" />
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
height="18" />
data-show="true" />
</span>
<span
class="ant-badge">
@ -333,8 +329,7 @@ exports[`test renders ./components/badge/demo/dot.md correctly 1`] = `
</a>
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
height="18" />
data-show="true" />
</span>
</div>
`;
@ -349,11 +344,10 @@ exports[`test renders ./components/badge/demo/link.md correctly 1`] = `
class="head-example" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
<p
class="">
0
@ -487,11 +481,10 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
title="25">
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-216px);transform:translateY(-216px);height:18px;">
style="transition:none;-webkit-transform:translateY(-1200%);transform:translateY(-1200%);">
<p
class="">
0
@ -615,7 +608,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
</span>
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
<p
class="">
0
@ -745,11 +738,10 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18"
style="background-color:#fff;color:#999;border-color:#d9d9d9;">
style="background-color:#fff;color:#999;box-shadow:0 0 0 1px #d9d9d9 inset;">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-252px);transform:translateY(-252px);height:18px;">
style="transition:none;-webkit-transform:translateY(-1400%);transform:translateY(-1400%);">
<p
class="">
0
@ -879,7 +871,6 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18"
style="background-color:#87d068;">
99+
</sup>
@ -897,11 +888,10 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
style="transition:none;-webkit-transform:translateY(-1900%);transform:translateY(-1900%);">
<p
class="">
0
@ -1025,7 +1015,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
</span>
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
style="transition:none;-webkit-transform:translateY(-1900%);transform:translateY(-1900%);">
<p
class="">
0
@ -1157,8 +1147,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
99+
</sup>
</span>
@ -1170,8 +1159,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
10+
</sup>
</span>
@ -1183,8 +1171,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
999+
</sup>
</span>

2
components/badge/demo/no-wrapper.md
View File

@ -20,7 +20,7 @@ import { Badge } from 'antd';
ReactDOM.render(<div>
<Badge count={25} />
<Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
<Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
<Badge count={109} style={{ backgroundColor: '#87d068' }} />
</div>, mountNode);
````

21
components/badge/style/index.less
View File

@ -12,14 +12,13 @@
&-count {
position: absolute;
transform: translateX(-50%);
top: -10px;
height: 20px;
border-radius: 10px;
min-width: 20px;
top: -@badge-height / 2;
height: @badge-height;
border-radius: @badge-height / 2;
min-width: @badge-height;
background: @highlight-color;
border: @border-width-base @border-style-base transparent;
color: #fff;
line-height: 18px;
line-height: @badge-height;
text-align: center;
padding: 0 6px;
font-size: @font-size-base;
@ -37,9 +36,9 @@
position: absolute;
transform: translateX(-50%);
transform-origin: 0px center;
top: -4px;
height: 8px;
width: 8px;
top: -@badge-dot-size / 2;
height: @badge-dot-size;
width: @badge-dot-size;
border-radius: 100%;
background: @highlight-color;
z-index: 10;
@ -113,6 +112,10 @@
&-only {
display: inline-block;
transition: transform .3s @ease-in-out;
height: @badge-height;
> p {
height: @badge-height;
}
}
// for IE8/9 display
&.not-support-css-animation &-only {

5
components/style/themes/default.less
View File

@ -246,3 +246,8 @@
@carousel-dot-width: 16px;
@carousel-dot-height: 3px;
@carousel-dot-active-width: 24px;
// Badge
// ---
@badge-height: 20px;
@badge-dot-size: 8px;