Browse Source

fix: improve image handling and icon support

- Fix image load event handler signature
- Add alt text for accessibility
- Add building icon to FontAwesome library

Technical Changes:
- Update cacheImage event to pass only image URL
- Add proper alt text for activity images
- Add faBuilding icon to FontAwesome library

This improves image handling and accessibility while adding
needed icon support for the activity feed interface.
homeview-refresh-2025-02
Matthew Raymer 3 weeks ago
parent
commit
8f7d794962
  1. 89
      src/components/ActivityListItem.vue
  2. 2
      src/main.ts

89
src/components/ActivityListItem.vue

@ -43,7 +43,8 @@
<img
class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
:src="record.image"
@load="$emit('cacheImage', $event, record.image)"
@load="$emit('cacheImage', record.image)"
alt="Activity image"
/>
</a>
</div>
@ -59,35 +60,41 @@
<EntityIcon
:profile-image-url="record.giver.profileImageUrl"
:class="[
record.giver.known
!record.providerPlanName
? 'rounded-full size-12 sm:size-24 object-cover'
: 'rounded size-12 sm:size-24 object-cover'
]"
/>
</template>
<template v-else>
<!-- Project Icon -->
<template v-if="record.providerPlanName">
<ProjectIcon
:entityId="record.providerPlanName"
:iconSize="96"
class="rounded size-12 sm:size-24"
/>
</template>
<!-- Identicon for DIDs -->
<img
v-if="record.giver.did"
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
:class="[
record.giver.known
? 'rounded-full size-12 sm:size-24'
: 'rounded size-12 sm:size-24'
]"
alt="Identicon"
/>
<!-- Fallback icon for projects -->
<fa
v-else
icon="person-circle-question"
class="text-slate-300 text-5xl sm:text-8xl"
/>
<template v-else-if="record.giver.did">
<img
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
class="rounded-full size-12 sm:size-24"
alt="Identicon"
/>
</template>
<!-- Unknown Person -->
<template v-else>
<fa
icon="person-circle-question"
class="text-slate-300 text-5xl sm:text-8xl"
/>
</template>
</template>
</div>
<div class="text-xs mt-2 line-clamp-2">
<fa
:icon="record.giver.known ? 'user' : 'hammer'"
:icon="record.providerPlanName ? 'building' : 'user'"
class="fa-fw text-slate-400"
/>
{{ record.giver.displayName }}
@ -114,35 +121,41 @@
<EntityIcon
:profile-image-url="record.receiver.profileImageUrl"
:class="[
record.receiver.known
!record.recipientProjectName
? 'rounded-full size-12 sm:size-24 object-cover'
: 'rounded size-12 sm:size-24 object-cover'
]"
/>
</template>
<template v-else>
<!-- Project Icon -->
<template v-if="record.recipientProjectName">
<ProjectIcon
:entityId="record.recipientProjectName"
:iconSize="96"
class="rounded size-12 sm:size-24"
/>
</template>
<!-- Identicon for DIDs -->
<img
v-if="record.receiver.did"
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
:class="[
record.receiver.known
? 'rounded-full size-12 sm:size-24'
: 'rounded size-12 sm:size-24'
]"
alt="Identicon"
/>
<!-- Fallback icon for projects -->
<fa
v-else
icon="image"
class="text-slate-300 text-5xl sm:text-8xl"
/>
<template v-else-if="record.receiver.did">
<img
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
class="rounded-full size-12 sm:size-24"
alt="Identicon"
/>
</template>
<!-- Unknown Person -->
<template v-else>
<fa
icon="person-circle-question"
class="text-slate-300 text-5xl sm:text-8xl"
/>
</template>
</template>
</div>
<div class="text-xs mt-2 line-clamp-2">
<fa
:icon="record.receiver.known ? 'user' : 'hammer'"
:icon="record.recipientProjectName ? 'building' : 'user'"
class="fa-fw text-slate-400"
/>
{{ record.receiver.displayName }}
@ -187,10 +200,12 @@ import { GiveRecordWithContactInfo } from "../types";
import EntityIcon from "./EntityIcon.vue";
import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
import { containsHiddenDid } from "../libs/endorserServer";
import ProjectIcon from "./ProjectIcon.vue";
@Component({
components: {
EntityIcon,
ProjectIcon,
},
})
export default class ActivityListItem extends Vue {

2
src/main.ts

@ -88,6 +88,7 @@ import {
faUser,
faUsers,
faXmark,
faBuilding,
} from "@fortawesome/free-solid-svg-icons";
library.add(
@ -168,6 +169,7 @@ library.add(
faUser,
faUsers,
faXmark,
faBuilding,
);
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

Loading…
Cancel
Save