From 3a6a24d9236fc8a4d7d8467e7751de9cfdbb1dbb Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 12 Mar 2025 16:50:13 +0800
Subject: [PATCH] Contact list tweaks
---
src/views/ContactsView.vue | 154 ++++++++++++++++++-------------------
1 file changed, 75 insertions(+), 79 deletions(-)
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index 77aace4..12876bb 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -106,7 +106,7 @@
/>
<button
href=""
- class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-2 px-1 py-1 rounded-md"
+ class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
:style="
contactsSelected.length > 0
? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
@@ -127,7 +127,7 @@
<div class="w-full text-right">
<button
href=""
- class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 py-1 rounded-md"
+ class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
@click="toggleShowContactAmounts()"
>
{{
@@ -177,14 +177,7 @@
data-testId="contactListItem"
>
<div class="grow overflow-hidden">
- <div class="flex items-center">
- <EntityIcon
- :contact="contact"
- :iconSize="48"
- class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
- @click="showLargeIdenticon = contact"
- />
-
+ <div class="flex items-center gap-3">
<input
type="checkbox"
v-if="!showGiveNumbers"
@@ -201,94 +194,97 @@
data-testId="contactCheckOne"
/>
- <h2
- class="text-base font-semibold ml-2 w-1/3 truncate flex-shrink-0"
- >
+ <EntityIcon
+ :contact="contact"
+ :iconSize="48"
+ class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
+ @click="showLargeIdenticon = contact"
+ />
+
+ <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
{{ contactNameNonBreakingSpace(contact.name) }}
</h2>
<span>
- <div class="flex items-center">
+ <div class="flex gap-2 items-center">
<router-link
:to="{
path: '/did/' + encodeURIComponent(contact.did),
}"
title="See more about this person"
>
- <fa icon="circle-info" class="text-xl text-blue-500 ml-4" />
+ <fa icon="circle-info" class="text-xl text-blue-500" />
</router-link>
- <span class="ml-4 text-sm overflow-hidden">{{
+ <span class="text-sm overflow-hidden">{{
libsUtil.shortDid(contact.did)
}}</span>
</div>
- <div class="ml-4 text-sm">
+ <div class="text-sm">
{{ contact.notes }}
</div>
</span>
</div>
- <div id="ContactActions" class="flex gap-1.5 mt-2">
- <div
- v-if="showGiveNumbers && contact.did != activeDid"
- class="ml-auto flex gap-1.5"
+ <div
+ v-if="showGiveNumbers && contact.did != activeDid"
+ class="ml-auto flex gap-1.5 mt-2"
+ >
+ <button
+ class="text-sm 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-1.5 rounded-l-md"
+ @click="confirmShowGiftedDialog(contact.did, activeDid)"
+ :title="givenToMeDescriptions[contact.did] || ''"
+ >
+ From:
+ <br />
+ {{
+ /* eslint-disable prettier/prettier */
+ this.showGiveTotals
+ ? ((givenToMeConfirmed[contact.did] || 0)
+ + (givenToMeUnconfirmed[contact.did] || 0))
+ : this.showGiveConfirmed
+ ? (givenToMeConfirmed[contact.did] || 0)
+ : (givenToMeUnconfirmed[contact.did] || 0)
+ /* eslint-enable prettier/prettier */
+ }}
+ </button>
+
+ <button
+ class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
+ @click="confirmShowGiftedDialog(activeDid, contact.did)"
+ :title="givenByMeDescriptions[contact.did] || ''"
+ >
+ To:
+ <br />
+ {{
+ /* eslint-disable prettier/prettier */
+ this.showGiveTotals
+ ? ((givenByMeConfirmed[contact.did] || 0)
+ + (givenByMeUnconfirmed[contact.did] || 0))
+ : this.showGiveConfirmed
+ ? (givenByMeConfirmed[contact.did] || 0)
+ : (givenByMeUnconfirmed[contact.did] || 0)
+ /* eslint-enable prettier/prettier */
+ }}
+ </button>
+
+ <button
+ class="text-sm 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-1.5 rounded-md border border-blue-400"
+ @click="openOfferDialog(contact.did, contact.name)"
+ data-testId="offerButton"
+ >
+ Offer
+ </button>
+
+ <router-link
+ :to="{
+ name: 'contact-amounts',
+ query: { contactDid: contact.did },
+ }"
+ class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-slate-400"
+ title="See more given activity"
>
- <button
- class="text-sm 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-1.5 rounded-l-md"
- @click="confirmShowGiftedDialog(contact.did, activeDid)"
- :title="givenToMeDescriptions[contact.did] || ''"
- >
- From:
- <br />
- {{
- /* eslint-disable prettier/prettier */
- this.showGiveTotals
- ? ((givenToMeConfirmed[contact.did] || 0)
- + (givenToMeUnconfirmed[contact.did] || 0))
- : this.showGiveConfirmed
- ? (givenToMeConfirmed[contact.did] || 0)
- : (givenToMeUnconfirmed[contact.did] || 0)
- /* eslint-enable prettier/prettier */
- }}
- </button>
-
- <button
- class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
- @click="confirmShowGiftedDialog(activeDid, contact.did)"
- :title="givenByMeDescriptions[contact.did] || ''"
- >
- To:
- <br />
- {{
- /* eslint-disable prettier/prettier */
- this.showGiveTotals
- ? ((givenByMeConfirmed[contact.did] || 0)
- + (givenByMeUnconfirmed[contact.did] || 0))
- : this.showGiveConfirmed
- ? (givenByMeConfirmed[contact.did] || 0)
- : (givenByMeUnconfirmed[contact.did] || 0)
- /* eslint-enable prettier/prettier */
- }}
- </button>
-
- <button
- class="text-sm 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-1.5 rounded-md border border-blue-400"
- @click="openOfferDialog(contact.did, contact.name)"
- data-testId="offerButton"
- >
- Offer
- </button>
-
- <router-link
- :to="{
- name: 'contact-amounts',
- query: { contactDid: contact.did },
- }"
- class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-slate-400"
- title="See more given activity"
- >
- <fa icon="file-lines" class="fa-fw" />
- </router-link>
- </div>
+ <fa icon="file-lines" class="fa-fw" />
+ </router-link>
</div>
</div>
</li>
@@ -310,7 +306,7 @@
/>
<button
href=""
- class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-2 px-1 py-1 rounded-md"
+ class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
:style="
contactsSelected.length > 0
? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'