232 lines
9.5 KiB
Kotlin
232 lines
9.5 KiB
Kotlin
package org.thoughtcrime.securesms.groups.compose
|
|
|
|
import androidx.annotation.StringRes
|
|
import androidx.compose.foundation.Image
|
|
import androidx.compose.foundation.background
|
|
import androidx.compose.foundation.clickable
|
|
import androidx.compose.foundation.layout.Box
|
|
import androidx.compose.foundation.layout.Column
|
|
import androidx.compose.foundation.layout.Row
|
|
import androidx.compose.foundation.layout.fillMaxSize
|
|
import androidx.compose.foundation.layout.fillMaxWidth
|
|
import androidx.compose.foundation.layout.padding
|
|
import androidx.compose.foundation.layout.width
|
|
import androidx.compose.foundation.lazy.LazyColumn
|
|
import androidx.compose.foundation.lazy.rememberLazyListState
|
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
import androidx.compose.material.CircularProgressIndicator
|
|
import androidx.compose.material.MaterialTheme
|
|
import androidx.compose.material.OutlinedButton
|
|
import androidx.compose.material.OutlinedTextField
|
|
import androidx.compose.material.Text
|
|
import androidx.compose.runtime.Composable
|
|
import androidx.compose.runtime.getValue
|
|
import androidx.compose.runtime.mutableStateOf
|
|
import androidx.compose.runtime.remember
|
|
import androidx.compose.runtime.setValue
|
|
import androidx.compose.ui.Alignment
|
|
import androidx.compose.ui.Modifier
|
|
import androidx.compose.ui.graphics.Color
|
|
import androidx.compose.ui.res.painterResource
|
|
import androidx.compose.ui.res.stringResource
|
|
import androidx.compose.ui.semantics.contentDescription
|
|
import androidx.compose.ui.semantics.semantics
|
|
import androidx.compose.ui.text.style.TextAlign
|
|
import androidx.compose.ui.tooling.preview.Preview
|
|
import androidx.compose.ui.unit.dp
|
|
import androidx.lifecycle.MutableLiveData
|
|
import network.loki.messenger.R
|
|
import org.session.libsession.messaging.contacts.Contact
|
|
import org.thoughtcrime.securesms.ui.CellWithPaddingAndMargin
|
|
import org.thoughtcrime.securesms.ui.Divider
|
|
import org.thoughtcrime.securesms.ui.EditableAvatar
|
|
import org.thoughtcrime.securesms.ui.NavigationBar
|
|
import org.thoughtcrime.securesms.ui.PreviewTheme
|
|
|
|
|
|
data class CreateGroupState (
|
|
var groupName: String,
|
|
var groupDescription: String,
|
|
val members: MutableSet<Contact>
|
|
)
|
|
|
|
@Composable
|
|
fun CreateGroup(
|
|
viewState: ViewState,
|
|
createGroupState: MutableLiveData<CreateGroupState>,
|
|
onCreate: (CreateGroupState) -> Unit,
|
|
onSelectContact: () -> Unit,
|
|
onBack: () -> Unit,
|
|
onClose: () -> Unit,
|
|
modifier: Modifier = Modifier
|
|
) {
|
|
|
|
var name by createGroupState
|
|
var description by remember { mutableStateOf(createGroupState.groupDescription) }
|
|
var members by remember { mutableStateOf(createGroupState.members) }
|
|
|
|
val lazyState = rememberLazyListState()
|
|
|
|
val onDeleteMember = { contact: Contact ->
|
|
members -= contact
|
|
}
|
|
|
|
Box {
|
|
Column(
|
|
modifier
|
|
.fillMaxWidth()) {
|
|
LazyColumn(state = lazyState) {
|
|
// Top bar
|
|
item {
|
|
Column(modifier.fillMaxWidth()) {
|
|
NavigationBar(
|
|
title = stringResource(id = R.string.activity_create_group_title),
|
|
onBack = onBack,
|
|
onClose = onClose
|
|
)
|
|
// Editable avatar (future chunk)
|
|
EditableAvatar(
|
|
modifier = Modifier
|
|
.align(Alignment.CenterHorizontally)
|
|
.padding(top = 16.dp)
|
|
)
|
|
// Title
|
|
val nameDescription = stringResource(id = R.string.AccessibilityId_closed_group_edit_group_name)
|
|
OutlinedTextField(
|
|
value = name,
|
|
onValueChange = { name = it },
|
|
modifier = Modifier
|
|
.fillMaxWidth()
|
|
.align(Alignment.CenterHorizontally)
|
|
.padding(vertical = 8.dp, horizontal = 24.dp)
|
|
.semantics {
|
|
contentDescription = nameDescription
|
|
},
|
|
)
|
|
// Description
|
|
val descriptionDescription = stringResource(id = R.string.AccessibilityId_closed_group_edit_group_description)
|
|
OutlinedTextField(
|
|
value = description,
|
|
onValueChange = { description = it },
|
|
modifier = Modifier
|
|
.fillMaxWidth()
|
|
.align(Alignment.CenterHorizontally)
|
|
.padding(vertical = 8.dp, horizontal = 24.dp)
|
|
.semantics {
|
|
contentDescription = descriptionDescription
|
|
},
|
|
)
|
|
|
|
CellWithPaddingAndMargin(padding = 0.dp) {
|
|
Column(Modifier.fillMaxSize()) {
|
|
// Select Contacts
|
|
val padding = Modifier
|
|
.padding(8.dp)
|
|
.fillMaxWidth()
|
|
Row(padding.clickable {
|
|
onSelectContact()
|
|
}) {
|
|
Image(
|
|
painterResource(id = R.drawable.ic_person_white_24dp),
|
|
null,
|
|
Modifier
|
|
.padding(4.dp)
|
|
.align(Alignment.CenterVertically)
|
|
)
|
|
Text(
|
|
stringResource(id = R.string.activity_create_closed_group_select_contacts),
|
|
Modifier
|
|
.padding(4.dp)
|
|
.align(Alignment.CenterVertically)
|
|
)
|
|
}
|
|
Divider()
|
|
// Add account ID or ONS
|
|
Row(padding) {
|
|
Image(
|
|
painterResource(id = R.drawable.ic_baseline_add_24),
|
|
null,
|
|
Modifier
|
|
.padding(4.dp)
|
|
.align(Alignment.CenterVertically)
|
|
)
|
|
Text(
|
|
stringResource(id = R.string.activity_create_closed_group_add_account_or_ons),
|
|
Modifier
|
|
.padding(4.dp)
|
|
.align(Alignment.CenterVertically)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
// Group list
|
|
memberList(contacts = members.toList(), modifier = Modifier.padding(vertical = 8.dp, horizontal = 24.dp), onDeleteMember)
|
|
}
|
|
// Create button
|
|
val createDescription = stringResource(id = R.string.AccessibilityId_create_closed_group_create_button)
|
|
OutlinedButton(
|
|
onClick = { onCreate(CreateGroupState(name, description, members)) },
|
|
enabled = name.isNotBlank() && !viewState.isLoading,
|
|
modifier = Modifier
|
|
.align(Alignment.CenterHorizontally)
|
|
.padding(16.dp)
|
|
.semantics {
|
|
contentDescription = createDescription
|
|
}
|
|
,
|
|
shape = RoundedCornerShape(32.dp)
|
|
) {
|
|
Text(
|
|
text = stringResource(id = R.string.activity_create_group_create_button_title),
|
|
// TODO: colours of everything here probably needs to be redone
|
|
color = MaterialTheme.colors.onBackground,
|
|
modifier = Modifier.width(160.dp),
|
|
textAlign = TextAlign.Center
|
|
)
|
|
}
|
|
}
|
|
if (viewState.isLoading) {
|
|
Box(modifier = modifier
|
|
.fillMaxSize()
|
|
.background(Color.Gray.copy(alpha = 0.5f))) {
|
|
CircularProgressIndicator(
|
|
modifier = Modifier.align(Alignment.Center)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@Preview
|
|
@Composable
|
|
fun ClosedGroupPreview(
|
|
) {
|
|
val random = "05abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234"
|
|
val previewMembers = setOf(
|
|
Contact(random).apply {
|
|
name = "Person"
|
|
}
|
|
)
|
|
PreviewTheme(R.style.Theme_Session_DayNight_NoActionBar_Test) {
|
|
CreateGroup(
|
|
viewState = ViewState(false, null),
|
|
createGroupState = CreateGroupState("Group Name", "Test Group Description", previewMembers),
|
|
onCreate = {},
|
|
onClose = {},
|
|
onSelectContact = {},
|
|
onBack = {},
|
|
)
|
|
}
|
|
}
|
|
|
|
data class ViewState(
|
|
val isLoading: Boolean,
|
|
@StringRes val error: Int?
|
|
) {
|
|
companion object {
|
|
val DEFAULT = ViewState(false, null)
|
|
}
|
|
} |