feat: new components for profile

f-arslan · f-arslan · commit 47268662d9e3 · 2024-01-19T23:31:09.000+03:00
diff --git a/core/designsystem/src/main/kotlin/com/espressodev/gptmap/core/designsystem/GmIcons.kt b/core/designsystem/src/main/kotlin/com/espressodev/gptmap/core/designsystem/GmIcons.kt
@@ -1,34 +1,37 @@
 package com.espressodev.gptmap.core.designsystem
 
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.BrowseGallery
 import androidx.compose.material.icons.filled.Camera
 import androidx.compose.material.icons.filled.Clear
 import androidx.compose.material.icons.filled.Done
+import androidx.compose.material.icons.filled.Edit
 import androidx.compose.material.icons.filled.Favorite
 import androidx.compose.material.icons.filled.Fingerprint
 import androidx.compose.material.icons.filled.Image
 import androidx.compose.material.icons.filled.ImageSearch
 import androidx.compose.material.icons.filled.Person
 import androidx.compose.material.icons.filled.Screenshot
 import androidx.compose.material.icons.filled.Search
-import androidx.compose.material.icons.filled.Send
 import androidx.compose.material.icons.filled.Title
-import androidx.compose.material.icons.filled.TravelExplore
+import androidx.compose.material.icons.outlined.AccountCircle
 import androidx.compose.material.icons.outlined.ArrowBack
+import androidx.compose.material.icons.outlined.ArrowForwardIos
+import androidx.compose.material.icons.outlined.ArrowRight
 import androidx.compose.material.icons.outlined.Cancel
 import androidx.compose.material.icons.outlined.Email
 import androidx.compose.material.icons.outlined.Face
 import androidx.compose.material.icons.outlined.FavoriteBorder
+import androidx.compose.material.icons.outlined.Info
 import androidx.compose.material.icons.outlined.LocationCity
 import androidx.compose.material.icons.outlined.Lock
+import androidx.compose.material.icons.outlined.Logout
 import androidx.compose.material.icons.outlined.MarkEmailUnread
 import androidx.compose.material.icons.outlined.MyLocation
+import androidx.compose.material.icons.outlined.NavigateNext
 import androidx.compose.material.icons.outlined.Visibility
 import androidx.compose.material.icons.outlined.VisibilityOff
 
 object GmIcons {
-    val TravelExploreDefault = Icons.Default.TravelExplore
     val ClearDefault = Icons.Default.Clear
     val SearchDefault = Icons.Default.Search
     val FavouriteOutlined = Icons.Outlined.FavoriteBorder
@@ -41,6 +44,7 @@ object GmIcons {
     val EmailOutlined = Icons.Outlined.Email
     val MarkEmailUnreadOutlined = Icons.Outlined.MarkEmailUnread
     val ArrowBackOutlined = Icons.Outlined.ArrowBack
+    val ArrowRightDefault = Icons.Outlined.ArrowForwardIos
     val FingerPrintFilled = Icons.Filled.Fingerprint
     val LocationCityOutlined = Icons.Outlined.LocationCity
     val MyLocationOutlined = Icons.Outlined.MyLocation
@@ -49,7 +53,11 @@ object GmIcons {
     val ScreenshotDefault = Icons.Default.Screenshot
     val ImageSearchDefault = Icons.Default.ImageSearch
     val TitleDefault = Icons.Default.Title
-    val SendDefault = Icons.Default.Send
     val GalleryDefault = Icons.Default.Image
     val PersonDefault = Icons.Default.Person
+    val AccountCircleOutlined = Icons.Outlined.AccountCircle
+    val EditDefault = Icons.Default.Edit
+    val InfoOutlined = Icons.Outlined.Info
+    val LogoutOutlined = Icons.Outlined.Logout
+    val NavigateNextDefault = Icons.Outlined.NavigateNext
 }
diff --git a/core/designsystem/src/main/kotlin/com/espressodev/gptmap/core/designsystem/component/Button.kt b/core/designsystem/src/main/kotlin/com/espressodev/gptmap/core/designsystem/component/Button.kt
@@ -7,26 +7,36 @@ import androidx.compose.animation.core.VectorConverter
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.gestures.detectDragGestures
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
 import androidx.compose.material3.ElevatedButton
 import androidx.compose.material3.ExtendedFloatingActionButton
+import androidx.compose.material3.FilledTonalIconButton
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButtonColors
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.input.pointer.pointerInput
@@ -109,6 +119,26 @@ fun DefaultButton(
     }
 }
 
+@Composable
+fun GmTonalIconButton(
+    icon: ImageVector,
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.primaryContainer
+) {
+    Surface(
+        modifier = modifier
+            .size(40.dp)
+            .clip(CircleShape),
+        color = color
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = null,
+            modifier = Modifier.padding(6.dp)
+        )
+    }
+}
+
 @Composable
 fun GmDraggableButton(icon: ImageVector, modifier: Modifier = Modifier, onClick: () -> Unit = {}) {
     val localDensity = LocalDensity.current
@@ -202,6 +232,7 @@ fun SquareButton(
                     modifier = Modifier.size(32.dp)
                 )
             }
+
             is IconType.Vector -> {
                 Icon(
                     imageVector = icon.imageVector,
diff --git a/core/designsystem/src/main/kotlin/com/espressodev/gptmap/core/designsystem/component/ProgressIndicator.kt b/core/designsystem/src/main/kotlin/com/espressodev/gptmap/core/designsystem/component/ProgressIndicator.kt
@@ -60,6 +60,6 @@ fun LottieAnimationView(
 
 @Preview
 @Composable
-fun LottieAnimationParentPreview() {
+private fun LottieAnimationParentPreview() {
     LottieAnimationView(AppRaw.earth_orbit)
 }
diff --git a/core/designsystem/src/main/kotlin/com/espressodev/gptmap/core/designsystem/component/Shape.kt b/core/designsystem/src/main/kotlin/com/espressodev/gptmap/core/designsystem/component/Shape.kt
@@ -0,0 +1,70 @@
+package com.espressodev.gptmap.core.designsystem.component
+
+import androidx.compose.animation.core.LinearEasing
+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.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.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.draw.drawBehind
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.drawscope.rotate
+import androidx.compose.ui.unit.dp
+
+@Composable
+private fun shimmerColors(): Array<out Pair<Float, Color>> {
+    return arrayOf(
+        0.0f to MaterialTheme.colorScheme.primaryContainer,
+        0.4f to MaterialTheme.colorScheme.primary,
+        1f to MaterialTheme.colorScheme.primaryContainer
+    )
+}
+
+@Composable
+fun LetterInCircle(
+    letter: Char,
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.primaryContainer
+) {
+    val infiniteTransition = rememberInfiniteTransition(label = "Infinity Transition")
+    val rotationAnimation = infiniteTransition.animateFloat(
+        initialValue = 0f,
+        targetValue = 360f,
+        animationSpec = infiniteRepeatable(tween(3000, easing = LinearEasing)),
+        label = "Rotation Animation"
+    )
+    val colors = shimmerColors()
+    Surface(
+        modifier = modifier
+            .drawBehind {
+                rotate(rotationAnimation.value) {
+                    drawCircle(
+                        Brush.horizontalGradient(colorStops = colors),
+                        style = Stroke(4.dp.toPx())
+                    )
+                }
+            }
+            .padding(2.dp)
+            .clip(CircleShape),
+        color = color
+    ) {
+        Box(
+            contentAlignment = Alignment.Center,
+            modifier = Modifier.fillMaxSize()
+        ) {
+            Text(text = letter.uppercase(), style = MaterialTheme.typography.displayLarge)
+        }
+    }
+}
diff --git a/core/designsystem/src/main/kotlin/com/espressodev/gptmap/core/designsystem/component/TopAppBar.kt b/core/designsystem/src/main/kotlin/com/espressodev/gptmap/core/designsystem/component/TopAppBar.kt
@@ -25,23 +25,23 @@ import com.espressodev.gptmap.core.designsystem.R.string as AppText
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun GmTopAppBar(
-    textType: TextType,
+    text: TextType,
     icon: IconType,
     onBackClick: () -> Unit,
     modifier: Modifier = Modifier,
     scrollBehavior: TopAppBarScrollBehavior? = null,
 ) {
-    val text = when (textType) {
-        is TextType.Res -> stringResource(id = textType.textId)
-        is TextType.Text -> textType.text
+    val value = when (text) {
+        is TextType.Res -> stringResource(id = text.textId)
+        is TextType.Text -> text.text
     }
     TopAppBar(
         modifier = modifier,
         scrollBehavior = scrollBehavior,
         title = {
             Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
                 Text(
-                    text = text,
+                    text = value,
                     fontWeight = FontWeight.Medium,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis
@@ -62,15 +62,15 @@ fun GmTopAppBar(
                     Icon(
                         painter = painterResource(id = icon.painterId),
                         contentDescription = null,
-                        modifier = Modifier.padding(end = 8.dp),
+                        modifier = Modifier.padding(end = 12.dp),
                     )
                 }
 
                 is IconType.Vector -> {
                     Icon(
                         imageVector = icon.imageVector,
                         contentDescription = null,
-                        modifier = Modifier.padding(end = 8.dp),
+                        modifier = Modifier.padding(end = 12.dp),
                     )
                 }
             }
diff --git a/core/designsystem/src/main/res/values/strings.xml b/core/designsystem/src/main/res/values/strings.xml
@@ -42,6 +42,8 @@
     <string name="send">Send</string>
     <string name="message">Message</string>
     <string name="screenshot_gallery">Screenshot Gallery</string>
+    <string name="edit">Edit</string>
+    <string name="logout">Logout</string>
 
 
     <!-- Map -->
@@ -50,7 +52,7 @@
     <string name="street_view">Street View</string>
     <string name="add_favourite">Add to Favourite</string>
     <string name="discovering_your_dream_place">Discovering your dream place…</string>
-    <string name="info">Info</string>
+    <string name="info">Information</string>
     <string name="back_to_info">Back to Info</string>
     <string name="explore_with_ai">Explore more with AI</string>
 
@@ -93,7 +95,9 @@
     <!-- Street View -->
     <string name="street_view_loading_header">Preparing an immersive Street View experience for you!</string>
 
-
     <!-- Favourite -->
     <string name="favourite">Favourite</string>
+
+    <!-- Profile -->
+    <string name="profile_top_bar_header">Profile</string>
 </resources>

Original file line number	Diff line number	Diff line change
`@@ -60,6 +60,6 @@ fun LottieAnimationView(`
`60`	`60`
`61`	`61`	`@Preview`
`62`	`62`	`@Composable`
`63`		`-fun LottieAnimationParentPreview() {`
	`63`	`+private fun LottieAnimationParentPreview() {`
`64`	`64`	`LottieAnimationView(AppRaw.earth_orbit)`
`65`	`65`	`}`