diff --git a/modules/gallery/src/desktopMain/kotlin/org/jetbrains/compose/storytale/gallery/platform/StoryGallery.desktop.kt b/modules/gallery/src/desktopMain/kotlin/org/jetbrains/compose/storytale/gallery/platform/StoryGallery.desktop.kt index 812493b..4da1e57 100644 --- a/modules/gallery/src/desktopMain/kotlin/org/jetbrains/compose/storytale/gallery/platform/StoryGallery.desktop.kt +++ b/modules/gallery/src/desktopMain/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,21 +79,15 @@ 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, @@ -97,41 +95,8 @@ actual fun StoryGallery( 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/modules/gallery/src/mobileMain/kotlin/org/jetbrains/compose/storytale/gallery/MobileGallery.kt b/modules/gallery/src/mobileMain/kotlin/org/jetbrains/compose/storytale/gallery/MobileGallery.kt index dee772f..9d6f12b 100644 --- a/modules/gallery/src/mobileMain/kotlin/org/jetbrains/compose/storytale/gallery/MobileGallery.kt +++ b/modules/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!!)