trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 4 Releases 5 Wiki Activity
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
015704c94e
commit
5134e2f562
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. 148
      src/views/ContactsView.vue

148
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)"
<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>

Write Preview
Loading…
Cancel
Save