From 70ffa959c2247f2dcb35ce7aed8c428215fff414 Mon Sep 17 00:00:00 2001 From: Roman Sedaikin Date: Mon, 2 Nov 2020 11:53:24 +0300 Subject: [PATCH] Added scrollbar to ImageViewer. --- examples/imageviewer/build.gradle.kts | 5 +- .../example/imageviewer/view/MainScreen.kt | 54 ++++++++++++------- .../src/jvmMain/kotlin/imageviewer/Main.kt | 8 ++- 3 files changed, 42 insertions(+), 25 deletions(-) diff --git a/examples/imageviewer/build.gradle.kts b/examples/imageviewer/build.gradle.kts index 650ae08c37..3fb2dd621d 100755 --- a/examples/imageviewer/build.gradle.kts +++ b/examples/imageviewer/build.gradle.kts @@ -1,8 +1,5 @@ buildscript { repositories { - mavenLocal().mavenContent { - includeModule("org.jetbrains.compose", "compose-desktop-application-gradle-plugin") - } google() jcenter() maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") @@ -10,7 +7,7 @@ buildscript { dependencies { classpath("org.jetbrains.compose:compose-gradle-plugin:0.1.0-m1-build57") - classpath("org.jetbrains.compose:compose-desktop-application-gradle-plugin:0.1.0-SNAPSHOT") + classpath("org.jetbrains.compose:compose-desktop-application-gradle-plugin:0.1.0-m1-build57") classpath("com.android.tools.build:gradle:4.0.1") classpath(kotlin("gradle-plugin", version = "1.4.0")) } 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 d27672fa84..2933c2dabb 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 @@ -6,11 +6,6 @@ import androidx.compose.foundation.Text import androidx.compose.foundation.Image import androidx.compose.foundation.ScrollableColumn import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment -import androidx.compose.ui.graphics.RectangleShape -import androidx.compose.ui.graphics.asImageAsset -import androidx.compose.ui.Modifier -import androidx.compose.ui.layout.ContentScale import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -22,8 +17,13 @@ import androidx.compose.foundation.layout.preferredWidth import androidx.compose.foundation.layout.preferredSize import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.offset +import androidx.compose.foundation.rememberScrollbarAdapter +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.VerticalScrollbar import androidx.compose.material.Surface import androidx.compose.material.CircularProgressIndicator import androidx.compose.material.MaterialTheme @@ -32,9 +32,14 @@ import androidx.compose.material.Card import androidx.compose.material.Divider import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.graphics.asImageAsset import androidx.compose.ui.graphics.Color -import androidx.compose.ui.unit.TextUnit +import androidx.compose.ui.graphics.RectangleShape +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.TextUnit import example.imageviewer.model.AppState import example.imageviewer.model.Picture import example.imageviewer.model.ScreenType @@ -186,7 +191,7 @@ fun setMiniatureUI( val infoButtonHover = remember { mutableStateOf(false) } Card( backgroundColor = if (cardHover.value) MiniatureHoverColor else MiniatureColor, - modifier = Modifier.padding(start = 10.dp, end = 10.dp).preferredHeight(70.dp) + modifier = Modifier.padding(start = 10.dp, end = 18.dp).preferredHeight(70.dp) .fillMaxWidth() .hover(onEnter = { cardHover.value = true @@ -199,8 +204,7 @@ fun setMiniatureUI( .clickable { content.setMainImage(picture) }, - shape = RectangleShape, - elevation = 20.dp + shape = RectangleShape ) { Row(modifier = Modifier.padding(end = 30.dp)) { Clickable( @@ -265,19 +269,29 @@ fun setMiniatureUI( @Composable fun setScrollableArea(content: ContentState) { - - ScrollableColumn { - var index = 1 - Column { - for (picture in content.getMiniatures()) { - setMiniatureUI( - picture = picture, - content = content - ) - Spacer(modifier = Modifier.height(5.dp)) - index++ + Box( + modifier = Modifier.fillMaxSize() + .padding(end = 8.dp) + ) { + val stateVertical = rememberScrollState(0f) + ScrollableColumn(scrollState = stateVertical) { + var index = 1 + Column { + for (picture in content.getMiniatures()) { + setMiniatureUI( + picture = picture, + content = content + ) + Spacer(modifier = Modifier.height(5.dp)) + index++ + } } } + VerticalScrollbar( + modifier = Modifier.align(Alignment.CenterEnd) + .fillMaxHeight(), + adapter = rememberScrollbarAdapter(stateVertical) + ) } } diff --git a/examples/imageviewer/desktop/src/jvmMain/kotlin/imageviewer/Main.kt b/examples/imageviewer/desktop/src/jvmMain/kotlin/imageviewer/Main.kt index e8ff3a1f00..6901d095fc 100644 --- a/examples/imageviewer/desktop/src/jvmMain/kotlin/imageviewer/Main.kt +++ b/examples/imageviewer/desktop/src/jvmMain/kotlin/imageviewer/Main.kt @@ -1,6 +1,8 @@ package example.imageviewer +import androidx.compose.desktop.DesktopTheme import androidx.compose.desktop.Window +import androidx.compose.material.MaterialTheme import androidx.compose.runtime.remember import example.imageviewer.utils.getPreferredWindowSize import example.imageviewer.view.BuildAppUI @@ -18,6 +20,10 @@ fun main() { val content = ContentState.applyContent( "https://spvessel.com/iv/images/fetching.list" ) - BuildAppUI(content) + MaterialTheme { + DesktopTheme { + BuildAppUI(content) + } + } } }