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

WIP: notification system adjustments 

- Re-organize tabs
- Remove unneeded "Unread only" toggle (limiting functionality to chronological isUnread)
- Added "read line"
notification-system
Jose Olarte III 1 day ago
parent
213f5f0555
commit
eb21d3c247
1 changed files with 71 additions and 71 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. 134
      src/views/NewActivityView.vue

134
src/views/NewActivityView.vue
View File

@ -19,7 +19,7 @@
<!-- Main Tabs --> <!-- Main Tabs -->
<div class="text-center text-slate-500 border-b border-slate-300 mt-4 mb-2"> <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"> <ul class="flex flex-wrap justify-center gap-4 -mb-px">
<li class="flex items-center gap-1"> <li class="flex items-center gap-[0.175em]">
<a <a
href="#" href="#"
class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold" class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
@ -29,11 +29,11 @@
<!-- Unread count --> <!-- Unread count -->
<span <span
class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]" class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em] -me-1.5"
>3</span >3</span
> >
</li> </li>
<li class="flex items-center gap-1"> <li class="flex items-center gap-[0.175em]">
<a <a
href="#" href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400" class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
@ -43,16 +43,24 @@
<!-- Unread count --> <!-- Unread count -->
<span <span
class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.2em]" class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em] -me-1.5"
>10+</span >9+</span
> >
</li> </li>
<li class="flex items-center gap-1"> <li class="flex items-center gap-[0.175em]">
<a <a
href="#" href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400" class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
> >
Favorites People
</a>
</li>
<li class="flex items-center gap-[0.175em]">
<a
href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
>
Items
</a> </a>
</li> </li>
</ul> </ul>
@ -60,8 +68,8 @@
<!-- Sub Tabs - Offers --> <!-- Sub Tabs - Offers -->
<div class="text-center text-slate-500 border-b border-slate-300 mb-2"> <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"> <ul class="flex flex-wrap justify-center gap-4 text-sm -mb-px">
<li class="flex items-center gap-1"> <li class="flex items-center gap-[0.175em]">
<a <a
href="#" href="#"
class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold" class="inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
@ -71,11 +79,11 @@
<!-- Unread count --> <!-- Unread count -->
<span <span
class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]" class="inline-block bg-rose-500 text-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em] -me-1.5"
>3</span >3</span
> >
</li> </li>
<li class="flex items-center gap-1"> <li class="flex items-center gap-[0.175em]">
<a <a
href="#" href="#"
class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400" class="inline-block py-2 rounded-t-lg border-b-2 text-blue-600 border-transparent hover:border-slate-400"
@ -88,23 +96,7 @@
<!-- Offers to You --> <!-- Offers to You -->
<div v-if="showOffersDetails" class="mt-4"> <div v-if="showOffersDetails" class="mt-4">
<div class="flex justify-between items-center text-sm mb-2"> <div class="flex justify-end items-center text-sm mb-2">
<label class="flex items-center justify-between gap-1.5 cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input type="checkbox" class="sr-only" />
<!-- line -->
<div class="block bg-slate-500 w-10 h-6 rounded-full"></div>
<!-- dot -->
<div
class="dot absolute left-1 top-1 bg-slate-400 w-4 h-4 rounded-full transition"
></div>
</div>
<!-- label -->
<span class="sm:hidden">Unread only</span>
<span class="hidden sm:block">Show unread only</span>
</label>
<a <a
href="#" href="#"
class="flex items-center justify-end gap-2 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" class="flex items-center justify-end gap-2 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"
@ -114,20 +106,28 @@
</a> </a>
</div> </div>
<ul class="text-sm border-t border-slate-300"> <ul class="text-sm border-t border-slate-300">
<!-- Sample unread item -->
<li <li
v-for="offer in newOffersToUser"
:key="offer.jwtId"
class="flex justify-between items-center gap-4 border-b border-slate-300 py-2" class="flex justify-between items-center gap-4 border-b border-slate-300 py-2"
> >
<!-- Notification details --> <router-link
<a href="#" class="block"> :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
<span class="font-semibold">John Doe</span> class="block"
offered
<span class="font-semibold text-blue-600"
>An unbelievably amazing new offer for you!</span
> >
and <span class="font-semibold">{{
<span class="font-semibold text-blue-600">100 USD</span> didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
</a> }}</span>
offered
<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>
<!-- Unread indicator --> <!-- Unread indicator -->
<font-awesome <font-awesome
@ -137,16 +137,24 @@
</li> </li>
<!-- Sample read item --> <!-- Sample read item -->
<li <li class="border-b border-slate-300 py-2">
class="flex justify-between items-center gap-4 border-b border-slate-300 py-2" <!-- Last viewed separator -->
<div
class="border-t border-dashed border-slate-300 text-orange-400 mt-4 mb-2 font-bold text-sm"
> >
<span class="block w-fit mx-auto -mt-2.5 bg-white px-2">
You've already seen all the following
</span>
<hr class="border-slate-300 mt-4" />
</div>
<div class="flex justify-between items-center gap-4">
<!-- Notification details --> <!-- Notification details -->
<a href="#" class="block text-slate-400"> <a href="#" class="block text-slate-400">
<span class="font-semibold">Michael Smith</span> <span class="font-semibold">User One</span>
offered offered
<span class="font-semibold" <span class="font-semibold">Sample read notification item</span>
>An unsurprisingly mediocre old offer for you</span
>
and and
<span class="font-semibold">50 USD</span> <span class="font-semibold">50 USD</span>
</a> </a>
@ -156,35 +164,27 @@
icon="circle" icon="circle"
class="text-transparent text-[8px] border border-slate-300 rounded-full" class="text-transparent text-[8px] border border-slate-300 rounded-full"
></font-awesome> ></font-awesome>
</div>
</li> </li>
<li
v-for="offer in newOffersToUser" <!-- Sample read item -->
:key="offer.jwtId" <li class="border-b border-slate-300 py-2">
class="flex justify-between items-center gap-4 border-b border-slate-300 py-2" <div class="flex justify-between items-center gap-4">
> <!-- Notification details -->
<router-link <a href="#" class="block text-slate-400">
:to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }" <span class="font-semibold">User One</span>
class="block"
>
<span class="font-semibold">{{
didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
}}</span>
offered offered
<span <span class="font-semibold">Sample read notification item</span>
v-if="offer.objectDescription" and
class="font-semibold text-blue-600" <span class="font-semibold">50 USD</span>
>{{ offer.objectDescription }}</span </a>
>{{ offer.objectDescription && offer.amount ? " and " : "" }}
<span v-if="offer.amount" class="font-semibold text-blue-600">{{
displayAmount(offer.unit, offer.amount)
}}</span>
</router-link>
<!-- Unread indicator --> <!-- Read indicator -->
<font-awesome <font-awesome
icon="circle" icon="circle"
class="text-rose-500 text-[8px] border border-rose-500 rounded-full" class="text-transparent text-[8px] border border-slate-300 rounded-full"
></font-awesome> ></font-awesome>
</div>
</li> </li>
</ul> </ul>
</div> </div>

Write Preview
Loading…
Cancel
Save