Set loading spinner when moving a list
This commit is contained in:
parent
088c615eb7
commit
63a6b3f180
|
@ -89,7 +89,13 @@
|
||||||
>
|
>
|
||||||
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
|
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
|
||||||
<!-- eslint-disable vue/no-use-v-if-with-v-for,vue/no-confusing-v-for-v-if -->
|
<!-- eslint-disable vue/no-use-v-if-with-v-for,vue/no-confusing-v-for-v-if -->
|
||||||
<li v-for="l in n.lists" :key="l.id" v-if="!l.isArchived">
|
<li
|
||||||
|
v-for="l in n.lists"
|
||||||
|
:key="l.id"
|
||||||
|
v-if="!l.isArchived"
|
||||||
|
class="loader-container"
|
||||||
|
:class="{'is-loading': listUpdating[l.id]}"
|
||||||
|
>
|
||||||
<router-link
|
<router-link
|
||||||
class="list-menu-link"
|
class="list-menu-link"
|
||||||
:class="{'router-link-exact-active': currentList.id === l.id}"
|
:class="{'router-link-exact-active': currentList.id === l.id}"
|
||||||
|
@ -117,7 +123,7 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
<list-settings-dropdown :list="l" v-if="l.id > 0"/>
|
<list-settings-dropdown :list="l" v-if="l.id > 0"/>
|
||||||
<span class="list-setting-spacer" v-else></span>
|
<span class="list-setting-spacer" v-else></span>
|
||||||
</li>
|
</li>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
</draggable>
|
</draggable>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -148,6 +154,7 @@ export default {
|
||||||
animation: 100,
|
animation: 100,
|
||||||
ghostClass: 'ghost',
|
ghostClass: 'ghost',
|
||||||
},
|
},
|
||||||
|
listUpdating: {},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
@ -204,6 +211,7 @@ export default {
|
||||||
const list = listsFiltered[e.newIndex]
|
const list = listsFiltered[e.newIndex]
|
||||||
const listBefore = listsFiltered[e.newIndex - 1] ?? null
|
const listBefore = listsFiltered[e.newIndex - 1] ?? null
|
||||||
const listAfter = listsFiltered[e.newIndex + 1] ?? null
|
const listAfter = listsFiltered[e.newIndex + 1] ?? null
|
||||||
|
this.$set(this.listUpdating, list.id, true)
|
||||||
|
|
||||||
list.position = calculateItemPosition(listBefore !== null ? listBefore.position : null, listAfter !== null ? listAfter.position : null)
|
list.position = calculateItemPosition(listBefore !== null ? listBefore.position : null, listAfter !== null ? listAfter.position : null)
|
||||||
|
|
||||||
|
@ -211,6 +219,9 @@ export default {
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
this.error(e)
|
this.error(e)
|
||||||
})
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.$set(this.listUpdating, list.id, false)
|
||||||
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -238,6 +238,14 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.loader-container.is-loading:after {
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
top: calc(50% - .75rem);
|
||||||
|
left: calc(50% - .75rem);
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-list-move {
|
.flip-list-move {
|
||||||
|
|
Reference in New Issue