Browse Source

UI improvements

- Consistent button styling for interactive elements
- Tooltips relegated to title attribute to avoid blocking other buttons
pull/46/head
Jose Olarte III 1 year ago
parent
commit
5134e2f562
  1. 112
      src/views/ContactsView.vue

112
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,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>

Loading…
Cancel
Save