trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/jdenticon-entity-photos'

Browse Source
This commit is contained in:
Matthew Aaron Raymer
2023-08-07 15:59:47 +08:00
parent e19cd980b4 4b87692231
commit 9a41aff8f0
9 changed files with 114 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/EntityIcon.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div v-html="generateIdenticon()" class="w-fit"></div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-facing-decorator";
import { toSvg } from "jdenticon";
@Component
export default class EntityIcon extends Vue {
@Prop entityId = "";
@Prop iconSize = "";
generateIdenticon() {
const svgString = toSvg(this.entityId, this.iconSize);
return svgString;
}
}
</script>
<style scoped></style>

17
src/views/ContactGiftingView.vue
View File

@@ -24,8 +24,12 @@
<ul class="border-t border-slate-300">
<li class="border-b border-slate-300 py-3">
<h2 class="text-base flex gap-4 items-center">
<span class="grow italic"
><fa icon="question-circle" class="fa-fw fa-xl text-slate-400"></fa>
<span class="grow italic text-slate-500"
><EntityIcon
entityId="Anonymous"
:iconSize="32"
class="opacity-50 inline-block align-middle border border-dashed border-slate-400 bg-slate-200 rounded-md mr-1"
></EntityIcon>
Anonymous
</span>
<span class="text-right">
@@ -46,7 +50,11 @@
>
<h2 class="text-base flex gap-4 items-center">
<span class="grow font-semibold"
><fa icon="user" class="fa-fw fa-xl text-slate-400"></fa>
><EntityIcon
:entityId="contact.did"
:iconSize="32"
class="inline-block align-middle border border-slate-300 rounded-md mr-1"
></EntityIcon>
{{ contact.name || "(no name)" }}
</span>
<span class="text-right">
@@ -87,9 +95,10 @@ import { Account } from "@/db/tables/accounts";
import { Contact } from "@/db/tables/contacts";
import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav";
import EntityIcon from "@/components/EntityIcon";
@Component({
components: { GiftedDialog, AlertMessage, QuickNav },
components: { GiftedDialog, AlertMessage, QuickNav, EntityIcon },
})
export default class HomeView extends Vue {
activeDid = "";

18
src/views/ContactsView.vue
View File

@@ -76,12 +76,17 @@
<!-- Results List -->
<ul v-if="contacts.length > 0" class="border-t border-slate-300">
<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"
:key="contact.did"
>
<div class="grow overflow-hidden">
<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)" }}
</h2>
<div class="text-sm truncate">{{ contact.did }}</div>
@@ -144,7 +149,7 @@
class="ml-auto flex gap-1.5"
>
<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)"
title="givenByMeDescriptions[contact.did]"
>
@@ -159,11 +164,11 @@
: (givenByMeUnconfirmed[contact.did] || 0)
/* eslint-enable prettier/prettier */
}}
<fa icon="plus" class="fa-fw" />
<fa icon="plus" />
</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)"
title="givenToMeDescriptions[contact.did]"
>
@@ -178,7 +183,7 @@
: (givenToMeUnconfirmed[contact.did] || 0)
/* eslint-enable prettier/prettier */
}}
<fa icon="plus" class="fa-fw" />
<fa icon="plus" />
</button>
<router-link
@@ -221,12 +226,13 @@ import {
import { Component, Vue } from "vue-facing-decorator";
import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav";
import EntityIcon from "@/components/EntityIcon";
// eslint-disable-next-line @typescript-eslint/no-var-requires
const Buffer = require("buffer/").Buffer;
@Component({
components: { AlertMessage, QuickNav },
components: { AlertMessage, QuickNav, EntityIcon },
})
export default class ContactsView extends Vue {
activeDid = "";

13
src/views/DiscoverView.vue
View File

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

11
src/views/HomeView.vue
View File

@@ -104,9 +104,11 @@
:key="contact.did"
@click="openDialog(contact)"
>
<div class="mb-1">
<fa icon="user" class="fa-fw fa-xl text-slate-400"></fa>
</div>
<EntityIcon
:entityId="contact.did"
:iconSize="64"
class="mx-auto border border-slate-300 rounded-md mb-1"
></EntityIcon>
<h3
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
>
@@ -183,9 +185,10 @@ import { createAndSubmitGive, didInfo } from "@/libs/endorserServer";
import { Contact } from "@/db/tables/contacts";
import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav";
import EntityIcon from "@/components/EntityIcon";
@Component({
components: { GiftedDialog, AlertMessage, QuickNav },
components: { GiftedDialog, AlertMessage, QuickNav, EntityIcon },
})
export default class HomeView extends Vue {
activeDid = "";

35
src/views/ProjectViewView.vue
View File

@@ -26,16 +26,28 @@
<!-- Project Details -->
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
<div>
<h2 class="text-xl font-semibold">{{ name }}</h2>
<div class="flex justify-between gap-4 text-sm mb-3">
<span
><fa icon="user" class="fa-fw text-slate-400"></fa>
{{ issuer }}</span
>
<span
><fa icon="calendar" class="fa-fw text-slate-400"></fa
>{{ timeSince }}
</span>
<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>
<div class="text-sm mb-3">
<div class="truncate"
><fa icon="user" class="fa-fw text-slate-400"></fa>
{{ issuer }}</div
>
<div
><fa icon="calendar" class="fa-fw text-slate-400"></fa
>{{ timeSince }}
</div>
</div>
</div>
</div>
<div class="text-sm text-slate-500">
@@ -183,9 +195,10 @@ import {
} from "@/libs/endorserServer";
import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav";
import EntityIcon from "@/components/EntityIcon";
@Component({
components: { GiftedDialog, AlertMessage, QuickNav },
components: { GiftedDialog, AlertMessage, QuickNav, EntityIcon },
})
export default class ProjectViewView extends Vue {
activeDid = "";

12
src/views/ProjectsView.vue
View File

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