Skip to content

Commit

Permalink
Merge pull request #1116 from CruGlobal/EP-2521-Radio-Button-redesign-1
Browse files Browse the repository at this point in the history 
EP-2521 Standard Buttons instead of Radio Buttons for suggested amounts
  • Loading branch information
@rguinee
rguinee authored Jan 15, 2025
2 parents 53cf9d1 + 270183d commit 72d00e3
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 5 deletions.
66 changes: 61 additions & 5 deletions src/app/productConfig/productConfigForm/productConfigForm.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,65 @@ <h4 class="panel-title border-bottom-small" translate>
<p translate>{{'GIFT_IN_CART_ERROR'}}</p>
</div>

<h4 class="panel-title border-bottom-small" translate>
{{'GIFT_AMOUNT'}}
</h4>
<div ng-if="$ctrl.useSuggestedAmounts">
<h4 class="panel-title border-bottom-small" translate>
{{'GIFT_AMOUNT'}}
</h4>
<div class="panel-body pt0">

<div ng-if="$ctrl.useSuggestedAmounts">
<div ng-if="$ctrl.useV3 === 'true'">
<fieldset aria-label="Suggested Gift Amounts. Tab for Custom Amount">
<div class="button-group">
<div ng-repeat="suggested in $ctrl.suggestedAmounts | orderBy:'order'">
<input
type="radio"
name="suggestedAmount"
id="sa-{{$index}}"
ng-click="$ctrl.changeAmount(suggested.amount)"
ng-class=" {'active': !$ctrl.customInputActive && $ctrl.itemConfig.AMOUNT === suggested.amount}"
ng-checked="$first"
/>
<label for="sa-{{$index}}">
<span class="amount-box">{{$ctrl.suggestedAmount(suggested.amount)}}</span>
<span class="amount-description">{{suggested.label}}</span>
</label>
</div>
<div class="custom-amount-button" ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}">
<div class="input-prepend">
<span class="input-prepend-text">$</span>
</div>
<label for="ca">
<input
name="suggestedAmount"
type="radio"
ng-checked="$ctrl.customInputActive"
/>
<input
name="amount"
type="text"
id="ca"
step="1"
tabindex="-1"
ng-model="$ctrl.customAmount"
ng-change="$ctrl.changeCustomAmount($ctrl.customAmount)"
ng-focus="$ctrl.customInputActive = true;"
ng-required="$ctrl.customInputActive"
placeholder="{{'OTHER_PLACEHOLDER' | translate}}" />
</label>
</div>
<div
role="alert"
ng-messages="$ctrl.itemConfigForm.amount.$error"
ng-if="($ctrl.itemConfigForm.amount | showErrors)">
<div class="help-block" ng-message="pattern" translate>{{'VALID_DOLLAR_AMOUNT_ERROR'}}</div>
<div class="help-block" ng-message="required" translate>{{'AMOUNT_EMPTY_ERROR'}}</div>
<div class="help-block" ng-message="minimum" translate translate-values="{currencyLimit: (1 | currency)}">{{'AMOUNT_MIN_ERROR'}}</div>
<div class="help-block" ng-message="maximum" translate translate-values="{currencyLimit: (10000000 | currency)}">{{'AMOUNT_MAX_ERROR'}}</div>
</div>
</div>
</fieldset>
</div>
<div ng-if="$ctrl.useV3 !== 'true'">
<div class="radio radio-custom-amount"
ng-repeat="suggested in $ctrl.suggestedAmounts | orderBy:'order'">
<label>
Expand Down Expand Up @@ -108,7 +163,8 @@ <h4 class="panel-title border-bottom-small" translate>
</div>
</div>
</div>
</div>
</div>
</div>

<div data-toggle="buttons"
ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}"
Expand Down
131 changes: 131 additions & 0 deletions src/assets/scss/_give.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -498,6 +498,137 @@ hr.horizontal-divider {
font-weight: 700;
}

.button-group {
display: flex;
flex-direction: column;
gap: 10px;

.help-block {
padding: 10px;
color: #715927;
background-color: #f4d89d;
border: 2px solid #f9b625;
border-radius: 2px;
}

input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
}

label {
display: flex;
flex: 1;
cursor: pointer;
margin: 0;

.amount-box {
margin: 0;
min-width: 50px;
text-align: center;
align-content: center;
aspect-ratio: 1 / 1;
background-color: #ddd;
color: inherit;
border-radius: 2px 0 0 2px;
transition: all 0.3s ease;
}

.amount-description {
width: 100%;
margin: 0;
padding: 5px 10px;
align-content: center;
background-color: #f0f0f0;
font-weight: normal;
}
}

input[type="radio"]:hover + label {
.amount-description {
background-color: #e4e4e4;
}
}
input[type="radio"]:focus + label {
.amount-box {
min-width: 55px;
color:#ddd;
background-color:#3a3a3a;
}
}
input[type="radio"]:checked + label {
.amount-box {
min-width: 55px;
color: #ddd;
background-color: #3a3a3a;
}
}
}

.custom-amount-button {

display: flex;
flex-direction: row;
height: 50px;
border: 1px solid #ddd;

.input-prepend {
margin: 0;
min-width: 50px;
text-align: center;
align-content: center;
min-width: 50px;
aspect-ratio: 1 / 1;
background-color: #ddd;
cursor: default;
}

label {
all: unset;
width: 100%;
height: 100%;

input[type="radio"] {
position: absolute;
opacity: 0;
}

input[type="text"] {
width: 100%;
height: 100%;
padding: 0 7px;
border: none;
border-radius: 2px;
transition: all 0.3s ease;

&::placeholder {
color: $colorCru-gray;
}

&:focus {
border: 1px solid #3eb1c8;
outline: none;
}
}
}
}

/* Check for custom amount input */
.custom-amount-button:has(input:checked) {
border: 1px solid #3a3a3a;
font-weight: 700;
color: #3a3a3a;
}

.custom-amount-button:has(input:checked) .input-prepend {
min-width: 55px;
aspect-ratio: 1 / 1;
background-color: #3a3a3a;
color: #fff;
transition: all 0.3s ease;
}

.table-payment-history {
thead {
th {
Expand Down

0 comments on commit 72d00e3

Please sign in to comment.