From d3c236d1f3891b0dda113bb862b5e5616d525bc9 Mon Sep 17 00:00:00 2001 From: hassnian Date: Fri, 17 Nov 2023 13:52:20 +0500 Subject: [PATCH 01/91] add: basic working modal skeleton --- assets/styles/abstracts/_animations.scss | 24 +++ .../autoTeleport/AutoTeleportActionButton.vue | 2 + .../ConfirmPurchaseModal.vue | 34 ++-- components/shared/modals/BoxedModal.vue | 152 ++++++++++++++++++ 4 files changed, 190 insertions(+), 22 deletions(-) create mode 100644 components/shared/modals/BoxedModal.vue diff --git a/assets/styles/abstracts/_animations.scss b/assets/styles/abstracts/_animations.scss index 76448b4460..5b9698c3e4 100644 --- a/assets/styles/abstracts/_animations.scss +++ b/assets/styles/abstracts/_animations.scss @@ -80,3 +80,27 @@ box-shadow: none; } } + +// ... dots +@keyframes dots { + 0% { + content: "."; + } + 33% { + content: ".."; + } + 66% { + content: "..."; + } +} + +.dots { + text-align: center; + display: inline-block; +} + +.dots::after { + content: ""; + display: inline-block; + animation: dots 1.5s infinite; +} \ No newline at end of file diff --git a/components/common/autoTeleport/AutoTeleportActionButton.vue b/components/common/autoTeleport/AutoTeleportActionButton.vue index ba367a49ba..b6bc76e695 100644 --- a/components/common/autoTeleport/AutoTeleportActionButton.vue +++ b/components/common/autoTeleport/AutoTeleportActionButton.vue @@ -286,6 +286,8 @@ watchSyncEffect(() => { amount.value = props.amount } }) + +defineExpose({ hasBalances }) From 00a6caeb68e6ba3fd71ec7de79c609a29add2e35 Mon Sep 17 00:00:00 2001 From: hassnian Date: Mon, 20 Nov 2023 09:53:50 +0500 Subject: [PATCH 02/91] ref: paddings and added translations --- .../ConfirmPurchaseModal.vue | 9 +++-- components/shared/modals/BoxedModal.vue | 35 +++++++++---------- .../components/NeoSkeleton/NeoSkeleton.vue | 4 +++ locales/en.json | 4 ++- 4 files changed, 29 insertions(+), 23 deletions(-) diff --git a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue index f65f68be02..c0e35acc12 100644 --- a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue +++ b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue @@ -5,8 +5,11 @@ scroll="clip" class="top" @close="onClose"> - -
+ +
@@ -37,7 +40,7 @@
-
+
- + @@ -47,10 +54,10 @@

- Doing some magic + {{ $t('general.doingSomeMagic') }}

- Please wait + {{ $t('general.pleaseWait') }}

@@ -95,7 +102,8 @@ const onClose = () => emits('close') @import '@/assets/styles/abstracts/variables'; $x-padding: 2rem; -$y-padding: 2rem; +$t-padding: 1.5rem; +$b-padding: 1.25rem; .modal-width { min-width: v-bind(modalWidth); @@ -112,25 +120,14 @@ $y-padding: 2rem; .skeleton { &-backdrop { - top: $x-padding; - left: $y-padding; + top: $t-padding; + left: $x-padding; width: calc(100% - $x-padding * 2); - height: calc(100% - $y-padding * 2); + height: calc(100% - ($t-padding + $b-padding)); max-height: v-bind(modalHeight) !important; z-index: 2; } - &-item { - @include ktheme() { - background: linear-gradient( - 90deg, - theme('k-grey') 25%, - rgba(theme('k-grey'), 0.5) 50%, - theme('k-grey') 75% - ) !important; - } - } - &-content { display: flex; justify-content: center; diff --git a/libs/ui/src/components/NeoSkeleton/NeoSkeleton.vue b/libs/ui/src/components/NeoSkeleton/NeoSkeleton.vue index 1decb82ede..3f56eff6f0 100644 --- a/libs/ui/src/components/NeoSkeleton/NeoSkeleton.vue +++ b/libs/ui/src/components/NeoSkeleton/NeoSkeleton.vue @@ -6,6 +6,9 @@ noMargin && 'no-margin', fullSize && 'neo-skeleton-full-size', ]" + :style="{ + '--border-radius': borderRadius, + }" :animated="animated" :active="active" :circle="circle" @@ -33,6 +36,7 @@ export interface Props { position?: 'centered' | 'left' | 'right' noMargin?: boolean fullSize?: boolean + borderRadius?: string } withDefaults(defineProps(), { animated: true, diff --git a/locales/en.json b/locales/en.json index fcff8026d7..78000df60a 100644 --- a/locales/en.json +++ b/locales/en.json @@ -967,7 +967,9 @@ "noPopularCollections": "There are no popular collections now.", "successfullyAddedFunds": "Successfully added funds. Your funds will arrive shortly.", "supports": "Supports", - "chooseProvider": "Choose A Provider" + "chooseProvider": "Choose A Provider", + "doingSomeMagic": "Doing some magic", + "pleaseWait": "Please wait" }, "fiatOnRamp": { "agree": "I agree to the", From 05eb9c9e8e0ec7e45475e9fa8576c0c911620c92 Mon Sep 17 00:00:00 2001 From: hassnian Date: Mon, 20 Nov 2023 10:23:07 +0500 Subject: [PATCH 03/91] add: mint modals --- .../ConfirmPurchaseModal.vue | 2 +- .../create/Confirm/MintConfirmModal.vue | 42 ++++++++----------- components/shared/modals/BoxedModal.vue | 21 +++++++--- 3 files changed, 34 insertions(+), 31 deletions(-) diff --git a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue index c0e35acc12..636396aa94 100644 --- a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue +++ b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue @@ -40,7 +40,7 @@
-
+
-
-
- - {{ $t('mint.nft.modal.action') }} - - -
-
+ +
-
+
{{ title }}
- +
-
+
-
-
+
+
-
+ diff --git a/libs/ui/src/scss/_theme.scss b/libs/ui/src/scss/_theme.scss index dfa0e45d1f..55201d6db2 100644 --- a/libs/ui/src/scss/_theme.scss +++ b/libs/ui/src/scss/_theme.scss @@ -22,6 +22,7 @@ $themes: ( 'k-redaccent2': #ffe6e6, 'k-grey': #999999, 'k-grey-fix': #999999, + 'k-grey-light': #ECECEC, 'k-pink': #ffb6ef, 'k-yellow': #feffb6, 'k-blueaccent': #b6cbff, @@ -72,6 +73,7 @@ $themes: ( 'k-redaccent2': #390b0b, 'k-grey': #cccccc, 'k-grey-fix': #999999, + 'k-grey-light': #ECECEC, 'k-pink': #7a2a68, 'k-yellow': #363234, 'k-blueaccent': #2e50a2, From 3527ab4f2b75b5578f3ec822798b18610360f286 Mon Sep 17 00:00:00 2001 From: hassnian Date: Mon, 20 Nov 2023 11:49:56 +0500 Subject: [PATCH 06/91] ref: skeleton variant --- components/shared/modals/BoxedModal.vue | 4 ++-- libs/ui/src/components/NeoSkeleton/NeoSkeleton.scss | 11 +++++++---- libs/ui/src/components/NeoSkeleton/NeoSkeleton.vue | 6 +++--- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/components/shared/modals/BoxedModal.vue b/components/shared/modals/BoxedModal.vue index 2b62abb724..f395d9f7f6 100644 --- a/components/shared/modals/BoxedModal.vue +++ b/components/shared/modals/BoxedModal.vue @@ -13,7 +13,7 @@ height="35" no-margin border-radius="4rem" - light /> + variant="k-grey-light" /> + variant="k-grey-light" />
- @@ -50,12 +50,12 @@ @confirm="confirm" @actions:completed="$emit('completed')" />
- + diff --git a/libs/ui/src/components/NeoAvatar/NeoAvatar.vue b/libs/ui/src/components/NeoAvatar/NeoAvatar.vue index 033ac905ab..6a943b3d73 100644 --- a/libs/ui/src/components/NeoAvatar/NeoAvatar.vue +++ b/libs/ui/src/components/NeoAvatar/NeoAvatar.vue @@ -1,6 +1,7 @@