diff --git a/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactList.kt b/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactList.kt index 88bd9c365dd48a96d189a057d298848388bde790..8dbee6e1faeebed3e9d6e714e65b32937830bdc0 100644 --- a/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactList.kt +++ b/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactList.kt @@ -17,14 +17,9 @@ import androidx.compose.foundation.rememberScrollbarAdapter import androidx.compose.material.MaterialTheme import androidx.compose.material.Scaffold 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.unit.dp -import org.briarproject.briar.desktop.contact.add.remote.AddContactDialog import org.briarproject.briar.desktop.theme.surfaceVariant import org.briarproject.briar.desktop.ui.Constants.COLUMN_WIDTH import org.briarproject.briar.desktop.ui.Constants.HEADER_SIZE @@ -36,10 +31,8 @@ fun ContactList( selectContact: (BaseContactItem) -> Unit, filterBy: String, setFilterBy: (String) -> Unit, + onContactAdd: () -> Unit, ) { - var isContactDialogVisible by remember { mutableStateOf(false) } - if (isContactDialogVisible) AddContactDialog(onClose = { isContactDialogVisible = false }) - val scrollState = rememberLazyListState() Scaffold( @@ -52,7 +45,7 @@ fun ContactList( SearchTextField( filterBy, onValueChange = setFilterBy, - onContactAdd = { isContactDialogVisible = true } + onContactAdd = onContactAdd, ) } }, diff --git a/src/main/kotlin/org/briarproject/briar/desktop/conversation/PrivateMessageScreen.kt b/src/main/kotlin/org/briarproject/briar/desktop/conversation/PrivateMessageScreen.kt index 952e28a1eede255667ffc54c452725b94147373d..67554765f374c967d6220138f379ebace953914a 100644 --- a/src/main/kotlin/org/briarproject/briar/desktop/conversation/PrivateMessageScreen.kt +++ b/src/main/kotlin/org/briarproject/briar/desktop/conversation/PrivateMessageScreen.kt @@ -1,8 +1,8 @@ package org.briarproject.briar.desktop.conversation +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize @@ -10,18 +10,29 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.widthIn +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.Icon +import androidx.compose.material.IconButton import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.compose.material.Text +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.PersonAdd 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.text.style.TextAlign import androidx.compose.ui.unit.dp import org.briarproject.briar.desktop.contact.ContactList import org.briarproject.briar.desktop.contact.ContactListViewModel import org.briarproject.briar.desktop.contact.PendingContactIdWrapper import org.briarproject.briar.desktop.contact.RealContactIdWrapper +import org.briarproject.briar.desktop.contact.add.remote.AddContactDialog import org.briarproject.briar.desktop.ui.BriarLogo import org.briarproject.briar.desktop.ui.Constants.PARAGRAPH_WIDTH import org.briarproject.briar.desktop.ui.VerticalDivider @@ -32,13 +43,22 @@ import org.briarproject.briar.desktop.viewmodel.viewModel fun PrivateMessageScreen( viewModel: ContactListViewModel = viewModel(), ) { + var isContactDialogVisible by remember { mutableStateOf(false) } + if (isContactDialogVisible) AddContactDialog(onClose = { isContactDialogVisible = false }) + + if (viewModel.contactList.value.isEmpty()) { + NoContactsYet(onContactAdd = { isContactDialogVisible = true }) + return + } + Row(modifier = Modifier.fillMaxWidth()) { ContactList( viewModel.contactList.value, viewModel::isSelected, viewModel::selectContact, viewModel.filterBy.value, - viewModel::setFilterBy + viewModel::setFilterBy, + onContactAdd = { isContactDialogVisible = true } ) VerticalDivider() Column(modifier = Modifier.weight(1f).fillMaxHeight()) { @@ -57,35 +77,56 @@ fun PrivateMessageScreen( } } +@Composable +fun NoContactsYet(onContactAdd: () -> Unit) = Explainer( + headline = i18n("welcome.title"), + text = i18n("welcome.text"), +) { + IconButton( + onClick = onContactAdd, + modifier = Modifier.padding(end = 10.dp).size(32.dp) + .background(MaterialTheme.colors.primary, CircleShape) + ) { + Icon( + Icons.Filled.PersonAdd, + i18n("access.contacts.add"), + tint = Color.White, + modifier = Modifier.size(20.dp) + ) + } +} + @Composable fun NoContactSelected() = Explainer( headline = i18n("contacts.none_selected.title"), - content = i18n("contacts.none_selected.hint"), + text = i18n("contacts.none_selected.hint"), ) @Composable fun PendingContactSelected() = Explainer( headline = i18n("contacts.pending_selected.title"), - content = i18n("contacts.pending_selected.hint"), + text = i18n("contacts.pending_selected.hint"), ) @Composable -fun Explainer(headline: String, content: String) = Surface(color = MaterialTheme.colors.background) { - Column( - modifier = Modifier.padding(16.dp).fillMaxSize(), - verticalArrangement = Arrangement.Center, - horizontalAlignment = Alignment.CenterHorizontally - ) { - BriarLogo(modifier = Modifier.size(200.dp)) - Text( - text = headline, - modifier = Modifier.padding(PaddingValues(top = 15.dp, bottom = 5.dp)), - style = MaterialTheme.typography.h5 - ) - Text( - text = content, - modifier = Modifier.padding(PaddingValues(top = 5.dp, bottom = 15.dp)).widthIn(max = PARAGRAPH_WIDTH), - style = MaterialTheme.typography.body2.copy(textAlign = TextAlign.Center) - ) +fun Explainer(headline: String, text: String, content: @Composable () -> Unit = {}) = + Surface(color = MaterialTheme.colors.background) { + Column( + modifier = Modifier.padding(16.dp).fillMaxSize(), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + ) { + BriarLogo(modifier = Modifier.size(200.dp)) + Text( + text = headline, + modifier = Modifier.padding(top = 15.dp, bottom = 5.dp), + style = MaterialTheme.typography.h5 + ) + Text( + text = text, + modifier = Modifier.padding(top = 5.dp, bottom = 15.dp).widthIn(max = PARAGRAPH_WIDTH), + style = MaterialTheme.typography.body2.copy(textAlign = TextAlign.Center) + ) + content() + } } -} diff --git a/src/main/resources/strings/BriarDesktop.properties b/src/main/resources/strings/BriarDesktop.properties index c122151cba7199c3135bbfb368bb54b8742dd43b..654ae722309c416976de2fd9d263cf4429b5e809 100644 --- a/src/main/resources/strings/BriarDesktop.properties +++ b/src/main/resources/strings/BriarDesktop.properties @@ -106,6 +106,10 @@ main.help.data=The directory where Briar will store its files. Default: {0} main.help.tor.port.socks=Tor Socks Port main.help.tor.port.control=Tor Control Port +# Welcome +welcome.title=Welcome to Briar +welcome.text=You don't have any contacts yet. Tap the + icon to add a contact: + # Miscellaneous cancel=Cancel delete=Delete