trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 22 Releases 5 Wiki Activity

switch the HIDDEN DIDs to an eye-slash and shrink the icons even more

Browse Source
This commit is contained in:
Trent Larson
2025-03-28 15:15:04 -06:00
parent 071792b97c
commit 5275e00b67
3 changed files with 46 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/ActivityListItem.vue
View File

@@ -13,15 +13,12 @@
<div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
<div class="flex items-center gap-2 mb-6">
<div v-if="record.issuerDid">
<EntityIcon
:entity-id="record.issuerDid"
class="rounded size-[3rem] sm:size-[4rem] object-cover"
/>
</div>
<div v-else>
<font-awesome icon="person-circle-question" class="text-slate-300 text-[3rem] sm:text-[4rem]" />
</div>
<EntityIcon
:entity-id="record.issuerDid"
:profile-image-url="record.issuer.profileImageUrl"
:icon-size="24"
class="rounded object-cover"
/>
<div>
<h3 class="font-semibold">
@@ -54,8 +51,9 @@
</a>
</div>
<!-- Giver - - > Receiver -->
<div class="relative flex justify-between gap-4 max-w-lg mx-auto mb-5">
<!-- Source -->
<!-- Giver -->
<div
class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
>
@@ -66,24 +64,17 @@
<ProjectIcon
:entity-id="record.providerPlanName"
:icon-size="48"
class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
class="rounded *:w-full *:h-full"
/>
</div>
<!-- Identicon for DIDs -->
<div v-else-if="record.agentDid">
<EntityIcon
:entity-id="record.agentDid"
:profile-image-url="record.issuer.profileImageUrl"
class="rounded size-[3rem] sm:size-[4rem]"
/>
</div>
<!-- Unknown Person -->
<div v-else>
<font-awesome
icon="person-circle-question"
class="text-slate-300 text-[3rem] sm:text-[4rem]"
/>
</div>
<EntityIcon
v-else
:entity-id="record.agentDid"
:profile-image-url="record.issuer.profileImageUrl"
:icon-size="48"
class="rounded size-[3rem] sm:size-[4rem]"
/>
</div>
</div>
<div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
@@ -116,7 +107,7 @@
</div>
</div>
<!-- Destination -->
<!-- Recipient -->
<div
class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
>
@@ -131,20 +122,13 @@
/>
</div>
<!-- Identicon for DIDs -->
<div v-else-if="record.recipientDid">
<EntityIcon
:entity-id="record.recipientDid"
:profile-image-url="record.receiver.profileImageUrl"
class="rounded size-[3rem] sm:size-[4rem]"
/>
</div>
<!-- Unknown Person -->
<div v-else>
<font-awesome
icon="person-circle-question"
class="text-slate-300 text-[3rem] sm:text-[4rem]"
/>
</div>
<EntityIcon
v-else
:entity-id="record.recipientDid"
:profile-image-url="record.receiver.profileImageUrl"
:icon-size="48"
class="rounded size-[3rem] sm:size-[4rem]"
/>
</div>
</div>
<div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">

28
src/components/EntityIcon.vue
View File

@@ -1,29 +1,45 @@
<template>
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="w-fit" v-html="generateIcon()"></div>
<div class="w-fit">
<font-awesome
v-if="!this.contact?.did && !this.entityId"
icon="person-circle-question"
:class="`fa-fw text-slate-400`"
:style="{ width: `${this.iconSize}px`, height: `${this.iconSize}px` }"
/>
<font-awesome
v-else-if="isHiddenDid"
icon="eye-slash"
:class="`fa-fw text-slate-400`"
:style="{ width: `${this.iconSize}px`, height: `${this.iconSize}px` }"
/>
<div v-else v-html="generateIcon()"></div>
</div>
</template>
<script lang="ts">
import { createAvatar, StyleOptions } from "@dicebear/core";
import { avataaars } from "@dicebear/collection";
import { Vue, Component, Prop } from "vue-facing-decorator";
import { Contact } from "../db/tables/contacts";
import { isHiddenDid } from "@/libs/endorserServer";
@Component
export default class EntityIcon extends Vue {
@Prop contact: Contact;
@Prop contact: Contact = null;
@Prop entityId = ""; // overridden by contact.did or profileImageUrl
@Prop iconSize = 0;
@Prop profileImageUrl = ""; // overridden by contact.profileImageUrl
get isHiddenDid() {
const identifier = this.contact?.did || this.entityId;
return isHiddenDid(identifier);
}
generateIcon() {
const imageUrl = this.contact?.profileImageUrl || this.profileImageUrl;
if (imageUrl) {
return `<img src="${imageUrl}" class="rounded" width="${this.iconSize}" height="${this.iconSize}" />`;
} else {
const identifier = this.contact?.did || this.entityId;
if (!identifier) {
return `<img src="../src/assets/blank-square.svg" class="rounded" width="${this.iconSize}" height="${this.iconSize}" />`;
}
// https://api.dicebear.com/8.x/avataaars/svg?seed=
// ... does not render things with the same seed as this library.
// "did:ethr:0x222BB77E6Ff3774d34c751f3c1260866357B677b" yields a girl with flowers in her hair and a lightning earring

25
src/views/HomeView.vue
View File

@@ -492,31 +492,6 @@ export default class HomeView extends Vue {
}
}
// this returns a Promise but we don't need to wait for it
this.updateAllFeed();
if (this.activeDid) {
const offersToUserData = await getNewOffersToUser(
this.axios,
this.apiServer,
this.activeDid,
this.lastAckedOfferToUserJwtId,
);
this.numNewOffersToUser = offersToUserData.data.length;
this.newOffersToUserHitLimit = offersToUserData.hitLimit;
}
if (this.activeDid) {
const offersToUserProjects = await getNewOffersToUserProjects(
this.axios,
this.apiServer,
this.activeDid,
this.lastAckedOfferToUserProjectsJwtId,
);
this.numNewOffersToUserProjects = offersToUserProjects.data.length;
this.newOffersToUserProjectsHitLimit = offersToUserProjects.hitLimit;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (err: any) {
logConsoleAndDb("Error retrieving settings or feed: " + err, true);