trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 8 Releases 5 Wiki Activity
Browse Source

Optimized per-item layout 

- Stacked contact name and DID
- Text truncates to leave room for action buttons when visible
- Separated "from / to" heading from buttons to minimize width
- Various spacing and alignment adjustments
contacts-view-fixes
Jose Olarte III 5 days ago
parent
8609f8458d
commit
d3110506ea
1 changed files with 115 additions and 113 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 228
      src/views/ContactsView.vue

228
src/views/ContactsView.vue
View File

@ -174,125 +174,127 @@
class="border-b border-slate-300 pt-1 pb-1" class="border-b border-slate-300 pt-1 pb-1"
data-testId="contactListItem" data-testId="contactListItem"
> >
<div class="grow overflow-hidden"> <div class="flex items-center justify-between gap-3">
<div class="flex items-center justify-between gap-3"> <div class="flex overflow-hidden min-w-0 items-center gap-3">
<div class="flex items-center gap-3"> <input
<input v-if="!showGiveNumbers"
v-if="!showGiveNumbers" type="checkbox"
type="checkbox" :checked="contactsSelected.includes(contact.did)"
:checked="contactsSelected.includes(contact.did)" class="ml-2 h-6 w-6 flex-shrink-0"
class="ml-2 h-6 w-6 flex-shrink-0" data-testId="contactCheckOne"
data-testId="contactCheckOne" @click="
@click=" contactsSelected.includes(contact.did)
contactsSelected.includes(contact.did) ? contactsSelected.splice(
? contactsSelected.splice( contactsSelected.indexOf(contact.did),
contactsSelected.indexOf(contact.did), 1,
1, )
) : contactsSelected.push(contact.did)
: contactsSelected.push(contact.did) "
" />
/>
<EntityIcon
<div :contact="contact"
class="flex-shrink-0 w-12 h-12 flex items-center justify-center" :icon-size="48"
> class="shrink-0 align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
<EntityIcon @click="showLargeIdenticon = contact"
:contact="contact" />
:icon-size="48"
class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
@click="showLargeIdenticon = contact"
/>
</div>
<h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0"> <div class="overflow-hidden">
{{ contactNameNonBreakingSpace(contact.name) }} <h2 class="text-base font-semibold truncate">
<router-link
:to="{
path: '/did/' + encodeURIComponent(contact.did),
}"
title="See more about this person"
>
{{ contactNameNonBreakingSpace(contact.name) }}
</router-link>
</h2> </h2>
<span> <div class="flex gap-1.5 items-center overflow-hidden">
<div class="flex gap-2 items-center"> <router-link
<router-link :to="{
:to="{ path: '/did/' + encodeURIComponent(contact.did),
path: '/did/' + encodeURIComponent(contact.did), }"
}" title="See more about this person"
title="See more about this person" >
> <font-awesome
<font-awesome icon="circle-info"
icon="circle-info" class="text-base text-blue-500"
class="text-xl text-blue-500" />
/> </router-link>
</router-link>
<span class="text-xs truncate">{{
<span class="text-sm overflow-hidden">{{ contact.did
libsUtil.shortDid(contact.did) }}</span>
}}</span> </div>
</div> <div class="text-sm">
<div class="text-sm"> {{ contact.notes }}
{{ contact.notes }} </div>
</div>
</span>
</div> </div>
</div>
<div <div
v-if="showGiveNumbers && contact.did != activeDid" v-if="showGiveNumbers && contact.did != activeDid"
class="flex gap-2 items-center" class="flex gap-1.5 items-end"
> >
<button <div class='text-center'>
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" <div class="text-xs leading-none mb-1">From/To</div>
:title="givenToMeDescriptions[contact.did] || ''" <div class="flex items-center">
@click="confirmShowGiftedDialog(contact.did, activeDid)" <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.5 py-1.5 rounded-l-md"
From: :title="givenToMeDescriptions[contact.did] || ''"
<br /> @click="confirmShowGiftedDialog(contact.did, activeDid)"
{{ >
/* eslint-disable prettier/prettier */ {{
showGiveTotals /* eslint-disable prettier/prettier */
? ((givenToMeConfirmed[contact.did] || 0) showGiveTotals
+ (givenToMeUnconfirmed[contact.did] || 0)) ? ((givenToMeConfirmed[contact.did] || 0)
: showGiveConfirmed + (givenToMeUnconfirmed[contact.did] || 0))
? (givenToMeConfirmed[contact.did] || 0) : showGiveConfirmed
: (givenToMeUnconfirmed[contact.did] || 0) ? (givenToMeConfirmed[contact.did] || 0)
/* eslint-enable prettier/prettier */ : (givenToMeUnconfirmed[contact.did] || 0)
}} /* eslint-enable prettier/prettier */
</button> }}
</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" <button
:title="givenByMeDescriptions[contact.did] || ''" 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.5 py-1.5 rounded-r-md border-l"
@click="confirmShowGiftedDialog(activeDid, contact.did)" :title="givenByMeDescriptions[contact.did] || ''"
> @click="confirmShowGiftedDialog(activeDid, contact.did)"
To: >
<br /> {{
{{ /* eslint-disable prettier/prettier */
/* eslint-disable prettier/prettier */ showGiveTotals
showGiveTotals ? ((givenByMeConfirmed[contact.did] || 0)
? ((givenByMeConfirmed[contact.did] || 0) + (givenByMeUnconfirmed[contact.did] || 0))
+ (givenByMeUnconfirmed[contact.did] || 0)) : showGiveConfirmed
: showGiveConfirmed ? (givenByMeConfirmed[contact.did] || 0)
? (givenByMeConfirmed[contact.did] || 0) : (givenByMeUnconfirmed[contact.did] || 0)
: (givenByMeUnconfirmed[contact.did] || 0) /* eslint-enable prettier/prettier */
/* eslint-enable prettier/prettier */ }}
}} </button>
</button> </div>
<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"
data-testId="offerButton"
@click="openOfferDialog(contact.did, contact.name)"
>
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"
>
<font-awesome icon="file-lines" class="fa-fw" />
</router-link>
</div> </div>
<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"
data-testId="offerButton"
@click="openOfferDialog(contact.did, contact.name)"
>
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"
title="See more given activity"
>
<font-awesome icon="file-lines" class="fa-fw" />
</router-link>
</div> </div>
</div> </div>
</li> </li>

Write Preview
Loading…
Cancel
Save