Mercurial > gemma
changeset 1503:b76b23b3df61
staging-area: added refresh button
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 05 Dec 2018 11:56:27 +0100 |
parents | 0abcc82ef976 |
children | ffd076dad319 |
files | client/src/components/map/contextbox/Staging.vue |
diffstat | 1 files changed, 26 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/contextbox/Staging.vue Wed Dec 05 11:21:22 2018 +0100 +++ b/client/src/components/map/contextbox/Staging.vue Wed Dec 05 11:56:27 2018 +0100 @@ -1,13 +1,13 @@ <template> - <div class="w-90"> + <div class="w-90 stagingcard"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> <font-awesome-icon + class="mr-2" icon="clipboard-check" - class="mr-2" ></font-awesome-icon> <translate>Staging Area</translate> </h6> - <table class="table mb-0"> + <table class="table"> <thead> <tr> <th><translate>Name</translate></th> @@ -20,7 +20,7 @@ </tr> </thead> <tbody v-if="filteredData.length"> - <tr v-for="data in filteredData" :key="data.id"> + <tr :key="data.id" v-for="data in filteredData"> <td> <a @click="zoomTo(data.id)" href="#">{{ data.summary.bottleneck @@ -32,26 +32,26 @@ <td>{{ data.user }}</td> <td> <button - @click="toggleApproval(data.id, $options.STATES.APPROVED)" :class="{ btn: true, 'btn-sm': true, 'btn-outline-success': needsApproval(data) || isRejected(data), 'btn-success': isApproved(data) }" + @click="toggleApproval(data.id, $options.STATES.APPROVED)" > <font-awesome-icon icon="check"></font-awesome-icon> </button> </td> <td> <button - @click="toggleApproval(data.id, $options.STATES.REJECTED)" :class="{ btn: true, 'btn-sm': true, 'btn-outline-danger': needsApproval(data) || isApproved(data), 'btn-danger': isRejected(data) }" + @click="toggleApproval(data.id, $options.STATES.REJECTED)" > <font-awesome-icon icon="times"></font-awesome-icon> </button> @@ -67,10 +67,13 @@ </tbody> </table> <div class="p-3" v-if="filteredData.length"> - <button @click="confirmReview" class="btn btn-info"> + <button @click="confirmReview" class="confirm-button btn btn-info"> <translate>Confirm</translate> </button> </div> + <div class="p-3"> + <button @click="loadData" class="refresh btn btn-dark">Refresh</button> + </div> </div> </template> @@ -199,6 +202,11 @@ </script> <style lang="scss" scoped> +.refresh { + position: absolute; + left: $offset; + bottom: $offset; +} .table th, td { font-size: 0.9rem; @@ -207,4 +215,15 @@ text-align: left; padding: 0.5rem !important; } + +.stagingcard { + position: relative; + min-height: 150px; +} + +.confirm-button { + position: absolute; + right: $offset; + bottom: $offset; +} </style>