show border left instead of icon

baking-bad · Jan 18, 2021 · d8c2cfa · d8c2cfa
1 parent 21ab451
commit d8c2cfa
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 59 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -118,4 +118,20 @@ input:-webkit-autofill:active  {
   -webkit-box-shadow: 0 0 0 30px var(--v-data-base) inset !important;
   -webkit-text-fill-color: var(--v-text-base) !important;
 }
+
+.item-header-applied {
+  border-left: 3px solid var(--v-success-base);
+}
+
+.item-header-backtracked {
+  border-left: 3px solid var(--v-warning-base);
+}
+
+.item-header-failed {
+  border-left: 3px solid var(--v-error-base);
+}
+
+.item-header-mempool {
+  border-left: 3px solid var(--v-border-base);
+}
 </style>
diff --git a/src/utils/styles.js b/src/utils/styles.js
@@ -30,4 +30,11 @@ export function applyStyles(node) {
     if (node.items) {
         applyStyles(node.items);
     }
+}
+
+export function getContentItemHeaderClass(status) {
+    if (status === "skipped" || status === "backtracked") return "item-header-backtracked";
+    if (status === "pending" || status === "lost") return "item-header-mempool";
+    if (status !== "applied") return "item-header-failed";
+    return `item-header-${status}`;
 }
diff --git a/src/views/contract/ContentItem.vue b/src/views/contract/ContentItem.vue
@@ -128,7 +128,7 @@
 
 <script>
 import InternalOperation from "@/components/InternalOperation.vue";
-
+import { getContentItemHeaderClass } from '@/utils/styles';
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 
@@ -190,12 +190,7 @@ export default {
       return null;
     },
     statusHeaderClass() {
-      if (this.value.status === "skipped") return "backtracked";
-      if (this.value.status === "backtracked") return "backtracked";
-      if (this.value.status === "pending") return "mempool";
-      if (this.value.status === "lost") return "mempool";
-      if (this.value.status !== "applied") return "failed";
-      return this.value.status;
+      return getContentItemHeaderClass(this.value.status);
     },
     totalLockedWithdrawn() {
       return this.getTotalAmount(1) - this.getTotalAmount(-1);
@@ -273,22 +268,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.applied {
-  border-left: 3px solid var(--v-success-base);
-}
-
-.backtracked {
-  border-left: 3px solid var(--v-warning-base);
-}
-
-.failed {
-  border-left: 3px solid var(--v-error-base);
-}
-
-.mempool {
-  border-left: 3px solid var(--v-border-base);
-}
-
 .op-panel {
   background-color: var(--v-data-base) !important;
 }

diff --git a/src/views/contract/TransferList.vue b/src/views/contract/TransferList.vue
@@ -70,13 +70,8 @@
     <v-card flat outlined v-if="items.length > 0">
       <v-list class="py-0 item">
         <template v-for="(item, id) in items">
-          <v-list-item :key="id">
+          <v-list-item class="item__list-item" :class="statusHeaderClass(item.status)" :key="id">
             <v-row>
-              <v-col cols="1" class="d-flex align-center justify-center">
-                <v-icon :color="getStatusColor(item.status)">{{
-                  getIcon(item.status)
-                }}</v-icon>
-              </v-col>
               <v-col cols="2" class="d-flex align-center">
                 <span class="body-2 text--secondary">{{
                   helpers.formatDatetime(item.timestamp)
@@ -182,6 +177,7 @@
 import { mapActions } from "vuex";
 
 import EmptyState from "@/components/EmptyState.vue";
+import {getContentItemHeaderClass} from "@/utils/styles";
 
 export default {
   name: "TransferList",
@@ -208,6 +204,9 @@ export default {
     ...mapActions({
       showError: "showError",
     }),
+    statusHeaderClass(status) {
+      return getContentItemHeaderClass(status);
+    },
     getNextPage() {
       if (!this.token) return;
       if (this.downloaded || this.loading) return;
@@ -257,14 +256,6 @@ export default {
           .finally(() => (this.loading = false));
       }
     },
-    getIcon(status) {
-      if (status === "applied") {
-        return "mdi-check";
-      } else if (status === "failed") {
-        return "mdi-close";
-      }
-      return "mdi-information-outline";
-    },
     getStatusColor(status) {
       if (status === "applied") {
         return "primary";
@@ -294,7 +285,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .item {
   background-color: var(--v-canvas-base);
   opacity: 0.8;

diff --git a/src/views/contract/TransfersTab/TransfersCard.vue b/src/views/contract/TransfersTab/TransfersCard.vue
@@ -6,32 +6,20 @@
             <v-list-item :key="i" two-line>
               <v-list-item-content>
                 <v-list-item-title>
-                  <span v-if="item.name">{{ item.name }}</span>
-                  <span v-else-if="item.symbol">{{ item.symbol }}</span>
-                  <v-row v-else>
+                  <v-row>
                     <v-col class="pt-0 pb-0" cols="6">
                       <span v-html="helpers.shortcut(item.contract)"></span>
                     </v-col>
-                    <v-col class="text-right pt-0 pb-0" cols="6">
-                                            <span>{{
-                                                helpers
-                                                    .round(
-                                                        item.balance,
-                                                        item.decimals ? item.decimals : 0
-                                                    )
-                                                    .toLocaleString(undefined, {
-                                                      maximumFractionDigits: item.decimals
-                                                          ? item.decimals
-                                                          : 0,
-                                                    })
-                                              }}</span
-                                            >&nbsp;
+                    <v-col class="text-right pt-0 pb-0 item-amount" cols="6">
+                      <span class="item-amount__value" :title="getItemValue(item)">
+                        {{getItemValue(item)}}
+                      </span>&nbsp;
                       <span
-                          class="caption text-uppercase font-weight-regular text--disabled"
-                      >{{
+                          class="caption text-uppercase font-weight-regular text--disabled">
+                        {{
                           item.symbol ? item.symbol : item.token_id
-                        }}</span
-                      >
+                        }}
+                      </span>
                     </v-col>
                   </v-row>
                 </v-list-item-title>
@@ -71,6 +59,20 @@ export default {
       immediate: true
     }
   },
+  methods: {
+    getItemValue(item) {
+      return this.helpers
+          .round(
+              item.balance,
+              item.decimals ? item.decimals : 0
+          )
+          .toLocaleString(undefined, {
+            maximumFractionDigits: item.decimals
+                ? item.decimals
+                : 0,
+          })
+    }
+  },
   created() {
     this.selectedToken = this.defaultSelectedToken
   },
@@ -81,3 +83,20 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.item-amount {
+  padding-left: 2rem;
+  &__value {
+    display: inline-block;
+    width: 1.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    &:hover {
+      width: auto;
+      text-overflow: unset;
+    }
+  }
+}
+</style>