Browse Source

Added jdenticon to more views

jdenticon-entity-photos
Jose Olarte III 1 year ago
parent
commit
4b87692231
  1. 18
      src/views/ContactsView.vue
  2. 16
      src/views/DiscoverView.vue
  3. 25
      src/views/ProjectViewView.vue
  4. 12
      src/views/ProjectsView.vue

18
src/views/ContactsView.vue

@ -72,12 +72,17 @@
<!-- Results List --> <!-- Results List -->
<ul v-if="contacts.length > 0" class="border-t border-slate-300"> <ul v-if="contacts.length > 0" class="border-t border-slate-300">
<li <li
class="border-b border-slate-300 py-4" class="border-b border-slate-300 pt-2.5 pb-4"
v-for="contact in contacts" v-for="contact in contacts"
:key="contact.did" :key="contact.did"
> >
<div class="grow overflow-hidden"> <div class="grow overflow-hidden">
<h2 class="text-base font-semibold"> <h2 class="text-base font-semibold">
<EntityIcon
:entityId="contact.did"
:iconSize="24"
class="inline-block align-text-bottom border border-slate-300 rounded"
></EntityIcon>
{{ contact.name || "(no name)" }} {{ contact.name || "(no name)" }}
</h2> </h2>
<div class="text-sm truncate">{{ contact.did }}</div> <div class="text-sm truncate">{{ contact.did }}</div>
@ -137,7 +142,7 @@
<div v-if="!showGiveNumbers" class="ml-auto flex gap-1.5"> <div v-if="!showGiveNumbers" class="ml-auto flex gap-1.5">
<button <button
class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md" class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded-l-md"
@click="onClickAddGive(activeDid, contact.did)" @click="onClickAddGive(activeDid, contact.did)"
title="givenByMeDescriptions[contact.did]" title="givenByMeDescriptions[contact.did]"
> >
@ -152,11 +157,11 @@
: (givenByMeUnconfirmed[contact.did] || 0) : (givenByMeUnconfirmed[contact.did] || 0)
/* eslint-enable prettier/prettier */ /* eslint-enable prettier/prettier */
}} }}
<fa icon="plus" class="fa-fw" /> <fa icon="plus" />
</button> </button>
<button <button
class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md" class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded-r-md -ml-1.5 border-l border-blue-400"
@click="onClickAddGive(contact.did, activeDid)" @click="onClickAddGive(contact.did, activeDid)"
title="givenToMeDescriptions[contact.did]" title="givenToMeDescriptions[contact.did]"
> >
@ -171,7 +176,7 @@
: (givenToMeUnconfirmed[contact.did] || 0) : (givenToMeUnconfirmed[contact.did] || 0)
/* eslint-enable prettier/prettier */ /* eslint-enable prettier/prettier */
}} }}
<fa icon="plus" class="fa-fw" /> <fa icon="plus" />
</button> </button>
<router-link <router-link
@ -214,12 +219,13 @@ import {
import { Component, Vue } from "vue-facing-decorator"; import { Component, Vue } from "vue-facing-decorator";
import AlertMessage from "@/components/AlertMessage"; import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav"; import QuickNav from "@/components/QuickNav";
import EntityIcon from "@/components/EntityIcon";
// eslint-disable-next-line @typescript-eslint/no-var-requires // eslint-disable-next-line @typescript-eslint/no-var-requires
const Buffer = require("buffer/").Buffer; const Buffer = require("buffer/").Buffer;
@Component({ @Component({
components: { AlertMessage, QuickNav }, components: { AlertMessage, QuickNav, EntityIcon },
}) })
export default class ContactsView extends Vue { export default class ContactsView extends Vue {
activeDid = ""; activeDid = "";

16
src/views/DiscoverView.vue

@ -83,17 +83,18 @@
class="block py-4 flex gap-4" class="block py-4 flex gap-4"
> >
<div class="w-12"> <div class="w-12">
<img <EntityIcon
src="https://picsum.photos/200/200?random=1" :entityId="project.handleId"
class="w-full rounded" :iconSize="48"
/> class="block border border-slate-300 rounded-md"
></EntityIcon>
</div> </div>
<div class="grow"> <div class="grow">
<h2 class="text-base font-semibold">Canyon cleanup</h2> <h2 class="text-base font-semibold">{{ project.name }}</h2>
<div class="text-sm"> <div class="text-sm">
<fa icon="user" class="fa-fw text-slate-400"></fa> <fa icon="user" class="fa-fw text-slate-400"></fa>
{{ project.name }} (User)
</div> </div>
</div> </div>
</a> </a>
@ -116,9 +117,10 @@ import { accessToken } from "@/libs/crypto";
import AlertMessage from "@/components/AlertMessage"; import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav"; import QuickNav from "@/components/QuickNav";
import InfiniteScroll from "@/components/InfiniteScroll"; import InfiniteScroll from "@/components/InfiniteScroll";
import EntityIcon from "@/components/EntityIcon";
@Component({ @Component({
components: { AlertMessage, QuickNav, InfiniteScroll }, components: { AlertMessage, QuickNav, InfiniteScroll, EntityIcon },
}) })
export default class DiscoverView extends Vue { export default class DiscoverView extends Vue {
activeDid = ""; activeDid = "";

25
src/views/ProjectViewView.vue

@ -26,16 +26,28 @@
<!-- Project Details --> <!-- Project Details -->
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"> <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
<div> <div>
<div class="block pb-4 flex gap-4">
<div class="flex-none w-16 pt-1">
<EntityIcon
:entityId="projectId"
:iconSize="64"
class="block border border-slate-300 rounded-md"
></EntityIcon>
</div>
<div class="overflow-hidden">
<h2 class="text-xl font-semibold">{{ name }}</h2> <h2 class="text-xl font-semibold">{{ name }}</h2>
<div class="flex justify-between gap-4 text-sm mb-3"> <div class="text-sm mb-3">
<span <div class="truncate"
><fa icon="user" class="fa-fw text-slate-400"></fa> ><fa icon="user" class="fa-fw text-slate-400"></fa>
{{ issuer }}</span {{ issuer }}</div
> >
<span <div
><fa icon="calendar" class="fa-fw text-slate-400"></fa ><fa icon="calendar" class="fa-fw text-slate-400"></fa
>{{ timeSince }} >{{ timeSince }}
</span> </div>
</div>
</div>
</div> </div>
<div class="text-sm text-slate-500"> <div class="text-sm text-slate-500">
@ -173,9 +185,10 @@ import {
} from "@/libs/endorserServer"; } from "@/libs/endorserServer";
import AlertMessage from "@/components/AlertMessage"; import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav"; import QuickNav from "@/components/QuickNav";
import EntityIcon from "@/components/EntityIcon";
@Component({ @Component({
components: { GiftedDialog, AlertMessage, QuickNav }, components: { GiftedDialog, AlertMessage, QuickNav, EntityIcon },
}) })
export default class ProjectViewView extends Vue { export default class ProjectViewView extends Vue {
activeDid = ""; activeDid = "";

12
src/views/ProjectsView.vue

@ -50,10 +50,11 @@
class="block py-4 flex gap-4" class="block py-4 flex gap-4"
> >
<div class="flex-none w-12"> <div class="flex-none w-12">
<img <EntityIcon
src="https://picsum.photos/200/200?random=1" :entityId="project.handleId"
class="w-full rounded" :iconSize="48"
/> class="inline-block align-middle border border-slate-300 rounded-md"
></EntityIcon>
</div> </div>
<div class="grow overflow-hidden"> <div class="grow overflow-hidden">
@ -82,9 +83,10 @@ import { IIdentifier } from "@veramo/core";
import InfiniteScroll from "@/components/InfiniteScroll"; import InfiniteScroll from "@/components/InfiniteScroll";
import AlertMessage from "@/components/AlertMessage"; import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav"; import QuickNav from "@/components/QuickNav";
import EntityIcon from "@/components/EntityIcon";
@Component({ @Component({
components: { InfiniteScroll, AlertMessage, QuickNav }, components: { InfiniteScroll, AlertMessage, QuickNav, EntityIcon },
}) })
export default class ProjectsView extends Vue { export default class ProjectsView extends Vue {
apiServer = ""; apiServer = "";

Loading…
Cancel
Save