trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 20 Releases 5 Wiki Activity
Browse Source

WIP: notification system redesign 

- Tabbed interface to expand the view's capabilities
- Added controls for managing notifications individually or in bulk
- Streamlined list design for increased information density
notification-system
Jose Olarte III 3 days ago
parent
8815f36596
commit
106cefab51
1 changed files with 130 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 201
      src/views/NewActivityView.vue

201
src/views/NewActivityView.vue
View File

@ -3,105 +3,156 @@
<!-- CONTENT -->
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
<!-- Breadcrumb -->
<div id="ViewBreadcrumb" class="mb-8">
<h1 class="text-lg text-center font-light relative px-7">
<div class="mb-2">
<h1 class="text-xl text-center font-semibold relative px-7">
<!-- Back -->
<font-awesome
icon="chevron-left"
class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
class="fa-fw text-lg text-center px-2 py-1 absolute -left-2"
@click="$router.back()"
/>
New Activity For You
Notifications
</h1>
</div>
<!-- Display a single row with the name of "New Offers To You" with a count. -->
<div class="flex justify-between" data-testId="showOffersToUser">
<div>
<span class="text-lg font-medium"
>{{ newOffersToUser.length
}}{{ newOffersToUserHitLimit ? "+" : "" }}</span
<!-- Main Tabs -->
<div class="text-center text-slate-500 border-b border-slate-300 mt-4 mb-2">
<ul class="flex flex-wrap justify-center gap-4 -mb-px">
<li>
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
>
<span class="text-lg font-medium ml-4"
>New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
Offers
</a>
</li>
<li>
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
>
<font-awesome
v-if="newOffersToUser.length > 0"
:icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
class="cursor-pointer ml-4 mr-4 text-lg"
@click="expandOffersToUserAndMarkRead()"
/>
Projects
</a>
</li>
<li>
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
>
Favorites
</a>
</li>
</ul>
</div>
<router-link to="/recent-offers-to-user" class="text-blue-500">
See&nbsp;all
</router-link>
<!-- Sub Tabs - Offers -->
<div class="text-center text-slate-500 border-b border-slate-300 mb-2">
<ul class="flex flex-wrap justify-center gap-4 -mb-px">
<li>
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
>
To You
</a>
</li>
<li>
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
>
To Your Projects
</a>
</li>
</ul>
</div>
<div v-if="showOffersDetails" class="ml-4 mt-4">
<ul class="list-disc ml-4">
<!-- Offers to You -->
<div v-if="showOffersDetails" class="mt-4">
<div class="flex justify-end mb-2">
<a
href="#"
class="flex items-center justify-end gap-2 text-sm 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-1 rounded"
>
Mark all as read
<font-awesome icon="check"></font-awesome>
</a>
</div>
<ul class="text-sm border-t border-slate-300">
<!-- Sample unread item -->
<li
class="flex justify-between items-center gap-4 border-b border-slate-300 py-2"
>
<!-- Notification details -->
<a href="#" class="block">
<span class="font-semibold">John Doe</span>
offered
<span class="font-semibold text-blue-600"
>An unbelievably amazing new offer for you!</span
>
and
<span class="font-semibold text-blue-600">100 USD</span>
</a>
<!-- Unread indicator -->
<font-awesome
icon="circle"
class="text-rose-500 text-[10px] border border-rose-500 rounded-full"
></font-awesome>
</li>
<!-- Sample read item -->
<li
class="flex justify-between items-center gap-4 border-b border-slate-300 py-2"
>
<!-- Notification details -->
<a href="#" class="block text-slate-400">
<span class="font-semibold">Michael Smith</span>
offered
<span class="font-semibold"
>An unsurprisingly mediocre old offer for you</span
>
and
<span class="font-semibold">50 USD</span>
</a>
<!-- Read indicator -->
<font-awesome
icon="circle"
class="text-transparent text-[10px] border border-slate-300 rounded-full"
></font-awesome>
</li>
<li
v-for="offer in newOffersToUser"
:key="offer.jwtId"
class="mt-4 relative group"
class="flex justify-between items-center gap-4 border-b border-slate-300 py-2"
>
<span>{{
<router-link
:to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
class="block"
>
<span class="font-semibold">{{
didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
}}</span>
offered
<span v-if="offer.objectDescription">{{
offer.objectDescription
}}</span
>{{ offer.objectDescription && offer.amount ? ", and " : "" }}
<span v-if="offer.amount">{{
<span
v-if="offer.objectDescription"
class="font-semibold text-blue-600"
>{{ offer.objectDescription }}</span
>{{ offer.objectDescription && offer.amount ? " and " : "" }}
<span v-if="offer.amount" class="font-semibold text-blue-600">{{
displayAmount(offer.unit, offer.amount)
}}</span>
<router-link
:to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
class="text-blue-500"
>
<font-awesome
icon="file-lines"
class="pl-2 text-blue-500 cursor-pointer"
/>
</router-link>
<!-- New line that appears on hover or when the offer is clicked -->
<div
class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
@click="markOffersAsReadStartingWith(offer.jwtId)"
>
<span class="inline-block w-8 h-px bg-gray-500 mr-2" />
Click to keep all above as new offers
</div>
</li>
</ul>
</div>
<!-- Display a single row with the name of "New Offers To Your Projects" with a count. -->
<div
class="mt-4 flex justify-between"
data-testId="showOffersToUserProjects"
>
<div>
<span class="text-lg font-medium"
>{{ newOffersToUserProjects.length
}}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}</span
>
<span class="text-lg font-medium ml-4"
>New Offer{{ newOffersToUserProjects.length === 1 ? "" : "s" }} To
Your Projects</span
>
<!-- Unread indicator -->
<font-awesome
v-if="newOffersToUserProjects.length > 0"
:icon="
showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
"
class="cursor-pointer ml-4 mr-4 text-lg"
@click="expandOffersToUserProjectsAndMarkRead()"
/>
</div>
<router-link to="/recent-offers-to-user-projects" class="text-blue-500">
See&nbsp;all
</router-link>
icon="circle"
class="text-rose-500 text-[10px] border border-rose-500 rounded-full"
></font-awesome>
</li>
</ul>
</div>
<div v-if="showOffersToUserProjectsDetails" class="ml-4 mt-4">
@ -191,7 +242,7 @@ export default class NewActivityView extends Vue {
newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
newOffersToUserProjectsHitLimit = false;
showOffersDetails = false;
showOffersDetails = true;
showOffersToUserProjectsDetails = false;
didInfo = didInfo;
displayAmount = displayAmount;

Write Preview
Loading…
Cancel
Save