Browse Source

Merge branch 'master' into 3d-world

kb/add-usage-guide
anomalist 2 years ago
parent
commit
0fed104be1
  1. 42
      src/components/InfiniteScroll.vue
  2. 46
      src/views/AccountViewView.vue

42
src/components/InfiniteScroll.vue

@ -0,0 +1,42 @@
<template>
<div ref="scrollContainer">
<slot />
<div ref="sentinel" style="height: 1px"></div>
</div>
</template>
<script lang="ts">
import { Component, Emit, Prop, Vue } from "vue-facing-decorator";
@Component
export default class InfiniteScroll extends Vue {
@Prop({ default: 100 })
readonly distance!: number;
private observer!: IntersectionObserver;
mounted() {
const options = {
root: this.$refs.scrollContainer as HTMLElement,
rootMargin: `0px 0px ${this.distance}px 0px`,
threshold: 1.0,
};
this.observer = new IntersectionObserver(this.handleIntersection, options);
this.observer.observe(this.$refs.sentinel as HTMLElement);
}
beforeUnmount() {
this.observer.disconnect();
}
@Emit("reached-bottom")
handleIntersection(entries: IntersectionObserverEntry[]) {
const entry = entries[0];
if (entry.isIntersecting) {
return true;
}
return false;
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

46
src/views/AccountViewView.vue

@ -89,9 +89,15 @@
<div class="text-slate-500 text-sm font-bold">ID</div> <div class="text-slate-500 text-sm font-bold">ID</div>
<div class="text-sm text-slate-500 flex justify-start items-center mb-1"> <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
<code class="truncate">{{ activeDid }}</code> <code class="truncate">{{ activeDid }}</code>
<button @click="copy(activeDid)" class="ml-2"> <button
@click="
doCopyTwoSecRedo(activeDid, () => (showDidCopy = !showDidCopy))
"
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"
@ -109,25 +115,43 @@
<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>
<div class="text-sm text-slate-500 flex justify-start items-center mb-1"> <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
<code class="truncate">{{ publicBase64 }}</code> <code class="truncate">{{ publicBase64 }}</code>
<button @click="copy(publicBase64)" class="ml-2"> <button
@click="
doCopyTwoSecRedo(publicBase64, () => (showB64Copy = !showB64Copy))
"
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="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>
<div class="text-sm text-slate-500 flex justify-start items-center mb-1"> <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
<code class="truncate">{{ publicHex }}</code> <code class="truncate">{{ publicHex }}</code>
<button @click="copy(publicHex)" class="ml-2"> <button
@click="
doCopyTwoSecRedo(publicHex, () => (showPubCopy = !showPubCopy))
"
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="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>
<div class="text-sm text-slate-500 flex justify-start items-center mb-1"> <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
<code class="truncate">{{ derivationPath }}</code> <code class="truncate">{{ derivationPath }}</code>
<button @click="copy(derivationPath)" class="ml-2"> <button
@click="
doCopyTwoSecRedo(derivationPath, () => (showDerCopy = !showDerCopy))
"
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="showDerCopy">Copied!</span>
</div> </div>
</div> </div>
@ -299,7 +323,18 @@ export default class AccountViewView extends Vue {
limits: RateLimits | null = null; limits: RateLimits | null = null;
showContactGives = false; showContactGives = false;
copy = useClipboard().copy; showDidCopy = false;
showDerCopy = false;
showB64Copy = false;
showPubCopy = false;
// call fn, copy text to the clipboard, then redo fn after 2 seconds
doCopyTwoSecRedo(text, fn) {
fn();
useClipboard()
.copy(text)
.then(() => setTimeout(fn, 2000));
}
handleChange() { handleChange() {
this.showContactGives = !this.showContactGives; this.showContactGives = !this.showContactGives;
@ -317,7 +352,6 @@ export default class AccountViewView extends Vue {
// assign this to a class variable, eg. "registerThisUser = testServerRegisterUser", // assign this to a class variable, eg. "registerThisUser = testServerRegisterUser",
// select a component in the extension, and enter in the console: $vm.ctx.registerThisUser() // select a component in the extension, and enter in the console: $vm.ctx.registerThisUser()
//testServerRegisterUser(); //testServerRegisterUser();
try { try {
await db.open(); await db.open();
const settings = await db.settings.get(MASTER_SETTINGS_KEY); const settings = await db.settings.get(MASTER_SETTINGS_KEY);

Loading…
Cancel
Save