Screenshot: https://screenshot.googleplex.com/3XqkTwJQwgfoPsT Change-Id: Iac7dc06c84523b4db8d05f538b74a08741d2c347pull/1837/head
Manuel Vivo
4 years ago
committed by
Don Turner
parent
8d4ab06983
commit
ca8fd5a4f3
@ -0,0 +1,189 @@
|
|||||||
|
/*
|
||||||
|
* Copyright 2022 The Android Open Source Project
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* https://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
package com.google.samples.apps.nowinandroid.feature.following
|
||||||
|
|
||||||
|
import androidx.compose.foundation.clickable
|
||||||
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.Row
|
||||||
|
import androidx.compose.foundation.layout.Spacer
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.layout.size
|
||||||
|
import androidx.compose.foundation.layout.width
|
||||||
|
import androidx.compose.material.Icon
|
||||||
|
import androidx.compose.material.MaterialTheme
|
||||||
|
import androidx.compose.material.Surface
|
||||||
|
import androidx.compose.material.icons.Icons.Filled
|
||||||
|
import androidx.compose.material.icons.filled.Android
|
||||||
|
import androidx.compose.material3.Text
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.graphics.Color
|
||||||
|
import androidx.compose.ui.res.stringResource
|
||||||
|
import androidx.compose.ui.tooling.preview.Preview
|
||||||
|
import androidx.compose.ui.unit.Dp
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import coil.compose.AsyncImage
|
||||||
|
import com.google.samples.apps.nowinandroid.core.ui.FollowButton
|
||||||
|
import com.google.samples.apps.nowinandroid.core.ui.theme.NiaTheme
|
||||||
|
import com.google.samples.apps.nowinandroid.feature.following.R.string
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun FollowingItem(
|
||||||
|
name: String,
|
||||||
|
following: Boolean,
|
||||||
|
topicImageUrl: String,
|
||||||
|
onClick: () -> Unit,
|
||||||
|
onFollowButtonClick: (Boolean) -> Unit,
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
iconModifier: Modifier = Modifier,
|
||||||
|
description: String = "",
|
||||||
|
itemSeparation: Dp = 16.dp
|
||||||
|
) {
|
||||||
|
Row(
|
||||||
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
|
modifier = modifier
|
||||||
|
) {
|
||||||
|
Row(
|
||||||
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
|
modifier = Modifier
|
||||||
|
.weight(1f)
|
||||||
|
.clickable { onClick() }
|
||||||
|
.padding(vertical = itemSeparation)
|
||||||
|
) {
|
||||||
|
FollowingIcon(topicImageUrl, iconModifier.size(64.dp))
|
||||||
|
Spacer(modifier = Modifier.width(16.dp))
|
||||||
|
InterestContent(name, description)
|
||||||
|
}
|
||||||
|
FollowButton(
|
||||||
|
following = following,
|
||||||
|
onFollowChange = onFollowButtonClick,
|
||||||
|
notFollowingContentDescription = stringResource(
|
||||||
|
id = string.interests_card_follow_button_content_desc
|
||||||
|
),
|
||||||
|
followingContentDescription = stringResource(
|
||||||
|
id = string.interests_card_unfollow_button_content_desc
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
private fun InterestContent(name: String, description: String, modifier: Modifier = Modifier) {
|
||||||
|
Column(modifier) {
|
||||||
|
Text(
|
||||||
|
text = name,
|
||||||
|
style = MaterialTheme.typography.h5,
|
||||||
|
modifier = Modifier.padding(
|
||||||
|
vertical = if (description.isEmpty()) 0.dp else 4.dp
|
||||||
|
)
|
||||||
|
)
|
||||||
|
if (description.isNotEmpty()) {
|
||||||
|
Text(
|
||||||
|
text = description,
|
||||||
|
style = MaterialTheme.typography.body2
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
private fun FollowingIcon(topicImageUrl: String, modifier: Modifier = Modifier) {
|
||||||
|
if (topicImageUrl.isEmpty()) {
|
||||||
|
Icon(
|
||||||
|
imageVector = Filled.Android,
|
||||||
|
tint = Color.Magenta,
|
||||||
|
contentDescription = null,
|
||||||
|
modifier = modifier
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
AsyncImage(
|
||||||
|
model = topicImageUrl,
|
||||||
|
contentDescription = null,
|
||||||
|
modifier = modifier
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview
|
||||||
|
@Composable
|
||||||
|
private fun FollowingCardPreview() {
|
||||||
|
NiaTheme {
|
||||||
|
Surface {
|
||||||
|
FollowingItem(
|
||||||
|
name = "Compose",
|
||||||
|
description = "Description",
|
||||||
|
following = false,
|
||||||
|
topicImageUrl = "",
|
||||||
|
onClick = { },
|
||||||
|
onFollowButtonClick = { }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview
|
||||||
|
@Composable
|
||||||
|
private fun FollowingCardLongNamePreview() {
|
||||||
|
NiaTheme {
|
||||||
|
Surface {
|
||||||
|
FollowingItem(
|
||||||
|
name = "This is a very very very very long name",
|
||||||
|
description = "Description",
|
||||||
|
following = true,
|
||||||
|
topicImageUrl = "",
|
||||||
|
onClick = { },
|
||||||
|
onFollowButtonClick = { }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview
|
||||||
|
@Composable
|
||||||
|
private fun FollowingCardLongDescriptionPreview() {
|
||||||
|
NiaTheme {
|
||||||
|
Surface {
|
||||||
|
FollowingItem(
|
||||||
|
name = "Compose",
|
||||||
|
description = "This is a very very very very very very very " +
|
||||||
|
"very very very long description",
|
||||||
|
following = false,
|
||||||
|
topicImageUrl = "",
|
||||||
|
onClick = { },
|
||||||
|
onFollowButtonClick = { }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview
|
||||||
|
@Composable
|
||||||
|
private fun FollowingCardWithEmptyDescriptionPreview() {
|
||||||
|
NiaTheme {
|
||||||
|
Surface {
|
||||||
|
FollowingItem(
|
||||||
|
name = "Compose",
|
||||||
|
description = "",
|
||||||
|
following = true,
|
||||||
|
topicImageUrl = "",
|
||||||
|
onClick = { },
|
||||||
|
onFollowButtonClick = { }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
/*
|
||||||
|
* Copyright 2022 The Android Open Source Project
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* https://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
package com.google.samples.apps.nowinandroid.feature.following
|
||||||
|
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.lazy.LazyColumn
|
||||||
|
import androidx.compose.foundation.shape.CircleShape
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.draw.clip
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import com.google.samples.apps.nowinandroid.core.model.data.FollowableAuthor
|
||||||
|
import com.google.samples.apps.nowinandroid.core.model.data.FollowableTopic
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun TopicsTabContent(
|
||||||
|
topics: List<FollowableTopic>,
|
||||||
|
onTopicClick: (Int) -> Unit,
|
||||||
|
onFollowButtonClick: (Int, Boolean) -> Unit,
|
||||||
|
modifier: Modifier = Modifier
|
||||||
|
) {
|
||||||
|
LazyColumn(
|
||||||
|
modifier = modifier.padding(horizontal = 16.dp)
|
||||||
|
) {
|
||||||
|
topics.forEach { followableTopic ->
|
||||||
|
item {
|
||||||
|
FollowingItem(
|
||||||
|
name = followableTopic.topic.name,
|
||||||
|
following = followableTopic.isFollowed,
|
||||||
|
description = followableTopic.topic.shortDescription,
|
||||||
|
topicImageUrl = followableTopic.topic.imageUrl,
|
||||||
|
onClick = { onTopicClick(followableTopic.topic.id) },
|
||||||
|
onFollowButtonClick = { onFollowButtonClick(followableTopic.topic.id, it) }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun AuthorsTabContent(
|
||||||
|
authors: List<FollowableAuthor>,
|
||||||
|
onAuthorClick: () -> Unit,
|
||||||
|
onFollowButtonClick: (Int, Boolean) -> Unit,
|
||||||
|
modifier: Modifier = Modifier
|
||||||
|
) {
|
||||||
|
LazyColumn(
|
||||||
|
modifier = modifier.padding(horizontal = 16.dp)
|
||||||
|
) {
|
||||||
|
authors.forEach { followableTopic ->
|
||||||
|
item {
|
||||||
|
FollowingItem(
|
||||||
|
name = followableTopic.author.name,
|
||||||
|
following = followableTopic.isFollowed,
|
||||||
|
topicImageUrl = followableTopic.author.imageUrl,
|
||||||
|
onClick = onAuthorClick,
|
||||||
|
onFollowButtonClick = { onFollowButtonClick(followableTopic.author.id, it) },
|
||||||
|
iconModifier = Modifier.clip(CircleShape)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue