UI: mobile app qr code widget: added default settings for title and icon, added card padding, fixed title not visible under overlay, enlarged preview width, code cleanup

application/src/main/data/json/system/widget_types/mobile_app_qr_code.json

@@ -11,13 +11,13 @@
     "resources": [],
     "templateHtml": "<tb-mobile-app-qrcode-widget\n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-mobile-app-qrcode-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true\n    };\n};",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '250px',\n        embedTitlePanel: true\n    };\n};",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-mobile-app-qr-code-widget-settings",
     "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\"}"
+    "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}},\"padding\":\"12px\"},\"title\":\"Download mobile app\",\"dropShadow\":true,\"showTitleIcon\":false,\"titleTooltip\":\"\",\"enableFullscreen\":false,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetStyle\":{},\"widgetCss\":\"\",\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"configMode\":\"basic\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"1.5\"},\"titleColor\":\"#000000\",\"iconSize\":\"26px\",\"titleIcon\":\"qr_code\",\"iconColor\":\"#000000\",\"actions\":{}}"
   },
   "tags": [
     "ios",

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.html

@@ -46,15 +46,6 @@
         </mat-slide-toggle>
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="qrCodeLabel" placeholder="{{'admin.mobile-app.set' | translate}}">
-          <mat-icon matSuffix
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-error-tooltip"
-                    [matTooltip]="'admin.mobile-app.label-required' | translate"
-                    *ngIf="mobileAppQrCodeWidgetConfigForm.get('qrCodeLabel').hasError('required')
-                          && mobileAppQrCodeWidgetConfigForm.get('qrCodeLabel').touched"
-                    class="tb-error">
-            warning
-          </mat-icon>
         </mat-form-field>
       </div>
       <div class="tb-form-row column-xs">
@@ -110,6 +101,12 @@
           <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
       </div>
+      <div class="tb-form-row space-between">
+        <div>{{ 'widget-config.card-padding' | translate }}</div>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
     </div>
     <tb-widget-actions-panel
       formControlName="actions">

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/mobile-app-qr-code-basic-config.component.ts

@@ -82,6 +82,7 @@ export class MobileAppQrCodeBasicConfigComponent extends BasicWidgetConfigCompon
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -110,6 +111,7 @@ export class MobileAppQrCodeBasicConfigComponent extends BasicWidgetConfigCompon
     this.widgetConfig.config.settings.background = config.background;
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;

ui-ngx/src/app/modules/home/components/widget/lib/cards/mobile-app-qr-code-widget.models.ts

@@ -50,5 +50,6 @@ export const mobileAppQrCodeWidgetDefaultSettings: MobileAppQrCodeWidgetSettings
       color: 'rgba(255,255,255,0.72)',
       blur: 3
     }
-  }
+  },
+  padding: '12px'
 }

ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html

@@ -16,6 +16,7 @@
 
 -->
 <div class="tb-mobile-app-qrcode-panel"
+     [style.padding]="padding"
      [class.preview]="previewMode"
      [style]="backgroundStyle$ | async">
   <div class="tb-mobile-app-qrcode-overlay" [style]="overlayStyle"></div>

ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss

@@ -47,10 +47,6 @@
     right: 12px;
   }
 
-  div.tb-widget-title {
-    padding: 0;
-  }
-
   .tb-qrcode-label {
     align-self: center;
     text-align: center;
@@ -75,3 +71,11 @@
   }
 }
 
+:host ::ng-deep {
+  .tb-mobile-app-qrcode-panel {
+    > div.tb-widget-title {
+      padding: 0;
+      z-index: 1;
+    }
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts

@@ -52,6 +52,7 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  padding: string;
 
   qrCodeSVG = '';
 
@@ -101,6 +102,7 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
         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.padding = this.ctx.settings.background.overlay.enabled ? undefined : this.ctx.settings.padding;
         this.cd.markForCheck();
       }));
     } else {

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.html

@@ -49,15 +49,6 @@
           </mat-slide-toggle>
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
             <input matInput formControlName="qrCodeLabel" placeholder="{{'admin.mobile-app.set' | translate}}">
-            <mat-icon matSuffix
-                      matTooltipPosition="above"
-                      matTooltipClass="tb-error-tooltip"
-                      [matTooltip]="'admin.mobile-app.label-required' | translate"
-                      *ngIf="mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.qrCodeLabel').hasError('required')
-                            && mobileAppQRCodeWidgetSettingsForm.get('qrCodeConfig.qrCodeLabel').touched"
-                      class="tb-error">
-              warning
-            </mat-icon>
           </mat-form-field>
         </div>
       </div>
@@ -69,5 +60,11 @@
         </tb-background-settings>
       </div>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
 </section>

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/mobile-app-qr-code-widget-settings.component.ts

@@ -55,7 +55,8 @@ export class MobileAppQrCodeWidgetSettingsComponent extends WidgetSettingsCompon
         qrCodeLabelEnabled: [settings.qrCodeConfig.qrCodeLabelEnabled],
         qrCodeLabel: [settings.qrCodeConfig.qrCodeLabel]
       }),
-      background: [settings.background]
+      background: [settings.background],
+      padding: [settings.padding, []]
     });
   }