github
/
compose-jb
mirror of https://gitee.com/github-sync-mirror/compose-jb.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Better layout and positioning for fallingBalls with web demo:

pull/631/head
Shagen Ogandzhanian 4 years ago
parent
f03abd1966
commit
daa2fcc082
6 changed files with 15 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      examples/falling_balls_with_web/build.gradle.kts
  2. 9
      examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/fallingBalls.kt
  3. 4
      examples/falling_balls_with_web/src/jsMain/kotlin/androidx/compose/web/with-web/App.kt
  4. 2
      examples/falling_balls_with_web/src/jsMain/kotlin/modifiers/position.kt
  5. 1
      examples/falling_balls_with_web/src/jsMain/resources/index.html
  6. 51
      examples/falling_balls_with_web/src/jsMain/resources/styles.css

2
examples/falling_balls_with_web/build.gradle.kts
Unescape View File

@ -1,4 +1,4 @@
import org.jetbrains.compose.compose import org.jetbrains.compose.compose
import org.jetbrains.compose.desktop.application.dsl.TargetFormat import org.jetbrains.compose.desktop.application.dsl.TargetFormat
plugins { plugins {

9
examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/fallingBalls.kt
Unescape View File

@ -20,10 +20,12 @@ import org.jetbrains.compose.common.ui.background
import org.jetbrains.compose.common.foundation.border import org.jetbrains.compose.common.foundation.border
import org.jetbrains.compose.common.ui.size import org.jetbrains.compose.common.ui.size
import org.jetbrains.compose.common.core.graphics.Color import org.jetbrains.compose.common.core.graphics.Color
import org.jetbrains.compose.common.foundation.layout.fillMaxHeight
import org.jetbrains.compose.common.foundation.layout.fillMaxWidth
@Composable @Composable
fun fallingBalls(game: Game) { fun fallingBalls(game: Game) {
Column() { Column(Modifier.fillMaxWidth().fillMaxHeight(1f)) {
Box() { Box() {
Text( Text(
"Catch balls!${if (game.finished) " Game over!" else ""}", "Catch balls!${if (game.finished) " Game over!" else ""}",
@ -76,9 +78,8 @@ fun fallingBalls(game: Game) {
if (game.started) { if (game.started) {
Box( Box(
Modifier Modifier
// .fillMaxWidth() .fillMaxWidth()
// .fillMaxHeight(0.5f) .fillMaxHeight(1f)
.background(Color(248, 248, 255))
.size(game.width.dp, game.height.dp) .size(game.width.dp, game.height.dp)
.onSizeChanged { .onSizeChanged {
game.size = it game.size = it

4
examples/falling_balls_with_web/src/jsMain/kotlin/androidx/compose/web/with-web/App.kt
Unescape View File

@ -26,8 +26,8 @@ fun main() {
fallingBalls( fallingBalls(
remember { remember {
JsGame()?.apply { JsGame()?.apply {
width = 600 width = root.offsetWidth
height = 400 height = root.offsetHeight
} }
} }
) )

2
examples/falling_balls_with_web/src/jsMain/kotlin/modifiers/position.kt
Unescape View File

@ -14,7 +14,7 @@ import androidx.compose.web.css.Position
@Composable @Composable
actual fun Modifier.position(width: Dp, height: Dp): Modifier = castOrCreate().apply { actual fun Modifier.position(width: Dp, height: Dp): Modifier = castOrCreate().apply {
add { add {
position(Position.Relative) position(Position.Absolute)
top(height.value.px) top(height.value.px)
left(width.value.px) left(width.value.px)
} }

1
examples/falling_balls_with_web/src/jsMain/resources/index.html
Unescape View File

@ -19,6 +19,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>compose-browser-with-web-demo</title> <title>compose-browser-with-web-demo</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

51
examples/falling_balls_with_web/src/jsMain/resources/styles.css
Unescape View File

@ -1,49 +1,8 @@
/* #root {
* Copyright 2021 The Android Open Source Project width: 100%;
* height: 100vh;
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
#container {
display: flex;
}
#rootParent {
background: lemonchiffon;
flex: 1 1 0px;
}
#raw {
background: powderblue;
flex: 1 1 0px;
}
.row {
width: 150px;
height: 150px;
background: yellow;
display: flex;
align-items: end;
}
.box-a {
background: red;
width: 50px;
height: 50px;
} }
.box-b { #root > .compose-web-column > div {
background: blue; position: relative;
width: 30px;
height: 30px;
} }
Write Preview
Loading…
Cancel
Save