Merge branch 'feat/DV-275/events-display-format' into staging

src/components/EventCall.vue

@@ -1,23 +1,31 @@
 <template>
-  <div class="event-call" v-if="data">
-    <ul class="event">
-      <li class="event-name">{{ name }}
-        <template v-if="inputs">
-          <ul class="args" v-for="(arg, i) in inputs" :key="i">
-            <li class="type" :key="`1-${i}`" :style="{ color: PAGE_COLORS[$route.name].cl }">{{ arg.type }}</li>
-            <li class="index" v-if="arg.indexed">indexed</li>
-            <li class="name">{{ arg.name }}</li>
-          </ul>
-        </template>
-      </li>
-    </ul>
+  <div class="event-details-container">
+    <div class="event-details white-100" v-if="data">
+      <span>{{ name }}{{ space }}</span>
+      <span class="event-args">
+        <span>{{ openingParen }}</span>
+        <span class="event-arg" v-for="(arg, i) in inputs" :key="i">
+          <span class="orange-900">{{ arg.type }}{{ space }}</span>
+          <span class="white-400" v-if="arg.indexed">{{ indexed }}{{ space }}</span>
+          <span>{{ arg.name }}</span>
+          <span class="white-400" v-if="addComma(i, inputs)">{{ comma }}{{ space }}</span>
+        </span>
+        <span>{{ closingParen }}</span>
+      </span>
+    </div>
+    <copy-button :value="eventSignature" title="Copy event signature" css=""/>
   </div>
 </template>
 <script>
 import { PAGE_COLORS } from '../config/pageColors'
+import CopyButton from './controls/CopyButton'
+
 export default {
   name: 'event-call',
   props: ['data'],
+  components: {
+    CopyButton
+  },
   data () {
     return {
       PAGE_COLORS
@@ -29,62 +37,75 @@ export default {
     },
     inputs () {
       return this.data.inputs
+    },
+    eventSignature () {
+      const { name, inputs } = this
+      const eventName = `${name}`
+
+      const eventParams = inputs.map(input => {
+        const inputDetails = `${input.type} ${input.name}`
+        return input.indexed ? `${inputDetails} indexed` : inputDetails
+      })
+
+      return `${eventName} (${eventParams.join(', ').trim()})`
+    },
+    openingParen () {
+      return '\u0028'
+    },
+    closingParen () {
+      return '\u0029'
+    },
+    comma () {
+      return '\u002C'
+    },
+    space () {
+      return ' '
+    },
+    indexed () {
+      return 'indexed'
+    }
+  },
+  methods: {
+    addComma (index, list) {
+      return index < list.length - 1
     }
   }
 }
 </script>
-<style lang="stylus">
-
-  .event-call
-    margin 0
-    display flex
-    .index
-      font-size .8em
-
-    li.event-name
-      font-weight bold
-      color $info
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
 
-    ul
-      raw()
-      font-size .9em
-      list-style none
-      align-items flex-end
-      font-style italic
-      font-weight normal
-      margin 0
-      padding 0
-      flex-flow row wrap
-      li
-        color white
-
-    ul,li
-      margin 0 0.25em 0 0
-      display flex
+.event-details-container {
+  flex: 5;
+  text-transform: none;
+  display: flex;
+  gap: 20px;
+  justify-content: start;
+  align-items: center;
+}
 
-      &:last-child:after
-        font-weight bold
+.event-details {
+  display: inline;
 
-    .args
-      &::before
-        content '('
+}
 
-      &::after
-        content ')'
+.event-args {
+  display: inline;
+}
 
-      .type
-        color white
-        &:after
-          content ''
+.event-arg {
+  display: inline;
+}
 
-      .name
-        font-size 0.9em
-        // color green
+.white-400 {
+  color: $white_400;
+}
 
-        &:after
-          content ','
-          font-size 1em
+.white-100 {
+  color: $white_100;
+}
 
-        &:last-child:after
-          content none
+.orange-900 {
+  color: $orange_900;
+}
 </style>

src/components/controls/CopyButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="copy-button">
     <textarea v-if="value" :ref="refName" class="hidden-ctrl" v-model="value"></textarea>
-    <burp-button :icon="iconName" :message="message || 'copied!'" :title="title" :text="text" @click="copy" :class="css">
+    <burp-button :icon="iconName" :message="message || 'copied!'" :title="title" :text="text" @click="copy" :class="css || defaultStyle">
       <slot></slot>
     </burp-button>
   </div>
@@ -29,6 +29,9 @@ export default {
     targetNode () {
       const { refName, target } = this
       return (target) || this.$refs[refName]
+    },
+    defaultStyle () {
+      return 'white-400'
     }
   },
   methods: {
@@ -39,3 +42,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+
+.white-400 {
+  color: $white_400;
+}
+</style>