From 9b99df88a5dec2ac0e0146b02273e556dc04a26e Mon Sep 17 00:00:00 2001 From: Alexander Nozik Date: Sun, 13 Jun 2021 21:24:02 +0300 Subject: [PATCH] Style update --- .../mipt/npm/muon/monitor/MMAppComponent.kt | 4 +-- .../kscience/visionforge/solid/demo/demo.kt | 4 ++- .../visionforge/bootstrap/threeControls.kt | 4 +-- .../kscience/visionforge/react/MetaViewer.kt | 8 +++-- .../visionforge/react/PropertyEditor.kt | 9 +++-- .../kscience/visionforge/react/TreeStyles.kt | 2 +- .../react/{ObjectTree.kt => VisionTree.kt} | 15 ++++---- .../main/kotlin/ringui/datalist/Selection.kt | 27 +++++++++++++++ .../ringThreeControls.kt | 34 ++++++------------- 9 files changed, 66 insertions(+), 41 deletions(-) rename ui/react/src/main/kotlin/space/kscience/visionforge/react/{ObjectTree.kt => VisionTree.kt} (93%) create mode 100644 ui/ring/src/main/kotlin/ringui/datalist/Selection.kt diff --git a/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt b/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt index f8d2030c..75b610ac 100644 --- a/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt +++ b/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt @@ -20,7 +20,7 @@ import space.kscience.visionforge.bootstrap.gridRow import space.kscience.visionforge.bootstrap.visionPropertyEditor import space.kscience.visionforge.react.ThreeCanvasComponent import space.kscience.visionforge.react.flexColumn -import space.kscience.visionforge.react.objectTree +import space.kscience.visionforge.react.visionTree import space.kscience.visionforge.solid.specifications.Camera import space.kscience.visionforge.solid.specifications.Canvas3DOptions import styled.css @@ -70,7 +70,7 @@ val MMApp = functionalComponent("Muon monitor") { props -> css { flex(1.0, 1.0, FlexBasis.auto) } - objectTree(root, selected, onSelect) + visionTree(root, selected, onSelect) } } flexColumn { diff --git a/demo/solid-showcase/src/commonMain/kotlin/space/kscience/visionforge/solid/demo/demo.kt b/demo/solid-showcase/src/commonMain/kotlin/space/kscience/visionforge/solid/demo/demo.kt index f084127d..bfa90827 100644 --- a/demo/solid-showcase/src/commonMain/kotlin/space/kscience/visionforge/solid/demo/demo.kt +++ b/demo/solid-showcase/src/commonMain/kotlin/space/kscience/visionforge/solid/demo/demo.kt @@ -27,7 +27,9 @@ fun VisionLayout.demo(name: String, title: String = name, block: SolidGro } val canvasOptions = Canvas3DOptions { - minSize = 400 + size{ + minSize = 400 + } axes { size = 500.0 visible = true diff --git a/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt b/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt index dc384067..e8166f35 100644 --- a/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt +++ b/ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt @@ -8,7 +8,7 @@ import space.kscience.dataforge.names.Name import space.kscience.dataforge.names.isEmpty import space.kscience.visionforge.Vision import space.kscience.visionforge.VisionGroup -import space.kscience.visionforge.react.objectTree +import space.kscience.visionforge.react.visionTree import space.kscience.visionforge.solid.specifications.Canvas3DOptions import styled.css import styled.styledDiv @@ -39,7 +39,7 @@ public val ThreeControls: FunctionalComponent = functionalCo flex(1.0, 1.0, FlexBasis.inherit) } props.vision?.let { - objectTree(it, props.selected, props.onSelect) + visionTree(it, props.selected, props.onSelect) } } } diff --git a/ui/react/src/main/kotlin/space/kscience/visionforge/react/MetaViewer.kt b/ui/react/src/main/kotlin/space/kscience/visionforge/react/MetaViewer.kt index 4ce84033..2a786f20 100644 --- a/ui/react/src/main/kotlin/space/kscience/visionforge/react/MetaViewer.kt +++ b/ui/react/src/main/kotlin/space/kscience/visionforge/react/MetaViewer.kt @@ -16,7 +16,9 @@ import space.kscience.dataforge.names.Name import space.kscience.dataforge.names.NameToken import space.kscience.dataforge.names.lastOrNull import space.kscience.dataforge.names.plus -import styled.* +import styled.css +import styled.styledDiv +import styled.styledSpan public external interface MetaViewerProps : RProps { /** @@ -84,7 +86,7 @@ private fun RBuilder.metaViewerItem(props: MetaViewerProps) { } } if (expanded) { - styledUl { + flexColumn { css { +TreeStyles.tree } @@ -96,7 +98,7 @@ private fun RBuilder.metaViewerItem(props: MetaViewerProps) { } keys.filter { !it.body.startsWith("@") }.forEach { token -> - styledLi { + styledDiv { css { +TreeStyles.treeItem } diff --git a/ui/react/src/main/kotlin/space/kscience/visionforge/react/PropertyEditor.kt b/ui/react/src/main/kotlin/space/kscience/visionforge/react/PropertyEditor.kt index 7435f388..f48b258b 100644 --- a/ui/react/src/main/kotlin/space/kscience/visionforge/react/PropertyEditor.kt +++ b/ui/react/src/main/kotlin/space/kscience/visionforge/react/PropertyEditor.kt @@ -26,7 +26,10 @@ import space.kscience.dataforge.names.lastOrNull import space.kscience.dataforge.names.plus import space.kscience.dataforge.values.Value import space.kscience.visionforge.hidden -import styled.* +import styled.css +import styled.styledButton +import styled.styledDiv +import styled.styledSpan public external interface PropertyEditorProps : RProps { @@ -150,12 +153,12 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) { } } if (expanded) { - styledUl { + flexColumn { css { +TreeStyles.tree } keys.forEach { token -> - styledLi { + styledDiv { css { +TreeStyles.treeItem } diff --git a/ui/react/src/main/kotlin/space/kscience/visionforge/react/TreeStyles.kt b/ui/react/src/main/kotlin/space/kscience/visionforge/react/TreeStyles.kt index 654c31eb..59bee78f 100644 --- a/ui/react/src/main/kotlin/space/kscience/visionforge/react/TreeStyles.kt +++ b/ui/react/src/main/kotlin/space/kscience/visionforge/react/TreeStyles.kt @@ -9,7 +9,7 @@ public object TreeStyles : StyleSheet("treeStyles", true) { * Remove default bullets */ public val tree: RuleSet by css { - paddingLeft = 8.px + paddingLeft = 5.px marginLeft = 0.px listStyleType = ListStyleType.none } diff --git a/ui/react/src/main/kotlin/space/kscience/visionforge/react/ObjectTree.kt b/ui/react/src/main/kotlin/space/kscience/visionforge/react/VisionTree.kt similarity index 93% rename from ui/react/src/main/kotlin/space/kscience/visionforge/react/ObjectTree.kt rename to ui/react/src/main/kotlin/space/kscience/visionforge/react/VisionTree.kt index e7e7dd06..3e715342 100644 --- a/ui/react/src/main/kotlin/space/kscience/visionforge/react/ObjectTree.kt +++ b/ui/react/src/main/kotlin/space/kscience/visionforge/react/VisionTree.kt @@ -11,7 +11,10 @@ import space.kscience.dataforge.names.startsWith import space.kscience.visionforge.Vision import space.kscience.visionforge.VisionGroup import space.kscience.visionforge.isEmpty -import styled.* +import styled.css +import styled.styledButton +import styled.styledDiv +import styled.styledSpan public external interface ObjectTreeProps : RProps { public var name: Name @@ -20,7 +23,7 @@ public external interface ObjectTreeProps : RProps { public var clickCallback: (Name) -> Unit } -private fun RBuilder.objectTree(props: ObjectTreeProps): Unit { +private fun RBuilder.visionTree(props: ObjectTreeProps): Unit { var expanded: Boolean by useState { props.selected?.startsWith(props.name) ?: false } val onClick: (Event) -> Unit = { @@ -69,7 +72,7 @@ private fun RBuilder.objectTree(props: ObjectTreeProps): Unit { treeLabel(token) } if (expanded) { - styledUl { + flexColumn { css { +TreeStyles.tree } @@ -77,7 +80,7 @@ private fun RBuilder.objectTree(props: ObjectTreeProps): Unit { .filter { !it.key.toString().startsWith("@") } // ignore statics and other hidden children .sortedBy { (it.value as? VisionGroup)?.isEmpty ?: true } // ignore empty groups .forEach { (childToken, child) -> - styledLi { + styledDiv { css { +TreeStyles.treeItem } @@ -105,10 +108,10 @@ private fun RBuilder.objectTree(props: ObjectTreeProps): Unit { @JsExport public val ObjectTree: FunctionalComponent = functionalComponent("ObjectTree") { props -> - objectTree(props) + visionTree(props) } -public fun RBuilder.objectTree( +public fun RBuilder.visionTree( vision: Vision, selected: Name? = null, clickCallback: (Name) -> Unit = {} diff --git a/ui/ring/src/main/kotlin/ringui/datalist/Selection.kt b/ui/ring/src/main/kotlin/ringui/datalist/Selection.kt new file mode 100644 index 00000000..552d6e6f --- /dev/null +++ b/ui/ring/src/main/kotlin/ringui/datalist/Selection.kt @@ -0,0 +1,27 @@ +@file:JsModule("@jetbrains/ring-ui/components/data-list/selection") +package ringui.datalist + +public external interface SelectionProperties { + public var data: Array + public var selected: Set + public var focused: T? + public var getKey: (T) -> dynamic + public var getChildren: (T) -> Array + public var isItemSelectable: (T) -> Boolean +} + +@JsName("default") +public external class Selection(args: SelectionProperties = definedExternally) { + public fun select(item: T = definedExternally) + public fun deselect(item: T = definedExternally) + public fun toggleSelection(item: T = definedExternally) + public fun selectAll() + public fun resetFocus() + public fun resetSelection() + public fun reset() + public fun isFocused(value: T): Boolean + public fun isSelected(value: T): Boolean + public fun getFocused(): T + public fun getSelected(): Set + public fun getActive(): Set +} \ No newline at end of file diff --git a/ui/ring/src/main/kotlin/space.kscience.visionforge.ring/ringThreeControls.kt b/ui/ring/src/main/kotlin/space.kscience.visionforge.ring/ringThreeControls.kt index 38ed513d..6d93088b 100644 --- a/ui/ring/src/main/kotlin/space.kscience.visionforge.ring/ringThreeControls.kt +++ b/ui/ring/src/main/kotlin/space.kscience.visionforge.ring/ringThreeControls.kt @@ -1,7 +1,10 @@ package space.kscience.visionforge.ring -import kotlinx.css.* +import kotlinx.css.BorderStyle +import kotlinx.css.Color +import kotlinx.css.padding import kotlinx.css.properties.border +import kotlinx.css.px import kotlinx.html.js.onClickFunction import org.w3c.dom.events.Event import org.w3c.files.Blob @@ -9,7 +12,6 @@ import org.w3c.files.BlobPropertyBag import react.* import react.dom.attrs import react.dom.button -import react.dom.h2 import ringui.island.ringIsland import ringui.tabs.ringSmartTabs import ringui.tabs.ringTab @@ -21,11 +23,10 @@ import space.kscience.visionforge.VisionGroup import space.kscience.visionforge.encodeToString import space.kscience.visionforge.react.flexColumn import space.kscience.visionforge.react.flexRow -import space.kscience.visionforge.react.objectTree import space.kscience.visionforge.react.propertyEditor +import space.kscience.visionforge.react.visionTree import space.kscience.visionforge.solid.specifications.Canvas3DOptions import styled.css -import styled.styledDiv internal fun saveData(event: Event, fileName: String, mimeType: String = "text/plain", dataBuilder: () -> String) { event.stopPropagation(); @@ -87,7 +88,7 @@ public external interface ThreeControlsProps : RProps { public var canvasOptions: Canvas3DOptions public var vision: Vision? public var selected: Name? - public var onSelect: (Name) -> Unit + public var onSelect: (Name?) -> Unit } @JsExport @@ -98,23 +99,10 @@ public val ThreeControls: FunctionalComponent = functionalCo canvasControls(props.canvasOptions, props.vision) } } - ringTab("Tree") { - flexColumn { - css { - border(1.px, BorderStyle.solid, Color.lightGray) - padding(10.px) - flexGrow = 1.0 - flexWrap = FlexWrap.wrap - } - h2 { +"Object tree" } - styledDiv { - css { - overflowY = Overflow.auto - flexGrow = 1.0 - } - props.vision?.let { - objectTree(it, props.selected, props.onSelect) - } + props.vision?.let { + ringTab("Tree") { + ringIsland("Vision tree") { + visionTree(it, props.selected, props.onSelect) } } } @@ -140,7 +128,7 @@ public fun RBuilder.ringThreeControls( canvasOptions: Canvas3DOptions, vision: Vision?, selected: Name?, - onSelect: (Name) -> Unit = {}, + onSelect: (Name?) -> Unit = {}, builder: RBuilder.() -> Unit = {}, ): ReactElement = child(ThreeControls) { attrs {