Select an image to display for credit cards based on the brand. (#537)
Co-authored-by: Hinton <oscar@oscarhinton.com>
|
@ -18,6 +18,21 @@ const IconMap: any = {
|
||||||
"fa-apple": String.fromCharCode(0xf179),
|
"fa-apple": String.fromCharCode(0xf179),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Provides a mapping from supported card brands to
|
||||||
|
* the filenames of icon that should be present in images/cards folder of clients.
|
||||||
|
*/
|
||||||
|
const cardIcons: Record<string, string> = {
|
||||||
|
Visa: "card-visa",
|
||||||
|
Mastercard: "card-mastercard",
|
||||||
|
Amex: "card-amex",
|
||||||
|
Discover: "card-discover",
|
||||||
|
"Diners Club": "card-diners-club",
|
||||||
|
JCB: "card-jcb",
|
||||||
|
Maestro: "card-maestro",
|
||||||
|
UnionPay: "card-union-pay",
|
||||||
|
};
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: "app-vault-icon",
|
selector: "app-vault-icon",
|
||||||
templateUrl: "icon.component.html",
|
templateUrl: "icon.component.html",
|
||||||
|
@ -59,6 +74,7 @@ export class IconComponent implements OnChanges {
|
||||||
break;
|
break;
|
||||||
case CipherType.Card:
|
case CipherType.Card:
|
||||||
this.icon = "fa-credit-card";
|
this.icon = "fa-credit-card";
|
||||||
|
this.setCardIcon();
|
||||||
break;
|
break;
|
||||||
case CipherType.Identity:
|
case CipherType.Identity:
|
||||||
this.icon = "fa-id-card-o";
|
this.icon = "fa-id-card-o";
|
||||||
|
@ -102,4 +118,11 @@ export class IconComponent implements OnChanges {
|
||||||
this.image = null;
|
this.image = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private setCardIcon() {
|
||||||
|
const brand = this.cipher.card.brand;
|
||||||
|
if (this.imageEnabled && brand in cardIcons) {
|
||||||
|
this.icon = "credit-card-icon " + cardIcons[brand];
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
After Width: | Height: | Size: 773 B |
After Width: | Height: | Size: 773 B |
After Width: | Height: | Size: 783 B |
After Width: | Height: | Size: 713 B |
After Width: | Height: | Size: 808 B |
After Width: | Height: | Size: 830 B |
After Width: | Height: | Size: 836 B |
After Width: | Height: | Size: 798 B |
After Width: | Height: | Size: 752 B |
After Width: | Height: | Size: 820 B |
After Width: | Height: | Size: 737 B |
After Width: | Height: | Size: 757 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 548 B |
After Width: | Height: | Size: 590 B |
|
@ -0,0 +1,44 @@
|
||||||
|
$card-icons-base: "~@bitwarden/jslib-angular/src/images/cards/";
|
||||||
|
$card-icons: (
|
||||||
|
"visa": $card-icons-base + "visa-light.png",
|
||||||
|
"amex": $card-icons-base + "amex-light.png",
|
||||||
|
"diners-club": $card-icons-base + "diners_club-light.png",
|
||||||
|
"discover": $card-icons-base + "discover-light.png",
|
||||||
|
"jcb": $card-icons-base + "jcb-light.png",
|
||||||
|
"maestro": $card-icons-base + "maestro-light.png",
|
||||||
|
"mastercard": $card-icons-base + "mastercard-light.png",
|
||||||
|
"union-pay": $card-icons-base + "union_pay-light.png",
|
||||||
|
);
|
||||||
|
|
||||||
|
$card-icons-dark: (
|
||||||
|
"visa": $card-icons-base + "visa-dark.png",
|
||||||
|
"amex": $card-icons-base + "amex-dark.png",
|
||||||
|
"diners-club": $card-icons-base + "diners_club-dark.png",
|
||||||
|
"discover": $card-icons-base + "discover-dark.png",
|
||||||
|
"jcb": $card-icons-base + "jcb-dark.png",
|
||||||
|
"maestro": $card-icons-base + "maestro-dark.png",
|
||||||
|
"mastercard": $card-icons-base + "mastercard-dark.png",
|
||||||
|
"union-pay": $card-icons-base + "union_pay-dark.png",
|
||||||
|
);
|
||||||
|
|
||||||
|
.credit-card-icon {
|
||||||
|
display: block; // Resolves the parent container being slighly to big
|
||||||
|
height: 19px;
|
||||||
|
width: 24px;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $name, $url in $card-icons {
|
||||||
|
.card-#{$name} {
|
||||||
|
background-image: url("#{$url}");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $theme in $dark-icon-themes {
|
||||||
|
@each $name, $url in $card-icons-dark {
|
||||||
|
.#{$theme} .card-#{$name} {
|
||||||
|
background-image: url("#{$url}");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|