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="ant-spin-nested-loading">
<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 class="ant-spin-container ant-spin-blur">
<div style="min-height: 53;"></div>

8
components/spin/Spin.jsx
View File

@ -84,8 +84,8 @@ export default {
},
render () {
const { size, prefixCls, tip, wrapperClassName, ...restProps } = this.$props
const { notCssAnimationSupported, $slots, stateSpinning } = this
const { notCssAnimationSupported, stateSpinning } = this
const dotClassName = `${prefixCls}-dot`
const spinClassName = {
[prefixCls]: true,
[`${prefixCls}-sm`]: size === 'small',
@ -100,10 +100,10 @@ export default {
}
let spinIndicator = null
if (isValidElement(indicator)) {
spinIndicator = cloneElement(indicator, { class: `${prefixCls}-dot` })
spinIndicator = cloneElement(indicator, { class: dotClassName })
}
spinIndicator = spinIndicator || (
<span class={`${prefixCls}-dot`}>
<span class={`${dotClassName} ${prefixCls}-dot-spin`}>
<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`] = `
<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>
`;
@ -29,7 +29,7 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
<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>
`;
@ -48,9 +48,9 @@ exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
exports[`renders ./components/spin/demo/size.md correctly 1`] = `
<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-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"><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 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 ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
</div>
`;
@ -58,7 +58,7 @@ exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
<div>
<div class="ant-spin-nested-loading">
<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>
</div>

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

@ -1,7 +1,7 @@
// 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`] = `
<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 class="ant-spin-container ant-spin-blur">
<div>content</div>

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

@ -23,6 +23,7 @@
&-nested-loading {
position: relative;
> div > .@{spin-prefix-cls} {
display: block;
position: absolute;
height: 100%;
max-height: 320px;
@ -77,6 +78,8 @@
}
&-blur {
pointer-events: none;
user-select: none;
overflow: hidden;
opacity: 0.7;
-webkit-filter: blur(0.5px);
@ -84,10 +87,7 @@
/* autoprefixer: off */
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 {
content: '';
position: absolute;
@ -114,9 +114,10 @@
&-dot {
position: relative;
display: inline-block;
font-size: @spin-dot-size;
.square(@spin-dot-size);
transform: rotate(45deg);
animation: antRotate 1.2s infinite linear;
i {
width: 9px;
height: 9px;
@ -148,12 +149,20 @@
animation-delay: 1.2s;
}
}
&-spin {
transform: rotate(45deg);
animation: antRotate 1.2s infinite linear;
}
}
// Sizes
// ------------------------------
// small
&-sm &-dot {
font-size: @spin-dot-size-sm;
.square(@spin-dot-size-sm);
i {
width: 6px;
@ -163,6 +172,8 @@
// large
&-lg &-dot {
font-size: @spin-dot-size-lg;
.square(@spin-dot-size-lg);
i {
width: 14px;
@ -193,4 +204,4 @@
to {
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-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-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 class="ant-spin-container ant-spin-blur">
<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`] = `
<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 class="ant-spin-container ant-spin-blur">
<div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-empty">