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

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

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/kick-starter-for-time-pwa/pulls/46
pull/53/head
anomalist 1 year ago
parent
8d42fe905d 3e2cd1291c
commit
d0ec7930e1
1 changed files with 75 additions and 73 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. 112
      src/views/ContactsView.vue

112
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,45 +85,63 @@
Public Key (base 64): {{ contact.publicKeyBase64 }} Public Key (base 64): {{ contact.publicKeyBase64 }}
</div> </div>
<div id="ContactActions" class="flex gap-1.5 mt-2">
<button <button
v-if="contact.seesMe" v-if="contact.seesMe"
class="tooltip" class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
@click="setVisibility(contact, false)" @click="setVisibility(contact, false)"
title="They can see you"
> >
<fa icon="eye" class="text-slate-900 fa-fw ml-1" /> <fa icon="eye" class="fa-fw" />
<span class="tooltiptext">They can see you</span>
</button> </button>
<button v-else class="tooltip" @click="setVisibility(contact, true)"> <button
<span class="tooltiptext">They cannot see you</span> v-else
<fa icon="eye-slash" class="text-slate-900 fa-fw ml-1" /> 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>
<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)"
title="Check Visibility"
>
<fa icon="rotate" class="fa-fw" />
</button> </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"
title="Registered"
>
<fa icon="person-circle-check" class="fa-fw" />
</button> </button>
<button v-else @click="register(contact)" class="tooltip"> <button
<span class="tooltiptext">Registration Unknown</span> v-else
<fa @click="register(contact)"
icon="person-circle-question" class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
class="text-slate-900 fa-fw ml-1" title="Registration unknown"
/> >
<fa icon="person-circle-question" class="fa-fw" />
</button> </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"
title="Delete"
>
<fa icon="trash-can" class="fa-fw" />
</button> </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
@ -134,21 +152,15 @@
: (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"
>
{{ givenByMeDescriptions[contact.did] }}
</span>
<button <button
class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6" class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
@click="onClickAddGive(activeDid, contact.did)" @click="onClickAddGive(contact.did, activeDid)"
title="givenToMeDescriptions[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]"
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> </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>

Write Preview
Loading…
Cancel
Save