fix amination for config nested objects

ui/src/app/components/form-object/form-object.component.html

@@ -82,7 +82,7 @@
           name="chevron-up"
           [ngStyle]="{
             'transform': objectDisplay[entry.key].expanded ? 'rotate(0deg)' : 'rotate(180deg)',
-            'transition': 'transform 0.4s ease-out'
+            'transition': 'transform 0.25s ease-out'
           }"
           ></ion-icon>
         </ion-item-divider>
@@ -93,8 +93,7 @@
             'max-height': objectDisplay[entry.key].height,
             'overflow': 'hidden',
             'transition-property': 'max-height',
-            'transition-duration': '.5s',
+            'transition-duration': '.25s'
-            'transition-delay': '.05s'
           }"
           >
           <div class="nested-wrapper">
@@ -106,7 +105,7 @@
               [formGroup]="$any(entry.value)"
               [current]="current ? current[entry.key] : undefined"
               [unionSpec]="spec.type === 'union' ? spec : undefined"
-              (onUnionChange)="resizeUnion(entry.key)"
+              (onExpand)="resize(entry.key)"
             ></form-object>
           </div>
         </div>

ui/src/app/components/form-object/form-object.component.scss

@@ -16,7 +16,6 @@ ion-item-divider {
 
 .nested-wrapper {
   padding: 0 0 30px 30px;
-  // border-bottom: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))))
 }
 
 .validation-error {

ui/src/app/components/form-object/form-object.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, SimpleChange, EventEmitter } from '@angular/core'
+import { Component, Input, Output, EventEmitter } from '@angular/core'
 import { AbstractFormGroupDirective, FormArray, FormGroup } from '@angular/forms'
 import { AlertButton, AlertController, IonicSafeString, ModalController } from '@ionic/angular'
 import { ConfigSpec, ListValueSpecOf, ValueSpec, ValueSpecBoolean, ValueSpecList, ValueSpecListOf, ValueSpecUnion } from 'src/app/pkg-config/config-types'
@@ -20,7 +20,7 @@ export class FormObjectComponent {
   @Input() current: { [key: string]: any }
   @Input() showEdited: boolean = false
   @Output() onInputChange = new EventEmitter<void>()
-  @Output() onUnionChange = new EventEmitter<void>()
+  @Output() onExpand = new EventEmitter<void>()
   warningAck: { [key: string]: boolean } = { }
   unmasked: { [key: string]: boolean } = { }
   objectDisplay: { [key: string]: { expanded: boolean, height: string } } = { }
@@ -74,13 +74,14 @@ export class FormObjectComponent {
       this.formGroup.addControl(control, unionGroup.controls[control])
     })
 
-    this.onUnionChange.emit()
+    this.onExpand.emit()
   }
 
-  resizeUnion (key: string): void {
+  resize (key: string): void {
     setTimeout(() => {
       this.objectDisplay[key].height = this.getDocSize(key)
-    }, 100)
+      this.onExpand.emit()
+    }, 250) // 250 to match transition-duration, defined in html
   }
 
   addListItemWrapper (key: string, spec: ValueSpec) {
@@ -114,6 +115,7 @@ export class FormObjectComponent {
   toggleExpandObject (key: string) {
     this.objectDisplay[key].expanded = !this.objectDisplay[key].expanded
     this.objectDisplay[key].height = this.objectDisplay[key].expanded ? this.getDocSize(key) : '0px'
+    this.onExpand.emit()
   }
 
   toggleExpandListObject (key: string, i: number) {
@@ -233,7 +235,7 @@ export class FormObjectComponent {
     added.forEach(val => this.addListItem(key, false, val))
   }
 
-   getDocSize (selected: string) {
+   private getDocSize (selected: string) {
     const element = document.getElementById(selected)
     return `${element.scrollHeight}px`
   }

ui/src/app/services/api/api.fixures.ts

@@ -1368,6 +1368,47 @@ export module Mock {
       'unique-by': null,
       'description': 'Advanced settings',
       'spec': {
+        'bitcoin-node': {
+          'name': 'Bitcoin Node Settings',
+          'type': 'union',
+          'unique-by': null,
+          'description': 'The node settings',
+          'default': 'internal',
+          'warning': 'Careful changing this',
+          'tag': {
+            'id': 'type',
+            'name': 'Type',
+            'variant-names': {
+              'internal': 'Internal',
+              'external': 'External',
+            },
+          },
+          'variants': {
+            'internal': {
+              'lan-address': {
+                'name': 'LAN Address',
+                'type': 'pointer',
+                'subtype': 'app',
+                'target': 'lan-address',
+                'app-id': 'bitcoind',
+                'description': 'the lan address',
+              },
+            },
+            'external': {
+              'public-domain': {
+                'name': 'Public Domain',
+                'type': 'string',
+                'description': 'the public address of the node',
+                'nullable': false,
+                'default': 'bitcoinnode.com',
+                'pattern': '.*',
+                'pattern-description': 'anything',
+                'masked': false,
+                'copyable': true,
+              },
+            },
+          },
+        },
         'notifications': {
           'name': 'Notification Preferences',
           'type': 'list',
@@ -1396,47 +1437,6 @@ export module Mock {
         },
       },
     },
-    'bitcoin-node': {
-      'name': 'Bitcoin Node Settings',
-      'type': 'union',
-      'unique-by': null,
-      'description': 'The node settings',
-      'default': 'internal',
-      'warning': 'Careful changing this',
-      'tag': {
-        'id': 'type',
-        'name': 'Type',
-        'variant-names': {
-          'internal': 'Internal',
-          'external': 'External',
-        },
-      },
-      'variants': {
-        'internal': {
-          'lan-address': {
-            'name': 'LAN Address',
-            'type': 'pointer',
-            'subtype': 'app',
-            'target': 'lan-address',
-            'app-id': 'bitcoind',
-            'description': 'the lan address',
-          },
-        },
-        'external': {
-          'public-domain': {
-            'name': 'Public Domain',
-            'type': 'string',
-            'description': 'the public address of the node',
-            'nullable': false,
-            'default': 'bitcoinnode.com',
-            'pattern': '.*',
-            'pattern-description': 'anything',
-            'masked': false,
-            'copyable': true,
-          },
-        },
-      },
-    },
     'port': {
       'name': 'Port',
       'type': 'number',