diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/mobile-app-qr-code-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/mobile-app-qr-code-widget.models.ts index 1b280d68c1..c37c4a9769 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/mobile-app-qr-code-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/mobile-app-qr-code-widget.models.ts @@ -17,7 +17,6 @@ import { AndroidConfig, BadgePosition, - BadgeStyle, IosConfig, QRCodeConfig } from '@shared/models/mobile-app.models'; @@ -39,7 +38,6 @@ export const mobileAppQrCodeWidgetDefaultSettings: MobileAppQrCodeWidgetSettings }, qrCodeConfig: { badgeEnabled: true, - badgeStyle: BadgeStyle.ORIGINAL, badgePosition: BadgePosition.RIGHT, qrCodeLabelEnabled: true, qrCodeLabel: 'Scan to connect or download mobile app' diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html index 2c2623cc0c..cd12f22cf0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html @@ -21,14 +21,8 @@ [class.row-reverse]="mobileAppSettings?.qrCodeConfig.badgePosition === badgePosition.LEFT">
- - - - - - - - + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts index 0f450d47f7..bb6063d4a2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts @@ -18,7 +18,7 @@ import { ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, Vie import { PageComponent } from '@shared/components/page.component'; import { AppState } from '@core/core.state'; import { Store } from '@ngrx/store'; -import { BadgePosition, BadgeStyle, badgeStyleURLMap, MobileAppSettings } from '@shared/models/mobile-app.models'; +import { BadgePosition, MobileAppSettings } from '@shared/models/mobile-app.models'; import { MobileAppService } from '@core/http/mobile-app.service'; import { WidgetContext } from '@home/models/widget-component.models'; import { UtilsService } from '@core/services/utils.service'; @@ -54,9 +54,7 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI private readonly destroy$ = new Subject(); private widgetResize$: ResizeObserver; - badgeStyle = BadgeStyle; badgePosition = BadgePosition; - badgeStyleURLMap = badgeStyleURLMap; showBadgeContainer = true; private mobileAppSettingsValue: MobileAppSettings | MobileAppQrCodeWidgetSettings; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.html index 4d930347c8..f164351829 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.html @@ -16,7 +16,7 @@ -->
-
+
{{ 'admin.mobile-app.use-system-settings' | translate }} @@ -48,13 +48,6 @@ (click)="$event.stopPropagation()"> {{ 'admin.mobile-app.badges' | translate }} - - - - {{ badgeStyle.value | translate }} - - - diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.ts index bcb70518f5..85ba53ca34 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.ts @@ -19,7 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms import { WidgetSettings, WidgetSettingsComponent } from "@shared/models/widget.models"; import { AppState } from '@core/core.state'; import { Store } from "@ngrx/store"; -import { badgePositionTranslationsMap, badgeStyleTranslationsMap } from '@shared/models/mobile-app.models'; +import { badgePositionTranslationsMap } from '@shared/models/mobile-app.models'; import { mobileAppQrCodeWidgetDefaultSettings } from '@home/components/widget/lib/cards/mobile-app-qr-code-widget.models'; @Component({ @@ -32,7 +32,6 @@ export class MobileAppQrCodeWidgetSettingsComponent extends WidgetSettingsCompon mobileAppQRCodeWidgetSettingsForm: UntypedFormGroup; badgePositionTranslationsMap = badgePositionTranslationsMap; - badgeStyleTranslationsMap = badgeStyleTranslationsMap; constructor(protected store: Store, private fb: UntypedFormBuilder) { @@ -58,7 +57,6 @@ export class MobileAppQrCodeWidgetSettingsComponent extends WidgetSettingsCompon }), qrCodeConfig: this.fb.group({ badgeEnabled: [settings.qrCodeConfig.badgeEnabled], - badgeStyle: [{value: settings.qrCodeConfig.badgeStyle, disabled: true}], badgePosition: [{value: settings.qrCodeConfig.badgePosition, disabled: true}], qrCodeLabelEnabled: [settings.qrCodeConfig.qrCodeLabelEnabled], qrCodeLabel: [settings.qrCodeConfig.qrCodeLabel, [Validators.required]] @@ -79,17 +77,14 @@ export class MobileAppQrCodeWidgetSettingsComponent extends WidgetSettingsCompon if (!androidEnabled && !iosEnabled) { this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgeEnabled').disable({emitEvent: false}); - this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgeStyle').disable({emitEvent: false}); this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgePosition').disable({emitEvent: false}); } if (androidEnabled || iosEnabled) { this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgeEnabled').enable({emitEvent: false}); if (badgeEnabled) { - this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgeStyle').enable({emitEvent: false}); this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgePosition').enable({emitEvent: false}); } else { - this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgeStyle').disable({emitEvent: false}); this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgePosition').disable({emitEvent: false}); } } diff --git a/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.html index 0d5de08de0..391dbfb1fa 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.html +++ b/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.html @@ -117,13 +117,6 @@ (click)="$event.stopPropagation()"> {{ 'admin.mobile-app.badges' | translate }} - - - - {{ badgeStyle.value | translate }} - - - @@ -139,13 +132,15 @@ {{ 'admin.mobile-app.label' | translate }} - + warning diff --git a/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.ts index 0423ce989f..ba5f56917e 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.ts +++ b/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.ts @@ -25,8 +25,6 @@ import { MobileAppService } from '@core/http/mobile-app.service'; import { BadgePosition, badgePositionTranslationsMap, - BadgeStyle, - badgeStyleTranslationsMap, MobileAppSettings } from '@shared/models/mobile-app.models'; @@ -44,7 +42,6 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf private readonly destroy$ = new Subject(); badgePositionTranslationsMap = badgePositionTranslationsMap; - badgeStyleTranslationsMap = badgeStyleTranslationsMap; constructor(protected store: Store, private mobileAppService: MobileAppService, @@ -85,22 +82,21 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf ).subscribe(value => { if (value) { if (this.mobileAppSettingsForm.get('androidConfig.enabled').value || this.mobileAppSettingsForm.get('iosConfig.enabled').value) { - this.mobileAppSettingsForm.get('qrCodeConfig.badgeStyle').enable({emitEvent: false}); this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').enable({emitEvent: false}); } } else { - this.mobileAppSettingsForm.get('qrCodeConfig.badgeStyle').disable({emitEvent: false}); this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').disable({emitEvent: false}); } }); + this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe(value => { + this.updateLabelControl(value); + }); this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabelEnabled').valueChanges.pipe( takeUntil(this.destroy$) ).subscribe(value => { - if (value) { - this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').enable({emitEvent: false}); - } else { - this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').disable({emitEvent: false}); - } + this.updateLabelControl(value); }); } @@ -125,10 +121,9 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf qrCodeConfig: this.fb.group({ showOnHomePage: [true], badgeEnabled: [true], - badgeStyle: [{value: BadgeStyle.ORIGINAL, disabled: true}], badgePosition: [{value: BadgePosition.RIGHT, disabled: true}], qrCodeLabelEnabled: [true], - qrCodeLabel: ['', [Validators.required]] + qrCodeLabel: ['', [Validators.required, Validators.maxLength(50)]] }) }); } @@ -167,19 +162,25 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf if (value) { this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').enable({emitEvent: false}); if (this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').value) { - this.mobileAppSettingsForm.get('qrCodeConfig.badgeStyle').enable({emitEvent: false}); this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').enable({emitEvent: false}); } } else { if (!this.mobileAppSettingsForm.get('iosConfig.enabled').value && !this.mobileAppSettingsForm.get('androidConfig.enabled').value) { this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').disable({emitEvent: false}); - this.mobileAppSettingsForm.get('qrCodeConfig.badgeStyle').disable({emitEvent: false}); this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').disable({emitEvent: false}); } } } } + private updateLabelControl(value: boolean) { + if (value) { + this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').enable({emitEvent: false}); + } else { + this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').disable({emitEvent: false}); + } + } + save(): void { this.mobileAppSettings = {...this.mobileAppSettings, ...this.mobileAppSettingsForm.getRawValue()}; this.mobileAppService.saveMobileAppSettings(this.mobileAppSettings) diff --git a/ui-ngx/src/app/shared/models/mobile-app.models.ts b/ui-ngx/src/app/shared/models/mobile-app.models.ts index 262cc34f9e..7b98da0744 100644 --- a/ui-ngx/src/app/shared/models/mobile-app.models.ts +++ b/ui-ngx/src/app/shared/models/mobile-app.models.ts @@ -38,7 +38,6 @@ export interface QRCodeConfig { showOnHomePage: boolean; badgeEnabled: boolean; badgePosition: BadgePosition; - badgeStyle: BadgeStyle; qrCodeLabelEnabled: boolean; qrCodeLabel: string; } @@ -57,24 +56,3 @@ export const badgePositionTranslationsMap = new Map([ [BadgePosition.RIGHT, 'admin.mobile-app.right'], [BadgePosition.LEFT, 'admin.mobile-app.left'] ]); - -export enum BadgeStyle { - ORIGINAL = 'ORIGINAL', - WHITE = 'WHITE' -} - -export const badgeStyleTranslationsMap = new Map([ - [BadgeStyle.ORIGINAL, 'admin.mobile-app.original'], - [BadgeStyle.WHITE, 'admin.mobile-app.white'] -]); - -export const badgeStyleURLMap = new Map([ - [BadgeStyle.ORIGINAL, { - iOS: 'assets/android-ios-stores-badges/ios_store_en_black_badge.svg', - android: 'assets/android-ios-stores-badges/android_store_en_black_badge.svg' - }], - [BadgeStyle.WHITE, { - iOS: 'assets/android-ios-stores-badges/ios_store_en_white_badge.svg', - android: 'assets/android-ios-stores-badges/android_store_en_black_badge.svg' - }] -]); diff --git a/ui-ngx/src/assets/android-ios-stores-badges/android_store_en_black_badge.svg b/ui-ngx/src/assets/android-ios-stores-badges/android_store_en_black_badge.svg index 2ef3c8fc10..6613bd3acc 100644 --- a/ui-ngx/src/assets/android-ios-stores-badges/android_store_en_black_badge.svg +++ b/ui-ngx/src/assets/android-ios-stores-badges/android_store_en_black_badge.svg @@ -1,35 +1,22 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - + + + + + diff --git a/ui-ngx/src/assets/android-ios-stores-badges/ios_store_en_black_badge.svg b/ui-ngx/src/assets/android-ios-stores-badges/ios_store_en_black_badge.svg index 072b425a1a..487fcc05a0 100755 --- a/ui-ngx/src/assets/android-ios-stores-badges/ios_store_en_black_badge.svg +++ b/ui-ngx/src/assets/android-ios-stores-badges/ios_store_en_black_badge.svg @@ -1,46 +1,19 @@ - - Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/android-ios-stores-badges/ios_store_en_white_badge.svg b/ui-ngx/src/assets/android-ios-stores-badges/ios_store_en_white_badge.svg deleted file mode 100755 index 16c0496ca7..0000000000 --- a/ui-ngx/src/assets/android-ios-stores-badges/ios_store_en_white_badge.svg +++ /dev/null @@ -1,46 +0,0 @@ - - Download_on_the_App_Store_Badge_US-UK_RGB_wht_092917 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index fcb0021ddc..4a6679dcca 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -438,10 +438,9 @@ "enabled": "Enabled", "disabled": "Disabled", "badges": "Badges", - "original": "Original", - "white": "White", "label": "Label", "label-required": "Label is required", + "label-max-length": "Label should be less than or equal to 50 characters", "right": "Right", "left": "Left", "set": "Set",