From d579d3f94649ee96fc36971d7f354fd095b9789d Mon Sep 17 00:00:00 2001 From: spvessel Date: Thu, 10 Sep 2020 18:49:48 +0300 Subject: [PATCH] Fixed an issue where the user could see the previous image in full screen mode before the selected one was loaded. --- .../example/imageviewer/model/ContentState.kt | 10 +++-- .../kotlin/example/imageviewer/view/AppUI.kt | 6 +-- .../imageviewer/view/FullImageScreen.kt | 39 +++++++++++++++---- .../example/imageviewer/view/MainScreen.kt | 24 +++++++----- 4 files changed, 52 insertions(+), 27 deletions(-) diff --git a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/model/ContentState.kt b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/model/ContentState.kt index 8661385815..5e2e3f51e5 100755 --- a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/model/ContentState.kt +++ b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/model/ContentState.kt @@ -126,7 +126,7 @@ class ContentState( // application content initialization @Composable fun initData() { - + println("app") if (isAppUIReady.value) return @@ -197,13 +197,15 @@ class ContentState( if (mainImageWrapper.getId() == picture.id) return + isAppUIReady.value = false + AppState.screenState(ScreenType.FullscreenImage) + executor.execute { if (isInternetAvailable()) { - val fullSizePicture = loadFullImage(picture.source) - fullSizePicture.id = picture.id - invokeLater { + val fullSizePicture = loadFullImage(picture.source) + fullSizePicture.id = picture.id wrapPictureIntoMainImage(fullSizePicture) } } else { diff --git a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/AppUI.kt b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/AppUI.kt index 29ddfb46df..ea627fbef5 100755 --- a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/AppUI.kt +++ b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/AppUI.kt @@ -40,11 +40,7 @@ fun BuildAppUI(content: ContentState) { ) { when (AppState.screenState()) { ScreenType.Main -> { - if (content.isContentReady()) { - setMainScreen(content) - } else { - setLoadingScreen(content) - } + setMainScreen(content) } ScreenType.FullscreenImage -> { setImageFullScreen(content) diff --git a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/FullImageScreen.kt b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/FullImageScreen.kt index cf2ac1b53e..f7b3e4aeac 100755 --- a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/FullImageScreen.kt +++ b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/FullImageScreen.kt @@ -28,22 +28,26 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ImageAsset import androidx.compose.ui.graphics.asImageAsset import androidx.compose.ui.layout.ContentScale +import androidx.compose.material.CircularProgressIndicator import androidx.compose.material.MaterialTheme import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.Stack +import androidx.compose.foundation.Box import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.preferredHeight import androidx.compose.foundation.layout.preferredSize import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.RowScope.gravity +import androidx.compose.foundation.layout.RowScope.align import androidx.compose.material.Surface import androidx.compose.ui.unit.dp import example.imageviewer.core.FilterType import example.imageviewer.model.AppState import example.imageviewer.model.ContentState import example.imageviewer.model.ScreenType +import example.imageviewer.style.DarkGreen import example.imageviewer.style.Foreground import example.imageviewer.style.MiniatureColor import example.imageviewer.style.Transparent @@ -72,10 +76,29 @@ import java.awt.Rectangle fun setImageFullScreen( content: ContentState ) { + if (content.isContentReady()) { + Column { + setToolBar(content.getSelectedImageName(), content) + setImage(content) + } + } else { + setLoadingScreen() + } +} + +@Composable +private fun setLoadingScreen() { - Column { - setToolBar(content.getSelectedImageName(), content) - setImage(content) + Stack { + Surface(color = MiniatureColor, modifier = Modifier.preferredHeight(44.dp)) {} + Box(modifier = Modifier.align(Alignment.Center)) { + Surface(color = DarkGray, elevation = 4.dp, shape = CircleShape) { + CircularProgressIndicator( + modifier = Modifier.preferredSize(50.dp).padding(3.dp, 3.dp, 4.dp, 4.dp), + color = DarkGreen + ) + } + } } } @@ -89,7 +112,7 @@ fun setToolBar( Row(modifier = Modifier.padding(end = 30.dp)) { Surface( color = Transparent, - modifier = Modifier.padding(start = 20.dp).gravity(Alignment.CenterVertically), + modifier = Modifier.padding(start = 20.dp).align(Alignment.CenterVertically), shape = CircleShape ) { Clickable( @@ -110,14 +133,14 @@ fun setToolBar( color = Foreground, maxLines = 1, modifier = Modifier.padding(start = 30.dp).weight(1f) - .gravity(Alignment.CenterVertically), + .align(Alignment.CenterVertically), style = MaterialTheme.typography.body1 ) Surface( color = Color(255, 255, 255, 40), modifier = Modifier.preferredSize(154.dp, 38.dp) - .gravity(Alignment.CenterVertically), + .align(Alignment.CenterVertically), shape = CircleShape ) { ScrollableRow { @@ -140,7 +163,7 @@ fun FilterButton( ) { Surface( color = Transparent, - modifier = Modifier.gravity(Alignment.CenterVertically), + modifier = Modifier.align(Alignment.CenterVertically), shape = CircleShape ) { Clickable( diff --git a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/MainScreen.kt b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/MainScreen.kt index dfc38925f9..1d027e0fbd 100755 --- a/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/MainScreen.kt +++ b/examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/MainScreen.kt @@ -65,20 +65,25 @@ import org.jetbrains.skija.IRect @Composable fun setMainScreen(content: ContentState) { - Column { - setTopContent(content) - setScrollableArea(content) + + if (content.isContentReady()) { + Column { + setTopContent(content) + setScrollableArea(content) + } + } else { + setLoadingScreen(content) } } @Composable -fun setLoadingScreen(content: ContentState) { +private fun setLoadingScreen(content: ContentState) { Stack { Column { setTopContent(content) } - Box(modifier = Modifier.gravity(Alignment.Center)) { + Box(modifier = Modifier.align(Alignment.Center)) { Surface(color = DarkGray, elevation = 4.dp, shape = CircleShape) { CircularProgressIndicator( modifier = Modifier.preferredSize(50.dp).padding(3.dp, 3.dp, 4.dp, 4.dp), @@ -88,7 +93,7 @@ fun setLoadingScreen(content: ContentState) { } Text( text = ResString.loading, - modifier = Modifier.gravity(Alignment.Center).offset(0.dp, 70.dp), + modifier = Modifier.align(Alignment.Center).offset(0.dp, 70.dp), style = MaterialTheme.typography.body1, color = Foreground ) @@ -115,11 +120,11 @@ fun setTitleBar(text: String, content: ContentState) { Text( text, color = Foreground, - modifier = Modifier.weight(1f).gravity(Alignment.CenterVertically) + modifier = Modifier.weight(1f).align(Alignment.CenterVertically) ) Surface( color = Transparent, - modifier = Modifier.padding(end = 20.dp).gravity(Alignment.CenterVertically), + modifier = Modifier.padding(end = 20.dp).align(Alignment.CenterVertically), shape = CircleShape ) { Clickable( @@ -183,7 +188,6 @@ fun setMiniatureUI( Clickable( onClick = { content.setMainImage(picture) - AppState.screenState(ScreenType.FullscreenImage) } ) { Image( @@ -199,7 +203,7 @@ fun setMiniatureUI( Text( text = picture.name, color = Foreground, - modifier = Modifier.weight(1f).gravity(Alignment.CenterVertically).padding(start = 16.dp), + modifier = Modifier.weight(1f).align(Alignment.CenterVertically).padding(start = 16.dp), style = MaterialTheme.typography.body1 )