Skip to content

Commit d43905d

Browse files
AdamGrzybkowskiAdamGrzybkowski
authored
Move the Upload Image button outside the border to match new designs (#612)
1 parent ae201ff commit d43905d

11 files changed

+195
-163
lines changed

‎gravatar-quickeditor/screenshotTests/roborazzi/com.gravatar.quickeditor.ui.avatarpicker.AvatarPickerTest.avatarPickerListLoaded.png

0 Bytes
Loading

‎gravatar-quickeditor/screenshotTests/roborazzi/com.gravatar.quickeditor.ui.avatarpicker.AvatarPickerTest.avatarPickerListLoadedDark.png

0 Bytes
Loading

‎gravatar-quickeditor/screenshotTests/roborazzi/com.gravatar.quickeditor.ui.components.AvatarsSectionTest.avatarPickerButtonDisabled.png

0 Bytes
Loading

‎gravatar-quickeditor/screenshotTests/roborazzi/com.gravatar.quickeditor.ui.components.AvatarsSectionTest.avatarPickerListEmpty.png

0 Bytes
Loading

‎gravatar-quickeditor/screenshotTests/roborazzi/com.gravatar.quickeditor.ui.components.AvatarsSectionTest.avatarPickerListLoaded.png

0 Bytes
Loading

‎gravatar-quickeditor/screenshotTests/roborazzi/com.gravatar.quickeditor.ui.components.AvatarsSectionTest.avatarPickerListLoadedDark.png

90 Bytes
Loading

‎gravatar-quickeditor/screenshotTests/roborazzi/com.gravatar.quickeditor.ui.components.AvatarsSectionTest.avatarPickerVerticalEmpty.png

41.2 KB
Loading

‎gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/components/HorizontalAvatarsSection.kt

+79-72
Original file line numberDiff line numberDiff line change
@@ -43,49 +43,52 @@ internal fun HorizontalAvatarsSection(
4343

4444
val sectionPadding = 16.dp
4545
Surface(
46-
modifier.border(
47-
width = 1.dp,
48-
color = MaterialTheme.colorScheme.surfaceContainerHighest,
49-
shape = RoundedCornerShape(8.dp),
50-
),
46+
modifier = modifier,
5147
) {
52-
Box {
53-
Column(
48+
Column {
49+
Box(
5450
modifier = Modifier
51+
.border(
52+
width = 1.dp,
53+
color = MaterialTheme.colorScheme.surfaceContainerHighest,
54+
shape = RoundedCornerShape(8.dp),
55+
)
5556
.padding(vertical = sectionPadding),
5657
) {
57-
QESectionTitle(
58-
title = stringResource(id = state.titleRes),
59-
modifier = Modifier
60-
.padding(horizontal = sectionPadding),
61-
)
62-
QESectionMessage(
63-
message = stringResource(R.string.gravatar_qe_avatar_picker_description),
64-
modifier = Modifier
65-
.padding(top = 4.dp)
66-
.padding(horizontal = sectionPadding),
67-
)
68-
if (state.avatars.isEmpty()) {
69-
ListEmptyStateBox()
70-
} else {
71-
LazyAvatarRow(
72-
avatars = state.avatars,
73-
onAvatarSelected = onAvatarSelected,
74-
onAvatarOptionClicked = onAvatarOptionClicked,
75-
horizontalArrangement = Arrangement.spacedBy(8.dp),
76-
modifier = Modifier.padding(vertical = 24.dp),
77-
state = listState,
78-
contentPadding = PaddingValues(horizontal = sectionPadding),
58+
Column {
59+
QESectionTitle(
60+
title = stringResource(id = state.titleRes),
61+
modifier = Modifier
62+
.padding(horizontal = sectionPadding),
63+
)
64+
QESectionMessage(
65+
message = stringResource(R.string.gravatar_qe_avatar_picker_description),
66+
modifier = Modifier
67+
.padding(top = 4.dp)
68+
.padding(horizontal = sectionPadding),
7969
)
70+
if (state.avatars.isEmpty()) {
71+
ListEmptyStateBox()
72+
} else {
73+
LazyAvatarRow(
74+
avatars = state.avatars,
75+
onAvatarSelected = onAvatarSelected,
76+
onAvatarOptionClicked = onAvatarOptionClicked,
77+
horizontalArrangement = Arrangement.spacedBy(8.dp),
78+
modifier = Modifier.padding(top = 24.dp),
79+
state = listState,
80+
contentPadding = PaddingValues(horizontal = sectionPadding),
81+
)
82+
}
8083
}
81-
UploadImageButton(
82-
onTakePhotoClick = onTakePhotoClick,
83-
onChoosePhotoClick = onChoosePhotoClick,
84-
enabled = state.uploadButtonEnabled,
85-
modifier = Modifier
86-
.padding(horizontal = sectionPadding),
87-
)
8884
}
85+
UploadImageButton(
86+
onTakePhotoClick = onTakePhotoClick,
87+
onChoosePhotoClick = onChoosePhotoClick,
88+
enabled = state.uploadButtonEnabled,
89+
modifier = Modifier
90+
.padding(start = sectionPadding, end = sectionPadding, top = 24.dp, bottom = 8.dp),
91+
)
8992
}
9093
}
9194
}
@@ -94,48 +97,52 @@ internal fun HorizontalAvatarsSection(
9497
@Preview(showBackground = true)
9598
private fun HorizontalAvatarSectionPreview() {
9699
GravatarTheme {
97-
HorizontalAvatarsSection(
98-
state = AvatarsSectionUiState(
99-
avatars = List(6) {
100-
AvatarUi.Uploaded(
101-
avatar = Avatar {
102-
imageUrl = URI.create("https://gravatar.com/avatar/test")
103-
imageId = it.toString()
104-
rating = Avatar.Rating.G
105-
altText = "alt"
106-
updatedDate = ""
107-
},
108-
isSelected = it == 0,
109-
isLoading = false,
110-
)
111-
},
112-
scrollToIndex = null,
113-
uploadButtonEnabled = true,
114-
avatarPickerContentLayout = AvatarPickerContentLayout.Vertical,
115-
),
116-
onTakePhotoClick = { },
117-
onChoosePhotoClick = { },
118-
onAvatarSelected = { },
119-
onAvatarOptionClicked = { _, _ -> },
120-
)
100+
Box(modifier = Modifier.padding(10.dp)) {
101+
HorizontalAvatarsSection(
102+
state = AvatarsSectionUiState(
103+
avatars = List(6) {
104+
AvatarUi.Uploaded(
105+
avatar = Avatar {
106+
imageUrl = URI.create("https://gravatar.com/avatar/test")
107+
imageId = it.toString()
108+
rating = Avatar.Rating.G
109+
altText = "alt"
110+
updatedDate = ""
111+
},
112+
isSelected = it == 0,
113+
isLoading = false,
114+
)
115+
},
116+
scrollToIndex = null,
117+
uploadButtonEnabled = true,
118+
avatarPickerContentLayout = AvatarPickerContentLayout.Vertical,
119+
),
120+
onTakePhotoClick = { },
121+
onChoosePhotoClick = { },
122+
onAvatarSelected = { },
123+
onAvatarOptionClicked = { _, _ -> },
124+
)
125+
}
121126
}
122127
}
123128

124129
@Composable
125130
@Preview(showBackground = true)
126131
private fun HorizontalAvatarSectionEmptyPreview() {
127132
GravatarTheme {
128-
HorizontalAvatarsSection(
129-
state = AvatarsSectionUiState(
130-
avatars = emptyList(),
131-
scrollToIndex = null,
132-
uploadButtonEnabled = true,
133-
avatarPickerContentLayout = AvatarPickerContentLayout.Vertical,
134-
),
135-
onTakePhotoClick = { },
136-
onChoosePhotoClick = { },
137-
onAvatarSelected = { },
138-
onAvatarOptionClicked = { _, _ -> },
139-
)
133+
Box(modifier = Modifier.padding(10.dp)) {
134+
HorizontalAvatarsSection(
135+
state = AvatarsSectionUiState(
136+
avatars = emptyList(),
137+
scrollToIndex = null,
138+
uploadButtonEnabled = true,
139+
avatarPickerContentLayout = AvatarPickerContentLayout.Vertical,
140+
),
141+
onTakePhotoClick = { },
142+
onChoosePhotoClick = { },
143+
onAvatarSelected = { },
144+
onAvatarOptionClicked = { _, _ -> },
145+
)
146+
}
140147
}
141148
}

‎gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/components/ListEmptyStateBox.kt

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ internal fun ListEmptyStateBox(modifier: Modifier = Modifier) {
1818
Image(
1919
modifier = Modifier
2020
.align(Alignment.Center)
21-
.padding(vertical = 24.dp),
21+
.padding(top = 24.dp),
2222
painter = painterResource(id = R.drawable.gravatar_face_image),
2323
contentDescription = stringResource(R.string.gravatar_qe_happy_face_image_content_description),
2424
)

0 commit comments

Comments
 (0)