TC-98 | Add ProposalComments component with tab filters

components/governance/ProposalComment.vue

@@ -2,39 +2,71 @@
   <div class="proposals-box">
     <div class="columns is-gapless">
       <div class="column proposals-box--tags">
-        <div
-          class="tag"
-          :class="{
-            'proposals-box--revote': revote,
-            'is-primary': support,
-            'is-danger': !support
-          }"
-        >
-          <span><number-format :value="votes" /> TORN</span>
+        <div class="proposals-box--tag-item">
+          <div class="tag proposals-box--id">
+            <span><number-format :value="votes" /> TORN</span>
+          </div>
         </div>
 
-        <b-tooltip v-if="delegator" :label="delegator" position="is-top">
-          <div class="tag proposals-box--id">{{ $t('delegated') }}</div>
-        </b-tooltip>
+        <div class="proposals-box--tag-item">
+          <b-tooltip
+            :label="ens.voter || voter"
+            position="is-top"
+            :multilined="ens.voter && ens.voter.length > 50"
+          >
+            <a
+              target="_blank"
+              :href="addressExplorerUrl(voter)"
+              rel="noopener noreferrer"
+              class="tag proposals-box--id is-link"
+              v-text="shortVoter"
+            />
+          </b-tooltip>
+        </div>
 
-        <b-tooltip :label="voter" position="is-top">
-          <div class="tag proposals-box--id">{{ shortVoter }}</div>
-        </b-tooltip>
-      </div>
-      <div class="column is-narrow proposals-box--date">
-        <div class="date">
-          <span>{{ $t('date') }}:</span> {{ date }}
+        <div v-if="delegator" class="proposals-box--tag-item">
+          <b-tooltip
+            :label="ens.delegator || delegator"
+            position="is-top"
+            :multilined="ens.delegator && ens.delegator.length > 50"
+          >
+            <a
+              target="_blank"
+              :href="addressExplorerUrl(delegator)"
+              rel="noopener noreferrer"
+              class="tag proposals-box--id is-link"
+              v-text="$t('delegate')"
+            />
+          </b-tooltip>
+        </div>
+
+        <div class="proposals-box--tag-item is-percentage">
+          <div class="tag proposals-box--id is-percentage">{{ percentage || '~0.1' }}%</div>
         </div>
       </div>
     </div>
 
-    <span v-if="contact" class="proposals-box--title">{{ contact }}</span>
-    <div v-if="message" class="proposals-box--info" v-text="message" />
+    <div class="proposals-box--comment">
+      <b-icon
+        :icon="support ? 'check' : 'close'"
+        :type="support ? 'is-primary' : 'is-danger'"
+        class="proposals-box--status-icon"
+      />
+      <span v-if="loading" class="proposals-box--skeleton">
+        <b-skeleton height="21" width="260" style="width: auto;" />
+      </span>
+      <template v-else>
+        <span v-if="contact" class="proposals-box--title">{{ contact }}</span>
+        <span v-if="message" class="proposals-box--info">{{ message }}</span>
+        <span v-if="!contact && !message">-</span>
+      </template>
+    </div>
   </div>
 </template>
 
 <script>
-import { sliceAddress } from '@/utils'
+import { mapGetters } from 'vuex'
+import { sliceAddress, sliceEnsName } from '@/utils'
 import NumberFormat from '@/components/NumberFormat'
 
 export default {
@@ -43,6 +75,10 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    loading: {
+      type: Boolean,
+      required: true
+    },
     contact: {
       type: String,
       required: true
@@ -55,10 +91,6 @@ export default {
       type: Boolean,
       required: true
     },
-    timestamp: {
-      type: Number,
-      required: true
-    },
     votes: {
       type: String,
       required: true
@@ -67,56 +99,105 @@ export default {
       type: String,
       required: true
     },
-    revote: {
-      type: Boolean,
+    percentage: {
+      type: Number,
       required: true
     },
     delegator: {
       type: String,
       default: ''
+    },
+    ens: {
+      type: Object,
+      required: true,
+      validator: (props) => 'delegator' in props && 'voter' in props
     }
   },
-  data: (vm) => ({
-    shortVoter: sliceAddress(vm.voter),
-    date: [vm.$moment.unix(vm.timestamp).format('l'), vm.$moment.unix(vm.timestamp).format('hh:mm')].join(' ')
-  })
+  computed: {
+    ...mapGetters('txHashKeeper', ['addressExplorerUrl']),
+
+    shortVoter() {
+      return sliceEnsName(this.ens.voter || '') || sliceAddress(this.voter)
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+$margin: 0.714rem;
+
 .proposals-box {
   cursor: default;
 
   .tag {
-    margin: 0;
     width: 100%;
+    margin: 0;
+
+    &.is-link {
+      text-decoration: none;
+      background-color: #363636;
+      transition: background-color 0.15s ease-in-out;
+
+      &:hover {
+        background-color: rgba(#363636, 0.5);
+      }
+    }
+
+    &.is-percentage {
+      padding: 0;
+      margin: 0;
+      background: transparent;
+      text-align: right;
+    }
+  }
+
+  .columns {
+    margin-bottom: 0;
   }
 
   &--tags {
     display: flex;
     flex-wrap: wrap;
-    grid-template-columns: repeat(auto-fill, minmax(100px, auto));
-    display: grid;
-    grid-row-gap: 0.714rem;
-    grid-column-gap: 0.714rem;
+    margin: calc(#{-$margin * 0.5}) !important;
   }
 
-  &--date {
-    display: flex;
-    align-items: center;
-  }
+  &--tag-item {
+    margin: calc(#{$margin * 0.5});
+    width: auto;
+    min-width: 110px;
 
-  &--title {
-    display: flex;
+    @media screen and (max-width: 600px) {
+      width: calc(50% - #{$margin});
+    }
+
+    & > * {
+      display: flex;
+      width: 100%;
+    }
+
+    &.is-percentage {
+      min-width: auto;
+      margin-left: auto;
+    }
   }
 
   &--title,
   &--info {
     word-break: break-word;
+    display: inline;
   }
 
-  &--revote {
-    text-decoration: line-through;
+  &--status-icon {
+    vertical-align: middle;
+    margin-bottom: 0.2rem;
+  }
+
+  &--comment {
+    margin-top: 1.5rem;
+  }
+
+  &--skeleton {
+    display: inline-block;
   }
 }
 </style>