Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…ckCompose into pr_chat_screen_enhancements

� Conflicts:
�	app/src/main/java/dev/baseio/discordjetpackcompose/ui/routes/dashboard/main/chatscreen/ChatScreen.kt
  • Loading branch information
pushpalroy committed Jul 20, 2022
2 parents 6c2bbb9 + 2709028 commit ae04609
Show file tree
Hide file tree
Showing 9 changed files with 413 additions and 93 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
Expand Down Expand Up @@ -139,10 +140,10 @@ fun FriendsScreen(
}

@Composable
fun Header(title: Int, size: Int) {
fun Header(title: Int, size: Int, style: TextStyle = DirectMessageListTypography.h5) {
Text(
text = stringResource(title, size),
style = DirectMessageListTypography.h5,
style = style,
color = DiscordColorProvider.colors.onSurface.copy(alpha = ContentAlpha.medium)
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,7 @@ import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.material.ContentAlpha
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.FractionalThreshold
import androidx.compose.material.ModalBottomSheetState
import androidx.compose.material.SwipeableState
import androidx.compose.material.rememberSwipeableState
import androidx.compose.material.swipeable
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.SideEffect
Expand All @@ -45,10 +39,12 @@ import dev.baseio.discordjetpackcompose.entities.ChatUserEntity
import dev.baseio.discordjetpackcompose.entities.server.ServerEntity
import dev.baseio.discordjetpackcompose.navigator.ComposeNavigator
import dev.baseio.discordjetpackcompose.navigator.DiscordScreen
import dev.baseio.discordjetpackcompose.ui.routes.dashboard.main.chatscreen.ChannelMemberScreen
import dev.baseio.discordjetpackcompose.ui.routes.dashboard.main.chatscreen.ChatScreen
import dev.baseio.discordjetpackcompose.ui.routes.dashboard.main.dasboard.getFakeChatUserList
import dev.baseio.discordjetpackcompose.ui.routes.dashboard.main.dasboard.getFakeServerList
import dev.baseio.discordjetpackcompose.ui.theme.DiscordColorProvider
import dev.baseio.discordjetpackcompose.ui.theme.channel_member_bg
import dev.baseio.discordjetpackcompose.viewmodels.DashboardScreenViewModel
import kotlinx.coroutines.CoroutineScope
import kotlin.math.roundToInt
Expand Down Expand Up @@ -131,9 +127,9 @@ fun HomeScreen(

val leftDrawerModifier by remember(drawerOnTop, isAnyItemSelectedInServers) {
mutableStateOf(
swipeableModifier
.zIndex(if (drawerOnTop == DrawerTypes.LEFT) 1f else 0f)
.alpha(if (drawerOnTop == DrawerTypes.LEFT) 1f else 0f)
swipeableModifier
.zIndex(if (drawerOnTop == DrawerTypes.LEFT) 1f else 0f)
.alpha(if (drawerOnTop == DrawerTypes.LEFT) 1f else 0f)
)
}

Expand Down Expand Up @@ -190,13 +186,16 @@ fun HomeScreen(
openServerInfoBottomSheet = { coroutineScope.launch { sheetState.show() } },
viewModel = viewModel
)
Box(
ChannelMemberScreen(
modifier = rightDrawerModifier
.fillMaxHeight()
.fillMaxWidth(0.85f)
.background(Color.Cyan)
.align(Alignment.CenterEnd)
) {}
.background(channel_member_bg)
.align(Alignment.CenterEnd),
onInviteButtonClicked = {
composeNavigator.navigate(DiscordScreen.Invite.route)
}
)

val centerScreenZIndex by remember {
derivedStateOf {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,271 @@
package dev.baseio.discordjetpackcompose.ui.routes.dashboard.main.chatscreen


import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Divider
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material.icons.filled.PushPin
import androidx.compose.material.icons.filled.Settings
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import coil.compose.AsyncImage
import coil.request.ImageRequest
import dev.baseio.discordjetpackcompose.R
import dev.baseio.discordjetpackcompose.entities.ChatUserEntity
import dev.baseio.discordjetpackcompose.ui.routes.dashboard.components.OnlineIndicator
import dev.baseio.discordjetpackcompose.ui.routes.dashboard.friends.Header
import dev.baseio.discordjetpackcompose.ui.theme.*
import dev.baseio.discordjetpackcompose.viewmodels.FriendsViewModel

@Composable
fun ChannelMemberScreen(
modifier: Modifier,
onInviteButtonClicked: () -> Unit,
viewModel: FriendsViewModel = hiltViewModel()
) {

val friendsList by viewModel.friendsList.collectAsState()
val friends by friendsList.collectAsState(initial = emptyList())

val onlineList = friends.filter {
it.isOnline
}

val offlineList = friends.filter {
!it.isOnline
}

Column(
modifier = modifier,
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.Top
) {
ChannelHeaderText()
Divider(
color = channel_member_secondary_bg,
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(create_server_screen)
)
ChannelMemberActions()
InviteMembers(onInviteButtonClicked)
ChannelMembersList(offlineList, onlineList)
}
}

@Composable
fun ChannelHeaderText() {
Text(
text = stringResource(id = R.string.channel_header), modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
style = Typography.h5.copy(
fontWeight = FontWeight.SemiBold
),
color = DiscordColorProvider.colors.onSurface
)
}

@Composable
fun ChannelMemberActions() {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 8.dp)
.background(channel_member_bg),
horizontalArrangement = Arrangement.SpaceEvenly,
verticalAlignment = Alignment.CenterVertically
) {
ActionIcons(
label = stringResource(id = R.string.threads),
painterResource = R.drawable.ic_hashtag_solid,
icon = null
)
ActionIcons(Icons.Filled.PushPin, stringResource(id = R.string.pins), null)
ActionIcons(Icons.Filled.Notifications, stringResource(id = R.string.notifications), null)
ActionIcons(Icons.Filled.Settings, stringResource(id = R.string.settings), null)
}
}

@Composable
fun ActionIcons(
icon: ImageVector?,
label: String,
painterResource: Int?
) {
if (icon != null) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Icon(
icon,
contentDescription = label,
modifier = Modifier.size(18.dp),
tint = channel_member_action_icon
)
Spacer(modifier = Modifier.height(4.dp))
ActionIconLabel(label = label)
}
} else if (painterResource != null) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Icon(
painterResource(id = painterResource),
contentDescription = label,
modifier = Modifier.size(18.dp),
tint = channel_member_action_icon
)
Spacer(modifier = Modifier.height(4.dp))
ActionIconLabel(label = label)
}
}
}

@Composable
fun InviteMembers(onInviteButtonClicked: () -> Unit) {
Row(
modifier = Modifier
.fillMaxWidth()
.background(channel_member_secondary_bg)
.clickable {
onInviteButtonClicked()
}
.padding(16.dp),

horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically
) {
Icon(
painterResource(id = R.drawable.ic_baseline_person_add_alt_1_24),
contentDescription = stringResource(id = R.string.invite_members),
modifier = Modifier
.size(32.dp)
.clip(CircleShape)
.background(channel_member_bg)
.padding(6.dp),
tint = channel_member_action_icon
)
Spacer(modifier = Modifier.width(16.dp))
Text(
text = stringResource(id = R.string.invite_members),
color = DiscordColorProvider.colors.onSurface,
style = Typography.subtitle2.copy(
fontWeight = FontWeight.SemiBold,
fontSize = 14.sp
)
)

}
}


@Composable
fun ActionIconLabel(label: String) {
Text(
text = label,
color = channel_member_action_label,
style = Typography.subtitle2.copy(
fontWeight = FontWeight.Medium,
fontSize = 12.sp
)
)
}

@Composable
fun ChannelMembersList(
offlineMembersList: List<ChatUserEntity>,
onlineMembersList: List<ChatUserEntity>
) {
LazyColumn(modifier = Modifier
.background(channel_member_secondary_bg)
.padding(8.dp)) {
item {
Header(title = R.string.online, onlineMembersList.size)
}
items(onlineMembersList) { friend ->
FriendComponent(chatUserEntity = friend)
}
item {
Spacer(modifier = Modifier.height(10.dp))
}
item {
Header(
title = R.string.offline,
offlineMembersList.size,
style = DirectMessageListTypography.h5.copy(
fontSize = 14.sp
)
)
}
items(offlineMembersList) { friend ->
FriendComponent(chatUserEntity = friend)
}
item {
Spacer(modifier = Modifier.height(40.dp))
}
}
}

@Composable
fun FriendComponent(chatUserEntity: ChatUserEntity) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 8.dp),
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically
) {
Box(
contentAlignment = Alignment.BottomEnd,
modifier = Modifier.padding(8.dp),
) {
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(chatUserEntity.profileImage)
.placeholder(R.drawable.light_app_logo)
.crossfade(true)
.build(),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.width(32.dp)
.aspectRatio(1f)
.clip(CircleShape),
)
OnlineIndicator(isOnline = chatUserEntity.isOnline)
}
Spacer(modifier = Modifier.width(16.dp))
Text(
text = chatUserEntity.username,
style = DirectMessageListTypography.h6.copy(
fontWeight =
FontWeight.Normal,
fontSize = 14.sp

),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
color = DiscordColorProvider.colors.onSurface
)
}
}
Loading

0 comments on commit ae04609

Please sign in to comment.