From 38db0e30ed703b435f57a3e86b769ace071975c7 Mon Sep 17 00:00:00 2001 From: Alexander Nozik Date: Sat, 18 Apr 2020 21:57:15 +0300 Subject: [PATCH] Design update --- .../vis/editor/ConfigEditorComponent.kt | 61 ++++++++++++------- .../hep/dataforge/vis/editor/ObjectTree.kt | 8 +-- 2 files changed, 43 insertions(+), 26 deletions(-) diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ConfigEditorComponent.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ConfigEditorComponent.kt index 76afddda..e283c92b 100644 --- a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ConfigEditorComponent.kt +++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ConfigEditorComponent.kt @@ -7,6 +7,7 @@ import hep.dataforge.names.NameToken import hep.dataforge.names.plus import hep.dataforge.values.* import hep.dataforge.vis.widgetType +import kotlinx.html.ButtonType import kotlinx.html.InputType import kotlinx.html.classes import kotlinx.html.js.onChangeFunction @@ -94,10 +95,12 @@ class ConfigEditorComponent : RComponent() { private fun RBuilder.valueChooser(value: Value, descriptor: ValueDescriptor?) { val type = descriptor?.type?.firstOrNull() when { - type == ValueType.BOOLEAN -> input(type = InputType.checkBox, classes = "float-right") { - attrs { - defaultChecked = value.boolean - onChangeFunction = onValueChange + type == ValueType.BOOLEAN -> { + input(type = InputType.checkBox, classes = "float-right") { + attrs { + defaultChecked = value.boolean + onChangeFunction = onValueChange + } } } type == ValueType.NUMBER -> input(type = InputType.number, classes = "float-right") { @@ -152,7 +155,7 @@ class ConfigEditorComponent : RComponent() { when (actualItem) { is MetaItem.NodeItem -> { - div("d-block text-truncate") { + div { span("tree-caret") { attrs { if (state.expanded) { @@ -184,8 +187,8 @@ class ConfigEditorComponent : RComponent() { li("tree-item") { child(ConfigEditorComponent::class) { attrs { - root = props.root - name = props.name + token + this.root = props.root + this.name = props.name + token this.default = props.default this.descriptor = props.descriptor } @@ -196,7 +199,7 @@ class ConfigEditorComponent : RComponent() { } } is MetaItem.ValueItem -> { - div("d-block text-truncate") { + div { div("row") { div("col") { p("tree-label") { @@ -208,23 +211,37 @@ class ConfigEditorComponent : RComponent() { } } } - 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") { 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 + } + } + + } + } + } } } } diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ObjectTree.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ObjectTree.kt index 6582957f..64624f3c 100644 --- a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ObjectTree.kt +++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ObjectTree.kt @@ -50,7 +50,7 @@ private fun RBuilder.objectTree(props: ObjectTreeProps): Unit { //display as node if any child is visible if (obj is VisualGroup) { - div("d-inline-block text-truncate") { + div("d-block text-truncate") { if (obj.children.any { !it.key.body.startsWith("@") }) { span("tree-caret") { attrs { @@ -72,10 +72,10 @@ private fun RBuilder.objectTree(props: ObjectTreeProps): Unit { li("tree-item") { child(ObjectTree) { attrs { - name = props.name + childToken + this.name = props.name + childToken this.obj = child this.selected = props.selected - clickCallback = props.clickCallback + this.clickCallback = props.clickCallback } } } @@ -83,7 +83,7 @@ private fun RBuilder.objectTree(props: ObjectTreeProps): Unit { } } } else { - div("d-inline-block text-truncate") { + div("d-block text-truncate") { span("tree-leaf") {} treeLabel(token) }