Browse Source

UI improvements

- Consistent button styling for interactive elements
- Tooltips relegated to title attribute to avoid blocking other buttons
contact-amounts-ui-improvements
Jose Olarte III 1 year ago
parent
commit
5134e2f562
  1. 148
      src/views/ContactsView.vue

148
src/views/ContactsView.vue

@ -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)"
<button class="tooltip" @click="checkVisibility(contact)"> title="They cannot see you"
<span class="tooltiptext">Check Visibility</span> >
<fa icon="rotate" class="text-slate-900 fa-fw ml-1" /> <fa icon="eye-slash" class="fa-fw" />
</button> </button>
<button v-if="contact.registered" class="tooltip"> <button
<span class="tooltiptext">Registered</span> class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
<fa icon="person-circle-check" class="text-slate-900 fa-fw ml-1" /> @click="checkVisibility(contact)"
</button> title="Check Visibility"
<button v-else @click="register(contact)" class="tooltip"> >
<span class="tooltiptext">Registration Unknown</span> <fa icon="rotate" class="fa-fw" />
<fa </button>
icon="person-circle-question"
class="text-slate-900 fa-fw ml-1" <button
/> v-if="contact.registered"
</button> class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
title="Registered"
<button @click="deleteContact(contact)" class="px-9 tooltip"> >
<span class="tooltiptext">Delete!</span> <fa icon="person-circle-check" class="fa-fw" />
<fa icon="trash-can" class="text-red-600 fa-fw ml-1" /> </button>
</button> <button
v-else
<div v-if="showGiveNumbers" class="float-right"> @click="register(contact)"
<div class="float-right"> class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
<div class="tooltip"> title="Registration unknown"
to: >
<fa icon="person-circle-question" class="fa-fw" />
</button>
<button
@click="deleteContact(contact)"
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>
<div v-if="!showGiveNumbers" class="ml-auto flex gap-1.5">
<button
class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
@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>

Loading…
Cancel
Save