From 1d9791afaee9a32c8d2b909b534966c1247f33c2 Mon Sep 17 00:00:00 2001 From: rusikv Date: Tue, 21 May 2024 13:46:31 +0300 Subject: [PATCH 1/8] UI: mobile app qr code improvements --- .../cards/mobile-app-qr-code-widget.models.ts | 2 - .../mobile-app-qrcode-widget.component.html | 10 +-- .../lib/mobile-app-qrcode-widget.component.ts | 4 +- ...app-qr-code-widget-settings.component.html | 9 +-- ...e-app-qr-code-widget-settings.component.ts | 7 +-- .../admin/mobile-app-settings.component.html | 17 ++--- .../admin/mobile-app-settings.component.ts | 29 ++++----- .../app/shared/models/mobile-app.models.ts | 22 ------- .../android_store_en_black_badge.svg | 53 ++++++---------- .../ios_store_en_black_badge.svg | 63 ++++++------------- .../ios_store_en_white_badge.svg | 46 -------------- .../assets/locale/locale.constant-en_US.json | 3 +- 12 files changed, 65 insertions(+), 200 deletions(-) delete mode 100755 ui-ngx/src/assets/android-ios-stores-badges/ios_store_en_white_badge.svg 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", From 75b6396c990a79c41befd93d08f7cb0f7fdd9286 Mon Sep 17 00:00:00 2001 From: rusikv Date: Tue, 21 May 2024 14:22:02 +0300 Subject: [PATCH 2/8] UI: removed shadow from qr code of mobile app --- .../widget/lib/mobile-app-qrcode-widget.component.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss index ddb8870d42..364d7bfad9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss @@ -34,7 +34,6 @@ } .tb-qrcode { - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08); border-radius: 6px; } From de0b9760bbb1b57c65c4164755c7b625cda122a9 Mon Sep 17 00:00:00 2001 From: rusikv Date: Thu, 23 May 2024 21:39:28 +0300 Subject: [PATCH 3/8] UI: fixed mob qr code admin settings not applying, extra small screen layout imprvmts, qr code clickble in mobile mode --- ui-ngx/src/app/core/auth/auth.actions.ts | 9 ++- ui-ngx/src/app/core/auth/auth.reducer.ts | 3 + .../mobile-app-qrcode-widget.component.html | 2 +- .../lib/mobile-app-qrcode-widget.component.ts | 11 +++ .../admin/mobile-app-settings.component.html | 4 +- .../admin/mobile-app-settings.component.ts | 67 +++++++++---------- .../home-links/home-links-routing.module.ts | 5 +- .../assets/dashboard/sys_admin_home_page.json | 2 +- .../dashboard/tenant_admin_home_page.json | 2 +- 9 files changed, 63 insertions(+), 42 deletions(-) diff --git a/ui-ngx/src/app/core/auth/auth.actions.ts b/ui-ngx/src/app/core/auth/auth.actions.ts index cd44bcde7e..86c80e2d8b 100644 --- a/ui-ngx/src/app/core/auth/auth.actions.ts +++ b/ui-ngx/src/app/core/auth/auth.actions.ts @@ -27,6 +27,7 @@ export enum AuthActionTypes { UPDATE_AUTH_USER = '[Auth] Update Auth User', UPDATE_LAST_PUBLIC_DASHBOARD_ID = '[Auth] Update Last Public Dashboard Id', UPDATE_HAS_REPOSITORY = '[Auth] Change Has Repository', + UPDATE_MOBILE_QR_ENABLED = '[Auth] Update Mobile QR Enabled', UPDATE_OPENED_MENU_SECTION = '[Preferences] Update Opened Menu Section', PUT_USER_SETTINGS = '[Preferences] Put user settings', DELETE_USER_SETTINGS = '[Preferences] Delete user settings', @@ -72,6 +73,12 @@ export class ActionAuthUpdateHasRepository implements Action { constructor(readonly payload: { hasRepository: boolean }) {} } +export class ActionUpdateMobileQrCodeEnabled implements Action { + readonly type = AuthActionTypes.UPDATE_MOBILE_QR_ENABLED; + + constructor(readonly payload: { mobileQrEnabled: boolean }) {} +} + export class ActionPreferencesUpdateOpenedMenuSection implements Action { readonly type = AuthActionTypes.UPDATE_OPENED_MENU_SECTION; @@ -93,4 +100,4 @@ export class ActionPreferencesDeleteUserSettings implements Action { export type AuthActions = ActionAuthAuthenticated | ActionAuthUnauthenticated | ActionAuthLoadUser | ActionAuthUpdateUserDetails | ActionAuthUpdateLastPublicDashboardId | ActionAuthUpdateHasRepository | ActionPreferencesUpdateOpenedMenuSection | ActionPreferencesPutUserSettings | ActionPreferencesDeleteUserSettings | - ActionAuthUpdateAuthUser; + ActionAuthUpdateAuthUser | ActionUpdateMobileQrCodeEnabled; diff --git a/ui-ngx/src/app/core/auth/auth.reducer.ts b/ui-ngx/src/app/core/auth/auth.reducer.ts index cc9d01532a..73e0d04eb1 100644 --- a/ui-ngx/src/app/core/auth/auth.reducer.ts +++ b/ui-ngx/src/app/core/auth/auth.reducer.ts @@ -70,6 +70,9 @@ export const authReducer = ( case AuthActionTypes.UPDATE_HAS_REPOSITORY: return { ...state, ...action.payload}; + case AuthActionTypes.UPDATE_MOBILE_QR_ENABLED: + return { ...state, ...action.payload}; + case AuthActionTypes.UPDATE_OPENED_MENU_SECTION: const openedMenuSections = new Set(state.userSettings.openedMenuSections); if (action.payload.opened) { 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 cd12f22cf0..7e6331b82b 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 @@ -19,7 +19,7 @@
- +
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 bb6063d4a2..b8c9229201 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 @@ -58,6 +58,7 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI showBadgeContainer = true; private mobileAppSettingsValue: MobileAppSettings | MobileAppQrCodeWidgetSettings; + private deepLink: string; private deepLinkTTL: number; private deepLinkTTLTimeoutID: NodeJS.Timeout; @@ -101,12 +102,22 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI clearTimeout(this.deepLinkTTLTimeoutID); } + navigateByDeepLink($event) { + if ($event) { + $event.stopPropagation(); + } + if (this.ctx.isMobile) { + window.open(this.deepLink, '_blank'); + } + } + private initMobileAppQRCode() { if (this.deepLinkTTLTimeoutID) { clearTimeout(this.deepLinkTTLTimeoutID); this.deepLinkTTLTimeoutID = null; } this.mobileAppService.getMobileAppDeepLink().subscribe(link => { + this.deepLink = link; this.deepLinkTTL = Number(this.utilsService.getQueryParam('ttl', link)) * MINUTE; this.updateQRCode(link); this.deepLinkTTLTimeoutID = setTimeout(() => this.initMobileAppQRCode(), this.deepLinkTTL); 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 391dbfb1fa..208520bbf0 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 @@ -27,7 +27,7 @@
-
+
admin.mobile-app.applications
{{ 'admin.mobile-app.default' | translate }} @@ -104,7 +104,7 @@
-
+
admin.mobile-app.appearance-on-home-page
{{ 'admin.mobile-app.enabled' | translate }} 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 ba5f56917e..edba183919 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 @@ -27,6 +27,7 @@ import { badgePositionTranslationsMap, MobileAppSettings } from '@shared/models/mobile-app.models'; +import { ActionUpdateMobileQrCodeEnabled } from '@core/auth/auth.actions'; @Component({ selector: 'tb-mobile-app-settings', @@ -77,26 +78,41 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf ).subscribe(value => { this.iosEnableChanged(value); }); + this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe(value => { + if (value) { + this.mobileAppSettingsForm.get('qrCodeConfig').enable({emitEvent: false}); + } else { + this.mobileAppSettingsForm.get('qrCodeConfig').disable({emitEvent: false}); + this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').enable({emitEvent: false}); + } + this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').updateValueAndValidity({onlySelf: true}); + this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabelEnabled').updateValueAndValidity({onlySelf: true}); + }); this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').valueChanges.pipe( takeUntil(this.destroy$) ).subscribe(value => { if (value) { if (this.mobileAppSettingsForm.get('androidConfig.enabled').value || this.mobileAppSettingsForm.get('iosConfig.enabled').value) { + this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').enable({emitEvent: false}); this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').enable({emitEvent: false}); + } else { + this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').disable({emitEvent: false}); + this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').disable({emitEvent: false}); } } else { 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 => { - this.updateLabelControl(value); + if (value && this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value) { + this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').enable({emitEvent: false}); + } else { + this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').disable({emitEvent: false}); + } }); } @@ -121,7 +137,7 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf qrCodeConfig: this.fb.group({ showOnHomePage: [true], badgeEnabled: [true], - badgePosition: [{value: BadgePosition.RIGHT, disabled: true}], + badgePosition: [BadgePosition.RIGHT], qrCodeLabelEnabled: [true], qrCodeLabel: ['', [Validators.required, Validators.maxLength(50)]] }) @@ -143,7 +159,7 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf this.mobileAppSettingsForm.get('androidConfig.appPackage').disable({emitEvent: false}); this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').disable({emitEvent: false}); } - this.updateBadgeControls(value); + this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').updateValueAndValidity({onlySelf: true}); } private iosEnableChanged(value: boolean): void { @@ -154,37 +170,20 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf } else { this.mobileAppSettingsForm.get('iosConfig.appId').disable({emitEvent: false}); } - this.updateBadgeControls(value); - } - - private updateBadgeControls(value: boolean) { - if (this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value) { - if (value) { - this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').enable({emitEvent: false}); - if (this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').value) { - 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.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}); - } + this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').updateValueAndValidity({onlySelf: true}); } save(): void { + const showOnHomePagePreviousValue = this.mobileAppSettings.qrCodeConfig.showOnHomePage; this.mobileAppSettings = {...this.mobileAppSettings, ...this.mobileAppSettingsForm.getRawValue()}; this.mobileAppService.saveMobileAppSettings(this.mobileAppSettings) - .subscribe((settings) => this.processMobileAppSettings(settings)); + .subscribe((settings) => { + const showOnHomePageValue = settings.qrCodeConfig.showOnHomePage; + if (showOnHomePagePreviousValue !== showOnHomePageValue) { + this.store.dispatch(new ActionUpdateMobileQrCodeEnabled({mobileQrEnabled: showOnHomePageValue})); + } + this.processMobileAppSettings(settings); + }); } confirmForm(): FormGroup { diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts b/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts index a455bac64d..303a1bce4e 100644 --- a/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts +++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts @@ -33,6 +33,7 @@ import { } from '@core/auth/auth.selectors'; import { EntityKeyType } from '@shared/models/query/query.models'; import { ResourcesService } from '@core/services/resources.service'; +import { isDefinedAndNotNull } from '@core/utils'; const sysAdminHomePageJson = '/assets/dashboard/sys_admin_home_page.json'; const tenantAdminHomePageJson = '/assets/dashboard/tenant_admin_home_page.json'; @@ -83,12 +84,12 @@ const applySystemParametersToHomeDashboard = (store: Store, } } } - if (params.mobileQrEnabled) { + if (isDefinedAndNotNull(params.mobileQrEnabled)) { for (const widgetId of Object.keys(dashboard.configuration.widgets)) { if (dashboard.configuration.widgets[widgetId].config.title === 'Select show mobile QR code') { dashboard.configuration.widgets[widgetId].config.settings.markdownTextFunction = (dashboard.configuration.widgets[widgetId].config.settings.markdownTextFunction as string) - .replace('\'${mobileQrEnabled}\'', String(true)); + .replace(/\${mobileQrEnabled:([^}]+)}/, `\${mobileQrEnabled:${String(params.mobileQrEnabled)}}`); break; } } diff --git a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json index 24bac97279..b79190fddd 100644 --- a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json @@ -2670,7 +2670,7 @@ "settings": { "useMarkdownTextFunction": true, "markdownTextPattern": "### Markdown/HTML card\n - **Current entity**: ${entityName}.\n - **Current value**: ${Random}.", - "markdownTextFunction": "let html = '
';\nlet supportMobile = '${mobileQrEnabled}' || false;\nif (supportMobile && typeof supportMobile === 'boolean') {\n ctx.dashboardWidget.widgetLayout.mobileHide = false;\n html += '';\n} else {\n ctx.dashboardWidget.widgetLayout.mobileHide = true;\n html += '';\n}\nhtml += '
';\nreturn html;", + "markdownTextFunction": "let html = '
';\nlet supportMobile = '${mobileQrEnabled:valuePlaceholder}';\nlet supportMobileValue = supportMobile.match(/\\${mobileQrEnabled:([^}]+)}/)[1];\nif (supportMobileValue === 'true') {\n ctx.dashboardWidget.widgetLayout.mobileHide = false;\n html += '';\n} else {\n ctx.dashboardWidget.widgetLayout.mobileHide = true;\n html += '';\n}\nhtml += '
';\nreturn html;", "applyDefaultMarkdownStyle": false, "markdownCss": "" }, diff --git a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json index 40792caf09..25e4feca45 100644 --- a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json @@ -1125,7 +1125,7 @@ "settings": { "useMarkdownTextFunction": true, "markdownTextPattern": "### Markdown/HTML card\n - **Current entity**: ${entityName}.\n - **Current value**: ${Random}.", - "markdownTextFunction": "let html = '
';\nlet supportMobile = '${mobileQrEnabled}' || false;\nif (supportMobile && typeof supportMobile === 'boolean') {\n ctx.dashboardWidget.widgetLayout.mobileHide = false;\n html += '';\n} else {\n ctx.dashboardWidget.widgetLayout.mobileHide = true;\n html += '';\n}\nhtml += '
';\nreturn html;", + "markdownTextFunction": "let html = '
';\nlet supportMobile = '${mobileQrEnabled:valuePlaceholder}';\nlet supportMobileValue = supportMobile.match(/\\${mobileQrEnabled:([^}]+)}/)[1];\nif (supportMobileValue === 'true') {\n ctx.dashboardWidget.widgetLayout.mobileHide = false;\n html += '';\n} else {\n ctx.dashboardWidget.widgetLayout.mobileHide = true;\n html += '';\n}\nhtml += '
';\nreturn html;", "applyDefaultMarkdownStyle": false, "markdownCss": "" }, From 7db220e9e4ed7abe164f2a1b34ddc7f46df34e06 Mon Sep 17 00:00:00 2001 From: dashevchenko Date: Mon, 27 May 2024 12:36:05 +0300 Subject: [PATCH 4/8] deleted badge style from mobile app settings --- .../server/controller/MobileApplicationController.java | 4 ++-- .../thingsboard/server/common/data/mobile/QRCodeConfig.java | 1 - .../server/dao/mobile/BaseMobileAppSettingsService.java | 1 - 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/application/src/main/java/org/thingsboard/server/controller/MobileApplicationController.java b/application/src/main/java/org/thingsboard/server/controller/MobileApplicationController.java index 626f6f3b0f..77e34fc18c 100644 --- a/application/src/main/java/org/thingsboard/server/controller/MobileApplicationController.java +++ b/application/src/main/java/org/thingsboard/server/controller/MobileApplicationController.java @@ -97,7 +97,7 @@ public class MobileApplicationController extends BaseController { public ResponseEntity getAssetLinks() { MobileAppSettings mobileAppSettings = mobileAppSettingsService.getMobileAppSettings(TenantId.SYS_TENANT_ID); AndroidConfig androidConfig = mobileAppSettings.getAndroidConfig(); - if (androidConfig != null && androidConfig.isEnabled() && !androidConfig.getAppPackage().isBlank() && !androidConfig.getSha256CertFingerprints().isBlank()) { + if (androidConfig != null && androidConfig.isEnabled() && androidConfig.getAppPackage() != null && androidConfig.getSha256CertFingerprints() != null) { return ResponseEntity.ok(JacksonUtil.toJsonNode(String.format(ASSET_LINKS_PATTERN, androidConfig.getAppPackage(), androidConfig.getSha256CertFingerprints()))); } else { return ResponseEntity.notFound().build(); @@ -109,7 +109,7 @@ public class MobileApplicationController extends BaseController { public ResponseEntity getAppleAppSiteAssociation() { MobileAppSettings mobileAppSettings = mobileAppSettingsService.getMobileAppSettings(TenantId.SYS_TENANT_ID); IosConfig iosConfig = mobileAppSettings.getIosConfig(); - if (iosConfig != null && iosConfig.isEnabled() && !iosConfig.getAppId().isBlank()) { + if (iosConfig != null && iosConfig.isEnabled() && iosConfig.getAppId() != null) { return ResponseEntity.ok(JacksonUtil.toJsonNode(String.format(APPLE_APP_SITE_ASSOCIATION_PATTERN, iosConfig.getAppId()))); } else { return ResponseEntity.notFound().build(); diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/mobile/QRCodeConfig.java b/common/data/src/main/java/org/thingsboard/server/common/data/mobile/QRCodeConfig.java index b3f975870e..8bc9b23481 100644 --- a/common/data/src/main/java/org/thingsboard/server/common/data/mobile/QRCodeConfig.java +++ b/common/data/src/main/java/org/thingsboard/server/common/data/mobile/QRCodeConfig.java @@ -33,7 +33,6 @@ public class QRCodeConfig { private boolean badgeEnabled; private boolean qrCodeLabelEnabled; private BadgePosition badgePosition; - private BadgeStyle badgeStyle; @NoXss private String qrCodeLabel; diff --git a/dao/src/main/java/org/thingsboard/server/dao/mobile/BaseMobileAppSettingsService.java b/dao/src/main/java/org/thingsboard/server/dao/mobile/BaseMobileAppSettingsService.java index 4e8a2cd503..c852947ff8 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/mobile/BaseMobileAppSettingsService.java +++ b/dao/src/main/java/org/thingsboard/server/dao/mobile/BaseMobileAppSettingsService.java @@ -98,7 +98,6 @@ public class BaseMobileAppSettingsService extends AbstractCachedEntityService Date: Tue, 28 May 2024 11:53:24 +0300 Subject: [PATCH 5/8] deleted badgeStyle enum --- .../server/common/data/mobile/BadgeStyle.java | 24 ------------------- .../mobile/BaseMobileAppSettingsService.java | 1 - 2 files changed, 25 deletions(-) delete mode 100644 common/data/src/main/java/org/thingsboard/server/common/data/mobile/BadgeStyle.java diff --git a/common/data/src/main/java/org/thingsboard/server/common/data/mobile/BadgeStyle.java b/common/data/src/main/java/org/thingsboard/server/common/data/mobile/BadgeStyle.java deleted file mode 100644 index 51606a2340..0000000000 --- a/common/data/src/main/java/org/thingsboard/server/common/data/mobile/BadgeStyle.java +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Copyright © 2016-2024 The Thingsboard Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -package org.thingsboard.server.common.data.mobile; - - -public enum BadgeStyle { - - ORIGINAL, - WHITE; - -} diff --git a/dao/src/main/java/org/thingsboard/server/dao/mobile/BaseMobileAppSettingsService.java b/dao/src/main/java/org/thingsboard/server/dao/mobile/BaseMobileAppSettingsService.java index c852947ff8..57e95cc56f 100644 --- a/dao/src/main/java/org/thingsboard/server/dao/mobile/BaseMobileAppSettingsService.java +++ b/dao/src/main/java/org/thingsboard/server/dao/mobile/BaseMobileAppSettingsService.java @@ -22,7 +22,6 @@ import org.springframework.transaction.event.TransactionalEventListener; import org.thingsboard.server.common.data.id.TenantId; import org.thingsboard.server.common.data.mobile.AndroidConfig; import org.thingsboard.server.common.data.mobile.BadgePosition; -import org.thingsboard.server.common.data.mobile.BadgeStyle; import org.thingsboard.server.common.data.mobile.IosConfig; import org.thingsboard.server.common.data.mobile.MobileAppSettings; import org.thingsboard.server.common.data.mobile.QRCodeConfig; From e019b754a370261fbc4deb9917cc696477702918 Mon Sep 17 00:00:00 2001 From: rusikv Date: Tue, 28 May 2024 13:11:29 +0300 Subject: [PATCH 6/8] UI: added basic/advanced config for mobile app qr code widget, added QR code responsiveness --- .../widget_types/mobile_app_qr_code.json | 10 +- .../basic/basic-widget-config.module.ts | 10 +- ...le-app-qr-code-basic-config.component.html | 118 ++++++++++++ ...bile-app-qr-code-basic-config.component.ts | 182 ++++++++++++++++++ .../cards/mobile-app-qr-code-widget.models.ts | 39 ++-- .../mobile-app-qrcode-widget.component.html | 17 +- .../mobile-app-qrcode-widget.component.scss | 59 ++++-- .../lib/mobile-app-qrcode-widget.component.ts | 94 +++++---- ...app-qr-code-widget-settings.component.html | 89 ++++----- ...e-app-qr-code-widget-settings.component.ts | 41 ++-- .../assets/dashboard/sys_admin_home_page.json | 26 ++- .../dashboard/tenant_admin_home_page.json | 26 ++- .../assets/locale/locale.constant-en_US.json | 3 + 13 files changed, 554 insertions(+), 160 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.ts diff --git a/application/src/main/data/json/system/widget_types/mobile_app_qr_code.json b/application/src/main/data/json/system/widget_types/mobile_app_qr_code.json index 37f7df0ae6..f3929d88f1 100644 --- a/application/src/main/data/json/system/widget_types/mobile_app_qr_code.json +++ b/application/src/main/data/json/system/widget_types/mobile_app_qr_code.json @@ -7,15 +7,17 @@ "descriptor": { "type": "static", "sizeX": 7.5, - "sizeY": 3, + "sizeY": 4, "resources": [], - "templateHtml": "\n", + "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n}\n", + "controllerScript": "self.onInit = function() {\n}\n\nself.typeParameters = function() {\n return {\n previewWidth: '250px',\n previewHeight: '250px',\n embedTitlePanel: true\n };\n};", "settingsSchema": "", "dataKeySettingsSchema": "", "settingsDirective": "tb-mobile-app-qr-code-widget-settings", - "defaultConfig": "{\n \"showTitle\": true,\n \"backgroundColor\": \"rgb(255, 255, 255)\",\n \"color\": \"rgba(0, 0, 0, 0.87)\",\n \"padding\": \"8px\",\n \"settings\": {\n \"useSystemSettings\": true,\n \"androidConfig\": {\n \"enabled\": true\n },\n \"iosConfig\": {\n \"enabled\": true\n },\n \"qrCodeConfig\": {\n \"badgeEnabled\": true,\n \"badgeStyle\": \"ORIGINAL\",\n \"badgePosition\": \"RIGHT\",\n \"qrCodeLabelEnabled\": true,\n \"qrCodeLabel\": \"Scan to connect or download mobile app\"\n }\n },\n \"title\": \"Mobile app QR code\",\n \"dropShadow\": true,\n \"enableFullscreen\": false,\n \"widgetStyle\": {},\n \"widgetCss\": \"\",\n \"pageSize\": 1024,\n \"noDataDisplayMessage\": \"\",\n \"showTitleIcon\": false,\n \"titleTooltip\": \"\",\n \"titleStyle\": {\n \"fontSize\": \"16px\",\n \"fontWeight\": 400\n }\n}\n" + "hasBasicMode": true, + "basicModeDirective": "tb-mobile-app-qr-code-basic-config", + "defaultConfig": "{\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"useSystemSettings\":true,\"qrCodeConfig\":{\"badgeEnabled\":true,\"badgePosition\":\"RIGHT\",\"qrCodeLabelEnabled\":true,\"qrCodeLabel\":\"Scan to connect or download mobile app\"},\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Mobile app QR code\",\"dropShadow\":true,\"showTitleIcon\":false,\"titleTooltip\":\"\",\"enableFullscreen\":false,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetStyle\":{},\"widgetCss\":\"\",\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"configMode\":\"basic\"}" }, "tags": [ "ios", diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts index 18b80f86a5..0f4f95650a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts @@ -129,6 +129,7 @@ import { import { RadarChartBasicConfigComponent } from '@home/components/widget/config/basic/chart/radar-chart-basic-config.component'; +import { MobileAppQrCodeBasicConfigComponent } from '@home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component'; @NgModule({ declarations: [ @@ -171,7 +172,8 @@ import { PieChartBasicConfigComponent, BarChartBasicConfigComponent, PolarAreaChartBasicConfigComponent, - RadarChartBasicConfigComponent + RadarChartBasicConfigComponent, + MobileAppQrCodeBasicConfigComponent ], imports: [ CommonModule, @@ -216,7 +218,8 @@ import { PieChartBasicConfigComponent, BarChartBasicConfigComponent, PolarAreaChartBasicConfigComponent, - RadarChartBasicConfigComponent + RadarChartBasicConfigComponent, + MobileAppQrCodeBasicConfigComponent ] }) export class BasicWidgetConfigModule { @@ -255,5 +258,6 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type + +
+
+ + {{ 'admin.mobile-app.use-system-settings' | translate }} + +
+
+
+
+
widget-config.appearance
+
{{ 'widgets.mobile-app-qr-code.configuration-hint' | translate }}
+
+ + {{ 'admin.mobile-app.badges' | translate }} + + + + + {{ badgePosition.value | translate }} + + + +
+
+ + {{ 'admin.mobile-app.label' | translate }} + + + + + warning + + +
+
+ + {{ 'widgets.liquid-level-card.title' | translate }} + +
+ + + + + + + +
+
+
+ + {{ 'widgets.liquid-level-card.icon' | translate }} + +
+ + + + + + + + +
+
+
+
+
widget-config.card-appearance
+
+
{{ 'widgets.background.background' | translate }}
+ + +
+
+
widget-config.show-card-buttons
+ + {{ 'fullscreen.fullscreen' | translate }} + +
+
+
{{ 'widget-config.card-border-radius' | translate }}
+ + + +
+
+ + +
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.ts new file mode 100644 index 0000000000..25f091df7b --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.ts @@ -0,0 +1,182 @@ +/// +/// Copyright © 2016-2024 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { ChangeDetectorRef, Component, Injector } from '@angular/core'; +import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; +import { WidgetConfigComponentData } from '@home/models/widget-component.models'; +import { WidgetConfig } from '@shared/models/widget.models'; +import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; +import { isUndefined } from '@core/utils'; +import { cssSizeToStrSize, resolveCssSize } from '@shared/models/widget-settings.models'; +import { + mobileAppQrCodeWidgetDefaultSettings, + MobileAppQrCodeWidgetSettings +} from '@home/components/widget/lib/cards/mobile-app-qr-code-widget.models'; +import { badgePositionTranslationsMap } from '@app/shared/models/mobile-app.models'; + +@Component({ + selector: 'tb-mobile-app-qr-code-basic-config', + templateUrl: './mobile-app-qr-code-basic-config.component.html', + styleUrls: ['../basic-config.scss'] +}) +export class MobileAppQrCodeBasicConfigComponent extends BasicWidgetConfigComponent { + + mobileAppQrCodeWidgetConfigForm: UntypedFormGroup; + badgePositionTranslationsMap = badgePositionTranslationsMap; + + constructor(protected store: Store, + protected widgetConfigComponent: WidgetConfigComponent, + private cd: ChangeDetectorRef, + private $injector: Injector, + private fb: UntypedFormBuilder) { + super(store, widgetConfigComponent); + } + + protected configForm(): UntypedFormGroup { + return this.mobileAppQrCodeWidgetConfigForm; + } + + protected setupConfig(widgetConfig: WidgetConfigComponentData) { + super.setupConfig(widgetConfig); + } + + protected onConfigSet(configData: WidgetConfigComponentData) { + const settings: MobileAppQrCodeWidgetSettings = {...mobileAppQrCodeWidgetDefaultSettings, ...(configData.config.settings || {})}; + const iconSize = resolveCssSize(configData.config.iconSize); + + this.mobileAppQrCodeWidgetConfigForm = this.fb.group({ + useSystemSettings: [settings.useSystemSettings], + + badgeEnabled: [settings.qrCodeConfig.badgeEnabled], + badgePosition: [settings.qrCodeConfig.badgePosition], + qrCodeLabelEnabled: [settings.qrCodeConfig.qrCodeLabelEnabled], + qrCodeLabel: [settings.qrCodeConfig.qrCodeLabel], + + showTitle: [configData.config.showTitle, []], + title: [configData.config.title, []], + titleFont: [configData.config.titleFont, []], + titleColor: [configData.config.titleColor, []], + showTitleIcon: [configData.config.showTitleIcon, []], + iconSize: [iconSize[0], [Validators.min(0)]], + iconSizeUnit: [iconSize[1], []], + titleIcon: [configData.config.titleIcon, []], + iconColor: [configData.config.iconColor, []], + + background: [settings.background, []], + + cardButtons: [this.getCardButtons(configData.config), []], + borderRadius: [configData.config.borderRadius, []], + + actions: [configData.config.actions || {}, []] + }); + } + + protected prepareOutputConfig(config: any): WidgetConfigComponentData { + this.widgetConfig.config.showTitle = config.showTitle; + this.widgetConfig.config.title = config.title; + this.widgetConfig.config.titleFont = config.titleFont; + this.widgetConfig.config.titleColor = config.titleColor; + + this.widgetConfig.config.showTitleIcon = config.showTitleIcon; + this.widgetConfig.config.iconSize = cssSizeToStrSize(config.iconSize, config.iconSizeUnit); + this.widgetConfig.config.titleIcon = config.titleIcon; + this.widgetConfig.config.iconColor = config.iconColor; + + this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; + this.widgetConfig.config.settings.useSystemSettings = config.useSystemSettings; + this.widgetConfig.config.settings.qrCodeConfig = { + badgeEnabled: config.badgeEnabled, + badgePosition: config.badgePosition, + qrCodeLabelEnabled: config.qrCodeLabelEnabled, + qrCodeLabel: config.qrCodeLabel + }; + + this.widgetConfig.config.settings.background = config.background; + this.setCardButtons(config.cardButtons, this.widgetConfig.config); + this.widgetConfig.config.borderRadius = config.borderRadius; + + this.widgetConfig.config.actions = config.actions; + return this.widgetConfig; + } + + protected validatorTriggers(): string[] { + return ['showTitleIcon', 'badgeEnabled', 'qrCodeLabelEnabled', 'showTitleIcon', 'showTitle']; + } + + protected updateValidators(emitEvent: boolean, trigger?: string) { + const useSystemSettings = this.mobileAppQrCodeWidgetConfigForm.get('useSystemSettings').value; + + if (!useSystemSettings) { + const badgeEnabled = this.mobileAppQrCodeWidgetConfigForm.get('badgeEnabled').value; + const qrCodeLabelEnabled = this.mobileAppQrCodeWidgetConfigForm.get('qrCodeLabelEnabled').value; + const showTitleIcon: boolean = this.mobileAppQrCodeWidgetConfigForm.get('showTitleIcon').value; + const showTitle: boolean = this.mobileAppQrCodeWidgetConfigForm.get('showTitle').value; + + if (badgeEnabled) { + this.mobileAppQrCodeWidgetConfigForm.get('badgePosition').enable({emitEvent: false}); + } else { + this.mobileAppQrCodeWidgetConfigForm.get('badgePosition').disable({emitEvent: false}); + } + if (qrCodeLabelEnabled) { + this.mobileAppQrCodeWidgetConfigForm.get('qrCodeLabel').enable({emitEvent: false}); + } else { + this.mobileAppQrCodeWidgetConfigForm.get('qrCodeLabel').disable({emitEvent: false}); + } + if (showTitle) { + this.mobileAppQrCodeWidgetConfigForm.get('title').enable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('titleFont').enable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('titleColor').enable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false}); + if (showTitleIcon) { + this.mobileAppQrCodeWidgetConfigForm.get('titleIcon').enable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('iconColor').enable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('iconSize').enable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('iconSizeUnit').enable({emitEvent: false}); + } else { + this.mobileAppQrCodeWidgetConfigForm.get('titleIcon').disable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('iconColor').disable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('iconSize').disable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('iconSizeUnit').disable({emitEvent: false}); + } + } else { + this.mobileAppQrCodeWidgetConfigForm.get('title').disable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('titleFont').disable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('titleColor').disable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('titleIcon').disable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('iconColor').disable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('iconSize').disable({emitEvent: false}); + this.mobileAppQrCodeWidgetConfigForm.get('iconSizeUnit').disable({emitEvent: false}); + } + } + } + + private getCardButtons(config: WidgetConfig): string[] { + const buttons: string[] = []; + if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { + buttons.push('fullscreen'); + } + return buttons; + } + + private setCardButtons(buttons: string[], config: WidgetConfig) { + config.enableFullscreen = buttons.includes('fullscreen'); + } + +} 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 c37c4a9769..df18b8ac49 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 @@ -14,32 +14,41 @@ /// limitations under the License. /// -import { - AndroidConfig, - BadgePosition, - IosConfig, - QRCodeConfig -} from '@shared/models/mobile-app.models'; +import { BadgePosition, QRCodeConfig } from '@shared/models/mobile-app.models'; +import { BackgroundType } from '@shared/models/widget-settings.models'; +import { WidgetConfig } from '@shared/models/widget.models'; -export interface MobileAppQrCodeWidgetSettings { +export interface MobileAppQrCodeWidgetSettings extends WidgetConfig { useSystemSettings: boolean; - androidConfig: Pick; - iosConfig: Pick; qrCodeConfig: Omit; } export const mobileAppQrCodeWidgetDefaultSettings: MobileAppQrCodeWidgetSettings = { useSystemSettings: true, - androidConfig: { - enabled: true - }, - iosConfig: { - enabled: true - }, qrCodeConfig: { badgeEnabled: true, badgePosition: BadgePosition.RIGHT, qrCodeLabelEnabled: true, qrCodeLabel: 'Scan to connect or download mobile app' + }, + title: 'Download mobile app', + titleFont: { + family: 'Roboto', + size: 16, + sizeUnit: 'px', + style: 'normal', + weight: '500', + lineHeight: '1.5' + }, + showTitleIcon: false, + iconSize: '40', + background: { + type: BackgroundType.color, + color: '#fff', + overlay: { + enabled: false, + color: 'rgba(255,255,255,0.72)', + blur: 3 + } } } 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 7e6331b82b..060b2bacf7 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 @@ -15,14 +15,19 @@ limitations under the License. --> -
-
+
+ +
- -
- - +
+
+ +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss index 364d7bfad9..83290a27da 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss @@ -17,23 +17,60 @@ @import '../../../../../../scss/constants'; :host { + width: 100%; height: 100%; display: flex; - flex-direction: column; - background-color: transparent; + justify-content: center; } -.tb-qrcode-label { - font-size: 14px; - color: rgba(0, 0, 0, 0.54); +.tb-mobile-app-qrcode-panel { + width: 100%; + height: 100%; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + gap: 8px; + padding: 16px; + &.preview { + max-width: 300px; + padding: 0; + } + > div:not(.tb-mobile-app-qrcode-overlay) { + z-index: 1; + } + .tb-mobile-app-qrcode-overlay { + position: absolute; + top: 12px; + left: 12px; + bottom: 12px; + right: 12px; + } - @media #{$mat-md-lg} { - font-size: 11px; - line-height: 16px; + div.tb-widget-title { + padding: 0; + } + + .tb-qrcode-label { + align-self: center; + font-size: 14px; + color: rgba(0, 0, 0, 0.54); } -} -.tb-qrcode { - border-radius: 6px; + .tb-qrcode { + display: flex; + flex: 0.3; + min-width: 100px; + padding: 3px; + border-radius: 6px; + background-color: #fff; + } + + .tb-badges { + display: flex; + flex-direction: column; + flex: 0.4; + gap: 8px; + } } 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 b8c9229201..6aeef19b19 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 @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; import { AppState } from '@core/core.state'; import { Store } from '@ngrx/store'; @@ -22,11 +22,13 @@ import { BadgePosition, MobileAppSettings } from '@shared/models/mobile-app.mode import { MobileAppService } from '@core/http/mobile-app.service'; import { WidgetContext } from '@home/models/widget-component.models'; import { UtilsService } from '@core/services/utils.service'; -import { Subject } from 'rxjs'; +import { Observable, Subject } from 'rxjs'; import { MINUTE } from '@shared/models/time/time.models'; -import { MobileAppQrCodeWidgetSettings } from '@home/components/widget/lib/cards/mobile-app-qr-code-widget.models'; -import { isDefinedAndNotNull } from '@core/utils'; +import { isDefinedAndNotNull, mergeDeep } from '@core/utils'; import { ResizeObserver } from '@juggle/resize-observer'; +import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/widget-settings.models'; +import { ImagePipe } from '@shared/pipe/image.pipe'; +import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'tb-mobile-app-qrcode-widget', @@ -35,61 +37,76 @@ import { ResizeObserver } from '@juggle/resize-observer'; }) export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnInit, OnDestroy { + private readonly destroy$ = new Subject(); + private widgetResize$: ResizeObserver; + + private mobileAppSettingsValue: MobileAppSettings; + private deepLink: string; + private deepLinkTTL: number; + private deepLinkTTLTimeoutID: NodeJS.Timeout; + + previewMode = false; + + badgePosition = BadgePosition; + showBadgeContainer = true; + + backgroundStyle$: Observable; + overlayStyle: ComponentStyle = {}; + + qrCodeSVG = ''; + @Input() ctx: WidgetContext; @Input() - set mobileAppSettings(settings: MobileAppSettings | MobileAppQrCodeWidgetSettings) { + widgetTitlePanel: TemplateRef; + + @Input() + set mobileAppSettings(settings: MobileAppSettings) { if (settings) { this.mobileAppSettingsValue = settings; } }; - get mobileAppSettings(): MobileAppSettings | MobileAppQrCodeWidgetSettings { + get mobileAppSettings(): MobileAppSettings { return this.mobileAppSettingsValue; } - @ViewChild('canvas', {static: true}) canvasRef: ElementRef; - - private readonly destroy$ = new Subject(); - private widgetResize$: ResizeObserver; - - badgePosition = BadgePosition; - showBadgeContainer = true; - - private mobileAppSettingsValue: MobileAppSettings | MobileAppQrCodeWidgetSettings; - private deepLink: string; - private deepLinkTTL: number; - private deepLinkTTLTimeoutID: NodeJS.Timeout; - constructor(protected store: Store, protected cd: ChangeDetectorRef, private mobileAppService: MobileAppService, private utilsService: UtilsService, - private elementRef: ElementRef) { + private elementRef: ElementRef, + private imagePipe: ImagePipe, + private sanitizer: DomSanitizer,) { super(store); } ngOnInit(): void { if (!this.mobileAppSettings) { - if (isDefinedAndNotNull(this.ctx.settings.useSystemSettings) && !this.ctx.settings.useSystemSettings) { - this.mobileAppSettings = this.ctx.settings; - } else { - this.mobileAppService.getMobileAppSettings().subscribe((settings => { - this.mobileAppSettings = settings; - this.cd.markForCheck(); - })); - } + this.mobileAppService.getMobileAppSettings().subscribe((settings => { + this.mobileAppSettings = settings; + if (isDefinedAndNotNull(this.ctx.settings.useSystemSettings) && !this.ctx.settings.useSystemSettings) { + this.mobileAppSettings = mergeDeep(this.mobileAppSettings, this.ctx.settings); + } + + this.widgetResize$ = new ResizeObserver(() => { + const showHideBadgeContainer = this.elementRef.nativeElement.offsetWidth > 250; + if (showHideBadgeContainer !== this.showBadgeContainer) { + this.showBadgeContainer = showHideBadgeContainer; + this.cd.markForCheck(); + } + }); + + this.widgetResize$.observe(this.elementRef.nativeElement); + this.backgroundStyle$ = backgroundStyle(this.ctx.settings.background, this.imagePipe, this.sanitizer); + this.overlayStyle = overlayStyle(this.ctx.settings.background.overlay); + this.cd.markForCheck(); + })); + } else { + this.previewMode = true; } this.initMobileAppQRCode(); - this.widgetResize$ = new ResizeObserver(() => { - const showHideBadgeContainer = this.elementRef.nativeElement.offsetWidth > 250; - if (showHideBadgeContainer !== this.showBadgeContainer) { - this.showBadgeContainer = showHideBadgeContainer; - this.cd.markForCheck(); - } - }); - this.widgetResize$.observe(this.elementRef.nativeElement); } ngOnDestroy() { @@ -126,7 +143,10 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI private updateQRCode(link: string) { import('qrcode').then((QRCode) => { - QRCode.toCanvas(this.canvasRef.nativeElement, link, { width: 100 }); + QRCode.toString(link, (err, string) => { + this.qrCodeSVG = string; + this.cd.markForCheck(); + }) }); } 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 f164351829..ea849e4f30 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 @@ -23,57 +23,50 @@
-
-
admin.mobile-app.applications
-
-
- - {{ 'admin.mobile-app.android' | translate }} - +
+
+
widget-config.card-style
+
{{ 'widgets.mobile-app-qr-code.configuration-hint' | translate }}
+
+
+ + {{ 'admin.mobile-app.badges' | translate }} + + + + + {{ badgePosition.value | translate }} + + + +
-
-
-
- - {{ 'admin.mobile-app.ios' | translate }} - -
-
-
-
-
admin.mobile-app.appearance
-
-
- - {{ 'admin.mobile-app.badges' | translate }} - - - - - {{ badgePosition.value | translate }} - - - +
+
+ + {{ 'admin.mobile-app.label' | translate }} + + + + + warning + + +
-
-
- - {{ 'admin.mobile-app.label' | translate }} - - - - - warning - - +
+
+
{{ 'widgets.background.background' | 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 85ba53ca34..d4bae4624e 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 @@ -49,50 +49,35 @@ export class MobileAppQrCodeWidgetSettingsComponent extends WidgetSettingsCompon protected onSettingsSet(settings: WidgetSettings) { this.mobileAppQRCodeWidgetSettingsForm = this.fb.group({ useSystemSettings: [settings.useSystemSettings], - androidConfig: this.fb.group({ - enabled: [settings.androidConfig.enabled], - }), - iosConfig: this.fb.group({ - enabled: [settings.iosConfig.enabled], - }), qrCodeConfig: this.fb.group({ badgeEnabled: [settings.qrCodeConfig.badgeEnabled], - badgePosition: [{value: settings.qrCodeConfig.badgePosition, disabled: true}], + badgePosition: [settings.qrCodeConfig.badgePosition], qrCodeLabelEnabled: [settings.qrCodeConfig.qrCodeLabelEnabled], - qrCodeLabel: [settings.qrCodeConfig.qrCodeLabel, [Validators.required]] - }) + qrCodeLabel: [settings.qrCodeConfig.qrCodeLabel] + }), + background: [settings.background] }); } protected validatorTriggers(): string[] { - return ['useSystemSettings', 'androidConfig.enabled', 'iosConfig.enabled', 'qrCodeConfig.badgeEnabled', 'qrCodeConfig.qrCodeLabelEnabled']; + return ['useSystemSettings', 'qrCodeConfig.badgeEnabled', 'qrCodeConfig.qrCodeLabelEnabled']; } protected updateValidators(emitEvent: boolean) { const useSystemSettings = this.mobileAppQRCodeWidgetSettingsForm.get('useSystemSettings').value; - const androidEnabled = this.mobileAppQRCodeWidgetSettingsForm.get('androidConfig.enabled').value; - const iosEnabled = this.mobileAppQRCodeWidgetSettingsForm.get('iosConfig.enabled').value; - const badgeEnabled = this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgeEnabled').value; - const qrCodeLabelEnabled = this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.qrCodeLabelEnabled').value; - - if (!androidEnabled && !iosEnabled) { - this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgeEnabled').disable({emitEvent: false}); - this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgePosition').disable({emitEvent: false}); - } - - if (androidEnabled || iosEnabled) { - this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgeEnabled').enable({emitEvent: false}); + if (!useSystemSettings) { + const badgeEnabled = this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgeEnabled').value; + const qrCodeLabelEnabled = this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.qrCodeLabelEnabled').value; if (badgeEnabled) { this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgePosition').enable({emitEvent: false}); } else { this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.badgePosition').disable({emitEvent: false}); } - } - - if (qrCodeLabelEnabled && !useSystemSettings) { - this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.qrCodeLabel').enable({emitEvent: false}); - } else { - this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.qrCodeLabel').disable({emitEvent: false}); + if (qrCodeLabelEnabled) { + this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.qrCodeLabel').enable({emitEvent: false}); + } else { + this.mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.qrCodeLabel').disable({emitEvent: false}); + } } } diff --git a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json index b79190fddd..25806b0e39 100644 --- a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json @@ -2642,16 +2642,34 @@ "showTitle": true, "backgroundColor": "rgb(255, 255, 255)", "color": "rgba(0, 0, 0, 0.87)", - "padding": "8px", - "settings": {}, + "padding": "16px", + "settings": { + "useSystemSettings": true, + "qrCodeConfig": { + "badgeEnabled": true, + "badgePosition": "RIGHT", + "qrCodeLabelEnabled": true, + "qrCodeLabel": "Scan to connect or download mobile app" + }, + "background": { + "type": "color", + "color": "#fff", + "overlay": { + "enabled": false, + "color": "rgba(255,255,255,0.72)", + "blur": 3 + } + } + }, "title": "{i18n:admin.mobile-app.connect-mobile-app}", "dropShadow": false, "enableFullscreen": false, "widgetStyle": {}, - "widgetCss": ".tb-widget-container > .tb-widget > .tb-widget-header > .tb-widget-title {\n padding: 0;\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-header > .tb-widget-title > .title-row > .title {\n padding-bottom: 12px;\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-header > .tb-widget-title > .title-row > .title {\n padding-bottom: 0;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n }\n}\n", + "widgetCss": " .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding: 0;\n}\n\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 8px;\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n padding: 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 0;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode-label {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1190px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n gap: 0;\n }\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n min-width: 150px;\n }\n}\n\n@media screen and (max-width: 960px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 180px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 240px;\n }\n}", "showTitleIcon": false, "titleTooltip": "", - "titleStyle": null + "titleStyle": null, + "borderRadius": "12px" }, "row": 0, "col": 0, diff --git a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json index 25e4feca45..f91439c009 100644 --- a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json @@ -1185,16 +1185,34 @@ "showTitle": true, "backgroundColor": "rgb(255, 255, 255)", "color": "rgba(0, 0, 0, 0.87)", - "padding": "8px", - "settings": {}, + "padding": "16px", + "settings": { + "useSystemSettings": true, + "qrCodeConfig": { + "badgeEnabled": true, + "badgePosition": "RIGHT", + "qrCodeLabelEnabled": true, + "qrCodeLabel": "Scan to connect or download mobile app" + }, + "background": { + "type": "color", + "color": "#fff", + "overlay": { + "enabled": false, + "color": "rgba(255,255,255,0.72)", + "blur": 3 + } + } + }, "title": "{i18n:admin.mobile-app.connect-mobile-app}", "dropShadow": false, "enableFullscreen": false, "widgetStyle": {}, - "widgetCss": ".tb-widget-container > .tb-widget > .tb-widget-header > .tb-widget-title {\n padding: 0;\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-header > .tb-widget-title > .title-row > .title {\n padding-bottom: 12px;\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-header > .tb-widget-title > .title-row > .title {\n padding-bottom: 0;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n }\n}\n", + "widgetCss": " .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding: 0;\n}\n\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 8px;\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n padding: 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 0;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode-label {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1190px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n gap: 0;\n }\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n min-width: 150px;\n }\n}\n\n@media screen and (max-width: 960px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 180px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 240px;\n }\n}", "showTitleIcon": false, "titleTooltip": "", - "titleStyle": null + "titleStyle": null, + "borderRadius": "12px" }, "row": 0, "col": 0, 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 4a6679dcca..1369a5420b 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -5557,6 +5557,9 @@ "invalid-widget-file-error": "Unable to import widget: Invalid widget data structure." }, "widgets": { + "mobile-app-qr-code": { + "configuration-hint": "The configuration depends on the Mobile app QR code widget in platform main settings" + }, "action-button": { "behavior": "Behavior", "on-click": "On click", From 527ef96efaea306177dea7480a57385283e016d6 Mon Sep 17 00:00:00 2001 From: rusikv Date: Tue, 28 May 2024 17:09:22 +0300 Subject: [PATCH 7/8] UI: home page mobile app qr style improvements --- .../widget/lib/mobile-app-qrcode-widget.component.scss | 1 + ui-ngx/src/assets/dashboard/sys_admin_home_page.json | 2 +- ui-ngx/src/assets/dashboard/tenant_admin_home_page.json | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss index 83290a27da..b13fbe0f8f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss @@ -53,6 +53,7 @@ .tb-qrcode-label { align-self: center; + text-align: center; font-size: 14px; color: rgba(0, 0, 0, 0.54); } diff --git a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json index 25806b0e39..23dfc2ed69 100644 --- a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json @@ -2665,7 +2665,7 @@ "dropShadow": false, "enableFullscreen": false, "widgetStyle": {}, - "widgetCss": " .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding: 0;\n}\n\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 8px;\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n padding: 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 0;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode-label {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1190px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n gap: 0;\n }\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n min-width: 150px;\n }\n}\n\n@media screen and (max-width: 960px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 180px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 240px;\n }\n}", + "widgetCss": " .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding: 0;\n}\n\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 8px;\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n padding: 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 0;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode-label {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1190px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n gap: 0;\n }\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n min-width: 150px;\n }\n}\n\n@media screen and (max-width: 960px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 110px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 140px;\n }\n}\n\n@media screen and (min-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 107px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 132px;\n }\n}", "showTitleIcon": false, "titleTooltip": "", "titleStyle": null, diff --git a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json index f91439c009..6d80cae3a8 100644 --- a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json @@ -1208,7 +1208,7 @@ "dropShadow": false, "enableFullscreen": false, "widgetStyle": {}, - "widgetCss": " .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding: 0;\n}\n\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 8px;\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n padding: 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 0;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode-label {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1190px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n gap: 0;\n }\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n min-width: 150px;\n }\n}\n\n@media screen and (max-width: 960px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 180px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 240px;\n }\n}", + "widgetCss": " .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding: 0;\n}\n\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 8px;\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n padding: 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 0;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode-label {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1190px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n gap: 0;\n }\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n min-width: 150px;\n }\n}\n\n@media screen and (max-width: 960px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 120px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 160px;\n }\n}\n\n@media screen and (min-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 107px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 132px;\n }\n}", "showTitleIcon": false, "titleTooltip": "", "titleStyle": null, From c5fcfe9fbab79caa151b51fd28c55ea96ad4f129 Mon Sep 17 00:00:00 2001 From: rusikv Date: Wed, 29 May 2024 16:59:02 +0300 Subject: [PATCH 8/8] UI: qrcode styles improvements --- .../mobile-app-qrcode-widget.component.html | 22 ++++++++++--------- .../assets/dashboard/sys_admin_home_page.json | 2 +- .../dashboard/tenant_admin_home_page.json | 4 ++-- 3 files changed, 15 insertions(+), 13 deletions(-) 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 060b2bacf7..6dc33eb07f 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 @@ -20,17 +20,19 @@ [style]="backgroundStyle$ | async">
-
-
-
+
+
+
- - + + +
+
+
+ {{ mobileAppSettings.qrCodeConfig.qrCodeLabel }}
-
-
- {{ mobileAppSettings.qrCodeConfig.qrCodeLabel }}
diff --git a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json index 23dfc2ed69..bb38c53b6f 100644 --- a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json @@ -2665,7 +2665,7 @@ "dropShadow": false, "enableFullscreen": false, "widgetStyle": {}, - "widgetCss": " .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding: 0;\n}\n\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 8px;\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n padding: 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 0;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode-label {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1190px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n gap: 0;\n }\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n min-width: 150px;\n }\n}\n\n@media screen and (max-width: 960px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 110px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 140px;\n }\n}\n\n@media screen and (min-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 107px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 132px;\n }\n}", + "widgetCss": " .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding: 0;\n}\n\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 8px;\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n padding: 0;\n}\n\n@media screen and (min-width: 960px) and (max-height: 900px) {\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 0;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode-label {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1190px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n gap: 0;\n }\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n min-width: 150px;\n }\n}\n\n@media screen and (max-width: 960px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 110px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 140px;\n }\n}\n\n@media screen and (min-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 125px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 160px;\n }\n}", "showTitleIcon": false, "titleTooltip": "", "titleStyle": null, diff --git a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json index 6d80cae3a8..bdc90f529f 100644 --- a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json @@ -1208,7 +1208,7 @@ "dropShadow": false, "enableFullscreen": false, "widgetStyle": {}, - "widgetCss": " .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding: 0;\n}\n\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 8px;\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n padding: 0;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 0;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode-label {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1190px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n gap: 0;\n }\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n min-width: 150px;\n }\n}\n\n@media screen and (max-width: 960px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 120px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 160px;\n }\n}\n\n@media screen and (min-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 107px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 132px;\n }\n}", + "widgetCss": " .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding: 0;\n}\n\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 8px;\n font-weight: 600;\n font-size: 20px;\n line-height: 24px;\n letter-spacing: 0.1px;\n color: rgba(0, 0, 0, 0.76);\n}\n\n.tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n padding: 0;\n}\n\n@media screen and (min-width: 960px) and (max-height: 900px) {\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content .tb-widget-title > .title-row > .title {\n padding-bottom: 0;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode-label {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1182px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel {\n gap: 0;\n }\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n min-width: 150px;\n }\n}\n\n@media screen and (max-width: 960px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 120px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 160px;\n }\n}\n\n@media screen and (min-width: 1819px) {\n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-qrcode {\n max-width: 125px;\n }\n \n .tb-widget-container > .tb-widget > .tb-widget-content > .tb-widget .tb-mobile-app-qrcode-panel .tb-badges {\n max-width: 160px;\n }\n}", "showTitleIcon": false, "titleTooltip": "", "titleStyle": null, @@ -1286,7 +1286,7 @@ "row": 0, "col": 85, "mobileHide": false, - "mobileHeight": 10 + "mobileHeight": 7 } }, "gridSettings": {