Commit 101f35b2 authored by Sebastian's avatar Sebastian
Browse files

When no contacts added yet, show special welcome-screen

parent aa74b000
Pipeline #9192 passed with stages
in 8 minutes and 3 seconds
......@@ -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,
)
}
},
......
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()
}
}
}
......@@ -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
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment