kscience/visionforge
8
1
Fork 1
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Fix muon monitor design

Browse Source
This commit is contained in:
Alexander Nozik 2020-11-19 20:49:42 +03:00
parent e01a688664
commit d2553d5b40
4 changed files with 66 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt
View File

@ -19,8 +19,7 @@ import io.ktor.client.HttpClient
import io.ktor.client.request.get import io.ktor.client.request.get
import kotlinx.coroutines.GlobalScope import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
import kotlinx.css.height import kotlinx.css.*
import kotlinx.css.pct
import kotlinx.html.js.onClickFunction import kotlinx.html.js.onClickFunction
import react.RProps import react.RProps
import react.child import react.child
@ -57,30 +56,36 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
val root = props.model.root val root = props.model.root
div("row") {
h1("mx-auto") {
+"Muon monitor demo"
}
}
div("row") { div("row") {
styledDiv { styledDiv {
css { css {
+"col-lg-3" +"col-lg-3"
+"px-0" padding(0.px)
+"overflow-auto" overflowY = Overflow.auto
+"h-100" display = Display.flex
flexDirection = FlexDirection.column
height = 100.vh
} }
//tree //tree
card("Object tree") { card("Object tree") {
css {
flex(1.0, 1.0, FlexBasis.auto)
}
objectTree(root, selected, onSelect) objectTree(root, selected, onSelect)
} }
} }
styledDiv { styledDiv {
css { css {
+"col-lg-6" +"col-lg-6"
height = 100.pct display = Display.flex
flexDirection = FlexDirection.column
height = 100.vh
}
h1("mx-auto") {
+"Muon monitor demo"
} }
//canvas //canvas
child(ThreeCanvasComponent) { child(ThreeCanvasComponent) {
attrs { attrs {
this.context = props.context this.context = props.context
@ -95,8 +100,18 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
} }
} }
} }
div("col-lg-3") { styledDiv {
div("row") { 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 //settings
canvas?.let { canvas?.let {
card("Canvas configuration") { card("Canvas configuration") {
@ -125,36 +140,37 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
} }
} }
} }
div("row") { styledDiv{
div("container-fluid p-0") { css{
nav { padding(0.px)
attrs { }
attributes["aria-label"] = "breadcrumb" nav {
} attrs {
ol("breadcrumb") { attributes["aria-label"] = "breadcrumb"
li("breadcrumb-item") { }
button(classes = "btn btn-link p-0") { ol("breadcrumb") {
+"World" li("breadcrumb-item") {
attrs { button(classes = "btn btn-link p-0") {
onClickFunction = { +"World"
selected = hep.dataforge.names.Name.EMPTY attrs {
} onClickFunction = {
selected = hep.dataforge.names.Name.EMPTY
} }
} }
} }
if (selected != null) { }
val tokens = ArrayList<NameToken>(selected?.length ?: 1) if (selected != null) {
selected?.tokens?.forEach { token -> val tokens = ArrayList<NameToken>(selected?.length ?: 1)
tokens.add(token) selected?.tokens?.forEach { token ->
val fullName = Name(tokens.toList()) tokens.add(token)
li("breadcrumb-item") { val fullName = Name(tokens.toList())
button(classes = "btn btn-link p-0") { li("breadcrumb-item") {
+token.toString() button(classes = "btn btn-link p-0") {
attrs { +token.toString()
onClickFunction = { attrs {
console.log("Selected = $fullName") onClickFunction = {
selected = fullName console.log("Selected = $fullName")
} selected = fullName
} }
} }
} }
@ -164,7 +180,10 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
} }
} }
} }
div("row") { styledDiv{
css{
overflowY = Overflow.auto
}
//properties //properties
card("Properties") { card("Properties") {
selected.let { selected -> selected.let { selected ->

13
demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt
View File

@ -8,7 +8,6 @@ import io.ktor.client.features.json.JsonFeature
import io.ktor.client.features.json.serializer.KotlinxSerializer import io.ktor.client.features.json.serializer.KotlinxSerializer
import kotlinx.browser.document import kotlinx.browser.document
import react.child import react.child
import react.dom.div
import react.dom.render import react.dom.render
private class MMDemoApp : Application { 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") val element = document.getElementById("app") ?: error("Element with id 'app' not found on page")
render(element) { render(element) {
div("container-fluid h-100") { child(MMApp) {
child(MMApp) { attrs {
attrs { this.model = this@MMDemoApp.model
this.model = this@MMDemoApp.model this.connection = this@MMDemoApp.connection
this.connection = this@MMDemoApp.connection this.context = context
this.context = context
}
} }
} }
} }

2
demo/muon-monitor/src/jsMain/resources/index.html
View File

@ -11,6 +11,6 @@
<script type="text/javascript" src ="js/bootstrap.bundle.min.js"></script> <script type="text/javascript" src ="js/bootstrap.bundle.min.js"></script>
</head> </head>
<body class="application"> <body class="application">
<div class="container-fluid" id = "app"> </div> <div class="container-fluid min-vh-100" id = "app"> </div>
</body> </body>
</html> </html>

2
ui/react/src/main/kotlin/hep/dataforge/vision/react/ThreeCanvasComponent.kt
View File

@ -58,8 +58,6 @@ public val ThreeCanvasComponent: FunctionalComponent<ThreeCanvasProps> = functio
styledDiv { styledDiv {
css { css {
minWidth = 500.px
minHeight = 500.px
display = Display.inherit display = Display.inherit
width = 100.pct width = 100.pct
height = 100.pct height = 100.pct