diff --git a/ui/src/app/components/form-object/form-object.component.html b/ui/src/app/components/form-object/form-object.component.html
index c0b15145b..f4614c779 100644
--- a/ui/src/app/components/form-object/form-object.component.html
+++ b/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'
}"
>
@@ -93,8 +93,7 @@
'max-height': objectDisplay[entry.key].height,
'overflow': 'hidden',
'transition-property': 'max-height',
- 'transition-duration': '.5s',
- 'transition-delay': '.05s'
+ 'transition-duration': '.25s'
}"
>
@@ -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)"
>
diff --git a/ui/src/app/components/form-object/form-object.component.scss b/ui/src/app/components/form-object/form-object.component.scss
index a61403383..ab54c0ce9 100644
--- a/ui/src/app/components/form-object/form-object.component.scss
+++ b/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 {
diff --git a/ui/src/app/components/form-object/form-object.component.ts b/ui/src/app/components/form-object/form-object.component.ts
index 6614ab5f7..8ddcdc757 100644
--- a/ui/src/app/components/form-object/form-object.component.ts
+++ b/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()
- @Output() onUnionChange = new EventEmitter()
+ @Output() onExpand = new EventEmitter()
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`
}
diff --git a/ui/src/app/services/api/api.fixures.ts b/ui/src/app/services/api/api.fixures.ts
index 09efc414c..83769b82b 100644
--- a/ui/src/app/services/api/api.fixures.ts
+++ b/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',