forked from trent_larson/crowd-funder-for-time-pwa
show contact's or user's icon in more places
This commit is contained in:
@@ -63,36 +63,14 @@
|
||||
|
||||
<!-- Identity Details -->
|
||||
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
|
||||
<h2 v-if="givenName" class="text-xl font-semibold mb-2">
|
||||
{{ givenName }}
|
||||
<router-link :to="{ name: 'new-edit-account' }">
|
||||
<fa icon="pen" class="text-xs text-blue-500 mb-1"></fa>
|
||||
</router-link>
|
||||
<div class="flex justify-center mt-4">
|
||||
<span v-if="profileImageUrl" class="flex justify-between">
|
||||
<a
|
||||
:href="profileImageUrl"
|
||||
target="_blank"
|
||||
class="text-blue-500 ml-4"
|
||||
>
|
||||
<img :src="profileImageUrl" class="h-24 rounded-xl" />
|
||||
</a>
|
||||
<fa
|
||||
icon="trash-can"
|
||||
@click="confirmDeleteImage"
|
||||
class="text-red-500 fa-fw ml-8 mt-10"
|
||||
/>
|
||||
</span>
|
||||
<span v-else>
|
||||
<fa
|
||||
icon="camera"
|
||||
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
|
||||
@click="openPhotoDialog"
|
||||
/>
|
||||
</span>
|
||||
<GiftedPhotoDialog ref="photoDialog" />
|
||||
</div>
|
||||
</h2>
|
||||
<div v-if="givenName">
|
||||
<h2 class="text-xl font-semibold mb-2">
|
||||
{{ givenName }}
|
||||
<router-link :to="{ name: 'new-edit-account' }">
|
||||
<fa icon="pen" class="text-xs text-blue-500 mb-1"></fa>
|
||||
</router-link>
|
||||
</h2>
|
||||
</div>
|
||||
<span v-else>
|
||||
<router-link
|
||||
:to="{ name: 'new-edit-account' }"
|
||||
@@ -101,6 +79,61 @@
|
||||
Set Your Name
|
||||
</router-link>
|
||||
</span>
|
||||
<div class="flex justify-center mt-4">
|
||||
<span v-if="profileImageUrl" class="flex justify-between">
|
||||
<EntityIcon
|
||||
:icon-size="96"
|
||||
:profileImageUrl="profileImageUrl"
|
||||
class="inline-block align-text-bottom border border-slate-300 rounded"
|
||||
@click="showLargeIdenticonUrl = profileImageUrl"
|
||||
/>
|
||||
<fa
|
||||
icon="trash-can"
|
||||
@click="confirmDeleteImage"
|
||||
class="text-red-500 fa-fw ml-8 mt-8 w-12 h-12"
|
||||
/>
|
||||
</span>
|
||||
<span v-else>
|
||||
<fa
|
||||
icon="camera"
|
||||
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
|
||||
@click="openPhotoDialog"
|
||||
/>
|
||||
</span>
|
||||
<GiftedPhotoDialog ref="photoDialog" />
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="flex justify-center">
|
||||
... and those without your image see this:
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<EntityIcon
|
||||
:entityId="activeDid"
|
||||
:iconSize="64"
|
||||
class="inline-block align-middle border border-slate-300 rounded-md mr-1"
|
||||
@click="showLargeIdenticonId = activeDid"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="showLargeIdenticonId || showLargeIdenticonUrl"
|
||||
class="fixed z-[100] top-0 inset-x-0 w-full"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
|
||||
>
|
||||
<EntityIcon
|
||||
:entityId="showLargeIdenticonId"
|
||||
:iconSize="512"
|
||||
:profileImageUrl="showLargeIdenticonUrl"
|
||||
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
|
||||
@click="
|
||||
showLargeIdenticonId = undefined;
|
||||
showLargeIdenticonUrl = undefined;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</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">
|
||||
@@ -580,6 +613,8 @@ import {
|
||||
ImageRateLimits,
|
||||
} from "@/libs/endorserServer";
|
||||
import { Buffer } from "buffer/";
|
||||
import EntityIcon from "@/components/EntityIcon.vue";
|
||||
import {Contact} from "@/db/tables/contacts";
|
||||
|
||||
interface IAccount {
|
||||
did: string;
|
||||
@@ -591,7 +626,7 @@ interface IAccount {
|
||||
const inputFileNameRef = ref<Blob>();
|
||||
|
||||
@Component({
|
||||
components: { GiftedPhotoDialog, QuickNav, TopMessage },
|
||||
components: {EntityIcon, GiftedPhotoDialog, QuickNav, TopMessage },
|
||||
})
|
||||
export default class AccountViewView extends Vue {
|
||||
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||
@@ -614,6 +649,8 @@ export default class AccountViewView extends Vue {
|
||||
profileImageUrl?: string;
|
||||
publicHex = "";
|
||||
publicBase64 = "";
|
||||
showLargeIdenticonId?: string;
|
||||
showLargeIdenticonUrl?: string;
|
||||
webPushServer = "";
|
||||
webPushServerInput = "";
|
||||
|
||||
@@ -1290,14 +1327,18 @@ export default class AccountViewView extends Vue {
|
||||
}
|
||||
|
||||
openPhotoDialog() {
|
||||
(this.$refs.photoDialog as GiftedPhotoDialog).open(async (imgUrl) => {
|
||||
await db.open();
|
||||
db.settings.update(MASTER_SETTINGS_KEY, {
|
||||
profileImageUrl: imgUrl,
|
||||
});
|
||||
this.profileImageUrl = imgUrl;
|
||||
//console.log("Got image URL:", imgUrl);
|
||||
}, true);
|
||||
(this.$refs.photoDialog as GiftedPhotoDialog).open(
|
||||
async (imgUrl) => {
|
||||
await db.open();
|
||||
db.settings.update(MASTER_SETTINGS_KEY, {
|
||||
profileImageUrl: imgUrl,
|
||||
});
|
||||
this.profileImageUrl = imgUrl;
|
||||
//console.log("Got image URL:", imgUrl);
|
||||
},
|
||||
true,
|
||||
"profile",
|
||||
);
|
||||
}
|
||||
|
||||
confirmDeleteImage() {
|
||||
@@ -1351,14 +1392,14 @@ export default class AccountViewView extends Vue {
|
||||
return;
|
||||
}
|
||||
|
||||
this.profileImageUrl = "";
|
||||
this.profileImageUrl = undefined;
|
||||
} catch (error) {
|
||||
console.error("Error deleting image:", error);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
if ((error as any).response.status === 404) {
|
||||
console.log("The image was already deleted:", error);
|
||||
|
||||
this.profileImageUrl = "";
|
||||
this.profileImageUrl = undefined;
|
||||
|
||||
// it already doesn't exist so we won't say anything to the user
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user