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',