Mercurial > gemma

changeset 2621:78f75e99f9c5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>&nbsp; {{ 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>