github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update spin class

pull/165/head
tjz 2018-06-17 10:49:56 +08:00
parent ffef54ce3e
commit 53334ff491
7 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/list/__tests__/__snapshots__/demo.test.js.snap
View File

@ -153,7 +153,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
<div class="demo-loadmore-list ant-list ant-list-split ant-list-loading ant-list-something-after-last-item"> <div class="demo-loadmore-list ant-list ant-list-split ant-list-loading ant-list-something-after-last-item">
<div class="ant-spin-nested-loading"> <div class="ant-spin-nested-loading">
<div> <div>
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div> <div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
</div> </div>
<div class="ant-spin-container ant-spin-blur"> <div class="ant-spin-container ant-spin-blur">
<div style="min-height: 53;"></div> <div style="min-height: 53;"></div>

8
components/spin/Spin.jsx
View File

@ -84,8 +84,8 @@ export default {
}, },
render () { render () {
const { size, prefixCls, tip, wrapperClassName, ...restProps } = this.$props const { size, prefixCls, tip, wrapperClassName, ...restProps } = this.$props
const { notCssAnimationSupported, $slots, stateSpinning } = this const { notCssAnimationSupported, stateSpinning } = this
const dotClassName = `${prefixCls}-dot`
const spinClassName = { const spinClassName = {
[prefixCls]: true, [prefixCls]: true,
[`${prefixCls}-sm`]: size === 'small', [`${prefixCls}-sm`]: size === 'small',
@ -100,10 +100,10 @@ export default {
} }
let spinIndicator = null let spinIndicator = null
if (isValidElement(indicator)) { if (isValidElement(indicator)) {
spinIndicator = cloneElement(indicator, { class: `${prefixCls}-dot` }) spinIndicator = cloneElement(indicator, { class: dotClassName })
} }
spinIndicator = spinIndicator || ( spinIndicator = spinIndicator || (
<span class={`${prefixCls}-dot`}> <span class={`${dotClassName} ${prefixCls}-dot-spin`}>
<i /> <i />
<i /> <i />
<i /> <i />

12
components/spin/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2,7 +2,7 @@
exports[`renders ./components/spin/demo/basic.md correctly 1`] = ` exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
<div> <div>
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div> <div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
</div> </div>
`; `;
@ -29,7 +29,7 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
exports[`renders ./components/spin/demo/inside.md correctly 1`] = ` exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
<div class="example"> <div class="example">
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div> <div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
</div> </div>
`; `;
@ -48,9 +48,9 @@ exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
exports[`renders ./components/spin/demo/size.md correctly 1`] = ` exports[`renders ./components/spin/demo/size.md correctly 1`] = `
<div> <div>
<div class="ant-spin ant-spin-sm ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div> <div class="ant-spin ant-spin-sm ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div> <div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
<div class="ant-spin ant-spin-lg ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div> <div class="ant-spin ant-spin-lg ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
</div> </div>
`; `;
@ -58,7 +58,7 @@ exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
<div> <div>
<div class="ant-spin-nested-loading"> <div class="ant-spin-nested-loading">
<div> <div>
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span> <div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span>
<div class="ant-spin-text">Loading...</div> <div class="ant-spin-text">Loading...</div>
</div> </div>
</div> </div>

2
components/spin/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Spin should only affect the spin element when set style to a nested <Spin>xx</Spin> 1`] = ` exports[`Spin should only affect the spin element when set style to a nested <Spin>xx</Spin> 1`] = `
<span tag="div" class="ant-spin-nested-loading" style="background: red;"><div><div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div> <span tag="div" class="ant-spin-nested-loading" style="background: red;"><div><div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
</div> </div>
<div class="ant-spin-container ant-spin-blur"> <div class="ant-spin-container ant-spin-blur">
<div>content</div> <div>content</div>

25
components/spin/style/index.less
View File

@ -23,6 +23,7 @@
&-nested-loading { &-nested-loading {
position: relative; position: relative;
> div > .@{spin-prefix-cls} { > div > .@{spin-prefix-cls} {
display: block;
position: absolute; position: absolute;
height: 100%; height: 100%;
max-height: 320px; max-height: 320px;
@ -77,6 +78,8 @@
} }
&-blur { &-blur {
pointer-events: none;
user-select: none;
overflow: hidden; overflow: hidden;
opacity: 0.7; opacity: 0.7;
-webkit-filter: blur(0.5px); -webkit-filter: blur(0.5px);
@ -84,10 +87,7 @@
/* autoprefixer: off */ /* autoprefixer: off */
filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)"; filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)";
// workround for a strange style bug in safari:
// https://github.com/ant-design/ant-design/issues/4622
// have no clue why this works
-webkit-transform: translateZ(0);
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
@ -114,9 +114,10 @@
&-dot { &-dot {
position: relative; position: relative;
display: inline-block; display: inline-block;
font-size: @spin-dot-size;
.square(@spin-dot-size); .square(@spin-dot-size);
transform: rotate(45deg);
animation: antRotate 1.2s infinite linear;
i { i {
width: 9px; width: 9px;
height: 9px; height: 9px;
@ -148,12 +149,20 @@
animation-delay: 1.2s; animation-delay: 1.2s;
} }
} }
&-spin {
transform: rotate(45deg);
animation: antRotate 1.2s infinite linear;
}
} }
// Sizes // Sizes
// ------------------------------ // ------------------------------
// small // small
&-sm &-dot { &-sm &-dot {
font-size: @spin-dot-size-sm;
.square(@spin-dot-size-sm); .square(@spin-dot-size-sm);
i { i {
width: 6px; width: 6px;
@ -163,6 +172,8 @@
// large // large
&-lg &-dot { &-lg &-dot {
font-size: @spin-dot-size-lg;
.square(@spin-dot-size-lg); .square(@spin-dot-size-lg);
i { i {
width: 14px; width: 14px;
@ -193,4 +204,4 @@
to { to {
transform: rotate(405deg); transform: rotate(405deg);
} }
} }

2
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -4,7 +4,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
<div class="ant-table-wrapper"> <div class="ant-table-wrapper">
<div class="ant-spin-nested-loading ant-table-without-pagination ant-table-spin-holder"> <div class="ant-spin-nested-loading ant-table-without-pagination ant-table-spin-holder">
<div> <div>
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div> <div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
</div> </div>
<div class="ant-spin-container ant-spin-blur"> <div class="ant-spin-container ant-spin-blur">
<div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-empty"> <div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-empty">

2
components/table/__tests__/__snapshots__/empty.test.js.snap
View File

@ -112,7 +112,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
`; `;
exports[`Table renders empty table without emptyText when loading 1`] = ` exports[`Table renders empty table without emptyText when loading 1`] = `
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading ant-table-without-pagination ant-table-spin-holder"><div><div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div> <div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading ant-table-without-pagination ant-table-spin-holder"><div><div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
</div> </div>
<div class="ant-spin-container ant-spin-blur"> <div class="ant-spin-container ant-spin-blur">
<div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-empty"> <div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-empty">