From 34c5ce3b873d0ebea32537bce7cccbe181497618 Mon Sep 17 00:00:00 2001 From: RcleydsonR Date: Mon, 27 Feb 2023 09:43:55 -0300 Subject: [PATCH] Add tooltip to inform what a locked value is --- package.json | 1 + .../ListingComponent/ListingComponent.vue | 89 +++++++++++++++---- .../__tests__/ListingComponent.spec.ts | 2 +- yarn.lock | 22 ++++- 4 files changed, 95 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 7c2f06f..d5f105e 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" }, "dependencies": { + "@floating-ui/vue": "^0.2.1", "@headlessui/vue": "^1.7.3", "@heroicons/vue": "^2.0.12", "@vueuse/core": "^9.12.0", diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue index 2ea9b2a..1d33adf 100644 --- a/src/components/ListingComponent/ListingComponent.vue +++ b/src/components/ListingComponent/ListingComponent.vue @@ -5,10 +5,11 @@ import type { ValidDeposit } from "@/model/ValidDeposit"; import type { WalletTransaction } from "@/model/WalletTransaction"; import { useEtherStore } from "@/store/ether"; import { storeToRefs } from "pinia"; -import { ref, watch } from "vue"; +import { ref, watch, onMounted } from "vue"; import SpinnerComponent from "../SpinnerComponent.vue"; import { decimalCount } from "@/utils/decimalCount"; import { debounce } from "@/utils/debounce"; +import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue"; const etherStore = useEtherStore(); @@ -31,6 +32,12 @@ const isCollapsibleOpen = ref(false); const validDecimals = ref(true); const validWithdrawAmount = ref(true); const enableConfirmButton = ref(false); +const showInfoTooltip = ref(false); +const floatingArrow = ref(null); + +const reference = ref(null); +const floating = ref(null); +const infoText = ref(null); // Debounce methods const handleInputEvent = (event: any): void => { @@ -123,6 +130,18 @@ const getEventName = (event: string | undefined): string => { return possibleEventName[event]; }; +onMounted(() => { + useFloating(reference, floating, { + placement: "right", + middleware: [ + offset(10), + flip(), + shift(), + arrow({ element: floatingArrow }), + ], + }); +}); + // watch props changes watch(props, async (): Promise => { const itemsToShowQty = itemsToShow.value.length; @@ -144,7 +163,7 @@ showInitialItems();
@@ -155,30 +174,55 @@ showInitialItems();

{{ getRemaining() }} BRZ

-
- {{ - `com ${activeLockAmount} BRZ em lock` +
+ {{ + `com ${activeLockAmount.toFixed(2)} BRZ em lock` }} - info image +
+ info image + +
-
-
- Withdraw image + Withdraw image Sacar
+
+

Valor do saque

- Withdraw image + Withdraw image Sacar
@@ -315,12 +363,9 @@ p { .text { @apply text-white text-center; } -.blur-container-row { - @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3; -} .blur-container { - @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto; + @apply flex flex-col justify-center items-center px-4 py-3 sm:px-8 sm:py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto; } .grid-container { @@ -328,7 +373,11 @@ p { } .last-release-info { - @apply font-medium text-base text-gray-900 justify-self-center; + @apply font-medium text-sm sm:text-base text-gray-900 justify-self-center; +} + +.tooltip { + @apply bg-white text-gray-900 font-medium text-xs md:text-base px-3 py-2 rounded border-2 border-emerald-500 left-5 top-[-3rem]; } .withdraw-button { @@ -344,4 +393,10 @@ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; } + +@media screen and (max-width: 640px) { + .md-view { + display: none; + } +} diff --git a/src/components/ListingComponent/__tests__/ListingComponent.spec.ts b/src/components/ListingComponent/__tests__/ListingComponent.spec.ts index eba306d..89869bd 100644 --- a/src/components/ListingComponent/__tests__/ListingComponent.spec.ts +++ b/src/components/ListingComponent/__tests__/ListingComponent.spec.ts @@ -82,6 +82,6 @@ describe("ListingComponent.vue", () => { }, }); - expect(wrapper.html()).toContain("com 50 BRZ em lock"); + expect(wrapper.html()).toContain("com 50.00 BRZ em lock"); }); }); diff --git a/yarn.lock b/yarn.lock index e44225a..3362cf7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1320,6 +1320,26 @@ "@ethersproject/properties" "^5.7.0" "@ethersproject/strings" "^5.7.0" +"@floating-ui/core@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.1.tgz#074182a1d277f94569c50a6b456e62585d463c8e" + integrity sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg== + +"@floating-ui/dom@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.1.tgz#8f93906e1a3b9f606ce78afb058e874344dcbe07" + integrity sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA== + dependencies: + "@floating-ui/core" "^1.2.1" + +"@floating-ui/vue@^0.2.1": + version "0.2.1" + resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-0.2.1.tgz#a52b66e020897ad0535d0d0d3b09932446fc6231" + integrity sha512-HE+EIeakID7wI6vUwF0yMpaW48bNaPj8QtnQaRMkaQFhQReVBA4bY6fmJ3J7X+dqVgDbMhyfCG0fBJfdQMdWxQ== + dependencies: + "@floating-ui/dom" "^1.2.1" + vue-demi "^0.13.11" + "@headlessui/vue@^1.7.3": version "1.7.3" resolved "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.3.tgz" @@ -5223,7 +5243,7 @@ vitest@^0.28.1: vite-node "0.28.1" why-is-node-running "^2.2.2" -vue-demi@*: +vue-demi@*, vue-demi@^0.13.11: version "0.13.11" resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz" integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==