Mercurial > gemma
changeset 2632:0b14de0bb85f
client: importoverview2: moved refresh button to box header, added loading animation like in other boxes
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Wed, 13 Mar 2019 17:13:15 +0100 |
| parents | 7a0e468d3832 |
| children | eb1d119f253f |
| files | client/src/components/importoverview/ImportOverviewAlt.vue |
| diffstat | 1 files changed, 37 insertions(+), 19 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/importoverview/ImportOverviewAlt.vue Wed Mar 13 17:11:25 2019 +0100 +++ b/client/src/components/importoverview/ImportOverviewAlt.vue Wed Mar 13 17:13:15 2019 +0100 @@ -4,32 +4,50 @@ icon="clipboard-check" title="Staging Area" :closeCallback="$parent.close" + :actions="[{ callback: loadLogs, icon: 'redo' }]" /> - <div class="p-2 d-flex flex-row flex-fill justify-content-between"> - <Filters></Filters> - <div> - <button class="btn btn-sm btn-info mr-1" @click="loadLogs()"> - <font-awesome-icon icon="spinner" spin v-if="loading" /> - <font-awesome-icon icon="redo" v-else /> - </button> - <button - class="btn btn-sm btn-info" - :disabled="!reviewed.length" - @click="save" + <div class="position-relative"> + <transition name="fade"> + <div + class="loading d-flex justify-content-center align-items-center" + v-if="loading" > - <translate>Commit</translate> {{ reviewed.length }} - </button> + <font-awesome-icon icon="spinner" spin /> + </div> + </transition> + <div class="p-2 d-flex flex-row flex-fill justify-content-between"> + <Filters></Filters> + <div> + <button + class="btn btn-sm btn-info" + :disabled="!reviewed.length" + @click="save" + > + <translate>Commit</translate> {{ reviewed.length }} + </button> + </div> </div> + <LogEntry + class="border-top d-flex-flex-column w-100" + :entry="entry" + v-for="entry in imports" + :key="entry.id" + ></LogEntry> </div> - <LogEntry - class="border-top d-flex-flex-column w-100" - :entry="entry" - v-for="entry in imports" - :key="entry.id" - ></LogEntry> </div> </template> +<style lang="sass" scoped> +.loading + background: rgba(255, 255, 255, 0.9) + position: absolute + z-index: 99 + top: 0 + right: 0 + bottom: 0 + left: 0 +</style> + <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details.