From d2553d5b40aaf5404a5a4eec608bfd754fa425d9 Mon Sep 17 00:00:00 2001 From: Alexander Nozik Date: Thu, 19 Nov 2020 20:49:42 +0300 Subject: [PATCH] Fix muon monitor design --- .../mipt/npm/muon/monitor/MMAppComponent.kt | 101 +++++++++++------- .../ru/mipt/npm/muon/monitor/MMDemoApp.kt | 13 +-- .../src/jsMain/resources/index.html | 2 +- .../vision/react/ThreeCanvasComponent.kt | 2 - 4 files changed, 66 insertions(+), 52 deletions(-) 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 52c23c69..a36379bf 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 @@ -19,8 +19,7 @@ import io.ktor.client.HttpClient import io.ktor.client.request.get import kotlinx.coroutines.GlobalScope import kotlinx.coroutines.launch -import kotlinx.css.height -import kotlinx.css.pct +import kotlinx.css.* import kotlinx.html.js.onClickFunction import react.RProps import react.child @@ -57,30 +56,36 @@ val MMApp = functionalComponent("Muon monitor") { props -> val root = props.model.root - div("row") { - h1("mx-auto") { - +"Muon monitor demo" - } - } div("row") { styledDiv { css { +"col-lg-3" - +"px-0" - +"overflow-auto" - +"h-100" + padding(0.px) + overflowY = Overflow.auto + display = Display.flex + flexDirection = FlexDirection.column + height = 100.vh } //tree card("Object tree") { + css { + flex(1.0, 1.0, FlexBasis.auto) + } objectTree(root, selected, onSelect) } } styledDiv { css { +"col-lg-6" - height = 100.pct + display = Display.flex + flexDirection = FlexDirection.column + height = 100.vh + } + h1("mx-auto") { + +"Muon monitor demo" } //canvas + child(ThreeCanvasComponent) { attrs { this.context = props.context @@ -95,8 +100,18 @@ val MMApp = functionalComponent("Muon monitor") { props -> } } } - div("col-lg-3") { - div("row") { + styledDiv { + css { + +"col-lg-3" + padding(0.px) + display = Display.flex + flexDirection = FlexDirection.column + height = 100.vh + } + styledDiv { + css{ + flex(0.0,1.0, FlexBasis.zero) + } //settings canvas?.let { card("Canvas configuration") { @@ -125,36 +140,37 @@ val MMApp = functionalComponent("Muon monitor") { props -> } } } - div("row") { - div("container-fluid p-0") { - nav { - attrs { - attributes["aria-label"] = "breadcrumb" - } - ol("breadcrumb") { - li("breadcrumb-item") { - button(classes = "btn btn-link p-0") { - +"World" - attrs { - onClickFunction = { - selected = hep.dataforge.names.Name.EMPTY - } + styledDiv{ + css{ + padding(0.px) + } + nav { + attrs { + attributes["aria-label"] = "breadcrumb" + } + ol("breadcrumb") { + li("breadcrumb-item") { + button(classes = "btn btn-link p-0") { + +"World" + attrs { + onClickFunction = { + selected = hep.dataforge.names.Name.EMPTY } } } - if (selected != null) { - val tokens = ArrayList(selected?.length ?: 1) - selected?.tokens?.forEach { token -> - tokens.add(token) - val fullName = Name(tokens.toList()) - li("breadcrumb-item") { - button(classes = "btn btn-link p-0") { - +token.toString() - attrs { - onClickFunction = { - console.log("Selected = $fullName") - selected = fullName - } + } + if (selected != null) { + val tokens = ArrayList(selected?.length ?: 1) + selected?.tokens?.forEach { token -> + tokens.add(token) + val fullName = Name(tokens.toList()) + li("breadcrumb-item") { + button(classes = "btn btn-link p-0") { + +token.toString() + attrs { + onClickFunction = { + console.log("Selected = $fullName") + selected = fullName } } } @@ -164,7 +180,10 @@ val MMApp = functionalComponent("Muon monitor") { props -> } } } - div("row") { + styledDiv{ + css{ + overflowY = Overflow.auto + } //properties card("Properties") { selected.let { selected -> diff --git a/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt b/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt index 2fabd0d8..1d3ea8cd 100644 --- a/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt +++ b/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt @@ -8,7 +8,6 @@ import io.ktor.client.features.json.JsonFeature import io.ktor.client.features.json.serializer.KotlinxSerializer import kotlinx.browser.document import react.child -import react.dom.div import react.dom.render private class MMDemoApp : Application { @@ -27,13 +26,11 @@ private class MMDemoApp : Application { val element = document.getElementById("app") ?: error("Element with id 'app' not found on page") render(element) { - div("container-fluid h-100") { - child(MMApp) { - attrs { - this.model = this@MMDemoApp.model - this.connection = this@MMDemoApp.connection - this.context = context - } + child(MMApp) { + attrs { + this.model = this@MMDemoApp.model + this.connection = this@MMDemoApp.connection + this.context = context } } } diff --git a/demo/muon-monitor/src/jsMain/resources/index.html b/demo/muon-monitor/src/jsMain/resources/index.html index 9044e628..f7d59058 100644 --- a/demo/muon-monitor/src/jsMain/resources/index.html +++ b/demo/muon-monitor/src/jsMain/resources/index.html @@ -11,6 +11,6 @@ -
+
\ No newline at end of file diff --git a/ui/react/src/main/kotlin/hep/dataforge/vision/react/ThreeCanvasComponent.kt b/ui/react/src/main/kotlin/hep/dataforge/vision/react/ThreeCanvasComponent.kt index b9f81c4b..7b30b2c9 100644 --- a/ui/react/src/main/kotlin/hep/dataforge/vision/react/ThreeCanvasComponent.kt +++ b/ui/react/src/main/kotlin/hep/dataforge/vision/react/ThreeCanvasComponent.kt @@ -58,8 +58,6 @@ public val ThreeCanvasComponent: FunctionalComponent = functio styledDiv { css { - minWidth = 500.px - minHeight = 500.px display = Display.inherit width = 100.pct height = 100.pct