@ -3,105 +3,198 @@
<!-- 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-2xl 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 top-[0.2em] "
@ 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 ? "+" : "" } } < / s p a n
>
< span class = "text-lg font-medium ml-4"
> New Offer { { newOffersToUser . length === 1 ? "" : "s" } } To You < / s p a n
>
< font -awesome
v - if = "newOffersToUser.length > 0"
: icon = "showOffersDetails ? 'chevron-down' : 'chevron-right'"
class = "cursor-pointer ml-4 mr-4 text-lg"
@ click = "expandOffersToUserAndMarkRead()"
/ >
< / div >
< router -link to = "/recent-offers-to-user" class = "text-blue-500" >
See & nbsp ; all
< / r o u t e r - l i n k >
<!-- 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 class = "flex items-center gap-[0.175em]" >
< a
href = "#"
class = "inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
>
Offers
< / a >
<!-- Unread count -- >
< span
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 -mt-[2px]"
> 3 < / s p a n
>
< / 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"
>
Projects
< / a >
<!-- Unread count -- >
< span
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 -mt-[2px]"
> 9 + < / s p a n
>
< / 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"
>
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 >
< / li >
< / ul >
< / div >
< div v-if ="showOffersDetails" class="ml-4 mt-4" >
< ul class = "list-disc ml-4" >
<!-- 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 text-sm -mb-px" >
< li class = "flex items-center gap-[0.175em]" >
< a
href = "#"
class = "inline-block py-2 rounded-t-lg border-b-2 active text-black border-black font-semibold"
>
To You
< / a >
<!-- Unread count -- >
< span
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 -mt-[2px]"
> 2 < / s p a n
>
< / 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"
>
Your Projects
< / 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"
>
Favorites
< / a >
< / li >
< / ul >
< / div >
<!-- Offers to You -- >
< div v-if ="showOffersDetails" class="mt-4" >
< div class = "flex justify-end items-center text-sm mb-2" >
< a
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"
>
Mark all as read
< font -awesome icon = "check" > < / f o n t - a w e s o m e >
< / a >
< / div >
< ul class = "text-sm border-t border-slate-300" >
< li
v - for = "offer in newOffersToUser"
: key = "offer.jwtId"
class = "mt-4 relative group"
class = "flex justify-between ite ms-cen ter gap -4 bo rd er-b border-s late-300 py-2 "
>
< span > { {
didInfo ( offer . offeredByDid , activeDid , allMyDids , allContacts )
} } < / span >
offered
< span v-if ="offer.objectDescription" > {{
offer . objectDescription
} } < / s p a n
> { { offer . objectDescription && offer . amount ? ", and " : "" } }
< span v-if ="offer.amount" > {{
displayAmount ( offer . unit , offer . amount )
} } < / span >
< router -link
: to = "{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
class = "text-blue-500"
class = "block"
>
< font -awesome
icon = "file-lines"
class = "pl-2 text-blue-500 cursor-pointer"
/ >
< span class = "font-semibold" > { {
didInfo ( offer . offeredByDid , activeDid , allMyDids , allContacts )
} } < / span >
offered
< span
v - if = "offer.objectDescription"
class = "font-semibold text-blue-600"
> { { offer . objectDescription } } < / s p a n
> { { offer . objectDescription && offer . amount ? " and " : "" } }
< span v-if ="offer.amount" class="font-semibold text-blue-600" > {{
displayAmount ( offer . unit , offer . amount )
} } < / span >
< / r o u t e r - l i n k >
<!-- New line that appears on hover or when the offer is clicked -- >
<!-- Unread indicator -- >
< font -awesome
icon = "circle"
class = "text-rose-500 text-[8px] border border-rose-500 rounded-full"
> < / f o n t - a w e s o m e >
< / li >
<!-- Sample read item -- >
< li class = "border-b border-slate-300 py-2" >
<!-- Last viewed separator -- >
< 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)"
class = "border-t border-dashed border-slate-300 text-orange-400 mt-4 mb-2 font-bold text-sm"
>
< span class = "inline-block w-8 h-px bg-gray-500 mr-2" / >
Click to keep all above as new offers
< 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 -- >
< a href = "#" class = "block text-slate-400" >
< span class = "font-semibold" > User One < / span >
offered
< span class = "font-semibold" > Sample read notification item < / span >
and
< span class = "font-semibold" > 50 USD < / span >
< / a >
<!-- Read indicator -- >
< font -awesome
icon = "circle"
class = "text-transparent text-[8px] border border-slate-300 rounded-full"
> < / f o n t - a w e s o m e >
< / 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 ? "+" : "" } } < / s p a n
>
< span class = "text-lg font-medium ml-4"
> New Offer { { newOffersToUserProjects . length === 1 ? "" : "s" } } To
Your Projects < / s p a n
>
< 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
< / r o u t e r - l i n k >
<!-- Sample read item -- >
< li class = "border-b border-slate-300 py-2" >
< div class = "flex justify-between items-center gap-4" >
<!-- Notification details -- >
< a href = "#" class = "block text-slate-400" >
< span class = "font-semibold" > User One < / span >
offered
< span class = "font-semibold" > Sample read notification item < / span >
and
< span class = "font-semibold" > 50 USD < / span >
< / a >
<!-- Read indicator -- >
< font -awesome
icon = "circle"
class = "text-transparent text-[8px] border border-slate-300 rounded-full"
> < / f o n t - a w e s o m e >
< / div >
< / li >
< / ul >
< / div >
< div v-if ="showOffersToUserProjectsDetails" class="ml-4 mt-4" >
@ -191,7 +284,7 @@ export default class NewActivityView extends Vue {
newOffersToUserProjects : Array < OfferToPlanSummaryRecord > = [ ] ;
newOffersToUserProjectsHitLimit = false ;
showOffersDetails = fals e;
showOffersDetails = tru e;
showOffersToUserProjectsDetails = false ;
didInfo = didInfo ;
displayAmount = displayAmount ;
Jose Olarte III