From a3f10f45b65c1179ab867fbb8039157fb9c7f57c Mon Sep 17 00:00:00 2001
From: Paul Lorenc <pj@paul-lorenc.com>
Date: Sat, 12 Mar 2022 14:46:16 -0500
Subject: [PATCH] Misc UI tweaks
- Reduced padding around online indicator to allow for better use of space on Contact Cards
- Fixed bg color on introduction drawer to surfaceVariant everywhere (previously the bg color was not uniform throughout).
- Made introduction drawer header "X" button actually line up with contact list (was off by a few pixels before)
- Introduction drawer now centers profile pictures and alias'.
- ProfilePictures and MessageCounters now use 1px borders to better match briar android.
- Remove ConversationList top and bottom padding.
- Bump font size of ExposedDropDownMenu to typography.body1 to match everything else.
- Add auto-formatting rule that fixed ktlint problems I was running into.
---
.idea/codeStyles/Project.xml | 5 +++-
.../compose/material/ExposedDropDownMenu.kt | 2 +-
.../briar/desktop/contact/ContactCard.kt | 10 +++----
.../briar/desktop/contact/ContactList.kt | 2 +-
.../briar/desktop/contact/ProfileCircle.kt | 4 +--
.../briar/desktop/contact/SearchTextField.kt | 3 +-
.../desktop/conversation/ConversationInput.kt | 8 +++--
.../desktop/conversation/ConversationList.kt | 9 +++---
.../introduction/ContactDrawerMakeIntro.kt | 30 +++++++++++++------
.../briar/desktop/ui/MessageCounter.kt | 2 +-
10 files changed, 47 insertions(+), 28 deletions(-)
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index ef4f1b764d..ec09a93822 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -68,6 +68,9 @@
</codeStyleSettings>
<codeStyleSettings language="kotlin">
<option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
+ <indentOptions>
+ <option name="CONTINUATION_INDENT_SIZE" value="4" />
+ </indentOptions>
</codeStyleSettings>
</code_scheme>
-</component>
+</component>
\ No newline at end of file
diff --git a/src/main/kotlin/androidx/compose/material/ExposedDropDownMenu.kt b/src/main/kotlin/androidx/compose/material/ExposedDropDownMenu.kt
index ffbe92e8bd..0f4dc61f9f 100644
--- a/src/main/kotlin/androidx/compose/material/ExposedDropDownMenu.kt
+++ b/src/main/kotlin/androidx/compose/material/ExposedDropDownMenu.kt
@@ -219,7 +219,7 @@ private fun ExposedDropDownMenuImpl(
expanded = false
}
) {
- Text(v)
+ Text(v, style = MaterialTheme.typography.body1)
}
}
}
diff --git a/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactCard.kt b/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactCard.kt
index a2a6a8faab..0e98b2bb6f 100644
--- a/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactCard.kt
+++ b/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactCard.kt
@@ -118,7 +118,7 @@ private fun RealContactRow(contactItem: ContactItem, padding: PaddingValues) {
Row(horizontalArrangement = Arrangement.SpaceBetween, modifier = Modifier.padding(padding)) {
Row(
- modifier = Modifier.align(Alignment.CenterVertically).padding(horizontal = 16.dp)
+ modifier = Modifier.align(Alignment.CenterVertically).padding(start = 16.dp, end = 8.dp)
.weight(1f, fill = false)
) {
Box(modifier = Modifier.align(Alignment.CenterVertically)) {
@@ -134,7 +134,7 @@ private fun RealContactRow(contactItem: ContactItem, padding: PaddingValues) {
)
}
Canvas(
- modifier = Modifier.padding(end = 18.dp).size(22.dp).align(Alignment.CenterVertically),
+ modifier = Modifier.size(24.dp).align(Alignment.CenterVertically),
onDraw = {
val size = 16.dp
drawCircle(color = outlineColor, radius = size.toPx() / 2f)
@@ -149,9 +149,9 @@ private fun RealContactRow(contactItem: ContactItem, padding: PaddingValues) {
@Composable
private fun PendingContactRow(contactItem: PendingContactItem, onRemove: () -> Unit, padding: PaddingValues) {
- Row(horizontalArrangement = Arrangement.SpaceBetween, modifier = Modifier.padding(padding)) {
+ Row(horizontalArrangement = Arrangement.SpaceBetween) {
Row(
- modifier = Modifier.align(Alignment.CenterVertically).padding(horizontal = 16.dp)
+ modifier = Modifier.align(Alignment.CenterVertically).padding(start = 16.dp, end = 8.dp)
.weight(1f, fill = false)
) {
ProfileCircle(36.dp)
@@ -162,7 +162,7 @@ private fun PendingContactRow(contactItem: PendingContactItem, onRemove: () -> U
}
IconButton(
onClick = onRemove,
- modifier = Modifier.padding(end = 4.dp).align(Alignment.CenterVertically),
+ modifier = Modifier.padding(end = 4.dp).align(Alignment.CenterVertically)
) {
Icon(Icons.Filled.Delete, i18n("access.contacts.pending.remove"))
}
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 a4d9e5960c..b0324ffa50 100644
--- a/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactList.kt
+++ b/src/main/kotlin/org/briarproject/briar/desktop/contact/ContactList.kt
@@ -77,7 +77,7 @@ fun ContactList(
onSel = { selectContact(contactItem) },
selected = isSelected(contactItem),
onRemovePending = { if (contactItem is PendingContactItem) removePendingContact(contactItem) },
- padding = PaddingValues(end = 12.dp),
+ padding = PaddingValues(end = 16.dp),
)
}
}
diff --git a/src/main/kotlin/org/briarproject/briar/desktop/contact/ProfileCircle.kt b/src/main/kotlin/org/briarproject/briar/desktop/contact/ProfileCircle.kt
index 2fb9dbcc58..b24a5653c8 100644
--- a/src/main/kotlin/org/briarproject/briar/desktop/contact/ProfileCircle.kt
+++ b/src/main/kotlin/org/briarproject/briar/desktop/contact/ProfileCircle.kt
@@ -70,7 +70,7 @@ fun ProfileCircle(size: Dp, contactItem: ContactItem) {
*/
@Composable
fun ProfileCircle(size: Dp, input: ByteArray) {
- Canvas(Modifier.size(size).clip(CircleShape).border(2.dp, MaterialTheme.colors.outline, CircleShape)) {
+ Canvas(Modifier.size(size).clip(CircleShape).border(1.dp, MaterialTheme.colors.outline, CircleShape)) {
Identicon(input, this.size.width, this.size.height).draw(this)
}
}
@@ -86,7 +86,7 @@ fun ProfileCircle(size: Dp, avatar: ImageBitmap) {
bitmap = avatar,
contentDescription = null,
contentScale = ContentScale.FillBounds,
- modifier = Modifier.size(size).clip(CircleShape).border(2.dp, MaterialTheme.colors.outline, CircleShape),
+ modifier = Modifier.size(size).clip(CircleShape).border(1.dp, MaterialTheme.colors.outline, CircleShape),
)
}
diff --git a/src/main/kotlin/org/briarproject/briar/desktop/contact/SearchTextField.kt b/src/main/kotlin/org/briarproject/briar/desktop/contact/SearchTextField.kt
index d9881f3b22..fe45aedb62 100644
--- a/src/main/kotlin/org/briarproject/briar/desktop/contact/SearchTextField.kt
+++ b/src/main/kotlin/org/briarproject/briar/desktop/contact/SearchTextField.kt
@@ -61,8 +61,9 @@ fun SearchTextField(searchValue: String, onValueChange: (String) -> Unit, onCont
trailingIcon = {
IconButton(
onClick = onContactAdd,
- modifier = Modifier.padding(end = 10.dp).size(32.dp)
+ modifier = Modifier.padding(end = 8.dp)
.background(MaterialTheme.colors.primary, CircleShape).pointerHoverIcon(PointerIconDefaults.Default)
+ .then(Modifier.size(32.dp))
) {
Icon(
Icons.Filled.PersonAdd,
diff --git a/src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationInput.kt b/src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationInput.kt
index 40a82c0cf2..0de3960589 100644
--- a/src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationInput.kt
+++ b/src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationInput.kt
@@ -120,9 +120,10 @@ fun ConversationInput(
updateImage(null)
}
},
- Modifier.padding(4.dp).size(32.dp)
+ Modifier.padding(4.dp)
.background(MaterialTheme.colors.primary, CircleShape)
- .pointerHoverIcon(PointerIconDefaults.Default),
+ .pointerHoverIcon(PointerIconDefaults.Default)
+ .then(Modifier.size(32.dp)),
) {
if (image == null) {
Icon(Icons.Filled.Add, i18n("access.attachment_add"), Modifier.size(24.dp), Color.White)
@@ -133,7 +134,8 @@ fun ConversationInput(
},
trailingIcon = {
IconButton(
- onClick = onSend, modifier = Modifier.padding(4.dp).size(32.dp).pointerHoverIcon(PointerIconDefaults.Default),
+ onClick = onSend,
+ modifier = Modifier.padding(4.dp).size(32.dp).pointerHoverIcon(PointerIconDefaults.Default),
) {
Icon(
Icons.Filled.Send,
diff --git a/src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationList.kt b/src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationList.kt
index 2764ecf302..cd7ff53c38 100644
--- a/src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationList.kt
+++ b/src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationList.kt
@@ -183,7 +183,7 @@ fun ConversationList(
Box(modifier = Modifier.padding(padding).fillMaxSize()) {
LazyColumn(
state = scrollState,
- modifier = Modifier.fillMaxSize().padding(end = 12.dp, top = 8.dp, bottom = 8.dp)
+ modifier = Modifier.fillMaxSize().padding(end = 8.dp),
) {
itemsIndexed(messages) { idx, m ->
if (idx == initialFirstUnreadMessageIndex) {
@@ -304,9 +304,10 @@ fun LazyListState.isScrolledToPenultimate(): Boolean {
val LazyListState.lastVisibleItemIndex get() = layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: -1
-val LazyListLayoutInfo.reallyVisibleItemsInfo get() = visibleItemsInfo.filter {
- it.offset <= viewportEndOffset - 50 && it.offset + it.size >= viewportStartOffset + 50
-}
+val LazyListLayoutInfo.reallyVisibleItemsInfo
+ get() = visibleItemsInfo.filter {
+ it.offset <= viewportEndOffset - 50 && it.offset + it.size >= viewportStartOffset + 50
+ }
val LazyListState.firstReallyVisibleItemIndex get() = layoutInfo.reallyVisibleItemsInfo.firstOrNull()?.index ?: -1
val LazyListState.lastReallyVisibleItemIndex get() = layoutInfo.reallyVisibleItemsInfo.lastOrNull()?.index ?: -1
diff --git a/src/main/kotlin/org/briarproject/briar/desktop/introduction/ContactDrawerMakeIntro.kt b/src/main/kotlin/org/briarproject/briar/desktop/introduction/ContactDrawerMakeIntro.kt
index c616451dc5..ea12210b75 100644
--- a/src/main/kotlin/org/briarproject/briar/desktop/introduction/ContactDrawerMakeIntro.kt
+++ b/src/main/kotlin/org/briarproject/briar/desktop/introduction/ContactDrawerMakeIntro.kt
@@ -20,6 +20,7 @@ package org.briarproject.briar.desktop.introduction
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.fillMaxWidth
import androidx.compose.foundation.layout.height
@@ -42,10 +43,12 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import org.briarproject.briar.desktop.contact.ContactCard
import org.briarproject.briar.desktop.contact.ContactItem
import org.briarproject.briar.desktop.contact.ProfileCircle
+import org.briarproject.briar.desktop.theme.surfaceVariant
import org.briarproject.briar.desktop.ui.Constants.HEADER_SIZE
import org.briarproject.briar.desktop.ui.HorizontalDivider
import org.briarproject.briar.desktop.utils.InternationalizationUtils
@@ -62,13 +65,13 @@ fun ContactDrawerMakeIntro(
LaunchedEffect(contactItem) {
viewModel.setFirstContact(contactItem)
}
- Surface {
+ Surface(color = MaterialTheme.colors.surfaceVariant, contentColor = MaterialTheme.colors.onSurface) {
Column {
if (!viewModel.secondScreen.value) {
Row(Modifier.fillMaxWidth().height(HEADER_SIZE)) {
IconButton(
onClick = { closeInfoDrawer(false) },
- Modifier.padding(start = 16.dp).size(32.dp).align(Alignment.CenterVertically)
+ Modifier.padding(start = 24.dp).size(24.dp).align(Alignment.CenterVertically)
) {
Icon(Icons.Filled.Close, i18n("access.introduction.close"))
}
@@ -86,7 +89,8 @@ fun ContactDrawerMakeIntro(
contactItem,
onSel = { viewModel.setSecondContact(contactItem) },
selected = false,
- onRemovePending = {}
+ onRemovePending = {},
+ padding = PaddingValues(end = 16.dp),
)
}
}
@@ -94,32 +98,40 @@ fun ContactDrawerMakeIntro(
Row(Modifier.fillMaxWidth().height(HEADER_SIZE)) {
IconButton(
onClick = viewModel::backToFirstScreen,
- Modifier.padding(horizontal = 11.dp).size(32.dp).align(Alignment.CenterVertically)
+ Modifier.padding(start = 24.dp).size(24.dp).align(Alignment.CenterVertically)
) {
Icon(Icons.Filled.ArrowBack, i18n("access.introduction.back.contact"))
}
Text(
text = i18n("introduction.title_second"),
- modifier = Modifier.align(Alignment.CenterVertically),
+ modifier = Modifier.align(Alignment.CenterVertically).padding(start = 16.dp),
style = MaterialTheme.typography.body1,
)
}
Row(Modifier.fillMaxWidth().padding(12.dp), horizontalArrangement = Arrangement.SpaceAround) {
- Column(Modifier.align(Alignment.Top).weight(1f)) {
+ Column(
+ Modifier.align(Alignment.Top).weight(1f),
+ horizontalAlignment = Alignment.CenterHorizontally
+ ) {
ProfileCircle(36.dp, viewModel.firstContact.value!!)
Text(
text = viewModel.firstContact.value!!.displayName,
- modifier = Modifier.padding(top = 4.dp),
+ modifier = Modifier.padding(top = 4.dp).align(Alignment.CenterHorizontally),
style = MaterialTheme.typography.body1,
+ textAlign = TextAlign.Center,
)
}
Icon(Icons.Filled.SwapHoriz, i18n("access.swap"), modifier = Modifier.size(48.dp))
- Column(Modifier.align(Alignment.Top).weight(1f)) {
+ Column(
+ Modifier.align(Alignment.Top).weight(1f),
+ horizontalAlignment = Alignment.CenterHorizontally
+ ) {
ProfileCircle(36.dp, viewModel.secondContact.value!!)
Text(
text = viewModel.secondContact.value!!.displayName,
- modifier = Modifier.padding(top = 4.dp),
+ modifier = Modifier.padding(top = 4.dp).align(Alignment.CenterHorizontally),
style = MaterialTheme.typography.body1,
+ textAlign = TextAlign.Center,
)
}
}
diff --git a/src/main/kotlin/org/briarproject/briar/desktop/ui/MessageCounter.kt b/src/main/kotlin/org/briarproject/briar/desktop/ui/MessageCounter.kt
index b03a23dc81..07f2c8d71f 100644
--- a/src/main/kotlin/org/briarproject/briar/desktop/ui/MessageCounter.kt
+++ b/src/main/kotlin/org/briarproject/briar/desktop/ui/MessageCounter.kt
@@ -44,7 +44,7 @@ fun MessageCounter(unread: Int, modifier: Modifier = Modifier) {
modifier = modifier
.height(20.dp)
.widthIn(min = 20.dp, max = Dp.Infinity)
- .border(2.dp, outlineColor, CircleShape)
+ .border(1.dp, outlineColor, CircleShape)
.background(briarSecondary, CircleShape)
.padding(horizontal = 6.dp)
) {
--
GitLab