fix mobile + added copy to clip by line

telosnetwork · May 29, 2024 · bd3c5cf · bd3c5cf
1 parent f900c42
commit bd3c5cf
Showing 1 changed file with 25 additions and 3 deletions.
diff --git a/src/components/Transaction/TransactionInputViewer.vue b/src/components/Transaction/TransactionInputViewer.vue
@@ -128,6 +128,14 @@ onMounted(() => {
     initView();
 });
 
+const copied = ref(false);
+const copyToClipboard = (row_value: string) => {
+    navigator.clipboard.writeText(row_value);
+    copied.value = true;
+    setTimeout(() => {
+        copied.value = false;
+    }, 2000);
+};
 
 </script>
 
@@ -192,11 +200,19 @@ onMounted(() => {
                         <q-td key="type" :props="props" class="c-transaction-input-viewer__table-cell">
                             {{  props.row ? props.row.type : '' }}
                         </q-td>
-                        <q-td key="value" :props="props" class="c-transaction-input-viewer__table-cell c-transaction-input-viewer__table-cell--value">
+                        <q-td
+                            key="value"
+                            :props="props"
+                            class="c-transaction-input-viewer__table-cell c-transaction-input-viewer__table-cell--value"
+                            @click="copyToClipboard(props.row.value)"
+                        >
                             <div class="c-transaction-input-viewer__table-cell-value">
                                 {{  props.row ? props.row.value : '' }}
-                                <q-tooltip>{{  props.row ? props.row.value : '' }}</q-tooltip>
                             </div>
+                            <q-tooltip>
+                                <q-icon v-if="copied" class="fas fa-check" />
+                                {{ copied ? $t('components.copied') : $t('components.copy_to_clipboard') }}
+                            </q-tooltip>
                         </q-td>
                     </q-tr>
                 </template>
@@ -242,8 +258,14 @@ onMounted(() => {
         }
 
         &-cell {
+            &--value {
+                cursor: pointer;
+            }
             &-value {
-                white-space: normal;
+                // solamente para resoluciones desktop
+                @media (min-width: 1024px) {
+                    white-space: normal;
+                }
             }
         }
         &-header-cell {