Windows size class (#243)

* Add dependency * Update with scaffold * Update APp sample with some structure, just for fun
alorma · Mar 8, 2024 · 6385225 · 6385225
1 parent 0c1b23d
commit 6385225
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 9 deletions.
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -22,13 +22,21 @@ kotlin {
   jvm("desktop")
 
   js(IR) {
-    browser()
+    browser {
+      commonWebpackConfig {
+        outputFileName = "sample.js"
+      }
+    }
     binaries.executable()
   }
 
   @OptIn(ExperimentalWasmDsl::class)
   wasmJs {
-    browser()
+    browser {
+      commonWebpackConfig {
+        outputFileName = "sample.js"
+      }
+    }
     binaries.executable()
   }
 
@@ -52,6 +60,7 @@ kotlin {
 
     commonMain.dependencies {
       implementation(compose.material3)
+      implementation(libs.windowSizeClass)
 
       implementation(compose.runtime)
       implementation(compose.foundation)
@@ -70,6 +79,7 @@ kotlin {
     }
 
     val jsMain by getting
+    val wasmJsMain by getting
   }
 }
 

diff --git a/composeApp/src/commonMain/kotlin/App.kt b/composeApp/src/commonMain/kotlin/App.kt
@@ -1,11 +1,115 @@
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.DismissibleDrawerSheet
+import androidx.compose.material3.DismissibleNavigationDrawer
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Switch
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberDrawerState
+import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
+import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.Composable
-import theme.ComposeSettingsTheme
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.alorma.compose.settings.storage.disk.rememberBooleanSettingState
 import com.russhwolf.settings.Settings
+import kotlinx.coroutines.launch
+import theme.ComposeSettingsTheme
 
+@OptIn(
+  ExperimentalMaterial3WindowSizeClassApi::class,
+)
 @Composable
-fun App() {
+fun App(
+  modifier: Modifier = Modifier,
+) {
+  val windowSizeClass = calculateWindowSizeClass()
+
   val settings = Settings()
-  ComposeSettingsTheme {
-    SettingsScreen(settings = settings)
+
+  val darkMode = rememberBooleanSettingState(
+    key = "darkMode",
+    defaultValue = false,
+    settings = settings,
+  )
+
+  ComposeSettingsTheme(isSystemDark = darkMode.value) {
+    Scaffold(
+      modifier = Modifier.fillMaxSize().then(modifier),
+      topBar = {
+        SampleTopBar(
+          darkMode = darkMode.value,
+          onDarkModeChange = { newState -> darkMode.value = newState },
+        )
+      },
+    ) {
+      when (windowSizeClass.widthSizeClass) {
+        WindowWidthSizeClass.Compact, WindowWidthSizeClass.Medium -> {
+          SettingsScreen(settings = settings)
+        }
+
+        else -> {
+          val drawerState = rememberDrawerState(DrawerValue.Open)
+          val scope = rememberCoroutineScope()
+
+          DismissibleNavigationDrawer(
+            drawerState = drawerState,
+            drawerContent = {
+              DismissibleDrawerSheet {
+                SettingsScreen(settings = settings)
+              }
+            },
+            content = {
+              Surface {
+                Column(
+                  modifier = Modifier
+                    .fillMaxSize()
+                    .padding(16.dp),
+                  horizontalAlignment = Alignment.CenterHorizontally,
+                  verticalArrangement = Arrangement.Center,
+                ) {
+                  if (drawerState.isOpen) {
+                    Button(onClick = { scope.launch { drawerState.close() } }) {
+                      Text("Click to close")
+                    }
+                  } else {
+                    Button(onClick = { scope.launch { drawerState.open() } }) {
+                      Text("Click to open")
+                    }
+                  }
+                }
+              }
+            }
+          )
+        }
+      }
+    }
   }
 }
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun SampleTopBar(
+  darkMode: Boolean,
+  onDarkModeChange: (Boolean) -> Unit,
+) {
+  TopAppBar(
+    title = { Text(text = "Compose settings - Sample") },
+    actions = { Switch(checked = darkMode, onCheckedChange = { newState -> onDarkModeChange(newState) }) },
+    colors = TopAppBarDefaults.topAppBarColors(
+      containerColor = MaterialTheme.colorScheme.secondaryContainer,
+    ),
+  )
+}
diff --git a/composeApp/src/commonMain/kotlin/theme/Theme.kt b/composeApp/src/commonMain/kotlin/theme/Theme.kt
@@ -1,9 +1,17 @@
 package theme
 
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 
+private val DarkColorScheme = darkColorScheme(
+  primary = Purple80,
+  secondary = PurpleGrey80,
+  tertiary = Pink80
+)
+
 private val LightColorScheme = lightColorScheme(
   primary = Purple40,
   secondary = PurpleGrey40,
@@ -12,10 +20,16 @@ private val LightColorScheme = lightColorScheme(
 
 @Composable
 fun ComposeSettingsTheme(
+  isSystemDark: Boolean = isSystemInDarkTheme(),
   content: @Composable () -> Unit
 ) {
+  val colors = if (isSystemDark) {
+    DarkColorScheme
+  } else {
+    LightColorScheme
+  }
   MaterialTheme(
-    colorScheme = LightColorScheme,
+    colorScheme = colors,
     typography = Typography,
     content = content
   )

diff --git a/composeApp/src/jsMain/resources/index.html b/composeApp/src/jsMain/resources/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>Compose Settings sample</title>
     <script type="application/javascript" src="skiko.js"></script>
-    <script type="application/javascript" src="composeApp.js"></script>
+    <script type="application/javascript" src="sample.js"></script>
 </head>
 <body>
 <canvas id="ComposeTarget"></canvas>

diff --git a/composeApp/src/wasmJsMain/resources/index.html b/composeApp/src/wasmJsMain/resources/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>Compose Settings sample</title>
     <script type="application/javascript" src="skiko.js"></script>
-    <script type="application/javascript" src="composeApp.js"></script>
+    <script type="application/javascript" src="sample.js"></script>
 </head>
 <body>
 <canvas id="ComposeTarget"></canvas>

diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -30,6 +30,8 @@ compose-detekt-rules = "0.0.26"
 
 kotlinx-immutable = "0.3.7"
 
+windowSizeClass = "0.5.0"
+
 [libraries]
 androidx-annotation = { module = "androidx.annotation:annotation", version.ref = "androidxannotations" }
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidxactivity" }
@@ -56,6 +58,8 @@ compose-detekt-rules = { group = "com.twitter.compose.rules", name = "detekt", v
 
 kotlinx-immutable= { group = "org.jetbrains.kotlinx", name = "kotlinx-collections-immutable", version.ref = "kotlinx-immutable" }
 
+windowSizeClass = { module = "dev.chrisbanes.material3:material3-window-size-class-multiplatform", version.ref = "windowSizeClass" }
+
 [plugins]
 androidApplication = { id = "com.android.application", version.ref = "agp" }
 androidLibrary = { id = "com.android.library", version.ref = "agp" }