Merge pull request #2162 from hashgraph/fix/2147

#2147 Mobile UI
hashgraph · May 24, 2023 · 2e648c6 · 2e648c6
2 parents 7440252 + 704c44b
commit 2e648c6
Show file tree

Hide file tree

Showing 9 changed files with 219 additions and 178 deletions.
diff --git a/...y-engine/policy-viewer/blocks/request-document-block/request-document-block.component.css b/...y-engine/policy-viewer/blocks/request-document-block/request-document-block.component.css
@@ -56,7 +56,7 @@
 
 .form-dialog {
     padding: 10px 40px 20px 40px;
-    max-height: 65vh;
+    max-height: 70vh;
     overflow: auto;
     box-sizing: border-box;
 }
@@ -89,7 +89,7 @@
     padding: 0 40px;
 }
 
-.form-page  .page-btns {
+.form-page .page-btns {
     padding: 0px 40px 40px 40px;
 }
 
@@ -134,7 +134,30 @@
     margin-left: 3px;
 }
 
+.registrant-application-create-btn {
+    display: none;
+}
+
 @media (max-width: 810px) {
+    .loading {
+        top: 75px;
+        z-index: 999;
+    }
+
+    .loading-dialog {
+        position: fixed;
+        top: 75px;
+        z-index: 999;
+        bottom: 0;
+    }
+
+    .page-btns {
+        display: none !important;
+    }
+
+    .dialog-actions-container {
+        display: none !important;
+    }
 
     h1 {
         height: 40px;
@@ -161,10 +184,10 @@
     .form-dialog {
         width: 90%;
         margin: 0 auto;
-        padding: 0;
+        padding: 0px 0px 0px 0px;
         border: none;
-        max-height: 55vh;
-        max-width: 90vh;
+        max-height: none;
+        max-width: 90vw;
     }
 
     .schema-form {
@@ -186,6 +209,7 @@
     }
 
     .registrant-application-create-btn {
+        display: block !important;
         position: fixed;
         width: calc(45% - 5px);
         right: 5%;

diff --git a/...-engine/policy-viewer/blocks/request-document-block/request-document-block.component.html b/...-engine/policy-viewer/blocks/request-document-block/request-document-block.component.html
@@ -14,12 +14,12 @@ <h1 *ngIf="title" mat-dialog-title>{{title}}</h1>
             </div>
             <div class="schema-form">
                 <app-schema-form [formGroup]="dataForm" [schema]="schema" [private-fields]="hideFields"
-                    [preset]="presetDocument" [readonly-fields]="presetReadonlyFields" [disableSubmitBtn]="true">
+                    [preset]="presetDocument" [readonly-fields]="presetReadonlyFields" submitText="Create"
+                    (cancelBtnEvent)="onCancelPage($event)" (submitBtnEvent)="onSubmit()">
                 </app-schema-form>
             </div>
-            <button *ngIf="innerWidth <= 810" class="registrant-application-create-btn" mat-raised-button color="primary" type="submit" [disabled]="!dataForm.valid">Create</button>
-            <div *ngIf="innerWidth > 810" class="page-btns">
-                <button mat-raised-button color="primary" type="submit" [disabled]="!dataForm.valid">Ok</button>
+            <div class="page-btns">
+                <button mat-raised-button color="primary" type="submit" [disabled]="!dataForm.valid">Create</button>
             </div>
         </form>
     </ng-container>
@@ -47,15 +47,17 @@ <h1 mat-dialog-title class="title">{{data.dialogContent}}</h1>
             </div>
             <form [formGroup]="dataForm" (ngSubmit)="data.onSubmit()">
                 <div class="form-{{data.type}}">
-                    <app-schema-form [formGroup]="data.dataForm" [schema]="data.schema" [readonly-fields]="presetReadonlyFields"
-                        [private-fields]="data.hideFields" [preset]="presetDocument" [comesFromDialog]="true"
-                        (cancelBtnEvent)="handleCancelBtnEvent($event, data)" (submitBtnEvent)="handleSubmitBtnEvent($event, data)">
+                    <app-schema-form [formGroup]="data.dataForm" [schema]="data.schema"
+                        [readonly-fields]="presetReadonlyFields" [private-fields]="data.hideFields"
+                        [preset]="presetDocument" [comesFromDialog]="true"
+                        (cancelBtnEvent)="handleCancelBtnEvent($event, data)"
+                        (submitBtnEvent)="handleSubmitBtnEvent($event, data)">
                     </app-schema-form>
                 </div>
-                <div *ngIf="innerWidth > 810" class="dialog-actions-container" style="z-index: 400">
+                <div class="dialog-actions-container" style="z-index: 400">
                     <div mat-dialog-actions>
                         <button mat-raised-button id="ok-btn" color="primary" type="submit"
-                            [disabled]="!data.dataForm.valid || loading || dialogLoading">Ok</button>
+                            [disabled]="!data.dataForm.valid || loading || dialogLoading">Create</button>
                         <button mat-button type="button" id="cancel-btn" (click)="data.onCancel()">Cancel</button>
                     </div>
                 </div>

diff --git a/...cy-engine/policy-viewer/blocks/request-document-block/request-document-block.component.ts b/...cy-engine/policy-viewer/blocks/request-document-block/request-document-block.component.ts
@@ -7,6 +7,7 @@ import { PolicyHelper } from 'src/app/services/policy-helper.service';
 import { ProfileService } from 'src/app/services/profile.service';
 import { global } from '@angular/compiler/src/util';
 import { WebSocketService } from 'src/app/services/web-socket.service';
+import { Router } from '@angular/router';
 
 /**
  * Component for display block of 'requestVcDocument' types.
@@ -47,24 +48,20 @@ export class RequestDocumentBlockComponent implements OnInit {
     user!: IUser;
     restoreData: any;
 
-    public innerWidth: any;
-    public innerHeight: any;
-
     constructor(
         private policyEngineService: PolicyEngineService,
         private wsService: WebSocketService,
         private profile: ProfileService,
         private policyHelper: PolicyHelper,
         private fb: FormBuilder,
         private dialog: MatDialog,
+        private router: Router,
         private changeDetectorRef: ChangeDetectorRef
     ) {
         this.dataForm = fb.group({});
     }
 
     ngOnInit(): void {
-        this.innerWidth = window.innerWidth;
-        this.innerHeight = window.innerHeight;
         if (!this.static) {
             this.socket = this.wsService.blockSubscribe(this.onUpdate.bind(this));
         }
@@ -264,13 +261,13 @@ export class RequestDocumentBlockComponent implements OnInit {
             this.presetDocument = null;
         }
 
-        if (this.innerWidth <= 810) {
+        if (window.innerWidth <= 810) {
             const bodyStyles = window.getComputedStyle(document.body);
             const headerHeight: number = parseInt(bodyStyles.getPropertyValue('--header-height'));
             this.dialogRef = this.dialog.open(this.dialogTemplate, {
                 width: `100vw`,
                 maxWidth: '100vw',
-                height: `${this.innerHeight - headerHeight}px`,
+                height: `${window.innerHeight - headerHeight}px`,
                 position: {
                     'bottom': '0'
                 },
@@ -308,4 +305,8 @@ export class RequestDocumentBlockComponent implements OnInit {
             data.onSubmit();
         }
     }
+
+    onCancelPage(value: boolean) {
+        this.router.navigate(['/policy-viewer']);
+    }
 }
diff --git a/...end/src/app/modules/policy-engine/policy-viewer/policy-viewer/policy-viewer.component.css b/...end/src/app/modules/policy-engine/policy-viewer/policy-viewer/policy-viewer.component.css
@@ -440,6 +440,10 @@ a.go-back-link mat-icon {
         border: none;
     }
 
+    .policy-header[policy-status='DRY-RUN'] {
+        top: 45px;
+    }
+
     .dry-run-content {
         top: var(--header-height);
     }

diff --git a/frontend/src/app/modules/schema-engine/schema-form/schema-form.component.css b/frontend/src/app/modules/schema-engine/schema-form/schema-form.component.css
@@ -237,7 +237,7 @@ form {
     top: 0;
 }
 
-.loading-enum-values{
+.loading-enum-values {
     margin: 0 auto;
 }
 
@@ -247,8 +247,24 @@ form {
     word-break: break-all;
 }
 
+.page-number {
+    display: none;
+}
+
+.next-page-number {
+    display: none;
+}
+
+.delimiter-to-next-page {
+    display: none;
+}
+
+.page-btns {
+    display: none;
+}
+
 @media (max-width: 810px) {
-    
+
     .invalid-field-label {
         position: relative;
         left: 30px;
@@ -271,21 +287,12 @@ form {
         display: none;
     }
 
-    .form-field-array-item > .form-field-group {
-        padding-left: 0;
-        margin-bottom: 0;
-    }
-
-    .form-dialog .form-field-group {
-        margin-bottom: 0;
-    }
-
     .label-field .page-number {
+        display: block;
         font-size: 18px;
         padding: 4px 10px;
         margin-right: 8px;
         display: inline-block;
-
         background: #2C78F6;
         color: white;
         border-radius: 100px;
@@ -299,45 +306,44 @@ form {
     }
 
     .label-field .delimiter-to-next-page {
+        display: block;
         height: 0px;
-
         border: 1px solid #BABABA;
         flex-grow: 1;
         display: inline-block;
         margin: 0 8px;
     }
 
     .label-field .next-page-number {
+        display: block;
         font-size: 18px;
         padding: 4px 10px;
         display: inline-block;
-
         background: #2C78F6;
         opacity: 0.3;
         color: white;
         border-radius: 100px;
     }
 
-    .form-field-group {
-        margin-bottom: 100px;
-    }
-
     .page-btns {
-        width: 90%;
+        display: block;
+        width: calc(100% - 36px);
         display: grid;
         grid-template-columns: 1fr 1fr;
         column-gap: 10px;
         margin-top: 20px;
-        
+
         background-color: white;
         padding: 20px 0;
         position: fixed;
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
+        z-index: 200;
     }
 
-    #cancel-btn, #previous-btn {
+    #cancel-btn,
+    #previous-btn {
         border: 1px solid #2C78F6;
         background: none !important;
         color: #2C78F6;
@@ -357,4 +363,35 @@ form {
     .page-btns-last-page #previous-btn {
         width: calc(100% - 5px);
     }
+
+    *[showMobileField="true"] {
+        display: flex !important;
+    }
+
+    *[showMobileField="false"] {
+        display: none !important;
+    }
+
+    .form-field-group {
+        padding-left: 0 !important;
+    }
+
+    .schema-form-field-array-group>.form-field-array-item,
+    .form-field-array-item>.schema-form-field-group {
+        padding-left: 10px !important;
+    }
+
+    form[childSchema="false"][showButtons="true"] {
+        padding-bottom: 100px;
+    }
+
+    .short-delimiter-container .delimiter {
+        display: block;
+        padding: 20px 10px 20px 10px;
+        height: 45px;
+    }
+
+    .short-delimiter-container .delimiter::after {
+        top: 20px;
+    }
 }