Skip to content

Commit

Permalink
Refactor ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@muhxdan
muhxdan committed Dec 25, 2023
1 parent 1659b8f commit 8d8278e
Show file tree
Hide file tree
Showing 12 changed files with 484 additions and 135 deletions.
48 changes: 48 additions & 0 deletions app/src/main/java/com/salt/apps/moov/ui/components/detail/DetailGenre.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
package com.salt.apps.moov.ui.components.detail

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.salt.apps.moov.data.model.Movie
import com.salt.apps.moov.utilities.DataMapper

@Composable
fun DetailGenre(data: Movie, modifier: Modifier = Modifier) {
val genres = DataMapper.mapGenreIdToGenre(data.genreIds)
Box(
modifier = modifier
.fillMaxWidth()
) {
LazyRow(
modifier = modifier
.align(Alignment.Center)
) {
items(genres.take(3).size) { index ->
Card(
modifier = Modifier.padding(end = 10.dp),
) {
Text(
text = genres[index] ?: "N/A",
color = MaterialTheme.colorScheme.onPrimary,
style = MaterialTheme.typography.bodyMedium,
modifier = Modifier
.background(MaterialTheme.colorScheme.primary)
.padding(
horizontal = 15.dp,
vertical = 5.dp
),
)
}
}
}
}
}
91 changes: 91 additions & 0 deletions app/src/main/java/com/salt/apps/moov/ui/components/detail/DetailImage.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
package com.salt.apps.moov.ui.components.detail

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.salt.apps.moov.data.model.Movie
import com.salt.apps.moov.ui.components.ImageNetworkLoader
import com.salt.apps.moov.ui.screens.detail.DetailViewModel

@Composable
fun DetailImage(data: Movie, detailViewModel: DetailViewModel) {
var isFavorite by remember { mutableStateOf(false) }
Box(
modifier = Modifier
.height(340.dp)
) {
Box {
ImageNetworkLoader(
imageUrl = data.backdropPath ?: "",
voteAverage = 0f,
showVoteAverage = false,
modifier = Modifier
.fillMaxWidth()
.height(250.dp)
)

Spacer(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.BottomCenter)
.height(100.dp)
.background(
brush = Brush.verticalGradient(
colors = listOf(
Color.Transparent,
Color.White
),
),
)
)

}
Box(
modifier = Modifier.align(Alignment.BottomCenter)
) {
Card {
ImageNetworkLoader(
imageUrl = data.posterPath ?: "",
voteAverage = data.voteAverage?.toFloat() ?: 0f,
modifier = Modifier
.width(150.dp)
.height(200.dp)
)
}

Card(
modifier = Modifier
.align(Alignment.BottomEnd)
) {
ToggleFavorite(
isFavorite = data.isFavorite,
onToggle = {
isFavorite = it
detailViewModel.toggleFavorite(data.id, isFavorite)
}, modifier = Modifier
.size(45.dp)
.background(
color = MaterialTheme.colorScheme.background,
)
)
}
}
}

}
36 changes: 36 additions & 0 deletions app/src/main/java/com/salt/apps/moov/ui/components/detail/DetailMovieRow.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
package com.salt.apps.moov.ui.components.detail

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.salt.apps.moov.data.model.Movie

@Composable
fun DetailMovieRow(data: Movie) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
DetailColumn("Release date", data.releaseDate ?: "N/A")
DetailColumn("Language", data.originalLanguage)
DetailColumn("Votes", data.voteCount.toString())
}
}

@Composable
fun DetailColumn(title: String, value: String) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(4.dp)
) {
Text(title, style = MaterialTheme.typography.bodyMedium)
Text(value, style = MaterialTheme.typography.bodyMedium)
}
}
41 changes: 41 additions & 0 deletions app/src/main/java/com/salt/apps/moov/ui/components/detail/ToggleFavorite.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
package com.salt.apps.moov.ui.components.detail

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material3.Icon
import androidx.compose.material3.IconToggleButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

@Composable
fun ToggleFavorite(
modifier: Modifier = Modifier,
onToggle: (Boolean) -> Unit,
isFavorite: Boolean = false
) {
var isChecked by remember { mutableStateOf(isFavorite) }

IconToggleButton(
modifier = modifier,
checked = isChecked,
onCheckedChange = {
isChecked = it
onToggle(it)
}
) {
val icon = if (isChecked) Icons.Filled.Favorite else Icons.Filled.FavoriteBorder
val iconTint = if (isChecked) Color.Red else Color.Red

Icon(
imageVector = icon,
contentDescription = null,
tint = iconTint,
)
}
}
90 changes: 5 additions & 85 deletions app/src/main/java/com/salt/apps/moov/ui/components/main/MoovApp.kt
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,15 @@
package com.salt.apps.moov.ui.components.main

import androidx.compose.animation.AnimatedContentTransitionScope
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.navigation.NavHostController
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument
import com.salt.apps.moov.ui.navigation.MoovNavHost
import com.salt.apps.moov.ui.navigation.MoovScreen.DETAIL
import com.salt.apps.moov.ui.navigation.MoovScreen.FAVORITE
import com.salt.apps.moov.ui.navigation.MoovScreen.HOME
import com.salt.apps.moov.ui.screens.detail.DetailScreen
import com.salt.apps.moov.ui.screens.favorite.FavoriteScreen
import com.salt.apps.moov.ui.screens.home.HomeScreen

@Composable
fun MoovApp(
Expand All @@ -28,14 +18,8 @@ fun MoovApp(
val backStackEntry by navController.currentBackStackEntryAsState()
val currentScreen = backStackEntry?.destination?.route?.let { route ->
when (route) {
HOME.route -> {
HOME
}

"${DETAIL.route}/{movieId}" -> {
DETAIL
}

HOME.route -> HOME
"${DETAIL.route}/{movieId}" -> DETAIL
FAVORITE.route -> FAVORITE
else -> null
}
Expand All @@ -55,71 +39,7 @@ fun MoovApp(
)
},
content = { innerPadding ->
NavHost(
navController = navController,
startDestination = HOME.route,
modifier = Modifier.padding(innerPadding),
) {
composable(
route = HOME.route,
enterTransition = {
return@composable slideIntoContainer(
AnimatedContentTransitionScope.SlideDirection.Up, tween(500)
)
},
exitTransition = {
return@composable slideOutOfContainer(
AnimatedContentTransitionScope.SlideDirection.Start, tween(500)
)
},
popEnterTransition = {
return@composable slideIntoContainer(
AnimatedContentTransitionScope.SlideDirection.End, tween(500)
)
},
content = {
HomeScreen(
navController = navController,
)
}
)
composable(
route = "${DETAIL.route}/{movieId}",
arguments = listOf(
navArgument(name = "movieId") {
type = NavType.IntType
}
),
content = {
val movieId = backStackEntry?.arguments?.getInt("movieId")
DetailScreen(movieId = movieId)
}
)

composable(
route = FAVORITE.route,
enterTransition = {
return@composable slideIntoContainer(
AnimatedContentTransitionScope.SlideDirection.Start, tween(500)
)
},
exitTransition = {
return@composable slideOutOfContainer(
AnimatedContentTransitionScope.SlideDirection.End, tween(500)
)
},
popEnterTransition = {
return@composable slideIntoContainer(
AnimatedContentTransitionScope.SlideDirection.Start, tween(500)
)
},
content = {
FavoriteScreen(
navController = navController,
)
}
)
}
MoovNavHost(navController = navController, innerPadding = innerPadding)
}
)
}
}
Loading

0 comments on commit 8d8278e

Please sign in to comment.