tweaks to feed UI #117

Merged
trentlarson merged 3 commits from passkey-flow into master 5 months ago
  1. 4
      src/libs/endorserServer.ts
  2. 2
      src/views/ContactsView.vue
  3. 8
      src/views/DiscoverView.vue
  4. 189
      src/views/HomeView.vue

4
src/libs/endorserServer.ts

@ -407,7 +407,7 @@ export function contactForDid(
* @param contact * @param contact
* @param allMyDids * @param allMyDids
* @return { known: boolean, displayName: string, profileImageUrl?: string } * @return { known: boolean, displayName: string, profileImageUrl?: string }
* where 'known' is true if the display name is some easily-recogizable name, false if it's a generic name like "Someone Unnamed" * where 'known' is true if they are in the contacts
*/ */
export function didInfoForContact( export function didInfoForContact(
did: string | undefined, did: string | undefined,
@ -422,7 +422,7 @@ export function didInfoForContact(
} else if (contact) { } else if (contact) {
return { return {
displayName: contact.name || "Contact With No Name", displayName: contact.name || "Contact With No Name",
known: !!contact.name, known: !!contact,
profileImageUrl: contact.profileImageUrl, profileImageUrl: contact.profileImageUrl,
}; };
} else { } else {

2
src/views/ContactsView.vue

@ -109,7 +109,7 @@
}" }"
title="See more about this DID" title="See more about this DID"
> >
<fa icon="circle-info" class="text-blue-500 ml-6" /> <fa icon="circle-info" class="text-blue-500 ml-4" />
</router-link> </router-link>
</h2> </h2>
<div class="text-sm truncate"> <div class="text-sm truncate">

8
src/views/DiscoverView.vue

@ -37,7 +37,7 @@
isRemoteActive = false; isRemoteActive = false;
searchLocal(); searchLocal();
" "
v-bind:class="computedLocalTabClassNames()" v-bind:class="computedLocalTabStyleClassNames()"
> >
Nearby Nearby
<span <span
@ -57,7 +57,7 @@
isLocalActive = false; isLocalActive = false;
searchAll(); searchAll();
" "
v-bind:class="computedRemoteTabClassNames()" v-bind:class="computedRemoteTabStyleClassNames()"
> >
Anywhere Anywhere
<span <span
@ -422,7 +422,7 @@ export default class DiscoverView extends Vue {
this.$router.push(route); this.$router.push(route);
} }
public computedLocalTabClassNames() { public computedLocalTabStyleClassNames() {
return { return {
"inline-block": true, "inline-block": true,
"py-3": true, "py-3": true,
@ -440,7 +440,7 @@ export default class DiscoverView extends Vue {
}; };
} }
public computedRemoteTabClassNames() { public computedRemoteTabStyleClassNames() {
return { return {
"inline-block": true, "inline-block": true,
"py-3": true, "py-3": true,

189
src/views/HomeView.vue

@ -64,98 +64,105 @@
:to="{ name: 'quick-action-bvc' }" :to="{ name: 'quick-action-bvc' }"
class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md" class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
> >
Bountiful Voluntaryist Community Actions</router-link Bountiful Voluntaryist Community Actions
> </router-link>
</div> </div>
<!-- show the actions for recognizing a give -->
<div class="mb-8"> <div class="mb-8">
<div v-if="isCreatingIdentifier"> <div v-if="isCreatingIdentifier">
<p class="text-slate-500 text-center italic mt-4 mb-4"> <p class="text-slate-500 text-center italic mt-4 mb-4">
<fa icon="spinner" class="fa-spin-pulse" /> Loading&hellip; <fa icon="spinner" class="fa-spin-pulse" /> Loading&hellip;
</p> </p>
</div> </div>
<div
v-if="!activeDid && !isCreatingIdentifier"
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
>
<p class="text-lg mb-3">
Want to connect with your contacts, or share contributions or
projects?
</p>
<router-link
:to="{ name: 'start' }"
class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
>
Create An Identifier</router-link
>
</div>
<div
v-else-if="!isRegistered"
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
>
Someone must register you before you can give or offer.
<router-link
:to="{ name: 'contact-qr' }"
class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
>
Show Them Your Identifier Info
</router-link>
</div>
<div v-else> <div v-else>
<!-- activeDid && isRegistered --> <!-- !isCreatingIdentifier -->
<div class="mb-4"> <div
<h2 class="text-xl font-bold">Record Something Given By:</h2> v-if="!activeDid"
</div> class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
<ul
class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
> >
<li @click="openDialog()"> <p class="text-lg mb-3">
<img Want to connect with your contacts, or share contributions or
src="../assets/blank-square.svg" projects?
class="mx-auto border border-slate-300 rounded-md mb-1" </p>
/> <router-link
<h3 :to="{ name: 'start' }"
class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden" class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
>
Unnamed/Unknown
</h3>
</li>
<li
v-for="contact in allContacts.slice(0, 7)"
:key="contact.did"
@click="openDialog(contact)"
> >
<EntityIcon Create An Identifier
:contact="contact" </router-link>
:iconSize="64" </div>
class="mx-auto border border-slate-300 rounded-md mb-1 cursor-pointer"
/>
<h3
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
>
{{ contact.name || contact.did }}
</h3>
</li>
</ul>
<div class="flex justify-between"> <div
v-else-if="!isRegistered"
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
>
<!-- activeDid && !isRegistered -->
Someone must register you before you can give kudos or make offers or
create projects... basically before doing anything.
<router-link <router-link
v-if="allContacts.length >= 7" :to="{ name: 'contact-qr' }"
:to="{ name: 'contact-gift' }" class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
> >
Choose From All Contacts Show Them Your Identifier Info
</router-link> </router-link>
<button </div>
@click="openGiftedPrompts()"
class="block text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md" <div v-else>
<!-- activeDid && isRegistered -->
<!-- show the actions for recognizing a give -->
<div class="mb-4">
<h2 class="text-xl font-bold">Record Something Given By:</h2>
</div>
<ul
class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
> >
Ideas... <li @click="openDialog()">
</button> <img
src="../assets/blank-square.svg"
class="mx-auto border border-slate-300 rounded-md mb-1"
/>
<h3
class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
>
Unnamed/Unknown
</h3>
</li>
<li
v-for="contact in allContacts.slice(0, 7)"
:key="contact.did"
@click="openDialog(contact)"
>
<EntityIcon
:contact="contact"
:iconSize="64"
class="mx-auto border border-slate-300 rounded-md mb-1 cursor-pointer"
/>
<h3
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
>
{{ contact.name || contact.did }}
</h3>
</li>
</ul>
<div class="flex justify-between">
<router-link
v-if="allContacts.length >= 7"
:to="{ name: 'contact-gift' }"
class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
>
Choose From All Contacts
</router-link>
<button
@click="openGiftedPrompts()"
class="block text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
>
Ideas...
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -200,14 +207,22 @@
</div> </div>
<div class="grid grid-cols-12"> <div class="grid grid-cols-12">
<span class="col-span-1 justify-self-start"> <span class="pt-1 col-span-1 justify-self-start">
<span> <span>
<fa <fa
v-if="record.giver.known || record.receiver.known"
icon="circle-user" icon="circle-user"
class="pt-1 text-slate-500" :class="
computeKnownPersonIconStyleClassNames(
record.giver.known || record.receiver.known,
)
"
@click="toastUser('This involves your contacts.')"
/>
<fa
icon="gift"
class="pl-3 text-slate-500"
@click="toastUser('This is a gift.')"
/> />
<fa v-else icon="gift" class="pt-1 pl-3 text-slate-500" />
</span> </span>
</span> </span>
<span class="col-span-10 justify-self-stretch"> <span class="col-span-10 justify-self-stretch">
@ -758,5 +773,21 @@ export default class HomeView extends Vue {
openFeedFilters() { openFeedFilters() {
(this.$refs.feedFilters as FeedFilters).open(this.reloadFeedOnChange); (this.$refs.feedFilters as FeedFilters).open(this.reloadFeedOnChange);
} }
toastUser(message) {
this.$notify(
{
group: "alert",
type: "toast",
title: "FYI",
text: message,
},
2000,
);
}
computeKnownPersonIconStyleClassNames(known: boolean) {
return known ? "text-slate-500" : "text-slate-100";
}
} }
</script> </script>

Loading…
Cancel
Save