fix: avoid passing storytale's textStyle to content (#26)

Kotlin · Dec 17, 2024 · e419c31 · e419c31
1 parent b001ff0
commit e419c31
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 53 deletions.
diff --git a/...sktopMain/kotlin/org/jetbrains/compose/storytale/gallery/platform/StoryGallery.desktop.kt b/...sktopMain/kotlin/org/jetbrains/compose/storytale/gallery/platform/StoryGallery.desktop.kt
@@ -15,8 +15,10 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
@@ -27,6 +29,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -38,6 +41,7 @@ import org.jetbrains.compose.storytale.gallery.story.StoryParameter
 import org.jetbrains.compose.storytale.gallery.ui.component.CenterRow
 import org.jetbrains.compose.storytale.gallery.ui.component.HorizontalSplitPane
 import org.jetbrains.compose.storytale.gallery.ui.component.StoryToast
+import org.jetbrains.compose.storytale.gallery.ui.component.StoryToastState
 import org.jetbrains.compose.storytale.gallery.ui.component.SwitchButton
 import org.jetbrains.compose.storytale.gallery.ui.component.rememberStoryToastState
 import org.jetbrains.compose.storytale.gallery.ui.theme.currentColorScheme
@@ -75,63 +79,24 @@ actual fun StoryGallery(
       .background(Color(0xFFFAFAFA))
   ) {
     if (activeStory != null) {
-      Box(
-        modifier = Modifier.weight(1f).fillMaxSize()
-      ) {
-        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-          with(activeStory) {
-            content()
-          }
-        }
-        StoryToast(
-          toastState = toast,
-          modifier = Modifier.align(Alignment.BottomCenter)
-            .padding(bottom = 24.dp)
-        )
-      }
-      Column(
+      GalleryContent(
+        activeStory = activeStory,
+        toast = toast,
+        modifier = Modifier.weight(1f)
+      )
+      GalleryConfiguration(
+        activeStory = activeStory,
+        sourceCodeMode = sourceCodeMode,
+        onSourceCodeModeChange = { sourceCodeMode = it },
         modifier = Modifier.widthIn(max = widthAnimation)
           .border(
             width = 1.dp,
             color = Color.Black.copy(.11f),
             shape = RoundedCornerShape(topStart = cornerAnimation, bottomStart = cornerAnimation)
           )
           .clip(RoundedCornerShape(topStart = cornerAnimation, bottomStart = cornerAnimation))
-          .background(Color.White),
-      ) {
-        AnimatedContent(
-          targetState = sourceCodeMode,
-          transitionSpec = {
-            slideIntoContainer(Start) togetherWith slideOutOfContainer(Start)
-          },
-          modifier = Modifier.weight(1f)
-        ) {
-          when (it) {
-            true -> DesktopCodeBlock(
-              code = activeStory.code,
-              storyName = activeStory.name,
-              modifier = Modifier.fillMaxSize()
-            )
-            false -> StoryParameter(
-              activeStory = activeStory,
-              contentPadding = PaddingValues(horizontal = 20.dp, vertical = 28.dp)
-            )
-          }
-        }
-        CenterRow(Modifier.padding(horizontal = 20.dp, vertical = 8.dp)) {
-          Text(
-            text = "Source code",
-            color = currentColorScheme.primaryText,
-            modifier = Modifier.weight(1f),
-            fontWeight = FontWeight.SemiBold,
-            fontSize = 14.sp
-          )
-          SwitchButton(
-            checked = sourceCodeMode,
-            onValueChange = { sourceCodeMode = it }
-          )
-        }
-      }
+          .background(Color.White)
+      )
     }
   }
   LaunchedEffect(Unit) {
@@ -140,3 +105,71 @@ actual fun StoryGallery(
     }
   }
 }
+
+@Composable
+private fun GalleryContent(
+  activeStory: Story,
+  toast: StoryToastState,
+  modifier: Modifier = Modifier,
+) = Box(
+  modifier = modifier
+) {
+  Box(
+    modifier = Modifier.fillMaxSize(),
+    contentAlignment = Alignment.Center
+  ) {
+    with(activeStory) {
+      CompositionLocalProvider(LocalTextStyle provides TextStyle.Default) {
+        content()
+      }
+    }
+  }
+  StoryToast(
+    toastState = toast,
+    modifier = Modifier.align(Alignment.BottomCenter)
+      .padding(bottom = 24.dp)
+  )
+}
+
+@Composable
+private fun GalleryConfiguration(
+  activeStory: Story,
+  sourceCodeMode: Boolean,
+  modifier: Modifier = Modifier,
+  onSourceCodeModeChange: (Boolean) -> Unit,
+) = Column(
+  modifier = modifier
+) {
+  AnimatedContent(
+    targetState = sourceCodeMode,
+    transitionSpec = {
+      slideIntoContainer(Start) togetherWith slideOutOfContainer(Start)
+    },
+    modifier = Modifier.weight(1f)
+  ) {
+    when (it) {
+      true -> DesktopCodeBlock(
+        code = activeStory.code,
+        storyName = activeStory.name,
+        modifier = Modifier.fillMaxSize()
+      )
+      false -> StoryParameter(
+        activeStory = activeStory,
+        contentPadding = PaddingValues(horizontal = 20.dp, vertical = 28.dp)
+      )
+    }
+  }
+  CenterRow(Modifier.padding(horizontal = 20.dp, vertical = 8.dp)) {
+    Text(
+      text = "Source code",
+      color = currentColorScheme.primaryText,
+      modifier = Modifier.weight(1f),
+      fontWeight = FontWeight.SemiBold,
+      fontSize = 14.sp
+    )
+    SwitchButton(
+      checked = sourceCodeMode,
+      onValueChange = onSourceCodeModeChange
+    )
+  }
+}
diff --git a/...es/gallery/src/mobileMain/kotlin/org/jetbrains/compose/storytale/gallery/MobileGallery.kt b/...es/gallery/src/mobileMain/kotlin/org/jetbrains/compose/storytale/gallery/MobileGallery.kt
@@ -1,14 +1,22 @@
 package org.jetbrains.compose.storytale.gallery
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
@@ -67,9 +75,14 @@ fun MobileGallery(
       }
     }
     HorizontalDivider(thickness = 0.5.dp, color = currentColorScheme.divider)
-    Box(modifier = Modifier.weight(1f).fillMaxWidth(), contentAlignment = Alignment.Center) {
+    Box(
+      modifier = Modifier.weight(1f).fillMaxWidth(),
+      contentAlignment = Alignment.Center
+    ) {
       with(story!!) {
-        content()
+        CompositionLocalProvider(LocalTextStyle provides TextStyle.Default) {
+          content()
+        }
       }
     }
     MobileStoryParameterSheet(sheetState, story!!)