From 564ddde7d048171b976e45301f854a823b0488f2 Mon Sep 17 00:00:00 2001 From: ufuomaisaac Date: Sat, 21 Oct 2023 13:47:35 +0100 Subject: [PATCH 01/11] genres_chips --- .../ui/scene/artist/ArtistScreen.kt | 42 ++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt index dd22169b..796df34f 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt @@ -5,16 +5,26 @@ import androidx.compose.animation.ExperimentalAnimationApi import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.with +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.lazy.LazyRow +import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect +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.layout.ContentScale +import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import com.efedaniel.spotifystats.core.ScreenState import com.efedaniel.spotifystats.domain.model.Artist @@ -23,6 +33,7 @@ import com.efedaniel.spotifystats.ui.proton.components.text.ProtonText import com.efedaniel.spotifystats.ui.proton.patterns.loader.ProtonLoader import com.efedaniel.spotifystats.ui.proton.theme.ProtonTheme import com.efedaniel.spotifystats.ui.proton.tokens.dimension.ProtonDimension +import kotlin.math.round @OptIn( ExperimentalAnimationApi::class @@ -83,4 +94,33 @@ fun ArtistSection( modifier = Modifier.padding(start = ProtonDimension.Spacing8) ) } -} \ No newline at end of file + + Spacer(modifier = Modifier.height(ProtonDimension.Spacing4)) + LazyRow() { + items(artist.genres) { item -> + Chip(item) + } + } +} + +@Composable +fun Chip(text: String) { + // You can customize the appearance of your chips here. + // This is a simple example with a colored background and padding. + Box( + modifier = Modifier.padding(4.dp) + .clip(shape = CircleShape), + contentAlignment = Alignment.Center, + content = { + Text( + text = text, + color = Color.White, + modifier = Modifier + .background(Color.Blue) + .padding(horizontal = 12.dp, vertical = 8.dp) + ) + } + ) +} + + From ed5f4615d65be0ff76e56b559fd5cab4d546118c Mon Sep 17 00:00:00 2001 From: ufuomaisaac Date: Sat, 21 Oct 2023 21:51:37 +0100 Subject: [PATCH 02/11] chip_0.2 --- .../ui/proton/components/chips/ProtonChips.kt | 33 +++++++++++++++++++ .../ui/scene/artist/ArtistScreen.kt | 23 +------------ 2 files changed, 34 insertions(+), 22 deletions(-) create mode 100644 app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt new file mode 100644 index 00000000..b2e001d6 --- /dev/null +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt @@ -0,0 +1,33 @@ +package com.efedaniel.spotifystats.ui.proton.components.chips + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +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.unit.dp + +@Composable +fun Chip(text: String) { + // You can customize the appearance of your chips here. + // This is a simple example with a colored background and padding. + Box( + modifier = Modifier.padding(4.dp) + .clip(shape = CircleShape), + contentAlignment = Alignment.Center, + content = { + Text( + text = text, + color = Color.White, + modifier = Modifier + .background(Color.Blue) + .padding(horizontal = 12.dp, vertical = 8.dp) + ) + } + ) +} diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt index 796df34f..f1855144 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt @@ -28,6 +28,7 @@ import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import com.efedaniel.spotifystats.core.ScreenState import com.efedaniel.spotifystats.domain.model.Artist +import com.efedaniel.spotifystats.ui.proton.components.chips.Chip import com.efedaniel.spotifystats.ui.proton.components.image.ProtonImage import com.efedaniel.spotifystats.ui.proton.components.text.ProtonText import com.efedaniel.spotifystats.ui.proton.patterns.loader.ProtonLoader @@ -102,25 +103,3 @@ fun ArtistSection( } } } - -@Composable -fun Chip(text: String) { - // You can customize the appearance of your chips here. - // This is a simple example with a colored background and padding. - Box( - modifier = Modifier.padding(4.dp) - .clip(shape = CircleShape), - contentAlignment = Alignment.Center, - content = { - Text( - text = text, - color = Color.White, - modifier = Modifier - .background(Color.Blue) - .padding(horizontal = 12.dp, vertical = 8.dp) - ) - } - ) -} - - From b193fb76e3baa5bca058c65d01e2f70a18e7608a Mon Sep 17 00:00:00 2001 From: ufuomaisaac Date: Sun, 22 Oct 2023 18:16:48 +0100 Subject: [PATCH 03/11] chip_0.2 --- .../ui/proton/components/chips/ProtonChips.kt | 24 ++++++------------- .../ui/scene/artist/ArtistScreen.kt | 10 +------- 2 files changed, 8 insertions(+), 26 deletions(-) diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt index b2e001d6..4b3fadb7 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt @@ -4,30 +4,20 @@ import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.OutlinedTextField import androidx.compose.material.Text +import androidx.compose.material3.SuggestionChip import androidx.compose.runtime.Composable 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.unit.dp +import com.efedaniel.spotifystats.ui.proton.tokens.color.ProtonColor @Composable -fun Chip(text: String) { - // You can customize the appearance of your chips here. - // This is a simple example with a colored background and padding. - Box( - modifier = Modifier.padding(4.dp) - .clip(shape = CircleShape), - contentAlignment = Alignment.Center, - content = { - Text( - text = text, - color = Color.White, - modifier = Modifier - .background(Color.Blue) - .padding(horizontal = 12.dp, vertical = 8.dp) - ) - } - ) +fun Chip(genre: String) { + SuggestionChip(modifier = Modifier.padding((4.dp)), + onClick = { /*TODO*/ }, + label = { Text( text = genre, color = ProtonColor.White)}) } diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt index f1855144..66e6f252 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt @@ -5,8 +5,6 @@ import androidx.compose.animation.ExperimentalAnimationApi import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.with -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.aspectRatio @@ -15,16 +13,10 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.items -import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect -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.layout.ContentScale -import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import com.efedaniel.spotifystats.core.ScreenState import com.efedaniel.spotifystats.domain.model.Artist @@ -34,7 +26,7 @@ import com.efedaniel.spotifystats.ui.proton.components.text.ProtonText import com.efedaniel.spotifystats.ui.proton.patterns.loader.ProtonLoader import com.efedaniel.spotifystats.ui.proton.theme.ProtonTheme import com.efedaniel.spotifystats.ui.proton.tokens.dimension.ProtonDimension -import kotlin.math.round + @OptIn( ExperimentalAnimationApi::class From 582c62bd02137de0d5cb4b5f2fc8678cc6a95076 Mon Sep 17 00:00:00 2001 From: ufuomaisaac Date: Sun, 22 Oct 2023 18:24:50 +0100 Subject: [PATCH 04/11] chip_0.3 --- .../spotifystats/ui/proton/components/chips/ProtonChips.kt | 1 + 1 file changed, 1 insertion(+) diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt index 4b3fadb7..9c2c8528 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt @@ -17,6 +17,7 @@ import com.efedaniel.spotifystats.ui.proton.tokens.color.ProtonColor @Composable fun Chip(genre: String) { + SuggestionChip(modifier = Modifier.padding((4.dp)), onClick = { /*TODO*/ }, label = { Text( text = genre, color = ProtonColor.White)}) From ea8ff640909835f6ff576972499671adc0c2ab1a Mon Sep 17 00:00:00 2001 From: ufuomaisaac Date: Mon, 23 Oct 2023 03:58:41 +0100 Subject: [PATCH 05/11] chip_0.5 --- .../ui/proton/components/chips/ProtonChips.kt | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt index 9c2c8528..b3453aa0 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt @@ -12,13 +12,20 @@ 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.graphics.Shape import androidx.compose.ui.unit.dp import com.efedaniel.spotifystats.ui.proton.tokens.color.ProtonColor @Composable -fun Chip(genre: String) { +fun Chip(text: String, + textColor : Color = ProtonColor.White, + onclick : () -> Unit = {}, + shape: Shape = CircleShape + +) { SuggestionChip(modifier = Modifier.padding((4.dp)), - onClick = { /*TODO*/ }, - label = { Text( text = genre, color = ProtonColor.White)}) + onClick = onclick, + label = { Text( text = text, color = textColor)}, + shape = shape) } From cab6339c0e9d571f3e5ccabbf07f385dbafad60e Mon Sep 17 00:00:00 2001 From: ufuomaisaac Date: Mon, 23 Oct 2023 13:31:46 +0100 Subject: [PATCH 06/11] generic_chip 0.1 --- .../ui/proton/components/chips/ProtonChips.kt | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt index b3453aa0..52b6ab43 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt @@ -12,6 +12,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.graphics.RectangleShape import androidx.compose.ui.graphics.Shape import androidx.compose.ui.unit.dp import com.efedaniel.spotifystats.ui.proton.tokens.color.ProtonColor @@ -20,11 +21,10 @@ import com.efedaniel.spotifystats.ui.proton.tokens.color.ProtonColor fun Chip(text: String, textColor : Color = ProtonColor.White, onclick : () -> Unit = {}, - shape: Shape = CircleShape - - + shape: Shape = CircleShape, + modifier : Modifier = Modifier.padding(4.dp) ) { - SuggestionChip(modifier = Modifier.padding((4.dp)), + SuggestionChip(modifier = modifier, onClick = onclick, label = { Text( text = text, color = textColor)}, shape = shape) From c60d64e9dee31fbf708d005b5a485e7df71c7185 Mon Sep 17 00:00:00 2001 From: ufuomaisaac Date: Mon, 23 Oct 2023 14:29:07 +0100 Subject: [PATCH 07/11] generic_chip 0.2 --- .../ui/proton/components/chips/ProtonChips.kt | 28 +++++++++++++++++-- .../ui/scene/artist/ArtistScreen.kt | 2 +- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt index 52b6ab43..afd80bf8 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt @@ -1,13 +1,20 @@ package com.efedaniel.spotifystats.ui.proton.components.chips import androidx.compose.foundation.background +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.ChipColors +import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.OutlinedTextField import androidx.compose.material.Text +import androidx.compose.material3.ChipBorder +import androidx.compose.material3.ChipElevation import androidx.compose.material3.SuggestionChip +import androidx.compose.material3.SuggestionChipDefaults import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip @@ -17,15 +24,30 @@ import androidx.compose.ui.graphics.Shape import androidx.compose.ui.unit.dp import com.efedaniel.spotifystats.ui.proton.tokens.color.ProtonColor +@OptIn(ExperimentalMaterialApi::class) @Composable -fun Chip(text: String, +fun Chip( + modifier : Modifier = Modifier.padding(4.dp), + text: String, textColor : Color = ProtonColor.White, onclick : () -> Unit = {}, shape: Shape = CircleShape, - modifier : Modifier = Modifier.padding(4.dp) + enabled : Boolean = false, + icon: @Composable() (() -> Unit)? = null, + colors: androidx.compose.material3.ChipColors = SuggestionChipDefaults.suggestionChipColors(), + elevation: ChipElevation? = SuggestionChipDefaults.suggestionChipElevation(), + border: ChipBorder? = SuggestionChipDefaults.suggestionChipBorder(), + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } + ) { SuggestionChip(modifier = modifier, onClick = onclick, label = { Text( text = text, color = textColor)}, - shape = shape) + shape = shape, + enabled = enabled, + icon = icon, + colors = colors, + elevation = elevation, + border = border, + interactionSource = interactionSource) } diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt index 66e6f252..926732e2 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt @@ -91,7 +91,7 @@ fun ArtistSection( Spacer(modifier = Modifier.height(ProtonDimension.Spacing4)) LazyRow() { items(artist.genres) { item -> - Chip(item) + Chip(text = item) } } } From a3841407be73734af520ec0a97a8c64b2c025a2e Mon Sep 17 00:00:00 2001 From: ufuomaisaac Date: Sun, 3 Dec 2023 02:23:41 +0100 Subject: [PATCH 08/11] shimmer_effect_IP --- .../ui/scene/topartist/TopArtistScreen.kt | 51 ++++++++++++++++++- 1 file changed, 50 insertions(+), 1 deletion(-) diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt index c0d02858..34801010 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt @@ -2,6 +2,11 @@ package com.efedaniel.spotifystats.ui.scene.topartist import androidx.compose.animation.AnimatedContent import androidx.compose.animation.ExperimentalAnimationApi +import androidx.compose.animation.core.RepeatMode +import androidx.compose.animation.core.animateFloat +import androidx.compose.animation.core.infiniteRepeatable +import androidx.compose.animation.core.rememberInfiniteTransition +import androidx.compose.animation.core.tween import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.with @@ -14,10 +19,12 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.FlowRow import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.requiredHeight +import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.foundation.lazy.grid.items @@ -35,10 +42,13 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.layout.onGloballyPositioned import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.navigation.NavHostController import com.efedaniel.spotifystats.core.ScreenState @@ -102,8 +112,11 @@ fun TopArtistScreen( ) { when(it) { ScreenState.LOADING -> { + repeat(7) { + shimmerCardItems(brush = shimmerBrush()) + } // FixMe: Replace with shimmer effect loading - ProtonLoader() + //ProtonLoader() } ScreenState.SUCCESS -> { TopArtistContent( @@ -204,3 +217,39 @@ private fun TopArtistCard( } } } + +@Composable +fun shimmerBrush(showShimmer: Boolean = true,targetValue:Float = 1000f): Brush { + + val shimmerColors = listOf( + Color.Blue.copy(alpha = 0.6f), + Color.Yellow.copy(alpha = 0.2f), + Color.Red.copy(alpha = 0.6f), + /* Color.LightGray.copy(alpha = 0.6f), + Color.LightGray.copy(alpha = 0.2f), + Color.LightGray.copy(alpha = 0.6f),*/ + ) + + val transition = rememberInfiniteTransition() + val translateAnimation = transition.animateFloat( + initialValue = 0f, + targetValue = targetValue, + animationSpec = infiniteRepeatable( + animation = tween(800), + repeatMode = RepeatMode.Reverse + ) + ) + return Brush.linearGradient( + colors = shimmerColors, + start = Offset.Zero, + end = Offset(x = translateAnimation.value, y = translateAnimation.value) + ) +} + +@Composable +fun shimmerCardItems(modifier: Modifier = Modifier, brush: Brush) { + Spacer( modifier = modifier + .size(200.dp) + .background(brush = brush)) +} + From 337a828278ad801b8c894bfa643d5d08178e8ac3 Mon Sep 17 00:00:00 2001 From: ufuomaisaac Date: Fri, 8 Dec 2023 02:11:51 +0100 Subject: [PATCH 09/11] added topArtist's shimmer effect loading --- .../patterns/loader/ProtonShimmerBrush.kt | 37 ++++++++++++++ .../ui/scene/topartist/TopArtistScreen.kt | 51 +++++++------------ 2 files changed, 55 insertions(+), 33 deletions(-) create mode 100644 app/src/main/java/com/efedaniel/spotifystats/ui/proton/patterns/loader/ProtonShimmerBrush.kt diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/patterns/loader/ProtonShimmerBrush.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/patterns/loader/ProtonShimmerBrush.kt new file mode 100644 index 00000000..97a741bb --- /dev/null +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/patterns/loader/ProtonShimmerBrush.kt @@ -0,0 +1,37 @@ +package com.efedaniel.spotifystats.ui.proton.patterns.loader + +import androidx.compose.animation.core.RepeatMode +import androidx.compose.animation.core.animateFloat +import androidx.compose.animation.core.infiniteRepeatable +import androidx.compose.animation.core.rememberInfiniteTransition +import androidx.compose.animation.core.tween +import androidx.compose.runtime.Composable +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color + +@Composable +fun shimmerBrush(showShimmer: Boolean = true, targetValue:Float = 1000f): Brush { + + val shimmerColors = listOf( + Color.LightGray.copy(alpha = 0.6f), + Color.LightGray.copy(alpha = 0.2f), + Color.LightGray.copy(alpha = 0.6f), + ) + + val transition = rememberInfiniteTransition() + val translateAnimation = transition.animateFloat( + initialValue = 0f, + targetValue = targetValue, + animationSpec = infiniteRepeatable( + animation = tween(800), + repeatMode = RepeatMode.Reverse + ), + label = "" + ) + return Brush.linearGradient( + colors = shimmerColors, + start = Offset.Zero, + end = Offset(x = translateAnimation.value, y = translateAnimation.value) + ) +} diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt index 34801010..d17d09df 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt @@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.requiredHeight import androidx.compose.foundation.layout.size @@ -57,6 +58,7 @@ import com.efedaniel.spotifystats.domain.model.TopArtist import com.efedaniel.spotifystats.ui.proton.components.image.ProtonImage import com.efedaniel.spotifystats.ui.proton.components.text.ProtonText import com.efedaniel.spotifystats.ui.proton.patterns.loader.ProtonLoader +import com.efedaniel.spotifystats.ui.proton.patterns.loader.shimmerBrush import com.efedaniel.spotifystats.ui.proton.theme.ProtonTheme import com.efedaniel.spotifystats.ui.proton.tokens.dimension.ProtonDimension import com.efedaniel.spotifystats.ui.scene.topartist.TopArtistEvent.ArtistClick @@ -112,9 +114,10 @@ fun TopArtistScreen( ) { when(it) { ScreenState.LOADING -> { - repeat(7) { - shimmerCardItems(brush = shimmerBrush()) + Column { + } + TopArtistShimmerScreen(brush = shimmerBrush()) // FixMe: Replace with shimmer effect loading //ProtonLoader() } @@ -218,38 +221,20 @@ private fun TopArtistCard( } } -@Composable -fun shimmerBrush(showShimmer: Boolean = true,targetValue:Float = 1000f): Brush { - - val shimmerColors = listOf( - Color.Blue.copy(alpha = 0.6f), - Color.Yellow.copy(alpha = 0.2f), - Color.Red.copy(alpha = 0.6f), - /* Color.LightGray.copy(alpha = 0.6f), - Color.LightGray.copy(alpha = 0.2f), - Color.LightGray.copy(alpha = 0.6f),*/ - ) - - val transition = rememberInfiniteTransition() - val translateAnimation = transition.animateFloat( - initialValue = 0f, - targetValue = targetValue, - animationSpec = infiniteRepeatable( - animation = tween(800), - repeatMode = RepeatMode.Reverse - ) - ) - return Brush.linearGradient( - colors = shimmerColors, - start = Offset.Zero, - end = Offset(x = translateAnimation.value, y = translateAnimation.value) - ) -} @Composable -fun shimmerCardItems(modifier: Modifier = Modifier, brush: Brush) { - Spacer( modifier = modifier - .size(200.dp) - .background(brush = brush)) +fun TopArtistShimmerScreen(modifier: Modifier = Modifier, brush: Brush) { + + Column { + repeat(3) { + Spacer( modifier = Modifier + .fillMaxWidth() + .padding(all = ProtonDimension.Spacing8) + .clip(RoundedCornerShape(ProtonDimension.Corner8)) + .requiredHeight(ProtonDimension.ComponentSize200) + .size(ProtonDimension.ComponentSize200) + .background(brush = brush)) + } + } } From b45ff6849daa0686982a9770f16c65df9c5b368b Mon Sep 17 00:00:00 2001 From: ufuomaisaac Date: Fri, 8 Dec 2023 02:22:24 +0100 Subject: [PATCH 10/11] artist's genreChip removed --- .../ui/proton/components/chips/ProtonChips.kt | 53 ------------------- .../ui/scene/artist/ArtistScreen.kt | 7 --- 2 files changed, 60 deletions(-) delete mode 100644 app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt deleted file mode 100644 index afd80bf8..00000000 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/proton/components/chips/ProtonChips.kt +++ /dev/null @@ -1,53 +0,0 @@ -package com.efedaniel.spotifystats.ui.proton.components.chips - -import androidx.compose.foundation.background -import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.shape.CircleShape -import androidx.compose.material.ChipColors -import androidx.compose.material.ExperimentalMaterialApi -import androidx.compose.material.OutlinedTextField -import androidx.compose.material.Text -import androidx.compose.material3.ChipBorder -import androidx.compose.material3.ChipElevation -import androidx.compose.material3.SuggestionChip -import androidx.compose.material3.SuggestionChipDefaults -import androidx.compose.runtime.Composable -import androidx.compose.runtime.remember -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.graphics.RectangleShape -import androidx.compose.ui.graphics.Shape -import androidx.compose.ui.unit.dp -import com.efedaniel.spotifystats.ui.proton.tokens.color.ProtonColor - -@OptIn(ExperimentalMaterialApi::class) -@Composable -fun Chip( - modifier : Modifier = Modifier.padding(4.dp), - text: String, - textColor : Color = ProtonColor.White, - onclick : () -> Unit = {}, - shape: Shape = CircleShape, - enabled : Boolean = false, - icon: @Composable() (() -> Unit)? = null, - colors: androidx.compose.material3.ChipColors = SuggestionChipDefaults.suggestionChipColors(), - elevation: ChipElevation? = SuggestionChipDefaults.suggestionChipElevation(), - border: ChipBorder? = SuggestionChipDefaults.suggestionChipBorder(), - interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } - -) { - SuggestionChip(modifier = modifier, - onClick = onclick, - label = { Text( text = text, color = textColor)}, - shape = shape, - enabled = enabled, - icon = icon, - colors = colors, - elevation = elevation, - border = border, - interactionSource = interactionSource) -} diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt index 926732e2..83e0a248 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/artist/ArtistScreen.kt @@ -20,7 +20,6 @@ import androidx.compose.ui.layout.ContentScale import androidx.hilt.navigation.compose.hiltViewModel import com.efedaniel.spotifystats.core.ScreenState import com.efedaniel.spotifystats.domain.model.Artist -import com.efedaniel.spotifystats.ui.proton.components.chips.Chip import com.efedaniel.spotifystats.ui.proton.components.image.ProtonImage import com.efedaniel.spotifystats.ui.proton.components.text.ProtonText import com.efedaniel.spotifystats.ui.proton.patterns.loader.ProtonLoader @@ -88,10 +87,4 @@ fun ArtistSection( ) } - Spacer(modifier = Modifier.height(ProtonDimension.Spacing4)) - LazyRow() { - items(artist.genres) { item -> - Chip(text = item) - } - } } From 9c034790399d7045ae6d49375c742209516bd61e Mon Sep 17 00:00:00 2001 From: ufuomaisaac Date: Sat, 9 Dec 2023 00:02:37 +0100 Subject: [PATCH 11/11] shimmerScreen updated --- .../ui/scene/topartist/TopArtistScreen.kt | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt index d17d09df..c2d2c2e0 100644 --- a/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt +++ b/app/src/main/java/com/efedaniel/spotifystats/ui/scene/topartist/TopArtistScreen.kt @@ -225,15 +225,21 @@ private fun TopArtistCard( @Composable fun TopArtistShimmerScreen(modifier: Modifier = Modifier, brush: Brush) { - Column { - repeat(3) { - Spacer( modifier = Modifier - .fillMaxWidth() - .padding(all = ProtonDimension.Spacing8) - .clip(RoundedCornerShape(ProtonDimension.Corner8)) - .requiredHeight(ProtonDimension.ComponentSize200) - .size(ProtonDimension.ComponentSize200) - .background(brush = brush)) + Column() { + LazyVerticalGrid( + columns = GridCells.Adaptive(minSize = ProtonDimension.ComponentSize200), + modifier = modifier + ) { + items( + items = List(30, {0}) + ) { item -> + Spacer( modifier = Modifier + .padding(all = ProtonDimension.Spacing8) + .clip(RoundedCornerShape(ProtonDimension.Corner8)) + .requiredHeight(ProtonDimension.ComponentSize200) + .size(ProtonDimension.ComponentSize200) + .background(brush = brush)) + } } } }