Browse Source

refactor & shorten the 'copied' message display logic

kb/add-usage-guide
Trent Larson 2 years ago
parent
commit
d7d53a5b8c
  1. 67
      src/views/AccountViewView.vue

67
src/views/AccountViewView.vue

@ -91,16 +91,13 @@
<code class="truncate">{{ activeDid }}</code> <code class="truncate">{{ activeDid }}</code>
<button <button
@click=" @click="
copyText($event, activeDid, 'did'); doCopyTwoSecRedo(activeDid, () => (showDidCopy = !showDidCopy))
did = !did;
st(function () {
did = !did;
});
" "
class="ml-2" class="ml-2"
> >
<fa icon="copy" class="text-slate-400 fa-fw"></fa> <fa icon="copy" class="text-slate-400 fa-fw"></fa>
</button> </button>
<span v-show="showDidCopy">Copied!</span>
<span class="whitespace-nowrap ml-4"> <span class="whitespace-nowrap ml-4">
<button <button
class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md" class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
@ -113,7 +110,6 @@
<fa icon="qrcode" class="fa-fw"></fa> <fa icon="qrcode" class="fa-fw"></fa>
</button> </button>
</span> </span>
<span v-show="did">Copied!</span>
</div> </div>
<div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div> <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
@ -121,14 +117,13 @@
<code class="truncate">{{ publicBase64 }}</code> <code class="truncate">{{ publicBase64 }}</code>
<button <button
@click=" @click="
copyText($event, publicBase64, 'base64'); doCopyTwoSecRedo(publicBase64, () => (showB64Copy = !showB64Copy))
base64 = !base64;
" "
class="ml-2" class="ml-2"
> >
<fa icon="copy" class="text-slate-400 fa-fw"></fa> <fa icon="copy" class="text-slate-400 fa-fw"></fa>
</button> </button>
<span v-show="base64">Copied!</span> <span v-show="showB64Copy">Copied!</span>
</div> </div>
<div class="text-slate-500 text-sm font-bold">Public Key (hex)</div> <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
@ -136,14 +131,13 @@
<code class="truncate">{{ publicHex }}</code> <code class="truncate">{{ publicHex }}</code>
<button <button
@click=" @click="
copyText($event, publicHex, 'pubhex'); doCopyTwoSecRedo(publicHex, () => (showPubCopy = !showPubCopy))
pubhex = !pubhex;
" "
class="ml-2" class="ml-2"
> >
<fa icon="copy" class="text-slate-400 fa-fw"></fa> <fa icon="copy" class="text-slate-400 fa-fw"></fa>
</button> </button>
<span v-show="pubhex">Copied!</span> <span v-show="showPubCopy">Copied!</span>
</div> </div>
<div class="text-slate-500 text-sm font-bold">Derivation Path</div> <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
@ -151,18 +145,13 @@
<code class="truncate">{{ derivationPath }}</code> <code class="truncate">{{ derivationPath }}</code>
<button <button
@click=" @click="
derpath = true; doCopyTwoSecRedo(derivationPath, () => (showDerCopy = !showDerCopy))
copy(derivationPath).then(() => {
st(function () {
derpath = !derpath;
});
});
" "
class="ml-2" class="ml-2"
> >
<fa icon="copy" class="text-slate-400 fa-fw"></fa> <fa icon="copy" class="text-slate-400 fa-fw"></fa>
</button> </button>
<span v-show="derpath">Copied!</span> <span v-show="showDerCopy">Copied!</span>
</div> </div>
</div> </div>
@ -323,37 +312,19 @@ export default class AccountViewView extends Vue {
limits: RateLimits | null = null; limits: RateLimits | null = null;
showContactGives = false; showContactGives = false;
did = false; showDidCopy = false;
derpath = false; showDerCopy = false;
base64 = false; showB64Copy = false;
pubhex = false; showPubCopy = false;
copy = useClipboard().copy; // call fn, copy text to the clipboard, then redo fn after 2 seconds
text = useClipboard().text; doCopyTwoSecRedo(text, fn) {
fn();
showCopyMessage() { useClipboard()
this.did = true; .copy(text)
.then(() => setTimeout(fn, 2000));
} }
st(f) {
setTimeout(f, 2000);
}
copyText = (e: MouseEvent, inputText: string, loc: string) => {
console.log(this);
console.log(e, inputText);
this.copy(inputText).then(() => {
if (loc == "did") {
this.showCopyMessage();
console.log(this);
} else if (loc == "base64") {
this.base64 = true;
} else if (loc == "pubhex") {
this.pubhex = true;
}
});
};
handleChange() { handleChange() {
this.showContactGives = !this.showContactGives; this.showContactGives = !this.showContactGives;
this.updateShowContactAmounts(); this.updateShowContactAmounts();

Loading…
Cancel
Save