From d630d35eef9cca86f8295e234b27daa197af44b6 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Mon, 10 Feb 2025 14:42:20 +0000 Subject: [PATCH 1/5] feat: Google Sign In button variant --- .../components/button/button.component.html | 14 ++- .../components/button/button.component.ts | 3 + .../button-google-sign-in.component.html | 36 ++++++ .../button-google-sign-in.component.scss | 116 ++++++++++++++++++ .../button-google-sign-in.component.ts | 10 ++ .../components/template/components/index.ts | 2 + 6 files changed, 176 insertions(+), 5 deletions(-) create mode 100644 src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.html create mode 100644 src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss create mode 100644 src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.ts diff --git a/src/app/shared/components/template/components/button/button.component.html b/src/app/shared/components/template/components/button/button.component.html index 0ce515743..2a0a2c964 100644 --- a/src/app/shared/components/template/components/button/button.component.html +++ b/src/app/shared/components/template/components/button/button.component.html @@ -1,7 +1,6 @@ - +@if (!variantMap().cardPortrait && !variantMap().googleAuth) { - +} @else if (variantMap().cardPortrait) {
- +} @else if (variantMap().googleAuth) { + + +} diff --git a/src/app/shared/components/template/components/button/button.component.ts b/src/app/shared/components/template/components/button/button.component.ts index a5005de99..9c32a8a58 100644 --- a/src/app/shared/components/template/components/button/button.component.ts +++ b/src/app/shared/components/template/components/button/button.component.ts @@ -13,6 +13,7 @@ interface IButtonParams { | "card-portrait" | "flexible" | "full" + | "google_auth" | "information" | "medium" | "navigation" @@ -42,6 +43,7 @@ interface IButtonParams { interface IVariantMap { cardPortrait?: boolean; + googleAuth?: boolean; } /** @@ -102,6 +104,7 @@ export class TmplButtonComponent extends TemplateBaseComponent { const variantArray = variant.split(" "); return { cardPortrait: variantArray.includes("card-portrait"), + googleAuth: variantArray.includes("google_auth"), }; } } diff --git a/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.html b/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.html new file mode 100644 index 000000000..9576bf451 --- /dev/null +++ b/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.html @@ -0,0 +1,36 @@ + + diff --git a/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss b/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss new file mode 100644 index 000000000..38174d130 --- /dev/null +++ b/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss @@ -0,0 +1,116 @@ +/* CSS copied from https://developers.google.com/identity/branding-guidelines +with Theme: Light; Shape: Pill */ + +.gsi-material-button { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + -webkit-appearance: none; + background-color: WHITE; + background-image: none; + border: 1px solid #747775; + -webkit-border-radius: 20px; + border-radius: 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #1f1f1f; + cursor: pointer; + font-family: "Roboto", arial, sans-serif; + font-size: 14px; + height: 40px; + letter-spacing: 0.25px; + outline: none; + overflow: hidden; + padding: 0 12px; + position: relative; + text-align: center; + -webkit-transition: + background-color 0.218s, + border-color 0.218s, + box-shadow 0.218s; + transition: + background-color 0.218s, + border-color 0.218s, + box-shadow 0.218s; + vertical-align: middle; + white-space: nowrap; + width: auto; + max-width: 400px; + min-width: min-content; +} + +.gsi-material-button .gsi-material-button-icon { + height: 20px; + margin-right: 12px; + min-width: 20px; + width: 20px; +} + +.gsi-material-button .gsi-material-button-content-wrapper { + -webkit-align-items: center; + align-items: center; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + flex-wrap: nowrap; + height: 100%; + justify-content: space-between; + position: relative; + width: 100%; +} + +.gsi-material-button .gsi-material-button-contents { + -webkit-flex-grow: 1; + flex-grow: 1; + font-family: "Roboto", arial, sans-serif; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; +} + +.gsi-material-button .gsi-material-button-state { + -webkit-transition: opacity 0.218s; + transition: opacity 0.218s; + bottom: 0; + left: 0; + opacity: 0; + position: absolute; + right: 0; + top: 0; +} + +.gsi-material-button:disabled { + cursor: default; + background-color: #ffffff61; + border-color: #1f1f1f1f; +} + +.gsi-material-button:disabled .gsi-material-button-contents { + opacity: 38%; +} + +.gsi-material-button:disabled .gsi-material-button-icon { + opacity: 38%; +} + +.gsi-material-button:not(:disabled):active .gsi-material-button-state, +.gsi-material-button:not(:disabled):focus .gsi-material-button-state { + background-color: #303030; + opacity: 12%; +} + +.gsi-material-button:not(:disabled):hover { + -webkit-box-shadow: + 0 1px 2px 0 rgba(60, 64, 67, 0.3), + 0 1px 3px 1px rgba(60, 64, 67, 0.15); + box-shadow: + 0 1px 2px 0 rgba(60, 64, 67, 0.3), + 0 1px 3px 1px rgba(60, 64, 67, 0.15); +} + +.gsi-material-button:not(:disabled):hover .gsi-material-button-state { + background-color: #303030; + opacity: 8%; +} diff --git a/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.ts b/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.ts new file mode 100644 index 000000000..7f1adc7b3 --- /dev/null +++ b/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.ts @@ -0,0 +1,10 @@ +import { Component, Input } from "@angular/core"; + +@Component({ + selector: "tmpl-button-google-sign-in", + templateUrl: "./button-google-sign-in.component.html", + styleUrls: ["./button-google-sign-in.component.scss"], +}) +export class TmplButtonGoogleSignInComponent { + @Input() value: any; +} diff --git a/src/app/shared/components/template/components/index.ts b/src/app/shared/components/template/components/index.ts index 404c38aab..2bcc4fc4d 100644 --- a/src/app/shared/components/template/components/index.ts +++ b/src/app/shared/components/template/components/index.ts @@ -24,6 +24,7 @@ import { TmplAdvancedDashedBoxComponent } from "./layout/advanced-dashed-box/adv import { TmplAnimatedSlidesComponent } from "./animated-slides/animated-slides.component"; import { TmplAudioComponent } from "./audio/audio.component"; import { TmplButtonComponent } from "./button/button.component"; +import { TmplButtonGoogleSignInComponent } from "./button/google-sign-in/button-google-sign-in.component"; import { TmplCarouselComponent } from "./carousel/carousel.component"; import { TmplComboBoxComponent } from "./combo-box/combo-box.component"; import { TmplDashedBoxComponent } from "./dashed-box/dashed-box.component"; @@ -87,6 +88,7 @@ export const TEMPLATE_COMPONENTS = [ TmplAnimatedSlidesComponent, TmplAudioComponent, TmplButtonComponent, + TmplButtonGoogleSignInComponent, TmplCarouselComponent, TmplComboBoxComponent, TmplDashedBoxComponent, From bd80037289127cf322f83222da87096896bff34d Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Mon, 10 Feb 2025 14:44:43 +0000 Subject: [PATCH 2/5] chore: rename variant to 'google_sign_in' --- .../template/components/button/button.component.html | 6 +++--- .../template/components/button/button.component.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/shared/components/template/components/button/button.component.html b/src/app/shared/components/template/components/button/button.component.html index 2a0a2c964..b25e134de 100644 --- a/src/app/shared/components/template/components/button/button.component.html +++ b/src/app/shared/components/template/components/button/button.component.html @@ -1,4 +1,4 @@ -@if (!variantMap().cardPortrait && !variantMap().googleAuth) { +@if (!variantMap().cardPortrait && !variantMap().googleSignIn) { -} @else if (variantMap().googleAuth) { - +} @else if (variantMap().googleSignIn) { + Date: Mon, 10 Feb 2025 16:54:29 +0000 Subject: [PATCH 3/5] chore: RTL styling --- .../button/google-sign-in/button-google-sign-in.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss b/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss index 38174d130..13cf87da5 100644 --- a/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss +++ b/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss @@ -41,7 +41,7 @@ with Theme: Light; Shape: Pill */ .gsi-material-button .gsi-material-button-icon { height: 20px; - margin-right: 12px; + margin-inline-end: 12px; min-width: 20px; width: 20px; } From 0823c00062e532aabd1a4e0fb224af5ac8154abe Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Mon, 10 Feb 2025 17:00:13 +0000 Subject: [PATCH 4/5] chore: add explanatory comment --- .../google-sign-in/button-google-sign-in.component.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss b/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss index 13cf87da5..3eab8619a 100644 --- a/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss +++ b/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss @@ -1,5 +1,7 @@ /* CSS copied from https://developers.google.com/identity/branding-guidelines -with Theme: Light; Shape: Pill */ +with Theme: Light; Shape: Pill +The only modification is using `margin-inline-end` instead of `margin-right` to support RTL languages +*/ .gsi-material-button { -moz-user-select: none; From 3c7a79fe3f8856bd1f1d19d18d590b38312b77ff Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Tue, 11 Feb 2025 13:44:32 +0000 Subject: [PATCH 5/5] chore: extract google sign in button to standalone component --- .../button-google-sign-in.component.html | 6 +++--- .../button-google-sign-in.component.scss | 0 .../button-google-sign-in.component.ts | 20 +++++++++++++++++++ .../components/button/button.component.html | 14 +++++-------- .../components/button/button.component.ts | 3 --- .../button-google-sign-in.component.ts | 10 ---------- .../components/template/components/index.ts | 3 ++- 7 files changed, 30 insertions(+), 26 deletions(-) rename src/app/shared/components/template/components/{button/google-sign-in => button-google-sign-in}/button-google-sign-in.component.html (88%) rename src/app/shared/components/template/components/{button/google-sign-in => button-google-sign-in}/button-google-sign-in.component.scss (100%) create mode 100644 src/app/shared/components/template/components/button-google-sign-in/button-google-sign-in.component.ts delete mode 100644 src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.ts diff --git a/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.html b/src/app/shared/components/template/components/button-google-sign-in/button-google-sign-in.component.html similarity index 88% rename from src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.html rename to src/app/shared/components/template/components/button-google-sign-in/button-google-sign-in.component.html index 9576bf451..e6497cb0a 100644 --- a/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.html +++ b/src/app/shared/components/template/components/button-google-sign-in/button-google-sign-in.component.html @@ -1,6 +1,6 @@ - diff --git a/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss b/src/app/shared/components/template/components/button-google-sign-in/button-google-sign-in.component.scss similarity index 100% rename from src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.scss rename to src/app/shared/components/template/components/button-google-sign-in/button-google-sign-in.component.scss diff --git a/src/app/shared/components/template/components/button-google-sign-in/button-google-sign-in.component.ts b/src/app/shared/components/template/components/button-google-sign-in/button-google-sign-in.component.ts new file mode 100644 index 000000000..bb9590ffa --- /dev/null +++ b/src/app/shared/components/template/components/button-google-sign-in/button-google-sign-in.component.ts @@ -0,0 +1,20 @@ +import { Component } from "@angular/core"; +import { TemplateBaseComponent } from "../base"; +import { AuthService } from "src/app/shared/services/auth/auth.service"; +@Component({ + selector: "tmpl-button-google-sign-in", + templateUrl: "./button-google-sign-in.component.html", + styleUrls: ["./button-google-sign-in.component.scss"], +}) +export class TmplButtonGoogleSignInComponent extends TemplateBaseComponent { + // The button text is set as row value directly in the HTML template + + constructor(private authService: AuthService) { + super(); + } + + public async handleClick() { + await this.authService.provider.signInWithGoogle(); + this.triggerActions("click"); + } +} diff --git a/src/app/shared/components/template/components/button/button.component.html b/src/app/shared/components/template/components/button/button.component.html index b25e134de..0ce515743 100644 --- a/src/app/shared/components/template/components/button/button.component.html +++ b/src/app/shared/components/template/components/button/button.component.html @@ -1,6 +1,7 @@ -@if (!variantMap().cardPortrait && !variantMap().googleSignIn) { + -} @else if (variantMap().cardPortrait) { +
-} @else if (variantMap().googleSignIn) { - - -} + diff --git a/src/app/shared/components/template/components/button/button.component.ts b/src/app/shared/components/template/components/button/button.component.ts index 033da44c1..a5005de99 100644 --- a/src/app/shared/components/template/components/button/button.component.ts +++ b/src/app/shared/components/template/components/button/button.component.ts @@ -13,7 +13,6 @@ interface IButtonParams { | "card-portrait" | "flexible" | "full" - | "google_sign_in" | "information" | "medium" | "navigation" @@ -43,7 +42,6 @@ interface IButtonParams { interface IVariantMap { cardPortrait?: boolean; - googleSignIn?: boolean; } /** @@ -104,7 +102,6 @@ export class TmplButtonComponent extends TemplateBaseComponent { const variantArray = variant.split(" "); return { cardPortrait: variantArray.includes("card-portrait"), - googleSignIn: variantArray.includes("google_sign_in"), }; } } diff --git a/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.ts b/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.ts deleted file mode 100644 index 7f1adc7b3..000000000 --- a/src/app/shared/components/template/components/button/google-sign-in/button-google-sign-in.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component, Input } from "@angular/core"; - -@Component({ - selector: "tmpl-button-google-sign-in", - templateUrl: "./button-google-sign-in.component.html", - styleUrls: ["./button-google-sign-in.component.scss"], -}) -export class TmplButtonGoogleSignInComponent { - @Input() value: any; -} diff --git a/src/app/shared/components/template/components/index.ts b/src/app/shared/components/template/components/index.ts index 2bcc4fc4d..8773b3cc4 100644 --- a/src/app/shared/components/template/components/index.ts +++ b/src/app/shared/components/template/components/index.ts @@ -24,7 +24,7 @@ import { TmplAdvancedDashedBoxComponent } from "./layout/advanced-dashed-box/adv import { TmplAnimatedSlidesComponent } from "./animated-slides/animated-slides.component"; import { TmplAudioComponent } from "./audio/audio.component"; import { TmplButtonComponent } from "./button/button.component"; -import { TmplButtonGoogleSignInComponent } from "./button/google-sign-in/button-google-sign-in.component"; +import { TmplButtonGoogleSignInComponent } from "./button-google-sign-in/button-google-sign-in.component"; import { TmplCarouselComponent } from "./carousel/carousel.component"; import { TmplComboBoxComponent } from "./combo-box/combo-box.component"; import { TmplDashedBoxComponent } from "./dashed-box/dashed-box.component"; @@ -163,6 +163,7 @@ const COMMON_COMPONENT_MAPPING = { display_group_sticky: TmplDisplayGroupStickyComponent, drawer: TmplDrawerComponent, form: FormComponent, + google_sign_in_button: TmplButtonGoogleSignInComponent, help_icon: TmplHelpIconComponent, html: TemplateHTMLComponent, icon_banner: TmplIconBannerComponent,