From 3aa7b8b447edd2e7f2cc48f40c54c8b6d00a0285 Mon Sep 17 00:00:00 2001 From: Natalie L <78037386+CuriousMagpie@users.noreply.github.com> Date: Wed, 13 Jul 2022 15:17:28 -0400 Subject: [PATCH] Gifting modal design (#14124) * update selectUserModal.vue * more updates to selectUserModal.vue, typo fix in subscriber.json * remove exact sizing for selectUserModal.vue * update to size for selectUserModal.vue * added sendGiftModal.vue file * updates to selectUser & sendGift modals * making the modals go & position cursor * working working working * added a return to method * avatar display & placeholder profile.name and username * subscription-options added * added menu row & started on gem options * Added selectPage function, have not tested. * updated habitica-images * state changes * bringing in gem counter * arranging elements * state changes, gem input boxes * styling sendGiftModal.vue * more sendGiftModal.vue styling and new close.svg icon * more styling! * and more styling of send own gems part of page * images update * more styling of own gems & some attempts to adjust :class on the menu * styling styling styling * replace +/- svg, styling * styling, mostly * new SVGs * stylin' * reverting svg changes * no more stylin' * finally got the +/- icons to show up...but they're the wrong color * solved svg icon color problem! :) * habitica-images * working on sendGift part of button * trying to make it do math, failing * more attempts at math * +/- buttons work on gem pages & cost calculation on buyGems * trying to get hover colors working on +/- svgs * formatted dollar amount as currency * css/html for subscription-options & payments-buttons simplified * swag at payments-buttons parameter (not tested) * send gems from own balance works! * working on starting page * increment gem amount limited to maxGems and not < 0 * uncommented onHide() * got bg color on sub options to work! yay! * payment buttons! * making g1g1 look good * position modal on page properly & code clean-up * Changes as requested! * small color update * fixed ternary function * chore(html): indentation and comments * fix(fn): correct catch for under-0 * chore(json): whitespace * update gem styling; add linebreak to notifications.vue bc linter * updating subscriptionOptions * snackbar css fix * reverting commit e16c12f * removing merge conflict markers * just a little comment * fixed some navigation, clear input field on selectPage, cleaned up code; another try at subscriptionOption.vue * merge upstream/develop * update selectPage() to disable Gems menu items when on 'ownGems' or 'buyGems' states * working on subscriptionOptions.vue logic * fix(script): changed props & added updateSubscriptionData() * fix(script): forgot to call updateSubscriptionData() * fix(scripts): corrected :userReceivingGift on sendGiftModal.vue * fix(scripts): correct props userReceivingGift to an Object * fix(scripts): corrected v-if & revised props * fix(style/html/whitespace): updated css for close.svg and added missing * style(radio-buttons): updated focus states and added hover states * style(radio-buttons): refined focus and hover states * fix(function): changed buyGemsLink to buyGems; still working on menu * style(radio buttons): ensured consistent display of radio buttons through-out site; still struggling with hover states * style(radio buttons): updated focus/active/hover to match design & removed unnecessary code * fix: set default subscription option to 1 month * fix(function): add default amounts to gem states when modal selected from user profile * fix(build): use develop package json * fix: SCSS commenting & abstracted setGemsDefault() * fix(packages): revert to develop * fix: remove unnecessary console.log statement Co-authored-by: SabreCat --- website/client/src/assets/scss/form.scss | 102 ++- website/client/src/assets/svg/big-gift.svg | 27 + website/client/src/assets/svg/close.svg | 14 +- .../group-plans/createGroupModalPages.vue | 5 + website/client/src/components/header/menu.vue | 6 +- .../src/components/payments/buttons/list.vue | 8 + .../components/payments/selectUserModal.vue | 132 +++- .../src/components/payments/sendGiftModal.vue | 659 ++++++++++++++++++ .../src/components/settings/subscription.vue | 4 - .../settings/subscriptionOptions.vue | 39 +- .../client/src/components/tasks/taskModal.vue | 5 + .../src/components/userMenu/profile.vue | 3 +- website/client/src/store/index.js | 3 + website/common/locales/en/groups.json | 1 + website/common/locales/en/settings.json | 1 + website/common/locales/en/subscriber.json | 7 +- 16 files changed, 956 insertions(+), 60 deletions(-) create mode 100644 website/client/src/assets/svg/big-gift.svg create mode 100644 website/client/src/components/payments/sendGiftModal.vue diff --git a/website/client/src/assets/scss/form.scss b/website/client/src/assets/scss/form.scss index c5cf0b61f7..8e21bc06a4 100644 --- a/website/client/src/assets/scss/form.scss +++ b/website/client/src/assets/scss/form.scss @@ -82,7 +82,7 @@ input, textarea, input.form-control, textarea.form-control { } } -/** Colored Input-Groups, ignoring checklist */ +// Colored Input-Groups, ignoring checklist .input-group:not(.checklist-group) { border-radius: 2px; border: solid 1px $gray-400; @@ -100,7 +100,7 @@ input, textarea, input.form-control, textarea.form-control { } } -/** Generic Input Group Styles */ +// Generic Input Group Styles .input-group { height: 2rem; @@ -179,10 +179,11 @@ input, textarea, input.form-control, textarea.form-control { padding-left: 0px; } -// Checkboxes and radios +// used in checkboxes and radios $bg-focused-active-control: #4f2993; $bg-disabled-control: #34303a; +// custom control .custom-control { margin-bottom: .5rem; @@ -205,6 +206,7 @@ $bg-disabled-control: #34303a; } } +// checkboxes .custom-checkbox { .custom-control-label::before { border-radius: 2px; @@ -280,11 +282,26 @@ $bg-disabled-control: #34303a; padding-left: 36px; } +// radio buttons +$bg-color: $purple-400; + +// svg for the purple dot @mixin custom-radio-checked-icon ($bg-color) { background-image: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$bg-color}'/%3E%3C/svg%3E"), "#", "%23"); } .custom-radio .custom-control-input { + opacity: 0; + margin: 15px 25px 34px 25px; + + // outside circle + &:checked~.custom-control-label::before { + background-color: $gray-700; + background-size: 12px 12px; + border-color: $purple-400; + } + + // checked indicator &:checked~.custom-control-label::after { @include custom-radio-checked-icon($purple-400); width: 18px; @@ -292,51 +309,84 @@ $bg-disabled-control: #34303a; background-size: 12px 12px; } - &:checked~.custom-control-label::before { - background-color: $gray-700; - background-size: 12px 12px; - border-color: $purple-400; - } - &:active~.custom-control-label::before { background-color: inherit; } - &:focus:not(:checked):not(:disabled)~.custom-control-label::before, &:active:not(:checked):not(:disabled)~.custom-control-label::before { - box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1); +// focus / not checked / not disabled + &:focus:not(:checked):not(:disabled)~.custom-control-label::before, + &:active:not(:checked):not(:disabled)~.custom-control-label::before { + border: 2px solid $gray-300; + box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5); } - &:focus:checked:not(:disabled)~.custom-control-label::before, &:active:checked:not(:disabled)~.custom-control-label::before { - box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1); - border-color: $purple-400; - background-color: rgba($bg-focused-active-control, 0.1); +// focus / checked / not disabled + &:focus:checked:not(:disabled)~.custom-control-label::before, + &:active:checked:not(:disabled)~.custom-control-label::before { + border: 2px solid $purple-400; + box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5); } - &:disabled:checked~.custom-control-label::before { - border-color: $gray-400; - background-color: transparent; +// hover / not checked / not disabled + &:hover:not(:checked):not(:disabled)~.custom-control-label::before, + &:active:not(:checked):not(:disabled)~.custom-control-label::before { + width: 18px; + height: 18px; + background: 50%/50% 50% no-repeat; + @include custom-radio-checked-icon($purple-400); + background-size: 12px 12px; + border: solid 2px $purple-400; } - &:disabled:checked~.custom-control-label::after { +// hover / checked / not disabled + &:hover:checked:not(:disabled)~.custom-control-label::before, + &:active::checked:not(:disabled)~.custom-control-label::before { + width: 18px; + height: 18px; + background: 50%/50% 50% no-repeat; @include custom-radio-checked-icon($gray-400); + background-size: 12px 12px; + border: solid 2px $purple-300; + } + +// disabled / checked / before + &:disabled:checked~.custom-control-label::before { + background: 50%/50% 50% no-repeat; + @include custom-radio-checked-icon($gray-300); + border: 2px solid $gray-200; + background-color: transparent; + opacity: 0.75; + } + +// disabled / checked / after + &:disabled:checked~.custom-control-label::after { + background: 50%/50% 50% no-repeat; + @include custom-radio-checked-icon($gray-300); width: 18px; height: 18px; background-size: 12px 12px; } +// disabled / not checked / before &:disabled:not(:checked)~.custom-control-label::before { - border-color: $gray-300; - background-color: transparent; + background-color: $gray-600; + border: 2px solid $gray-200; } - &:focus:disabled~.custom-control-label::before, &:active:disabled~.custom-control-label::before { - box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1); - border-color: $gray-300; +// focus and disabled / not checked / before + &:focus:disabled~.custom-control-label::before, + &:active:disabled~.custom-control-label::before { background-color: rgba($bg-disabled-control, 0.1); + box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1); + border: 2px solid $gray-200; } - &:focus:disabled:checked~.custom-control-label::before, &:active:disabled:checked~.custom-control-label::before { - border-color: $gray-400; +// focus and disabled / checked / before + &:focus:disabled:checked~.custom-control-label::before, + &:active:disabled:checked~.custom-control-label::before { + background: 50%/50% 50% no-repeat; + @include custom-radio-checked-icon($gray-300); + border: 2px solid $gray-200; } } diff --git a/website/client/src/assets/svg/big-gift.svg b/website/client/src/assets/svg/big-gift.svg new file mode 100644 index 0000000000..1d756e4dfa --- /dev/null +++ b/website/client/src/assets/svg/big-gift.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/client/src/assets/svg/close.svg b/website/client/src/assets/svg/close.svg index 5070218c06..398440da99 100644 --- a/website/client/src/assets/svg/close.svg +++ b/website/client/src/assets/svg/close.svg @@ -1,5 +1,11 @@ - - - + + + Icon/Close + + + + + + - + \ No newline at end of file diff --git a/website/client/src/components/group-plans/createGroupModalPages.vue b/website/client/src/components/group-plans/createGroupModalPages.vue index 2b314834ad..b354f6ac63 100644 --- a/website/client/src/components/group-plans/createGroupModalPages.vue +++ b/website/client/src/components/group-plans/createGroupModalPages.vue @@ -122,6 +122,11 @@ font-weight: bold; } + .custom-control-input { + z-index: -1; + opacity: 0; + } + .box:hover { cursor: pointer; opacity: 0.7; diff --git a/website/client/src/components/header/menu.vue b/website/client/src/components/header/menu.vue index d77c6f8e0d..fbfdaed141 100644 --- a/website/client/src/components/header/menu.vue +++ b/website/client/src/components/header/menu.vue @@ -3,7 +3,7 @@ - +
+

{{ $t('choosePaymentMethod') }}