Design update
This commit is contained in:
parent
28ca287ccd
commit
38db0e30ed
@ -7,6 +7,7 @@ import hep.dataforge.names.NameToken
|
|||||||
import hep.dataforge.names.plus
|
import hep.dataforge.names.plus
|
||||||
import hep.dataforge.values.*
|
import hep.dataforge.values.*
|
||||||
import hep.dataforge.vis.widgetType
|
import hep.dataforge.vis.widgetType
|
||||||
|
import kotlinx.html.ButtonType
|
||||||
import kotlinx.html.InputType
|
import kotlinx.html.InputType
|
||||||
import kotlinx.html.classes
|
import kotlinx.html.classes
|
||||||
import kotlinx.html.js.onChangeFunction
|
import kotlinx.html.js.onChangeFunction
|
||||||
@ -94,10 +95,12 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
|
|||||||
private fun RBuilder.valueChooser(value: Value, descriptor: ValueDescriptor?) {
|
private fun RBuilder.valueChooser(value: Value, descriptor: ValueDescriptor?) {
|
||||||
val type = descriptor?.type?.firstOrNull()
|
val type = descriptor?.type?.firstOrNull()
|
||||||
when {
|
when {
|
||||||
type == ValueType.BOOLEAN -> input(type = InputType.checkBox, classes = "float-right") {
|
type == ValueType.BOOLEAN -> {
|
||||||
attrs {
|
input(type = InputType.checkBox, classes = "float-right") {
|
||||||
defaultChecked = value.boolean
|
attrs {
|
||||||
onChangeFunction = onValueChange
|
defaultChecked = value.boolean
|
||||||
|
onChangeFunction = onValueChange
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
type == ValueType.NUMBER -> input(type = InputType.number, classes = "float-right") {
|
type == ValueType.NUMBER -> input(type = InputType.number, classes = "float-right") {
|
||||||
@ -152,7 +155,7 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
|
|||||||
|
|
||||||
when (actualItem) {
|
when (actualItem) {
|
||||||
is MetaItem.NodeItem -> {
|
is MetaItem.NodeItem -> {
|
||||||
div("d-block text-truncate") {
|
div {
|
||||||
span("tree-caret") {
|
span("tree-caret") {
|
||||||
attrs {
|
attrs {
|
||||||
if (state.expanded) {
|
if (state.expanded) {
|
||||||
@ -184,8 +187,8 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
|
|||||||
li("tree-item") {
|
li("tree-item") {
|
||||||
child(ConfigEditorComponent::class) {
|
child(ConfigEditorComponent::class) {
|
||||||
attrs {
|
attrs {
|
||||||
root = props.root
|
this.root = props.root
|
||||||
name = props.name + token
|
this.name = props.name + token
|
||||||
this.default = props.default
|
this.default = props.default
|
||||||
this.descriptor = props.descriptor
|
this.descriptor = props.descriptor
|
||||||
}
|
}
|
||||||
@ -196,7 +199,7 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
is MetaItem.ValueItem -> {
|
is MetaItem.ValueItem -> {
|
||||||
div("d-block text-truncate") {
|
div {
|
||||||
div("row") {
|
div("row") {
|
||||||
div("col") {
|
div("col") {
|
||||||
p("tree-label") {
|
p("tree-label") {
|
||||||
@ -208,23 +211,37 @@ class ConfigEditorComponent : RComponent<ConfigEditorProps, TreeState>() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (item != null) {
|
|
||||||
div("col-auto") {
|
|
||||||
button(classes = "btn btn-default") {
|
|
||||||
span("glyphicon glyphicon-remove") {
|
|
||||||
attrs {
|
|
||||||
attributes["aria-hidden"] = "true"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
attrs {
|
|
||||||
onClickFunction = removeValue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div("col") {
|
div("col") {
|
||||||
valueChooser(actualItem.value, descriptorItem as? ValueDescriptor)
|
valueChooser(actualItem.value, descriptorItem as? ValueDescriptor)
|
||||||
}
|
}
|
||||||
|
div("col-auto") {
|
||||||
|
div("dropleft p-0") {
|
||||||
|
button(classes = "btn btn-outline-primary") {
|
||||||
|
attrs {
|
||||||
|
type = ButtonType.button
|
||||||
|
attributes["data-toggle"] = "dropdown"
|
||||||
|
attributes["aria-haspopup"] = "true"
|
||||||
|
attributes["aria-expanded"] = "false"
|
||||||
|
attributes["data-boundary"] = "viewport"
|
||||||
|
}
|
||||||
|
+"\u22ee"
|
||||||
|
}
|
||||||
|
div(classes = "dropdown-menu") {
|
||||||
|
button(classes = "btn btn-outline dropdown-item") {
|
||||||
|
+"Info"
|
||||||
|
}
|
||||||
|
if (item != null) {
|
||||||
|
button(classes = "btn btn-outline dropdown-item") {
|
||||||
|
+"""Clear"""
|
||||||
|
}
|
||||||
|
attrs {
|
||||||
|
onClickFunction = removeValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -50,7 +50,7 @@ private fun RBuilder.objectTree(props: ObjectTreeProps): Unit {
|
|||||||
|
|
||||||
//display as node if any child is visible
|
//display as node if any child is visible
|
||||||
if (obj is VisualGroup) {
|
if (obj is VisualGroup) {
|
||||||
div("d-inline-block text-truncate") {
|
div("d-block text-truncate") {
|
||||||
if (obj.children.any { !it.key.body.startsWith("@") }) {
|
if (obj.children.any { !it.key.body.startsWith("@") }) {
|
||||||
span("tree-caret") {
|
span("tree-caret") {
|
||||||
attrs {
|
attrs {
|
||||||
@ -72,10 +72,10 @@ private fun RBuilder.objectTree(props: ObjectTreeProps): Unit {
|
|||||||
li("tree-item") {
|
li("tree-item") {
|
||||||
child(ObjectTree) {
|
child(ObjectTree) {
|
||||||
attrs {
|
attrs {
|
||||||
name = props.name + childToken
|
this.name = props.name + childToken
|
||||||
this.obj = child
|
this.obj = child
|
||||||
this.selected = props.selected
|
this.selected = props.selected
|
||||||
clickCallback = props.clickCallback
|
this.clickCallback = props.clickCallback
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -83,7 +83,7 @@ private fun RBuilder.objectTree(props: ObjectTreeProps): Unit {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
div("d-inline-block text-truncate") {
|
div("d-block text-truncate") {
|
||||||
span("tree-leaf") {}
|
span("tree-leaf") {}
|
||||||
treeLabel(token)
|
treeLabel(token)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user