hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #52 from liftlearning/add-collapsible-effect-to-listing-component

Browse Source 
Add collapsible effect to listing component
This commit is contained in:
Ronyell Henrique 2023-02-17 19:38:05 -03:00 committed by GitHub
commit f76a2b7736
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/ListingComponent/ListingComponent.vue
View File

@ -19,6 +19,9 @@ const etherStore = useEtherStore();
const itemsToShow = ref<Event[]>([]);
const withdrawAmount = ref<string>("");
const withdrawButtonOpacity = ref<number>(0.6);
const withdrawButtonCursor = ref<string>("not-allowed");
const isCollapsibleOpen = ref<boolean>(false);
const callWithdraw = async () => {
if (withdrawAmount.value) {
@ -31,6 +34,16 @@ const callWithdraw = async () => {
}
};
watch(withdrawAmount, (): void => {
if (!withdrawAmount.value) {
withdrawButtonOpacity.value = 0.7;
withdrawButtonCursor.value = "not-allowed";
} else {
withdrawButtonOpacity.value = 1;
withdrawButtonCursor.value = "pointer";
}
});
const getRemaining = (): number => {
if (props.validDeposits instanceof Array) {
// Here we are getting only the first element of the list because
@ -115,7 +128,16 @@ showInitialItems();
</div>
</div>
<div class="pt-5">
<div class="py-2 w-100">
<div v-show="!isCollapsibleOpen" class="flex justify-end items-center">
<div
class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
@click="[(isCollapsibleOpen = true)]"
>
<img alt="Withdraw image" src="@/assets/withdraw.svg" />
<span class="last-release-info">Sacar</span>
</div>
</div>
<div v-show="isCollapsibleOpen" class="py-2 w-100">
<p class="text-sm leading-5 font-medium">Valor do saque</p>
<input
type="number"
@ -126,10 +148,19 @@ showInitialItems();
v-model="withdrawAmount"
/>
</div>
<hr class="pb-3" />
<div class="flex justify-end items-center">
<hr v-show="isCollapsibleOpen" class="pb-3" />
<div
class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
v-show="isCollapsibleOpen"
class="flex justify-between items-center"
>
<h1
@click="[(isCollapsibleOpen = false)]"
class="text-black font-medium cursor-pointer"
>
Cancelar
</h1>
<div
class="withdraw-button flex gap-2 items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
@click="callWithdraw"
>
<img alt="Withdraw image" src="@/assets/withdraw.svg" />
@ -230,6 +261,11 @@ p {
@apply font-medium text-base text-gray-900 justify-self-center;
}
.withdraw-button {
opacity: v-bind(withdrawButtonOpacity);
cursor: v-bind(withdrawButtonCursor);
}
input[type="number"] {
-moz-appearance: textfield;
}