Compare commits

...

4 Commits

Author SHA1 Message Date
194f741984 Merge branch 'master' into seed-backup-view-improvements 2023-08-07 03:11:07 -04:00
Matthew Aaron Raymer
304985f88d Merge remote-tracking branch 'origin/polish-ui-project-view' 2023-08-07 16:08:48 +08:00
Jose Olarte III
fe09f5180d Minor cleanup 2023-08-03 20:12:47 +08:00
Jose Olarte III
4de66b1609 Cleaned up Project view UI 2023-07-28 20:22:03 +08:00
2 changed files with 115 additions and 89 deletions

View File

@@ -77,93 +77,115 @@
</div> </div>
<div> <div>
<div v-if="activeDid"> <div v-if="activeDid" class="text-center">
<button <button
@click="openDialog({ name: 'you', did: activeDid })" @click="openDialog({ name: 'you', did: activeDid })"
class="text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md" class="block w-full text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
> >
I gave... I gave&hellip;
</button> </button>
&horbar; or: <p class="mt-2 mb-4 text-center">Or, record a gift from:</p>
</div> </div>
<!-- similar contact selection code is in multiple places --> <p v-if="!activeDid" class="mt-2 mb-4">Record a gift from:</p>
Record a gift from
<span v-for="contact in allContacts" :key="contact.did"> <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
<button @click="openDialog(contact)" class="text-blue-500"> <li @click="openDialog()">
&nbsp;{{ contact.name }}</button <div class="mb-1">
>, <fa icon="question-circle" class="fa-fw fa-xl text-slate-400"></fa>
</span> </div>
<span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span> <h3
<button @click="openDialog()" class="text-blue-500"> class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
someone not specified >
</button> Anonymous
</h3>
</li>
<li
v-for="contact in allContacts"
:key="contact.did"
@click="openDialog(contact)"
>
<div class="mb-1">
<fa icon="user" class="fa-fw fa-xl text-slate-400"></fa>
</div>
<h3
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
>
{{ contact.name || "(no name)" }}
</h3>
</li>
</ul>
<!-- Ideally, this button should only be visible when the active account has more than 7 or 11 contacts in their list (we want to limit the grid count above to 8 or 12 accounts to keep it compact) -->
<router-link
v-if="allContacts.length > 7"
:to="{ name: 'contact-gives' }"
class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md"
>
Show More Contacts&hellip;
</router-link>
</div> </div>
<!-- Gifts to & from this --> <!-- Gifts to & from this -->
<div class="mt-8 flex justify-around"> <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div class="bg-slate-100 px-4 py-3 rounded-md">
<h1 class="text-xl">Given to this Project</h1> <h3 class="text-sm uppercase font-semibold mb-3">
Given to this Project
</h3>
<ul class="text-sm border-t border-slate-300">
<li
v-for="give in givesToThis"
:key="give.id"
class="py-1.5 border-b border-slate-300"
>
<div class="flex justify-between gap-4">
<span
><fa icon="user" class="fa-fw text-slate-400"></fa>
{{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
</span>
<span v-if="give.amount"
><fa icon="coins" class="fa-fw text-slate-400"></fa>
{{ give.amount }}
</span>
</div>
<div v-if="give.description" class="text-slate-500">
<fa icon="comment" class="fa-fw text-slate-400"></fa>
{{ give.description }}
</div>
</li>
</ul>
</div> </div>
<div>
<h1 class="text-xl">... and paid forward from this Project</h1> <div class="bg-slate-100 px-4 py-3 rounded-md">
</div> <h3 class="text-sm uppercase font-semibold mb-3">
</div> &hellip;and from this Project
<div class="flex justify-around"> </h3>
<div class="w-1/2">
<div v-for="give in givesToThis" :key="give.id"> <ul class="text-sm border-t border-slate-300">
<div class="flex justify-between"> <li
<div class="flex gap-3"> v-for="give in givesByThis"
<div class="flex gap-2"> :key="give.id"
<fa icon="user" class="fa-fw text-slate-400"></fa> class="py-1.5 border-b border-slate-300"
<span>{{ >
didInfo(give.agentDid, activeDid, allMyDids, allContacts) <div class="flex justify-between gap-4">
}}</span> <span
</div> ><fa icon="user" class="fa-fw text-slate-400"></fa>
<div class="flex gap-2" v-if="give.amount"> {{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
<fa </span>
icon="clock" <span v-if="give.amount"
v-if="give.unit === 'HUR'" ><fa icon="coins" class="fa-fw text-slate-400"></fa>
class="fa-fw text-slate-400" {{ give.amount }}
></fa> </span>
<fa icon="coins" v-else class="fa-fw text-slate-400"></fa> </div>
<span>{{ give.amount }}</span> <div v-if="give.description" class="text-slate-500">
</div> <fa icon="comment" class="fa-fw text-slate-400"></fa>
<div class="flex gap-2" v-if="give.description"> {{ give.description }}
<fa icon="comment" class="fa-fw text-slate-400"></fa> </div>
<span>{{ give.description }}</span> </li>
</div> </ul>
</div>
</div>
</div>
</div>
<div class="w-1/2">
<div v-for="give in givesByThis" :key="give.id">
<div class="flex justify-between">
<div class="flex gap-3">
<div class="flex gap-2">
<fa icon="user" class="fa-fw text-slate-400"></fa>
<span>{{
didInfo(give.agentDid, activeDid, allMyDids, allContacts)
}}</span>
</div>
<div class="flex gap-2" v-if="give.amount">
<fa
icon="clock"
v-if="give.unit === 'HUR'"
class="fa-fw text-slate-400"
></fa>
<fa icon="coins" v-else class="fa-fw text-slate-400"></fa>
<span>{{ give.amount }}</span>
</div>
<div class="flex gap-2">
<fa icon="comment" class="fa-fw text-slate-400"></fa>
<span>{{ give.description }}</span>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<GiftedDialog <GiftedDialog
ref="customDialog" ref="customDialog"
@dialog-result="handleDialogResult" @dialog-result="handleDialogResult"

View File

@@ -20,22 +20,26 @@
</div> </div>
<div v-if="activeAccount"> <div v-if="activeAccount">
<p> <p class="text-center mb-4">
BEWARE: Anyone who gets hold of this mnemonic seed phrase will be able <b class="text-red-600">BEWARE!</b> Anyone who has this seed phrase will
impersonate you and take over any digital holdings based on it. So only be able impersonate you and take over any digital holdings based on it.
reveal it when you are in a private place out of sight of other eyes, Reveal it when you are somewhere only you can see your screen, and
and only record it in something private -- don't take a screenshot or record it somewhere only you have access.
send it to any online service. <i>Don't take a screenshot or send it to any online service.</i>
</p> </p>
<button <div class="bg-slate-100 rounded-md overflow-hidden p-4 mb-4">
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md" <button
@click="showSeedPhrase" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
> @click="showSeedPhrase"
Click here when you're ready to see it. >
</button> Reveal my Seed Phrase
</button>
<p v-if="showSeed">{{ activeAccount.mnemonic }}</p> <p v-if="showSeed" class="text-center text-slate-700 mt-2">
{{ activeAccount.mnemonic }}
</p>
</div>
</div> </div>
<div v-else>You do not have an active identity.</div> <div v-else>You do not have an active identity.</div>
<AlertMessage <AlertMessage