Skip to content

Commit 07e962e

Browse files
f-arslanf-arslan
committed
refactor: components on map
1 parent 0926f87 commit 07e962e

File tree

4 files changed

+87
-76
lines changed

4 files changed

+87
-76
lines changed

‎core/designsystem/src/main/kotlin/com/espressodev/gptmap/core/designsystem/component/Shape.kt‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import androidx.compose.ui.graphics.Brush
2121
import androidx.compose.ui.graphics.Color
2222
import androidx.compose.ui.graphics.drawscope.Stroke
2323
import androidx.compose.ui.graphics.drawscope.rotate
24+
import androidx.compose.ui.text.TextStyle
25+
import androidx.compose.ui.unit.Dp
2426
import androidx.compose.ui.unit.dp
2527

2628
@Composable
@@ -36,7 +38,10 @@ private fun shimmerColors(): Array<out Pair<Float, Color>> {
3638
fun LetterInCircle(
3739
letter: Char,
3840
modifier: Modifier = Modifier,
39-
color: Color = MaterialTheme.colorScheme.primaryContainer
41+
color: Color = MaterialTheme.colorScheme.primaryContainer,
42+
textStyle: TextStyle = MaterialTheme.typography.displayLarge,
43+
strokeDp: Dp = 4.dp,
44+
paddingToAnim: Dp = 2.dp
4045
) {
4146
val infiniteTransition = rememberInfiniteTransition(label = "Infinity Transition")
4247
val rotationAnimation = infiniteTransition.animateFloat(
@@ -52,19 +57,19 @@ fun LetterInCircle(
5257
rotate(rotationAnimation.value) {
5358
drawCircle(
5459
Brush.horizontalGradient(colorStops = colors),
55-
style = Stroke(4.dp.toPx())
60+
style = Stroke(strokeDp.toPx())
5661
)
5762
}
5863
}
59-
.padding(2.dp)
64+
.padding(paddingToAnim)
6065
.clip(CircleShape),
61-
color = color
66+
color = color,
6267
) {
6368
Box(
6469
contentAlignment = Alignment.Center,
6570
modifier = Modifier.fillMaxSize()
6671
) {
67-
Text(text = letter.uppercase(), style = MaterialTheme.typography.displayLarge)
72+
Text(text = letter.uppercase(), style = textStyle)
6873
}
6974
}
7075
}

‎core/designsystem/src/main/kotlin/com/espressodev/gptmap/core/designsystem/component/TextField.kt‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,25 @@ package com.espressodev.gptmap.core.designsystem.component
22

33
import androidx.annotation.StringRes
44
import androidx.compose.foundation.layout.fillMaxWidth
5+
import androidx.compose.foundation.layout.padding
6+
import androidx.compose.foundation.layout.size
57
import androidx.compose.foundation.shape.RoundedCornerShape
68
import androidx.compose.foundation.text.KeyboardActions
79
import androidx.compose.foundation.text.KeyboardOptions
810
import androidx.compose.material3.Icon
911
import androidx.compose.material3.IconButton
12+
import androidx.compose.material3.MaterialTheme
1013
import androidx.compose.material3.OutlinedTextField
1114
import androidx.compose.material3.Text
15+
import androidx.compose.material3.TextFieldDefaults
1216
import androidx.compose.runtime.Composable
1317
import androidx.compose.runtime.derivedStateOf
1418
import androidx.compose.runtime.getValue
1519
import androidx.compose.runtime.mutableStateOf
1620
import androidx.compose.runtime.remember
1721
import androidx.compose.runtime.setValue
1822
import androidx.compose.ui.Modifier
23+
import androidx.compose.ui.graphics.Color
1924
import androidx.compose.ui.graphics.Shape
2025
import androidx.compose.ui.graphics.vector.ImageVector
2126
import androidx.compose.ui.res.stringResource
@@ -26,19 +31,20 @@ import androidx.compose.ui.text.input.VisualTransformation
2631
import androidx.compose.ui.text.style.TextOverflow
2732
import androidx.compose.ui.tooling.preview.Preview
2833
import androidx.compose.ui.unit.dp
29-
import com.espressodev.gptmap.core.designsystem.Constants.HIGH_PADDING
3034
import com.espressodev.gptmap.core.designsystem.Constants.MEDIUM_PADDING
3135
import com.espressodev.gptmap.core.designsystem.GmIcons
3236
import com.espressodev.gptmap.core.designsystem.R.string as AppText
3337

3438
@Composable
3539
fun MapTextField(
3640
value: String,
37-
textFieldEnabledState: Boolean,
3841
@StringRes placeholder: Int,
42+
userFirstChar: Char,
3943
onValueChange: (String) -> Unit,
44+
onSearchClick: () -> Unit,
45+
onAvatarClick: () -> Unit,
4046
modifier: Modifier = Modifier,
41-
shape: Shape = RoundedCornerShape(16.dp),
47+
shape: Shape = RoundedCornerShape(24.dp),
4248
) {
4349
val shouldShownClearIcon by remember(value) { derivedStateOf { value.isNotBlank() } }
4450

@@ -60,10 +66,30 @@ fun MapTextField(
6066
IconButton(onClick = { onValueChange("") }) {
6167
Icon(GmIcons.ClearDefault, stringResource(id = AppText.clear))
6268
}
69+
} else {
70+
IconButton(onClick = onAvatarClick) {
71+
LetterInCircle(
72+
letter = userFirstChar,
73+
textStyle = MaterialTheme.typography.titleLarge,
74+
modifier = Modifier.size(36.dp),
75+
strokeDp = 2.dp,
76+
paddingToAnim = 1.dp
77+
)
78+
}
6379
}
6480
},
65-
maxLines = 4,
66-
enabled = textFieldEnabledState
81+
leadingIcon = {
82+
Icon(imageVector = GmIcons.SearchDefault, contentDescription = null)
83+
},
84+
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
85+
keyboardActions = KeyboardActions { onSearchClick() },
86+
maxLines = 1,
87+
colors = TextFieldDefaults.colors(
88+
unfocusedIndicatorColor = Color.Transparent,
89+
focusedIndicatorColor = Color.Transparent,
90+
focusedContainerColor = MaterialTheme.colorScheme.tertiaryContainer,
91+
unfocusedContainerColor = MaterialTheme.colorScheme.tertiaryContainer
92+
)
6793
)
6894
}
6995

@@ -148,11 +174,13 @@ fun PasswordTextField(
148174
@Preview(showBackground = true)
149175
private fun TextFieldPreview() {
150176
MapTextField(
151-
value = "quam",
152-
textFieldEnabledState = true,
177+
value = "",
153178
placeholder = AppText.map_text_field_placeholder,
154179
onValueChange = {},
155-
modifier = Modifier,
156-
shape = RoundedCornerShape(HIGH_PADDING),
180+
onSearchClick = {},
181+
onAvatarClick = {},
182+
userFirstChar = 'F',
183+
modifier = Modifier.padding(8.dp),
184+
shape = RoundedCornerShape(32.dp),
157185
)
158186
}

‎core/designsystem/src/main/res/values/strings.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949

5050

5151
<!-- Map -->
52-
<string name="map_text_field_placeholder">Type anything…</string>
52+
<string name="map_text_field_placeholder">Search here</string>
5353
<string name="loading_dialog_text">Discovering your dream place…</string>
5454
<string name="street_view">Street View</string>
5555
<string name="add_favourite">Add to Favourite</string>

‎feature/map/src/main/kotlin/com/espressodev/gptmap/feature/map/MapScreen.kt‎

Lines changed: 39 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -18,26 +18,20 @@ import androidx.compose.foundation.layout.Spacer
1818
import androidx.compose.foundation.layout.fillMaxSize
1919
import androidx.compose.foundation.layout.fillMaxWidth
2020
import androidx.compose.foundation.layout.height
21-
import androidx.compose.foundation.layout.imePadding
22-
import androidx.compose.foundation.layout.navigationBarsPadding
2321
import androidx.compose.foundation.layout.padding
2422
import androidx.compose.foundation.layout.size
2523
import androidx.compose.foundation.layout.statusBarsPadding
2624
import androidx.compose.foundation.layout.width
2725
import androidx.compose.foundation.pager.HorizontalPager
2826
import androidx.compose.foundation.pager.rememberPagerState
2927
import androidx.compose.foundation.shape.RoundedCornerShape
30-
import androidx.compose.material3.BottomAppBar
31-
import androidx.compose.material3.CenterAlignedTopAppBar
32-
import androidx.compose.material3.ExperimentalMaterial3Api
3328
import androidx.compose.material3.Icon
3429
import androidx.compose.material3.IconButton
3530
import androidx.compose.material3.MaterialTheme
3631
import androidx.compose.material3.OutlinedButton
3732
import androidx.compose.material3.Scaffold
3833
import androidx.compose.material3.Surface
3934
import androidx.compose.material3.Text
40-
import androidx.compose.material3.TopAppBarDefaults
4135
import androidx.compose.runtime.Composable
4236
import androidx.compose.runtime.LaunchedEffect
4337
import androidx.compose.runtime.derivedStateOf
@@ -75,7 +69,6 @@ import com.espressodev.gptmap.core.designsystem.Constants.SMALL_PADDING
7569
import com.espressodev.gptmap.core.designsystem.GmIcons
7670
import com.espressodev.gptmap.core.designsystem.IconType
7771
import com.espressodev.gptmap.core.designsystem.component.LottieAnimationView
78-
import com.espressodev.gptmap.core.designsystem.component.MapSearchButton
7972
import com.espressodev.gptmap.core.designsystem.component.MapTextField
8073
import com.espressodev.gptmap.core.designsystem.component.ShimmerImage
8174
import com.espressodev.gptmap.core.designsystem.component.SquareButton
@@ -119,12 +112,12 @@ fun MapRoute(
119112
Scaffold(
120113
bottomBar = {
121114
if (uiState.bottomSearchState) {
122-
MapBottomBar(
115+
MapSearchBar(
123116
value = uiState.searchValue,
124-
isSearchButtonEnabled = uiState.searchButtonEnabledState,
125-
isTextFieldEnabled = uiState.searchTextFieldEnabledState,
117+
userFirstChar = 'F',
126118
onValueChange = { viewModel.onEvent(MapUiEvent.OnSearchValueChanged(it)) },
127119
onSearchClick = { viewModel.onEvent(MapUiEvent.OnSearchClick) },
120+
onAvatarClick = {}
128121
)
129122
}
130123
},
@@ -197,23 +190,26 @@ private fun MapScreen(
197190
}
198191
}
199192

200-
@OptIn(ExperimentalMaterial3Api::class)
201193
@Composable
202194
fun MapTopButtons(
203195
onFavouriteClick: () -> Unit,
204196
onScreenshotGalleryClick: () -> Unit,
205197
onAccountClick: () -> Unit,
206198
modifier: Modifier = Modifier
207199
) {
208-
CenterAlignedTopAppBar(
209-
title = { Text(text = "Gptmap", fontWeight = FontWeight.Medium) },
210-
navigationIcon = {
211-
GmIconButtonWithText(
212-
onClick = onAccountClick,
213-
icon = IconType.Vector(GmIcons.PersonDefault),
214-
)
215-
},
216-
actions = {
200+
Row(
201+
modifier = modifier
202+
.fillMaxWidth()
203+
.height(56.dp),
204+
verticalAlignment = Alignment.CenterVertically,
205+
horizontalArrangement = Arrangement.SpaceBetween
206+
) {
207+
GmIconButtonWithText(
208+
onClick = onAccountClick,
209+
icon = IconType.Vector(GmIcons.PersonDefault),
210+
)
211+
Text(text = "Gptmap", fontWeight = FontWeight.Medium)
212+
Row {
217213
GmIconButtonWithText(
218214
onClick = onFavouriteClick,
219215
icon = IconType.Vector(GmIcons.GalleryDefault),
@@ -222,12 +218,8 @@ fun MapTopButtons(
222218
onClick = onScreenshotGalleryClick,
223219
icon = IconType.Vector(GmIcons.ScreenshotDefault),
224220
)
225-
},
226-
modifier = modifier,
227-
colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
228-
containerColor = Color.Transparent
229-
)
230-
)
221+
}
222+
}
231223
}
232224

233225
@Composable
@@ -349,42 +341,26 @@ private fun ImageGallery(initialPage: Int, images: List<LocationImage>, onDismis
349341
}
350342

351343
@Composable
352-
private fun MapBottomBar(
353-
isTextFieldEnabled: Boolean,
354-
isSearchButtonEnabled: Boolean,
344+
private fun MapSearchBar(
355345
value: String,
346+
userFirstChar: Char,
356347
onValueChange: (String) -> Unit,
357348
onSearchClick: () -> Unit,
349+
onAvatarClick: () -> Unit,
358350
) {
359-
Surface(
351+
MapTextField(
352+
value = value,
353+
placeholder = AppText.map_text_field_placeholder,
354+
userFirstChar = userFirstChar,
355+
onValueChange = onValueChange,
356+
onSearchClick = onSearchClick,
357+
onAvatarClick = onAvatarClick,
360358
modifier = Modifier
361-
.height(80.dp)
362-
.imePadding()
363-
.navigationBarsPadding(),
364-
) {
365-
Row(
366-
modifier = Modifier
367-
.fillMaxWidth()
368-
.padding(horizontal = 8.dp),
369-
verticalAlignment = Alignment.CenterVertically,
370-
horizontalArrangement = Arrangement.Center
371-
) {
372-
MapTextField(
373-
value = value,
374-
textFieldEnabledState = isTextFieldEnabled,
375-
placeholder = AppText.map_text_field_placeholder,
376-
onValueChange = onValueChange,
377-
modifier = Modifier
378-
.fillMaxWidth()
379-
.weight(1f)
380-
)
381-
Spacer(modifier = Modifier.width(8.dp))
382-
MapSearchButton(
383-
buttonEnabledState = isSearchButtonEnabled,
384-
onClick = onSearchClick
385-
)
386-
}
387-
}
359+
.fillMaxWidth()
360+
.statusBarsPadding()
361+
.padding(8.dp),
362+
shape = RoundedCornerShape(36.dp)
363+
)
388364
}
389365

390366
@Composable
@@ -593,10 +569,12 @@ fun BoxScope.SmallInformationCard(
593569
@Composable
594570
fun MapPreview() {
595571
GptmapTheme {
596-
MapTopButtons(
597-
onFavouriteClick = {},
598-
onScreenshotGalleryClick = {},
599-
onAccountClick = {},
572+
MapSearchBar(
573+
value = "libris",
574+
userFirstChar = 'F',
575+
onValueChange = {},
576+
onSearchClick = {},
577+
{}
600578
)
601579
}
602580
}

0 commit comments

Comments
 (0)