From 411b75d8d25dae65d6d3d685f3baeec42bda006b Mon Sep 17 00:00:00 2001 From: Abdul Basit Date: Mon, 15 Jul 2024 18:36:35 +0500 Subject: [PATCH] Update dependencies and migrate to Material 3 This commit updates various dependencies, including Kotlin, AGP, Compose, and kotlinx libraries. It also migrates the UI from Material Design 2 to Material Design 3, replacing MaterialTheme with MaterialTheme3 and using corresponding components. Specific changes include: - Upgrading Kotlin to 1.9.20 - Upgrading AGP to 8.2.1 - Upgrading Compose to 1 .7.0-alpha01 - Upgrading kotlinx-serialization-json to 1.6.3 - Upgrading kotlinx-datetime to 0.6.0 - Upgrading kotlinx-coroutines-swing to 1.8.1 - Replacing MaterialTheme with MaterialTheme3 - Using Material 3 components like Card, CardDefaults, HorizontalDivider, etc. - Removing unused imports and annotations. --- gradle.properties | 2 +- iosApp/iosApp.xcodeproj/project.pbxproj | 18 ---- shared/build.gradle.kts | 10 +- .../com/example/travelapp_kmp/MainView.kt | 17 +--- .../travelapp_kmp/details/DetailsScreen.kt | 98 ++++++++----------- .../travelapp_kmp/details/DetailsScreenWeb.kt | 20 ++-- .../travelapp_kmp/listing/CountriesList.kt | 5 +- .../travelapp_kmp/listing/ListScreenState.kt | 8 +- .../listing/ListScreenViewModel.kt | 16 ++- .../travelapp_kmp/listing/MainScreen.kt | 94 +++++++++++------- .../travelapp_kmp/screennavigation/Screen.kt | 2 +- 11 files changed, 137 insertions(+), 153 deletions(-) diff --git a/gradle.properties b/gradle.properties index 8ca42d9..e2bbcd4 100644 --- a/gradle.properties +++ b/gradle.properties @@ -11,7 +11,7 @@ kotlin.native.useEmbeddableCompilerJar=true kotlin.native.binary.memoryModel=experimental kotlin.version=1.9.20 agp.version=8.2.1 -compose.version=1.6.1 +compose.version=1.7.0-alpha01 ktor.version=3.0.0-wasm2 kotlin.js.ir.output.granularity=whole-program org.jetbrains.compose.experimental.wasm.enabled=true diff --git a/iosApp/iosApp.xcodeproj/project.pbxproj b/iosApp/iosApp.xcodeproj/project.pbxproj index c2062a5..13866c4 100644 --- a/iosApp/iosApp.xcodeproj/project.pbxproj +++ b/iosApp/iosApp.xcodeproj/project.pbxproj @@ -106,7 +106,6 @@ 7555FF77242A565900829871 /* Sources */, 7555FF79242A565900829871 /* Resources */, 9964867F0862B4D9FB6ABFC7 /* Frameworks */, - A7AC019F9425ED83D40D7A80 /* [CP] Copy Pods Resources */, ); buildRules = ( ); @@ -161,23 +160,6 @@ /* End PBXResourcesBuildPhase section */ /* Begin PBXShellScriptBuildPhase section */ - A7AC019F9425ED83D40D7A80 /* [CP] Copy Pods Resources */ = { - isa = PBXShellScriptBuildPhase; - buildActionMask = 2147483647; - files = ( - ); - inputFileListPaths = ( - "${PODS_ROOT}/Target Support Files/Pods-iosApp/Pods-iosApp-resources-${CONFIGURATION}-input-files.xcfilelist", - ); - name = "[CP] Copy Pods Resources"; - outputFileListPaths = ( - "${PODS_ROOT}/Target Support Files/Pods-iosApp/Pods-iosApp-resources-${CONFIGURATION}-output-files.xcfilelist", - ); - runOnlyForDeploymentPostprocessing = 0; - shellPath = /bin/sh; - shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-iosApp/Pods-iosApp-resources.sh\"\n"; - showEnvVarsInLog = 0; - }; E8D673591E7196AEA2EA10E2 /* [CP] Check Pods Manifest.lock */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; diff --git a/shared/build.gradle.kts b/shared/build.gradle.kts index 07c7629..4669177 100755 --- a/shared/build.gradle.kts +++ b/shared/build.gradle.kts @@ -63,7 +63,7 @@ kotlin { dependencies { implementation(compose.ui) implementation(compose.foundation) - implementation(compose.material) + implementation(compose.material3) implementation(compose.runtime) @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class) implementation(compose.components.resources) @@ -75,8 +75,8 @@ kotlin { implementation("io.ktor:ktor-client-serialization:$ktorVersion") implementation("io.ktor:ktor-serialization-kotlinx-json:$ktorVersion") implementation("io.ktor:ktor-client-content-negotiation:$ktorVersion") - implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.1") - implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.0-RC") + implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3") + implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.0") val coilVersion = "3.0.0-SNAPSHOT" implementation("io.coil-kt.coil3:coil-compose:$coilVersion") @@ -89,7 +89,7 @@ kotlin { androidMain { dependencies { - implementation("com.google.android.material:material:1.11.0") + implementation("com.google.android.material:material:1.12.0") implementation("io.ktor:ktor-client-okhttp:$ktorVersion") // implementation("io.ktor:ktor-client-android:$ktorVersion") } @@ -105,7 +105,7 @@ kotlin { dependencies { implementation(compose.desktop.common) implementation("io.ktor:ktor-client-java:$ktorVersion") - implementation("org.jetbrains.kotlinx:kotlinx-coroutines-swing:1.7.3") + implementation("org.jetbrains.kotlinx:kotlinx-coroutines-swing:1.8.1") } } diff --git a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/MainView.kt b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/MainView.kt index 45b98ba..ed594ac 100644 --- a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/MainView.kt +++ b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/MainView.kt @@ -1,17 +1,15 @@ package com.example.travelapp_kmp -import androidx.compose.material.MaterialTheme +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember -import androidx.compose.ui.graphics.Color import com.example.travelapp_kmp.details.DetailScreen import com.example.travelapp_kmp.details.DetailScreenWeb import com.example.travelapp_kmp.listing.ListScreenViewModel import com.example.travelapp_kmp.listing.MainScreen import com.example.travelapp_kmp.screennavigation.Screen import com.example.travelapp_kmp.screennavigation.ScreensState -import com.example.travelapp_kmp.style.TravelAppColors @Composable @@ -19,18 +17,7 @@ internal fun CommonView(isLargeScreen: Boolean = false) { val viewMode = ListScreenViewModel() val screenNavigationState = remember { mutableStateOf(ScreensState()) } - MaterialTheme( - colors = MaterialTheme.colors.copy( - primary = TravelAppColors.Foreground, - secondary = TravelAppColors.LightGray, - background = TravelAppColors.DarkGray, - surface = TravelAppColors.Gray, - onPrimary = TravelAppColors.Foreground, - onSecondary = Color.Black, - onBackground = TravelAppColors.Foreground, - onSurface = TravelAppColors.Foreground - ) - ) { + MaterialTheme { when (val state = screenNavigationState.value.screen) { is Screen.DetailScreen -> if (isLargeScreen) { DetailScreenWeb( diff --git a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/details/DetailsScreen.kt b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/details/DetailsScreen.kt index 290288e..e2e0391 100644 --- a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/details/DetailsScreen.kt +++ b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/details/DetailsScreen.kt @@ -17,19 +17,20 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.widthIn -import androidx.compose.foundation.lazy.LazyRow -import androidx.compose.foundation.lazy.items import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll -import androidx.compose.material.Card -import androidx.compose.material.ExperimentalMaterialApi -import androidx.compose.material.Icon -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Text import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowBack import androidx.compose.material.icons.filled.Star +import androidx.compose.material3.Card +import androidx.compose.material3.CardDefaults +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.material3.carousel.HorizontalMultiBrowseCarousel +import androidx.compose.material3.carousel.rememberCarouselState import androidx.compose.runtime.Composable import androidx.compose.runtime.MutableState import androidx.compose.runtime.getValue @@ -57,12 +58,9 @@ import com.example.travelapp_kmp.screennavigation.Screen import com.example.travelapp_kmp.screennavigation.ScreensState import com.example.travelapp_kmp.style.TravelAppColors import org.jetbrains.compose.resources.DrawableResource -import org.jetbrains.compose.resources.ExperimentalResourceApi import org.jetbrains.compose.resources.painterResource -import kotlin.random.Random -@OptIn(ExperimentalResourceApi::class) @Composable internal fun DetailScreen(navigationState: MutableState, touristPlace: TouristPlace) { Box { @@ -79,7 +77,6 @@ internal fun DetailScreen(navigationState: MutableState, touristPl ) }), ) - // Custom toolbar containing the back button and title. Row( modifier = Modifier.fillMaxWidth().defaultMinSize(minHeight = 56.dp), ) { @@ -100,7 +97,7 @@ internal fun DetailScreen(navigationState: MutableState, touristPl } Text( text = touristPlace.name, - style = MaterialTheme.typography.h6.copy( + style = MaterialTheme.typography.headlineMedium.copy( fontWeight = FontWeight.Medium, color = Color.White ), modifier = Modifier.padding(16.dp) @@ -111,10 +108,9 @@ internal fun DetailScreen(navigationState: MutableState, touristPl .verticalScroll(rememberScrollState()) ) { Card( - elevation = 16.dp, + elevation = CardDefaults.elevatedCardElevation(), modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp) .aspectRatio(ratio = 335f / 280f).clip(RoundedCornerShape(15.dp)), - contentColor = Transparent, ) { Box { Image( @@ -129,13 +125,13 @@ internal fun DetailScreen(navigationState: MutableState, touristPl } } Text( - text = touristPlace.name, style = MaterialTheme.typography.h5.copy( + text = touristPlace.name, style = MaterialTheme.typography.bodyLarge.copy( fontWeight = FontWeight.Medium, color = Color.White ), modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp) ) Text( text = touristPlace.longDescription, - style = MaterialTheme.typography.subtitle2.copy( + style = MaterialTheme.typography.bodyMedium.copy( color = Color.White, fontWeight = FontWeight.Normal, letterSpacing = TextUnit(0.1f, TextUnitType.Em), @@ -144,7 +140,7 @@ internal fun DetailScreen(navigationState: MutableState, touristPl modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 10.dp) ) Text( - text = "Photos", style = MaterialTheme.typography.subtitle1.copy( + text = "Photos", style = MaterialTheme.typography.bodySmall.copy( fontWeight = FontWeight.Medium, color = Color.White ), modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp) ) @@ -194,61 +190,54 @@ internal fun IconWithText() { text = "4.8", modifier = Modifier.weight(1f, false).padding(top = 5.dp) .align(Alignment.CenterHorizontally), - style = MaterialTheme.typography.subtitle1.copy(Color.White), + style = MaterialTheme.typography.bodySmall.copy(Color.White), fontWeight = FontWeight.Medium, ) Text( text = "2,500 rvs", modifier = Modifier.weight(1f, false).padding(top = 5.dp) .align(Alignment.CenterHorizontally), - style = MaterialTheme.typography.caption.copy(color = Color.White), + style = MaterialTheme.typography.bodySmall.copy(color = Color.White), ) } } -@OptIn(ExperimentalMaterialApi::class, ExperimentalResourceApi::class) +@OptIn( + ExperimentalMaterial3Api::class +) @Composable internal fun ImageGallery( imagesList: List, onDetailsClicked: (DrawableResource) -> Unit, onImageLongClick: (DrawableResource) -> Unit ) { - LazyRow( - modifier = Modifier.padding(top = 16.dp, bottom = 16.dp).fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(8.dp), + + HorizontalMultiBrowseCarousel( + state = rememberCarouselState { imagesList.size }, + modifier = Modifier.fillMaxWidth().height(221.dp).padding(16.dp), + preferredItemWidth = 186.dp, + itemSpacing = 8.dp, contentPadding = PaddingValues(horizontal = 16.dp) - ) { - items(items = imagesList, key = { Random.nextInt() }) { imageUrl -> - Card( - elevation = 16.dp, - modifier = Modifier.height(210.dp).aspectRatio(ratio = (139.0 / 210.0).toFloat()) - .clip(RoundedCornerShape(16.dp)), - contentColor = Transparent, - ) { - Box { - Image( - painter = painterResource(imageUrl), - contentDescription = null, - modifier = Modifier.height(210.dp) - .aspectRatio(ratio = (139.0 / 210.0).toFloat()) - .background(TravelAppColors.SemiWhite) - .pointerInput(Unit) { - detectTapGestures( - onLongPress = { - // Notify client regarding the long press event. - onImageLongClick(imageUrl) - }, - onTap = { - // Notify client regarding the single click event. - onDetailsClicked(imageUrl) - } - ) - }, - contentScale = ContentScale.Crop, + ) { i -> + val item = imagesList[i] + Image( + painter = painterResource(item), + contentDescription = null, + modifier = Modifier.height(210.dp).maskClip(MaterialTheme.shapes.extraLarge) + .pointerInput(Unit) { + detectTapGestures( + onLongPress = { + // Notify client regarding the long press event. + onImageLongClick(item) + }, + onTap = { + // Notify client regarding the single click event. + onDetailsClicked(item) + } ) - } - } - } + }, + contentScale = ContentScale.Crop, + ) } } @@ -258,7 +247,6 @@ internal fun ImageGallery( * @param imageResId [DrawableResource] to be shown. * @param onDismiss Notify client about dismiss event. */ -@OptIn(ExperimentalMaterialApi::class, ExperimentalResourceApi::class) @Composable internal fun ShowImagePopup( imageResId: DrawableResource, diff --git a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/details/DetailsScreenWeb.kt b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/details/DetailsScreenWeb.kt index 5f7877f..e88d4e8 100644 --- a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/details/DetailsScreenWeb.kt +++ b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/details/DetailsScreenWeb.kt @@ -12,11 +12,12 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll -import androidx.compose.material.Card -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Text import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowBack +import androidx.compose.material3.Card +import androidx.compose.material3.CardDefaults +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.MutableState import androidx.compose.runtime.getValue @@ -29,7 +30,6 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.unit.ExperimentalUnitApi import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.TextUnitType import androidx.compose.ui.unit.dp @@ -38,13 +38,8 @@ import com.example.travelapp_kmp.screennavigation.Screen import com.example.travelapp_kmp.screennavigation.ScreensState import com.example.travelapp_kmp.style.TravelAppColors import org.jetbrains.compose.resources.DrawableResource -import org.jetbrains.compose.resources.ExperimentalResourceApi import org.jetbrains.compose.resources.painterResource -//import org.jetbrains.compose.resources.resource - - -@OptIn(ExperimentalUnitApi::class, ExperimentalResourceApi::class) @Composable internal fun DetailScreenWeb( navigationState: MutableState, @@ -77,10 +72,9 @@ internal fun DetailScreenWeb( colorFilter = ColorFilter.tint(color = Color.White), ) Card( - elevation = 16.dp, + elevation = CardDefaults.cardElevation(), modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp) .aspectRatio(ratio = 335f / 280f).clip(RoundedCornerShape(15.dp)), - contentColor = Color.Transparent, ) { Box { Image( @@ -113,13 +107,13 @@ internal fun DetailScreenWeb( modifier = Modifier.weight(1f).verticalScroll(rememberScrollState()) ) { Text( - text = touristPlace.name, style = MaterialTheme.typography.h5.copy( + text = touristPlace.name, style = MaterialTheme.typography.headlineMedium.copy( fontWeight = FontWeight.Medium, color = Color.White ), modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp) ) Text( text = touristPlace.longDescription, - style = MaterialTheme.typography.subtitle2.copy( + style = MaterialTheme.typography.bodyMedium.copy( color = Color.White, fontWeight = FontWeight.Normal, letterSpacing = TextUnit(0.1f, TextUnitType.Em), diff --git a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/CountriesList.kt b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/CountriesList.kt index 66b5017..a207d3b 100644 --- a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/CountriesList.kt +++ b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/CountriesList.kt @@ -1,15 +1,14 @@ package com.example.travelapp_kmp.listing import org.jetbrains.compose.resources.DrawableResource -import org.jetbrains.compose.resources.ExperimentalResourceApi -data class Country @OptIn(ExperimentalResourceApi::class) constructor( +data class Country( val name: String, val flagIcon: DrawableResource? = null, val touristPlaces: List ) -data class TouristPlace @OptIn(ExperimentalResourceApi::class) constructor( +data class TouristPlace( val name: String, val shortDescription: String, val longDescription: String, diff --git a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/ListScreenState.kt b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/ListScreenState.kt index 1c5a4db..0cfb59a 100644 --- a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/ListScreenState.kt +++ b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/ListScreenState.kt @@ -1,7 +1,6 @@ package com.example.travelapp_kmp.listing import org.jetbrains.compose.resources.DrawableResource -import org.jetbrains.compose.resources.ExperimentalResourceApi sealed interface ListScreenState { @@ -13,13 +12,14 @@ sealed interface ListScreenState { val selectedCountryIndex: Int = 0, ) : ListScreenState { - val countriesTouristPlaces: List = countriesList[selectedCountryIndex].touristPlaces + val countriesTouristPlaces: List = + countriesList[selectedCountryIndex].touristPlaces - val nameTouristPlaceSelected: String = countriesTouristPlaces[selectedTouristPlacesIndex].name + val nameTouristPlaceSelected: String = + countriesTouristPlaces[selectedTouristPlacesIndex].name val nameCountrySelected: String = countriesList[selectedCountryIndex].name - @OptIn(ExperimentalResourceApi::class) fun getImagePlaceholder(): DrawableResource { return countriesList[selectedCountryIndex].touristPlaces[selectedTouristPlacesIndex].images[0] } diff --git a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/ListScreenViewModel.kt b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/ListScreenViewModel.kt index 0586dcc..5ac7019 100644 --- a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/ListScreenViewModel.kt +++ b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/ListScreenViewModel.kt @@ -1,16 +1,22 @@ package com.example.travelapp_kmp.listing import com.example.travelapp_kmp.network.CountriesApiImpl -import kotlinx.coroutines.* +import kotlinx.coroutines.CoroutineExceptionHandler +import kotlinx.coroutines.CoroutineScope +import kotlinx.coroutines.Dispatchers +import kotlinx.coroutines.SupervisorJob import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.StateFlow +import kotlinx.coroutines.launch import org.jetbrains.compose.resources.ExperimentalResourceApi class ListScreenViewModel { - val coroutineHandlerException = CoroutineExceptionHandler { coroutineContext, throwable -> - println("error is ${throwable.message}") - } - private val viewModelScope = CoroutineScope(Dispatchers.Unconfined + SupervisorJob() + coroutineHandlerException) + private val coroutineHandlerException = + CoroutineExceptionHandler { coroutineContext, throwable -> + println("error is ${throwable.message}") + } + private val viewModelScope = + CoroutineScope(Dispatchers.Unconfined + SupervisorJob() + coroutineHandlerException) private val countriesApi = CountriesApiImpl() val state = MutableStateFlow(ListScreenState.Loading) diff --git a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/MainScreen.kt b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/MainScreen.kt index 4cc3c37..6194398 100644 --- a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/MainScreen.kt +++ b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/MainScreen.kt @@ -1,13 +1,43 @@ package com.example.travelapp_kmp.listing -import androidx.compose.foundation.* -import androidx.compose.foundation.layout.* -import androidx.compose.foundation.lazy.* +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.aspectRatio +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.foundation.layout.width +import androidx.compose.foundation.layout.wrapContentSize +import androidx.compose.foundation.lazy.LazyListState +import androidx.compose.foundation.lazy.LazyRow +import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.lazy.itemsIndexed +import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.* +import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowBack import androidx.compose.material.icons.automirrored.filled.ArrowForward +import androidx.compose.material3.Card +import androidx.compose.material3.CardDefaults +import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.material3.DropdownMenu +import androidx.compose.material3.DropdownMenuItem +import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.MutableState @@ -123,7 +153,7 @@ internal fun RenderListingScreen( val imageWidth = with(LocalDensity.current) { val screenWidth = - MaterialTheme.typography.body1.fontSize * 40 // or any other way to get screen width + MaterialTheme.typography.bodyMedium.fontSize * 40 // or any other way to get screen width (screenWidth * 0.85f) } @@ -210,13 +240,13 @@ internal fun WeatherView( Column(Modifier.padding(start = 8.dp).align(Alignment.CenterVertically)) { Text( value.weather.date, - style = MaterialTheme.typography.caption.copy( + style = MaterialTheme.typography.labelLarge.copy( color = Color.White, fontWeight = FontWeight.Normal ) ) Text( value.weather.weatherDescription, - style = MaterialTheme.typography.body2.copy( + style = MaterialTheme.typography.labelLarge.copy( color = Color.White, fontWeight = FontWeight.Bold ) ) @@ -244,7 +274,6 @@ private fun ListCountryChips( } -@OptIn(ExperimentalMaterialApi::class, ExperimentalResourceApi::class) @Composable private fun CountryChips( name: String, @@ -275,7 +304,7 @@ private fun CountryChips( } Text( name, - style = MaterialTheme.typography.body1.copy(color = Color.Black), + style = MaterialTheme.typography.bodyMedium.copy(color = Color.Black), modifier = Modifier.padding(end = 24.dp) .background(Color.Transparent), ) @@ -299,7 +328,7 @@ internal fun ImageSlider( ) { items(items = imagesList, key = { item: TouristPlace -> item.name }) { touristPlace -> Card( - elevation = 16.dp, + elevation = CardDefaults.elevatedCardElevation(), modifier = Modifier .width(width = (width * 0.62).dp) .aspectRatio(ratio = (295.0 / 432.0).toFloat()) @@ -308,7 +337,6 @@ internal fun ImageSlider( touristPlace ) }, - contentColor = Color.Transparent, ) { Box { Image( @@ -326,16 +354,15 @@ internal fun ImageSlider( ).padding(16.dp) ) { Text( - text = touristPlace.name, style = MaterialTheme.typography.h4.copy( + text = touristPlace.name, + style = MaterialTheme.typography.headlineMedium.copy( color = Color.White, fontWeight = FontWeight.Medium ) ) Text( text = touristPlace.shortDescription, - style = MaterialTheme.typography.caption.copy( + style = MaterialTheme.typography.bodySmall.copy( color = Color.White, - letterSpacing = TextUnit(0.1f, TextUnitType.Em), - lineHeight = TextUnit(19f, TextUnitType.Sp) ), maxLines = 3, modifier = Modifier.padding(top = 4.dp), @@ -349,7 +376,7 @@ internal fun ImageSlider( ) }), text = "Discover Place", - style = MaterialTheme.typography.subtitle2.copy( + style = MaterialTheme.typography.labelLarge.copy( textDecoration = TextDecoration.Underline, color = Color.White, fontWeight = FontWeight.SemiBold @@ -379,7 +406,7 @@ internal fun Counter(destinationsSize: Int, selectedDestination: Int, onItemSwip Row(horizontalArrangement = Arrangement.Center) { Text( (selectedDestination + 1).toString(), - style = MaterialTheme.typography.subtitle2.copy( + style = MaterialTheme.typography.labelLarge.copy( color = Color.White, fontSize = TextUnit( 24f, TextUnitType.Sp ) @@ -388,7 +415,7 @@ internal fun Counter(destinationsSize: Int, selectedDestination: Int, onItemSwip ) Text( "/$destinationsSize", - style = MaterialTheme.typography.subtitle2.copy(color = Color.White), + style = MaterialTheme.typography.labelLarge.copy(color = Color.White), modifier = Modifier.align(Alignment.Bottom) ) } @@ -419,7 +446,7 @@ internal fun Counter(destinationsSize: Int, selectedDestination: Int, onItemSwip @Composable internal fun Line() { - Divider( + HorizontalDivider( modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 16.dp).fillMaxWidth() .background(TravelAppColors.SemiWhite) ) @@ -431,7 +458,7 @@ internal fun VisitingPlacesList(list: List, name: String) { items(list) { Text( it, - style = MaterialTheme.typography.body1.copy( + style = MaterialTheme.typography.bodyMedium.copy( color = if (it == name) Color.White else Color.White.copy( alpha = 0.7f ), fontWeight = if (it == name) FontWeight.SemiBold else FontWeight.Normal @@ -470,7 +497,6 @@ private fun LazyListState.visibleItemsWithThreshold(percentThreshold: Float): Li }.value } -@OptIn(ExperimentalResourceApi::class) @Composable internal fun SortDropDownMenu( sortContent: (SortOrder) -> Unit, @@ -500,32 +526,34 @@ internal fun SortDropDownMenu( modifier = Modifier.background( if (isSortByNameAsc) Color.Gray.copy(alpha = 0.3F) else Color.Transparent ), + text = { + Text( + "A-Z", + color = Color.Black, + ) + }, onClick = { sortContent(SortOrder.ASCENDING) expanded = false isSortByNameAsc = true } - ) { - Text( - "A-Z", - color = Color.Black, - ) - } + ) DropdownMenuItem( modifier = Modifier.background( if (!isSortByNameAsc) Color.Gray.copy(alpha = 0.3F) else Color.Transparent ), + text = { + Text( + "Z-A", + color = Color.Black, + ) + }, onClick = { sortContent(SortOrder.DESCENDING) expanded = false isSortByNameAsc = false } - ) { - Text( - "Z-A", - color = Color.Black, - ) - } + ) } } } \ No newline at end of file diff --git a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/screennavigation/Screen.kt b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/screennavigation/Screen.kt index a5f768c..6ca7ced 100644 --- a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/screennavigation/Screen.kt +++ b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/screennavigation/Screen.kt @@ -3,7 +3,7 @@ package com.example.travelapp_kmp.screennavigation import com.example.travelapp_kmp.listing.TouristPlace sealed interface Screen { - object MainScreen : Screen + data object MainScreen : Screen data class DetailScreen(val touristPlace: TouristPlace) : Screen }