From 579cecbe6e03bf43c202db1571e76cd3b4673f06 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Mon, 12 May 2025 21:22:05 +0800
Subject: [PATCH] WIP: gifting UI revamp
Started to transform the gifting dialog into the two-step setup as per previous mockups
---
src/components/GiftedDialog.vue | 227 ++++++++++++++++++++++----------
src/lib/fontawesome.ts | 4 +
src/main.ts | 4 +
src/views/HomeView.vue | 81 ++++--------
4 files changed, 190 insertions(+), 126 deletions(-)
diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 2c778169..53554192 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -1,87 +1,168 @@
<template>
<div v-if="visible" class="dialog-overlay">
<div class="dialog">
- <h1 class="text-xl font-bold text-center mb-4">
- {{ customTitle }}
- </h1>
- <input
- v-model="description"
- type="text"
- class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
- :placeholder="prompt || 'What was given?'"
- />
- <div class="flex flex-row justify-center">
- <span
- class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
- @click="changeUnitCode()"
- >
- {{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
- </span>
- <div
- class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
- @click="amountInput === '0' ? null : decrement()"
- >
- <font-awesome icon="chevron-left" />
- </div>
- <input
- id="inputGivenAmount"
- v-model="amountInput"
- type="number"
- class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
- />
- <div
- class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
- @click="increment()"
+ <!-- Step 1: Recipient -->
+ <div id="sectionGiftedRecipient">
+ <label class="block font-bold mb-4">Choose a person to receive from:</label>
+
+ <!-- Quick-pick grid -->
+ <ul
+ class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4"
>
- <font-awesome icon="chevron-right" />
- </div>
- </div>
- <div class="mt-4 flex justify-center">
- <span>
- <router-link
- :to="{
- name: 'gifted-details',
- query: {
- amountInput,
- description,
- giverDid: giver?.did,
- giverName: giver?.name,
- offerId,
- fulfillsProjectId: toProjectId,
- providerProjectId: fromProjectId,
- recipientDid: receiver?.did,
- recipientName: receiver?.name,
- unitCode,
- },
- }"
- class="text-blue-500"
+ <li @click="openDialog()">
+ <img
+ src="../assets/blank-square.svg"
+ class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
+ />
+ <font-awesome icon="circle-question" class="text-slate-400 text-5xl mb-1" />
+ <h3
+ class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+ >
+ Unnamed
+ </h3>
+ </li>
+ <li v-if="allContacts.length === 0" class="text-sm">
+ (Add friends to see more people worthy of recognition.)
+ </li>
+ <li
+ v-for="contact in allContacts.slice(0, 6)"
+ :key="contact.did"
+ @click="openDialog(contact)"
+ class="cursor-pointer"
>
- Photo & more options ...
- </router-link>
- </span>
- </div>
- <p class="text-center mb-2 mt-6 italic">
- Sign & Send to publish to the world
- <font-awesome
- icon="circle-info"
- class="pl-2 text-blue-500 cursor-pointer"
- @click="explainData()"
- />
- </p>
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
- <button
- class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
- @click="confirm"
- >
- Sign & Send
- </button>
+ <div class="relative w-fit mx-auto">
+ <EntityIcon
+ :contact="contact"
+ :icon-size="64"
+ class="max-w-12 mx-auto border border-slate-300 rounded-full mb-1"
+ />
+
+ <div
+ class="rounded-full bg-orange-500 absolute bottom-0 right-0 p-0.5 translate-x-1/3"
+ >
+ <font-awesome icon="thumbtack" class="block fa-fw text-white text-xs w-4" />
+ </div>
+ </div>
+ <h3
+ class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+ >
+ {{ contact.name || contact.did }}
+ </h3>
+ </li>
+ <li>
+ <router-link
+ v-if="allContacts.length >= 6"
+ :to="{ name: 'contact-gift' }"
+ class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
+ >
+ <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
+ <h3
+ class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+ >
+ Show All
+ </h3>
+ </router-link>
+ </li>
+ </ul>
+
<button
- class="block w-full text-center text-md uppercase 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-1.5 py-2 rounded-md"
+ class="block w-full text-center text-md uppercase 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-1.5 py-2 rounded-lg"
@click="cancel"
>
Cancel
</button>
</div>
+
+ <!-- Step 2: Gift -->
+ <div id="sectionGiftedGift">
+ <button class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4">
+ <img src="https://placehold.co/480?text=(Image)" class="size-8 object-cover rounded-full">
+
+ <div class="text-start">
+ <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">Received from:</p>
+ <h3 class="font-semibold">Matthew Raymer</h3>
+ </div>
+
+ <p class="ms-auto text-sm uppercase font-medium pe-2">Change</p>
+ </button>
+ <input
+ v-model="description"
+ type="text"
+ class="block w-full rounded border border-slate-400 px-3 py-2 placeholder:italic"
+ :placeholder="prompt || 'What was given?'"
+ />
+ <div class="flex mb-4">
+ <button
+ class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
+ @click="amountInput === '0' ? null : decrement()"
+ >
+ <i class="fa-solid fa-chevron-left"></i>
+ </button>
+ <input
+ id="inputGivenAmount"
+ v-model="amountInput"
+ type="number"
+ class="flex-1 border border-e-0 border-slate-400 px-2 py-2 text-center w-[1px]"
+ />
+ <button
+ class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
+ @click="increment()"
+ >
+ <i class="fa-solid fa-chevron-right"></i>
+ </button>
+
+ <select class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2">
+ <option value="HUR">Hours</option>
+ <option value="USD">US $</option>
+ <option value="BTC">BTC</option>
+ <option value="BX">BX</option>
+ <option value="ETH">ETH</option>
+ </select>
+ </div>
+ <button class="block w-full text-center text-md uppercase 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-1.5 py-2 rounded-lg mb-4">Photo & more options…</button>
+ <router-link
+ :to="{
+ name: 'gifted-details',
+ query: {
+ amountInput,
+ description,
+ giverDid: giver?.did,
+ giverName: giver?.name,
+ offerId,
+ fulfillsProjectId: toProjectId,
+ providerProjectId: fromProjectId,
+ recipientDid: receiver?.did,
+ recipientName: receiver?.name,
+ unitCode,
+ },
+ }"
+ class="block w-full text-center text-md uppercase 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-1.5 py-2 rounded-lg mb-4"
+ >
+ Photo & more options…
+ </router-link>
+ <p class="text-center mb-4">
+ <b class="font-medium">Sign & Send</b> to publish to the world
+ <font-awesome
+ icon="circle-info"
+ class="fa-fw text-blue-500 text-lg cursor-pointer"
+ @click="explainData()"
+ />
+ </p>
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+ <button
+ class="block w-full text-center text-md uppercase 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 px-1.5 py-2 rounded-lg"
+ @click="confirm"
+ >
+ Sign & Send
+ </button>
+ <button
+ class="block w-full text-center text-md uppercase 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-1.5 py-2 rounded-lg"
+ @click="cancel"
+ >
+ Cancel
+ </button>
+ </div>
+ </div>
</div>
</div>
</template>
diff --git a/src/lib/fontawesome.ts b/src/lib/fontawesome.ts
index 8d7a8a07..fe88b722 100644
--- a/src/lib/fontawesome.ts
+++ b/src/lib/fontawesome.ts
@@ -28,6 +28,7 @@ import {
faCircleCheck,
faCircleInfo,
faCircleQuestion,
+ faCircleRight,
faCircleUser,
faClock,
faCoins,
@@ -77,6 +78,7 @@ import {
faSquareCaretDown,
faSquareCaretUp,
faSquarePlus,
+ faThumbtack,
faTrashCan,
faTriangleExclamation,
faUser,
@@ -108,6 +110,7 @@ library.add(
faCircleCheck,
faCircleInfo,
faCircleQuestion,
+ faCircleRight,
faCircleUser,
faClock,
faCoins,
@@ -157,6 +160,7 @@ library.add(
faSquareCaretDown,
faSquareCaretUp,
faSquarePlus,
+ faThumbtack,
faTrashCan,
faTriangleExclamation,
faUser,
diff --git a/src/main.ts b/src/main.ts
index d4a88c7f..220a6f10 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -32,6 +32,7 @@ import {
faCircleCheck,
faCircleInfo,
faCircleQuestion,
+ faCircleRight,
faCircleUser,
faClock,
faCoins,
@@ -82,6 +83,7 @@ import {
faSquareCaretDown,
faSquareCaretUp,
faSquarePlus,
+ faThumbtack,
faTrashCan,
faTriangleExclamation,
faUser,
@@ -112,6 +114,7 @@ library.add(
faCircleCheck,
faCircleInfo,
faCircleQuestion,
+ faCircleRight,
faCircleUser,
faClock,
faCoins,
@@ -162,6 +165,7 @@ library.add(
faSquareCaretDown,
faSquareCaretUp,
faSquarePlus,
+ faThumbtack,
faTrashCan,
faTriangleExclamation,
faUser,
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a685b0e1..98b32c84 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -117,62 +117,37 @@ Raymer * @version 1.0.0 */
</div>
<div v-else id="sectionRecordSomethingGiven">
- <!-- !isCreatingIdentifier && isRegistered -->
-
- <!-- show the actions for recognizing a give -->
- <div class="flex">
- <h2 class="text-xl font-bold">What have you seen someone do?</h2>
- <button
- class="ml-2 block text-xs text-center 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-1 rounded-md"
- @click="openGiftedPrompts()"
- >
- <font-awesome icon="lightbulb" class="fa-fw" />
- </button>
- </div>
-
- <ul
- class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mt-4"
- >
- <li @click="openDialog()">
- <img
- src="../assets/blank-square.svg"
- class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
- />
- <h3
- class="text-xs text-blue-500 italic font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
+ <!-- Record Quick-Action -->
+ <div class="mb-6">
+ <div class="flex gap-2 items-center mb-2">
+ <h2 class="text-xl font-bold">Record something given by:</h2>
+ <button
+ @click="openGiftedPrompts()"
+ class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
>
- Unnamed/Unknown
- </h3>
- </li>
- <li v-if="allContacts.length === 0" class="text-sm">
- (Add friends to see more people worthy of recognition.)
- </li>
- <li
- v-for="contact in allContacts.slice(0, 6)"
- :key="contact.did"
- @click="openDialog(contact)"
- >
- <EntityIcon
- :contact="contact"
- :icon-size="64"
- class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
- />
- <h3
- class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
+ <font-awesome icon="lightbulb" />
+ </button>
+ </div>
+
+ <div class="grid grid-cols-2 gap-2">
+ <button
+ type="button"
+ @click="openDialog()"
+ class="text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-lg"
>
- {{ contact.name || contact.did }}
- </h3>
- </li>
- <li>
- <router-link
- v-if="allContacts.length >= 6"
- :to="{ name: 'contact-gift' }"
- class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
+ <font-awesome icon="user" />
+ Person
+ </button>
+ <button
+ type="button"
+ @click="openDialog()"
+ class="text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-lg"
>
- ... or someone else...
- </router-link>
- </li>
- </ul>
+ <font-awesome icon="folder-open" />
+ Project
+ </button>
+ </div>
+ </div>
</div>
</div>
</div>