local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Make sure the loading spinner is always visible at the end of the page

Browse source
This commit is contained in:
kolaente 2021-01-14 22:19:28 +01:00
parent 526eee361f
commit 55b9b68258
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 19 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/input/multiselect.vue
View file

@ -4,18 +4,19 @@
:class="{'has-search-results': searchResultsVisible}" :class="{'has-search-results': searchResultsVisible}"
ref="multiselectRoot" ref="multiselectRoot"
> >
<div class="input-wrapper input" :class="{'has-multiple': multiple && Array.isArray(internalValue) && internalValue.length > 0}"> <div class="control" :class="{'is-loading': loading || localLoading}">
<template v-if="Array.isArray(internalValue)"> <div class="input-wrapper input" :class="{'has-multiple': multiple && Array.isArray(internalValue) && internalValue.length > 0}">
<template v-for="(item, key) in internalValue"> <template v-if="Array.isArray(internalValue)">
<slot name="tag" :item="item"> <template v-for="(item, key) in internalValue">
<slot name="tag" :item="item">
<span :key="`item${key}`" class="tag ml-2 mt-2"> <span :key="`item${key}`" class="tag ml-2 mt-2">
{{ label !== '' ? item[label] : item }} {{ label !== '' ? item[label] : item }}
<a @click="() => remove(item)" class="delete is-small"></a> <a @click="() => remove(item)" class="delete is-small"></a>
</span> </span>
</slot> </slot>
</template>
</template> </template>
</template>
<div class="input-loader-wrapper">
<input <input
type="text" type="text"
class="input" class="input"
@ -27,7 +28,6 @@
ref="searchInput" ref="searchInput"
@focus="() => showSearchResults = true" @focus="() => showSearchResults = true"
/> />
<span class="loader is-loading" v-if="loading || localLoading"></span>
</div> </div>
</div> </div>

21
src/styles/components/base/multiselect.scss
View file

@ -2,6 +2,10 @@
width: 100%; width: 100%;
position: relative; position: relative;
.control.is-loading::after {
top: .75rem;
}
&.has-search-results .input-wrapper { &.has-search-results .input-wrapper {
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
border-color: $primary !important; border-color: $primary !important;
@ -23,24 +27,21 @@
border-color: $grey-light !important; border-color: $grey-light !important;
} }
.input-loader-wrapper { .input {
display: flex; display: flex;
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
align-items: center; align-items: center;
border: none !important;
background: transparent;
height: auto;
.input { &::placeholder {
border: none !important; font-style: normal !important;
background: transparent;
height: auto;
&::placeholder {
font-style: normal !important;
}
} }
} }
&.has-multiple .input-loader-wrapper { &.has-multiple .input {
max-width: 250px; max-width: 250px;
input { input {