Mercurial > gemma
changeset 2621:78f75e99f9c5
Merged.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Wed, 13 Mar 2019 15:21:00 +0100 |
parents | a8ebc785823d (current diff) eb1ec926ff97 (diff) |
children | 02505fcff63c |
files | |
diffstat | 3 files changed, 77 insertions(+), 100 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Wed Mar 13 15:20:19 2019 +0100 +++ b/client/src/assets/application.scss Wed Mar 13 15:21:00 2019 +0100 @@ -183,3 +183,9 @@ .empty { margin-right: 1.25rem; } + +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +}
--- a/client/src/components/importoverview/ImportOverviewAlt.vue Wed Mar 13 15:20:19 2019 +0100 +++ b/client/src/components/importoverview/ImportOverviewAlt.vue Wed Mar 13 15:21:00 2019 +0100 @@ -5,24 +5,24 @@ title="Staging Area" :closeCallback="$parent.close" /> - <div - class="ml-2 mt-2 d-flex flex-row flex-fill justify-content-between mr-2" - > + <div class="p-2 d-flex flex-row flex-fill justify-content-between"> <Filters></Filters> <div> - <button :class="commitStyle"> + <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"> <translate>Commit</translate> {{ reviewed.length }} </button> </div> </div> - <div class="ml-3 mr-2 mt-2 w-95 "> - <LogEntry - class="logentry border-bottom 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> @@ -50,23 +50,21 @@ Filters: () => import("./Filters.vue"), LogEntry: () => import("./LogEntry.vue") }, + data() { + return { + loading: false + }; + }, computed: { - ...mapState("imports", ["imports", "filters", "reviewed"]), - commitStyle() { - return { - btn: true, - "btn-sm": true, - "btn-light": this.reviewed.length == 0, - "btn-info": this.reviewed.length > 0 - }; - } + ...mapState("imports", ["imports", "filters", "reviewed"]) }, methods: { loadLogs() { + this.loading = true; this.$store .dispatch("imports/getImports") .then(() => { - this.reload = false; + this.loading = false; }) .catch(error => { const { status, data } = error.response; @@ -87,12 +85,3 @@ } }; </script> - -<style lang="scss" scoped> -.logentry { - font-size: 90%; -} -.logentry:hover { - background: #fafafa; -} -</style>
--- a/client/src/components/importoverview/LogEntry.vue Wed Mar 13 15:20:19 2019 +0100 +++ b/client/src/components/importoverview/LogEntry.vue Wed Mar 13 15:21:00 2019 +0100 @@ -1,29 +1,26 @@ <template> - <div> - <div class="d-flex flex-row text-left"> - <font-awesome-icon - v-if="entry.id === show" - @click="toggleDetails" - class="my-auto mr-1 text-info pointer" - icon="angle-down" - fixed-width - ></font-awesome-icon> - <font-awesome-icon - v-if="entry.id !== show" - @click="toggleDetails" - class="my-auto mr-1 text-info pointer" - icon="angle-right" - fixed-width - ></font-awesome-icon> - <div class="id"> - <span v-if="entry.id > 9">{{ entry.id }}</span> - <span v-else> {{ entry.id }}</span> + <div class="logentry"> + <div class="row no-gutters text-left"> + <div style="width: 4%;" class="text-center"> + <font-awesome-icon + @click="toggleDetails" + class="my-auto mr-1 text-info pointer" + :icon="entry.id === show ? 'angle-down' : 'angle-right'" + fixed-width + ></font-awesome-icon> </div> - <div class="kind">{{ entry.kind.toUpperCase() }}</div> - <div class="enqueued">{{ entry.enqueued | dateTime }}</div> - <div class="user">{{ entry.user }}</div> - <div class="signer">{{ entry.signer }}</div> - <div> + <div style="width: 7%; padding-right: 10px;" class="text-right"> + {{ entry.id }} + </div> + <div style="width: 8%;"> + {{ entry.kind.toUpperCase() }} + </div> + <div style="width: 22%;"> + {{ entry.enqueued | dateTime }} + </div> + <div style="width: 23%;" class="truncate">{{ entry.user }}</div> + <div style="width: 23%;" class="truncate">{{ entry.signer }}</div> + <div style="width: 6%;" class="text-center"> <font-awesome-icon v-if="entry.warnings" class="ml-1 text-warning" @@ -31,39 +28,24 @@ fixed-width ></font-awesome-icon> </div> - <div v-if="reviewable" class="controls d-flex flex-row ml-auto"> - <div> + <div style="width: 7%" class="text-right"> + <div v-if="entry.state === 'pending'"> <button - :class="{ - 'ml-3': true, - 'mr-3': true, - btn: true, - 'btn-outline-success': needsApproval || isRejected, - 'btn-success': isApproved, - actions: true - }" + :class="['actions approved', { active: isApproved }]" @click="toggleApproval($options.STATES.APPROVED)" > <font-awesome-icon - class="mx-auto small pointer mb-2" + class="small pointer" icon="check" ></font-awesome-icon> </button> - </div> - <div> <button - :class="{ - 'mr-3': true, - btn: true, - 'btn-outline-danger': needsApproval || isApproved, - 'btn-danger': isRejected, - actions: true - }" + :class="['actions rejected', { active: isRejected }]" @click="toggleApproval($options.STATES.REJECTED)" > <font-awesome-icon icon="times" - class="small pointer mb-2" + class="small pointer" ></font-awesome-icon> </button> </div> @@ -126,34 +108,34 @@ }, isApproved() { return this.entry.status === STATES.APPROVED; - }, - reviewable() { - return this.entry.state === "pending"; } }, STATES: STATES }; </script> -<style lang="scss" scoped> -.id { - width: 10%; -} -.kind { - width: 10%; -} -.enqueued { - width: 20%; -} -.user { - width: 10%; -} -.signer { - width: 10%; -} -button { - height: 19px; - width: 19px; - padding: 0.1rem; -} +<style lang="sass" scoped> +.logentry + font-size: 80% + &:hover + background: #fafafa + .actions + height: 100% + width: 22px + border: 0 + background: transparent + border-left: 1px solid #dee2e6 + outline: none + &.approved + color: green + &.active, + &:hover + color: white + background: green + &.rejected + color: red + &.active, + &:hover + color: white + background: red </style>