Skip to content

Commit

Permalink
ap/ui-foxes: call details new ui + icon added (#99)
Browse files Browse the repository at this point in the history 
* ap/ui-foxes: call details new ui + icon added, private balance history table ui fix for desktop and mobile

* prettier

---------

Co-authored-by: Alexey Popov <a.popov@tantumpay.com>
Co-authored-by: Alain Brenzikofer <alain@integritee.network>
  • Loading branch information
@alex-byteport @alextantumpay @brenzi
3 people authored Dec 4, 2024
1 parent 73719b4 commit a81ed5c
Show file tree
Hide file tree
Showing 2 changed files with 216 additions and 123 deletions.
132 changes: 111 additions & 21 deletions components/overlays/NoteDetailsOverlay.vue
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,96 @@
<template>
<OverlayDialog :show="show" :close="close" title="Call Details">
<div class="mt-2">
<p class="text-sm text-gray-400">
<b>{{ note.category }}</b> @ {{ formatDate(note.timestamp) }}
</p>
<div v-if="note.direction === NoteDirection.Incoming">
<p class="text-sm wrap-text text-gray-400">from {{ note.account }}</p>
</div>
<div v-if="note.direction === NoteDirection.Outgoing">
<p class="text-sm wrap-text text-gray-400">to {{ note.account }}</p>
</div>
<div v-if="note.amount" class="text-sm font-medium text-white">
{{ note.direction === NoteDirection.Incoming ? "+" : "-" }}
{{ divideBigIntToFloat(note.amount, 10 ** accountStore.getDecimals) }}
TEER
</div>
<div
v-if="note.note?.length > 0"
class="text-sm wrap-text font-medium text-gray-400"
>
<p>note:</p>
<p>{{ note.note }}</p>
<div class="mx-auto mt-5">
<div class="grid grid-cols-1 md:grid-cols-1 gap-6 items-start">
<div>
<div
class="rounded-lg bg-gray-800 shadow-sm ring-1 ring-gray-700 pb-3"
>
<dl class="flex flex-wrap">
<!-- Kategorie und Zeit -->
<div class="w-full flex justify-between px-6 pt-3">
<div class="flex-auto text-left mb-4 md:mb-0">
<dt class="text-sm font-semibold leading-6 text-gray-300">
Category
</dt>
<dd class="mt-1 text-base font-semibold leading-6 text-white">
{{ note.category }}
</dd>
</div>

<div class="flex-auto text-right">
<dt class="text-sm font-semibold leading-6 text-gray-300">
Timestamp
</dt>
<dd class="mt-1 text-base font-semibold leading-6 text-white">
{{ formatDate(note.timestamp) }}
</dd>
</div>
</div>

<!-- Richtung und Konto -->
<div
class="mt-3 flex w-full flex-none gap-x-4 border-t border-gray-700 px-6 pt-3"
>
<div class="flex-auto text-left">
<dt class="text-sm font-semibold leading-6 text-gray-300">
{{
note.direction === NoteDirection.Incoming ? "From" : "To"
}}
</dt>
<dd
class="mt-1 text-base font-semibold leading-6 text-white wallet-address"
>
{{ note.account }}
</dd>
</div>
</div>

<!-- Betrag -->
<div
class="mt-3 flex w-full flex-none gap-x-4 border-t border-gray-700 px-6 pt-3"
>
<div class="flex-auto text-left">
<dt class="text-sm font-semibold leading-6 text-gray-300">
Amount
</dt>
<dd
class="mt-1 text-base font-semibold leading-6 text-white"
:class="{
'text-green-400':
note.direction === NoteDirection.Incoming,
'text-red-400': note.direction === NoteDirection.Outgoing,
}"
>
{{ note.direction === NoteDirection.Incoming ? "+" : "-" }}
{{
divideBigIntToFloat(
note.amount,
10 ** accountStore.getDecimals,
)
}}
TEER
</dd>
</div>
</div>

<!-- Notiz -->
<div
v-if="note.note?.length > 0"
class="mt-3 flex w-full flex-none gap-x-4 border-t border-gray-700 px-6 pt-3"
>
<div class="flex-auto text-left">
<dt class="text-sm font-semibold leading-6 text-gray-300">
Note
</dt>
<dd class="mt-1 text-base font-semibold leading-6 text-white">
{{ note.note }}
</dd>
</div>
</div>
</dl>
</div>
</div>
</div>
</div>
</OverlayDialog>
Expand Down Expand Up @@ -59,4 +129,24 @@ const props = defineProps({
white-space: normal;
word-wrap: break-word;
}
.wallet-address {
display: block;
white-space: nowrap;
/* Verhindert Zeilenumbruch */
overflow: hidden;
/* Versteckt überlaufenden Text */
text-overflow: ellipsis;
/* Zeigt '...' bei zu langem Text an */
max-width: 10ch;
/* Maximale Länge: 10 Zeichen */
}
/* Für größere Bildschirme (ab 641px) */
@media (min-width: 641px) {
.wallet-address {
max-width: 15ch;
/* Begrenze auch hier auf 10 Zeichen */
}
}
</style>
207 changes: 105 additions & 102 deletions components/ui/PrivateTxHistory.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,109 +4,112 @@
History
</div>
</div>
<div v-if="show" class="mb-10">
<!-- Neuer Abschnitt, der nur angezeigt wird, wenn der "Private Balance" Tab aktiv ist -->
<div v-if="show" class="flex-1 overflow-y-auto bg-gray-900 mt-5 rounded-md">
<table class="w-full whitespace-nowrap text-left">
<tbody class="divide-y divide-white/10">
<tr
v-for="(note, index) in noteStore.getFinancialNotes"
:key="index"
class="flex justify-between"
>
<!-- Linksbündige Zelle mit Icon, Text und "New"-Badge -->
<td
class="flex items-center gap-x-4 py-4 pl-4 pr-8 text-left sm:pl-6 lg:pl-8"
>
<!-- Pfeil-SVG für Incoming Transfer -->
<div v-if="note.direction === NoteDirection.Incoming">
<svg
viewBox="0 0 24 24"
fill="currentColor"
class="size-5 text-gray-400"
>
<path
fill-rule="evenodd"
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-.53 14.03a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V8.25a.75.75 0 0 0-1.5 0v5.69l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div v-else>
<svg
class="h-6 w-5 flex-none text-gray-400 sm:block"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-.75-4.75a.75.75 0 0 0 1.5 0V8.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L6.2 9.74a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="flex flex-col">
<div class="flex items-start gap-x-3">
<div class="text-sm font-medium text-white">
{{ note.category }}
</div>
<!-- "New" Badge für Desktop und grüner Punkt für Mobile -->
<!--
<div
class="hidden sm:block rounded-md bg-green-700 px-2 py-1 text-xs font-medium text-white ring-1 ring-inset ring-green-600/20"
>
New
</div>
<div
class="sm:hidden rounded-full bg-green-500 w-2 h-2"
></div>
-->
<!-- Grüner Punkt für mobile Ansicht -->
</div>
<div
class="wallet-address mt-1 text-xs text-gray-500 whitespace-nowrap"
>
{{ displayAccount(note.account) }}
</div>
</div>
</td>

<!-- Rechtsbündige Zelle für TEER Betrag und Datum -->
<td
class="flex flex-col items-end py-4 pr-4 text-right text-sm text-white sm:pr-6 lg:pr-8"
>
<div v-if="note.amount" class="text-sm font-medium text-white">
{{ note.direction === NoteDirection.Incoming ? "+" : "-" }}
{{
divideBigIntToFloat(
note.amount,
10 ** accountStore.getDecimals,
)
}}
{{accountStore.getSymbol }}
</div>
<time class="mt-1 text-xs text-gray-500">{{
formatDate(note.timestamp)
}}</time>
</td>
<td
class="hidden py-4 pl-0 pr-4 text-right text-sm/6 text-white sm:table-cell sm:pr-6 lg:pr-8"
>
<div v-if="note.note?.length > 0">
<button
@click="openViewMore(note)"
type="button"
class="hidden sm:inline btn btn_gradient rounded sm:px-2 sm:py-1 text-xs font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
>
Note
</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="mb-10">
<div v-if="show" class="mt-6 overflow-hidden bg-gray-900 rounded-md">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
<table class="w-full text-left">
<tbody>
<tr
v-for="(note, index) in noteStore.getFinancialNotes"
:key="index"
>
<td class="relative py-5 pr-6">
<div class="flex gap-x-6">
<div v-if="note.direction === NoteDirection.Incoming">
<svg
viewBox="0 0 24 24"
fill="currentColor"
class="size-5 text-gray-400"
>
<path
fill-rule="evenodd"
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-.53 14.03a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V8.25a.75.75 0 0 0-1.5 0v5.69l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div v-else>
<svg
class="h-6 w-5 flex-none text-gray-400 sm:block"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-.75-4.75a.75.75 0 0 0 1.5 0V8.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L6.2 9.74a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="flex-auto">
<div class="flex items-start gap-x-3">
<div class="text-sm/6 font-medium text-white">
{{ note.category }}
</div>
</div>
<div
class="mt-1 text-xs/5 text-gray-500 wallet-address whitespace-nowrap"
>
{{ displayAccount(note.account) }}
</div>
</div>
</div>
<div
class="absolute right-full bottom-0 h-px w-screen bg-gray-50/20"
></div>
<div
class="absolute bottom-0 left-0 h-px w-screen bg-gray-50/20"
></div>
</td>
<td class="py-5 pr-6 sm:table-cell">
<div
v-if="note.amount"
class="text-sm/6 font-medium text-white"
>
{{ note.direction === NoteDirection.Incoming ? "+" : "-" }}
{{
divideBigIntToFloat(
note.amount,
10 ** accountStore.getDecimals,
)
}}
TEER
</div>
<time class="mt-1 text-xs/5 text-gray-500">{{
formatDate(note.timestamp)
}}</time>
</td>
<td class="py-5 text-right">
<div v-if="note.note?.length > 0" class="flex justify-end">
<svg
@click="openViewMore(note)"
viewBox="0 0 24 24"
fill="currentColor"
class="size-5 cursor-pointer"
>
<path
d="M11.625 16.5a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75Z"
/>
<path
fill-rule="evenodd"
d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6 16.5c.66 0 1.277-.19 1.797-.518l1.048 1.048a.75.75 0 0 0 1.06-1.06l-1.047-1.048A3.375 3.375 0 1 0 11.625 18Z"
clip-rule="evenodd"
/>
<path
d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"
/>
</svg>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="mt-5 flex justify-center text-gray-500">
<button @click="fetchOlderBucket">
Expand Down

0 comments on commit a81ed5c

Please sign in to comment.