enhancement: text formatting and comment layout (#87)

* enhancement: better selection and cursor handling in text formatting

* enhancement: comment card spacing
This commit is contained in:
Diego Beraldin 2023-10-29 22:03:04 +01:00 committed by GitHub
parent e85ed03be8
commit f8250b31d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 105 additions and 101 deletions

View File

@ -97,7 +97,7 @@ fun CollapsedCommentCard(
} }
Box( Box(
modifier = Modifier modifier = Modifier
.padding(top = Spacing.xs) .padding(top = Spacing.xxs)
.width(barWidth) .width(barWidth)
.height(commentHeight.toLocalDp()) .height(commentHeight.toLocalDp())
.background(color = barColor) .background(color = barColor)

View File

@ -15,7 +15,6 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.onGloballyPositioned import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.toSize import androidx.compose.ui.unit.toSize
import com.github.diegoberaldin.raccoonforlemmy.core.appearance.di.getThemeRepository import com.github.diegoberaldin.raccoonforlemmy.core.appearance.di.getThemeRepository
@ -78,7 +77,6 @@ fun CommentCard(
} }
) { ) {
CommunityAndCreatorInfo( CommunityAndCreatorInfo(
modifier = Modifier.padding(top = Spacing.xs),
iconSize = 20.dp, iconSize = 20.dp,
creator = comment.creator.takeIf { !hideAuthor }, creator = comment.creator.takeIf { !hideAuthor },
community = comment.community.takeIf { !hideCommunity }, community = comment.community.takeIf { !hideCommunity },
@ -117,18 +115,12 @@ fun CommentCard(
if (!hideIndent) { if (!hideIndent) {
Box( Box(
modifier = Modifier modifier = Modifier
.padding(top = Spacing.xs) .padding(top = Spacing.xxs)
.width(barWidth) .width(barWidth)
.height(commentHeight.toLocalDp()) .height(commentHeight.toLocalDp())
.background(color = barColor) .background(color = barColor)
) )
} }
} }
Box(
modifier = Modifier
.height(Dp.Hairline)
.fillMaxWidth()
.background(MaterialTheme.colorScheme.background)
)
} }
} }

View File

@ -32,37 +32,32 @@ fun TextFormattingBar(
Icon( Icon(
modifier = Modifier.onClick { modifier = Modifier.onClick {
val selection = textFieldValue.selection val selection = textFieldValue.selection
if (selection.length == 0) { val newValue = textFieldValue.let {
val newValue = textFieldValue.let { val newText = buildString {
it.copy( append(it.text.substring(0, selection.start))
text = it.text + "****", append("**")
selection = TextRange(it.text.length + 2), append(
it.text.substring(
selection.start,
selection.end
)
)
append("**")
append(
it.text.substring(
selection.end,
it.text.length
)
) )
} }
onTextFieldValueChanged(newValue) val newSelection = if (selection.length == 0) {
} else { TextRange(index = selection.start + 2)
val newValue = textFieldValue.let { } else {
val newText = buildString { TextRange(start = it.selection.start + 2, end = it.selection.end + 2)
append(it.text.substring(0, selection.start))
append("**")
append(
it.text.substring(
selection.start,
selection.end
)
)
append("**")
append(
it.text.substring(
selection.end,
it.text.length
)
)
}
it.copy(text = newText)
} }
onTextFieldValueChanged(newValue) it.copy(text = newText, selection = newSelection)
} }
onTextFieldValueChanged(newValue)
}, },
imageVector = Icons.Default.FormatBold, imageVector = Icons.Default.FormatBold,
contentDescription = null, contentDescription = null,
@ -70,37 +65,32 @@ fun TextFormattingBar(
Icon( Icon(
modifier = Modifier.onClick { modifier = Modifier.onClick {
val selection = textFieldValue.selection val selection = textFieldValue.selection
if (selection.length == 0) { val newValue = textFieldValue.let {
val newValue = textFieldValue.let { val newText = buildString {
it.copy( append(it.text.substring(0, selection.start))
text = it.text + "**", append("*")
selection = TextRange(it.text.length + 1), append(
it.text.substring(
selection.start,
selection.end
)
)
append("*")
append(
it.text.substring(
selection.end,
it.text.length
)
) )
} }
onTextFieldValueChanged(newValue) val newSelection = if (selection.length == 0) {
} else { TextRange(index = selection.start + 1)
val newValue = textFieldValue.let { } else {
val newText = buildString { TextRange(start = it.selection.start + 1, end = it.selection.end + 1)
append(it.text.substring(0, selection.start))
append("*")
append(
it.text.substring(
selection.start,
selection.end
)
)
append("*")
append(
it.text.substring(
selection.end,
it.text.length
)
)
}
it.copy(text = newText)
} }
onTextFieldValueChanged(newValue) it.copy(text = newText, selection = newSelection)
} }
onTextFieldValueChanged(newValue)
}, },
imageVector = Icons.Default.FormatItalic, imageVector = Icons.Default.FormatItalic,
contentDescription = null, contentDescription = null,
@ -108,37 +98,32 @@ fun TextFormattingBar(
Icon( Icon(
modifier = Modifier.onClick { modifier = Modifier.onClick {
val selection = textFieldValue.selection val selection = textFieldValue.selection
if (selection.length == 0) { val newValue = textFieldValue.let {
val newValue = textFieldValue.let { val newText = buildString {
it.copy( append(it.text.substring(0, selection.start))
text = it.text + "~~~~", append("~~")
selection = TextRange(it.text.length + 2), append(
it.text.substring(
selection.start,
selection.end
)
)
append("~~")
append(
it.text.substring(
selection.end,
it.text.length
)
) )
} }
onTextFieldValueChanged(newValue) val newSelection = if (selection.length == 0) {
} else { TextRange(index = selection.start + 2)
val newValue = textFieldValue.let { } else {
val newText = buildString { TextRange(start = it.selection.start + 2, end = it.selection.end + 2)
append(it.text.substring(0, selection.start))
append("~~")
append(
it.text.substring(
selection.start,
selection.end
)
)
append("~~")
append(
it.text.substring(
selection.end,
it.text.length
)
)
}
it.copy(text = newText)
} }
onTextFieldValueChanged(newValue) it.copy(text = newText, selection = newSelection)
} }
onTextFieldValueChanged(newValue)
}, },
imageVector = Icons.Default.FormatStrikethrough, imageVector = Icons.Default.FormatStrikethrough,
contentDescription = null, contentDescription = null,
@ -153,10 +138,18 @@ fun TextFormattingBar(
Icon( Icon(
modifier = Modifier.onClick { modifier = Modifier.onClick {
val newValue = textFieldValue.let { val newValue = textFieldValue.let {
it.copy( val selection = it.selection
text = it.text + "[](url)", val newText = buildString {
selection = TextRange(it.text.length + 1), append(it.text.substring(0, selection.start))
) append(" [](url)")
append(
it.text.substring(
selection.end,
it.text.length
)
)
}
it.copy(text = newText, selection = TextRange(index = selection.start + 2))
} }
onTextFieldValueChanged(newValue) onTextFieldValueChanged(newValue)
}, },
@ -166,10 +159,30 @@ fun TextFormattingBar(
Icon( Icon(
modifier = Modifier.onClick { modifier = Modifier.onClick {
val newValue = textFieldValue.let { val newValue = textFieldValue.let {
it.copy( val selection = it.selection
text = it.text + "``", val newText = buildString {
selection = TextRange(it.text.length + 1), append(it.text.substring(0, selection.start))
) append("`")
append(
it.text.substring(
selection.start,
selection.end
)
)
append("`")
append(
it.text.substring(
selection.end,
it.text.length
)
)
}
val newSelection = if (selection.length == 0) {
TextRange(index = selection.start + 1)
} else {
TextRange(start = it.selection.start + 1, end = it.selection.end + 1)
}
it.copy(text = newText, selection = newSelection)
} }
onTextFieldValueChanged(newValue) onTextFieldValueChanged(newValue)
}, },
@ -181,7 +194,7 @@ fun TextFormattingBar(
val newValue = textFieldValue.let { val newValue = textFieldValue.let {
it.copy( it.copy(
text = it.text + "\n> ", text = it.text + "\n> ",
selection = TextRange(it.text.length + 3), selection = TextRange(index = it.text.length + 3),
) )
} }
onTextFieldValueChanged(newValue) onTextFieldValueChanged(newValue)

View File

@ -666,7 +666,6 @@ class PostDetailScreen(
} else { } else {
CollapsedCommentCard( CollapsedCommentCard(
comment = comment, comment = comment,
modifier = Modifier.padding(vertical = Spacing.xs),
onToggleExpanded = { onToggleExpanded = {
model.reduce( model.reduce(
PostDetailMviModel.Intent.ToggleExpandComment( PostDetailMviModel.Intent.ToggleExpandComment(