kentbull/crowd-funder-for-time-pwa
1
0
Fork 0
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request 'UI improvements' (#46) from contacts-view-improvements into master

Browse Source 
Reviewed-on: trent_larson/kick-starter-for-time-pwa#46
This commit is contained in:
anomalist
2023-07-19 02:18:01 -04:00
parent 8d42fe905d 3e2cd1291c
commit d0ec7930e1
1 changed files with 71 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/views/ContactsView.vue
View File

@@ -70,9 +70,9 @@
</div> </div>
<!-- Results List --> <!-- Results List -->
<ul v-if="contacts.length > 0"> <ul v-if="contacts.length > 0" class="border-t border-slate-300">
<li <li
class="border-b border-slate-300" class="border-b border-slate-300 py-4"
v-for="contact in contacts" v-for="contact in contacts"
:key="contact.did" :key="contact.did"
> >
@@ -85,70 +85,82 @@
Public Key (base 64): {{ contact.publicKeyBase64 }} Public Key (base 64): {{ contact.publicKeyBase64 }}
</div> </div>
<button <div id="ContactActions" class="flex gap-1.5 mt-2">
v-if="contact.seesMe" <button
class="tooltip" v-if="contact.seesMe"
@click="setVisibility(contact, false)" class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
> @click="setVisibility(contact, false)"
<fa icon="eye" class="text-slate-900 fa-fw ml-1" /> title="They can see you"
<span class="tooltiptext">They can see you</span> >
</button> <fa icon="eye" class="fa-fw" />
<button v-else class="tooltip" @click="setVisibility(contact, true)"> </button>
<span class="tooltiptext">They cannot see you</span> <button
<fa icon="eye-slash" class="text-slate-900 fa-fw ml-1" /> v-else
</button> class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
@click="setVisibility(contact, true)"
title="They cannot see you"
>
<fa icon="eye-slash" class="fa-fw" />
</button>
<button class="tooltip" @click="checkVisibility(contact)"> <button
<span class="tooltiptext">Check Visibility</span> class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
<fa icon="rotate" class="text-slate-900 fa-fw ml-1" /> @click="checkVisibility(contact)"
</button> title="Check Visibility"
>
<fa icon="rotate" class="fa-fw" />
</button>
<button v-if="contact.registered" class="tooltip"> <button
<span class="tooltiptext">Registered</span> v-if="contact.registered"
<fa icon="person-circle-check" class="text-slate-900 fa-fw ml-1" /> class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
</button> title="Registered"
<button v-else @click="register(contact)" class="tooltip"> >
<span class="tooltiptext">Registration Unknown</span> <fa icon="person-circle-check" class="fa-fw" />
<fa </button>
icon="person-circle-question" <button
class="text-slate-900 fa-fw ml-1" v-else
/> @click="register(contact)"
</button> class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
title="Registration unknown"
>
<fa icon="person-circle-question" class="fa-fw" />
</button>
<button @click="deleteContact(contact)" class="px-9 tooltip"> <button
<span class="tooltiptext">Delete!</span> @click="deleteContact(contact)"
<fa icon="trash-can" class="text-red-600 fa-fw ml-1" /> class="text-sm uppercase bg-red-600 text-white px-2 py-1.5 rounded-md"
</button> title="Delete"
>
<fa icon="trash-can" class="fa-fw" />
</button>
<div v-if="showGiveNumbers" class="float-right"> <div v-if="!showGiveNumbers" class="ml-auto flex gap-1.5">
<div class="float-right"> <button
<div class="tooltip"> class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
to: @click="onClickAddGive(activeDid, contact.did)"
title="givenByMeDescriptions[contact.did]"
>
To:
{{ {{
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
this.showGiveTotals this.showGiveTotals
? ((givenByMeConfirmed[contact.did] || 0) ? ((givenByMeConfirmed[contact.did] || 0)
+ (givenByMeUnconfirmed[contact.did] || 0)) + (givenByMeUnconfirmed[contact.did] || 0))
: this.showGiveConfirmed : this.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 */
}} }}
<span <fa icon="plus" class="fa-fw" />
v-if="givenByMeDescriptions[contact.did]" </button>
class="tooltiptext-left"
> <button
{{ givenByMeDescriptions[contact.did] }} class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
</span> @click="onClickAddGive(contact.did, activeDid)"
<button title="givenToMeDescriptions[contact.did]"
class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6" >
@click="onClickAddGive(activeDid, contact.did)" From:
>
+
</button>
</div>
<div class="tooltip px-2">
from:
{{ {{
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
this.showGiveTotals this.showGiveTotals
@@ -159,28 +171,18 @@
: (givenToMeUnconfirmed[contact.did] || 0) : (givenToMeUnconfirmed[contact.did] || 0)
/* eslint-enable prettier/prettier */ /* eslint-enable prettier/prettier */
}} }}
<span <fa icon="plus" class="fa-fw" />
v-if="givenToMeDescriptions[contact.did]" </button>
class="tooltiptext-left"
>
{{ givenToMeDescriptions[contact.did] }}
</span>
<button
class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
@click="onClickAddGive(contact.did, activeDid)"
>
+
</button>
</div>
<router-link <router-link
:to="{ :to="{
name: 'contact-amounts', name: 'contact-amounts',
query: { contactDid: contact.did }, query: { contactDid: contact.did },
}" }"
class="tooltip" class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
title="See all given activity"
> >
<fa icon="file-lines" class="text-slate-600 fa-fw ml-1" /> <fa icon="file-lines" class="fa-fw" />
<span class="tooltiptext-left">See All Given Activity</span>
</router-link> </router-link>
</div> </div>
</div> </div>