Fix download and overflow buttons getting pushed to the side

This commit is contained in:
Syer10
2021-06-17 09:34:03 -04:00
parent aad08a0335
commit c5ffdf8360
2 changed files with 124 additions and 101 deletions

View File

@@ -7,8 +7,8 @@
package ca.gosyer.ui.downloads package ca.gosyer.ui.downloads
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxHeight
@@ -16,7 +16,6 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredWidth
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
@@ -94,20 +93,30 @@ private fun downloadsItem(
onDownloadCancel: (Chapter?) -> Unit, onDownloadCancel: (Chapter?) -> Unit,
onMoveDownloadToBottom: (Chapter?) -> Unit onMoveDownloadToBottom: (Chapter?) -> Unit
) { ) {
BoxWithConstraints {
Row( Row(
modifier = Modifier.fillMaxWidth() modifier = Modifier.fillMaxWidth()
.height(56.dp) .height(56.dp)
.padding(vertical = 8.dp), .padding(vertical = 8.dp),
horizontalArrangement = Arrangement.SpaceAround horizontalArrangement = Arrangement.SpaceAround
) { ) {
Column(Modifier.fillMaxHeight(), verticalArrangement = Arrangement.SpaceAround) { Column(Modifier.fillMaxHeight().width(this@BoxWithConstraints.maxWidth - 46.dp).padding(horizontal = 32.dp), verticalArrangement = Arrangement.SpaceAround) {
Row(Modifier.fillMaxWidth().padding(horizontal = 32.dp), horizontalArrangement = Arrangement.SpaceBetween) { Row(
Text(chapter.chapter?.name.toString(), maxLines = 1, overflow = TextOverflow.Ellipsis) Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
chapter.chapter?.name.toString(),
Modifier.width(this@BoxWithConstraints.maxWidth - 200.dp),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
// Spacer(Modifier.width(16.dp)) // Spacer(Modifier.width(16.dp))
if (chapter.chapter?.pageCount != null && chapter.chapter.pageCount != -1) { if (chapter.chapter?.pageCount != null && chapter.chapter.pageCount != -1) {
Text( Text(
"${(chapter.chapter.pageCount * chapter.progress).toInt()}/${chapter.chapter.pageCount}", "${(chapter.chapter.pageCount * chapter.progress).toInt()}/${chapter.chapter.pageCount}",
Modifier.padding(start = 16.dp).requiredWidth(IntrinsicSize.Max), Modifier.padding(horizontal = 8.dp),
style = MaterialTheme.typography.body2, style = MaterialTheme.typography.body2,
color = LocalContentColor.current.copy(alpha = ContentAlpha.disabled), color = LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
maxLines = 1, maxLines = 1,
@@ -121,7 +130,7 @@ private fun downloadsItem(
LinearProgressIndicator( LinearProgressIndicator(
chapter.progress, chapter.progress,
Modifier.fillMaxWidth() Modifier.fillMaxWidth()
.padding(start = 32.dp, end = 16.dp, bottom = 8.dp) .padding(bottom = 8.dp)
) )
} }
DropdownIconButton( DropdownIconButton(
@@ -141,4 +150,5 @@ private fun downloadsItem(
) )
} }
} }
}
} }

View File

@@ -8,13 +8,15 @@ package ca.gosyer.ui.manga
import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card import androidx.compose.material.Card
@@ -39,6 +41,7 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.AnnotatedString import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import ca.gosyer.data.download.model.DownloadChapter import ca.gosyer.data.download.model.DownloadChapter
import ca.gosyer.data.download.model.DownloadState import ca.gosyer.data.download.model.DownloadState
@@ -65,7 +68,7 @@ fun ChapterItem(
elevation = 1.dp, elevation = 1.dp,
shape = RoundedCornerShape(4.dp) shape = RoundedCornerShape(4.dp)
) { ) {
Row( BoxWithConstraints(
Modifier.combinedMouseClickable( Modifier.combinedMouseClickable(
onClick = { onClick = {
onClick(chapter.index) onClick(chapter.index)
@@ -80,11 +83,13 @@ fun ChapterItem(
menuItem("Toggle bookmarked") { toggleBookmarked(chapter.index) } menuItem("Toggle bookmarked") { toggleBookmarked(chapter.index) }
} }
} }
), )
) {
Row(
horizontalArrangement = Arrangement.SpaceBetween horizontalArrangement = Arrangement.SpaceBetween
) { ) {
Column( Column(
Modifier.padding(4.dp) Modifier.padding(4.dp).width(this@BoxWithConstraints.maxWidth - 60.dp)
) { ) {
Text( Text(
chapter.name, chapter.name,
@@ -92,7 +97,8 @@ fun ChapterItem(
style = MaterialTheme.typography.h6, style = MaterialTheme.typography.h6,
color = LocalContentColor.current.copy( color = LocalContentColor.current.copy(
alpha = if (chapter.read) ContentAlpha.disabled else ContentAlpha.high alpha = if (chapter.read) ContentAlpha.disabled else ContentAlpha.high
) ),
overflow = TextOverflow.Ellipsis
) )
val subtitleStr = buildAnnotatedString { val subtitleStr = buildAnnotatedString {
if (chapter.uploadDate > 0) { if (chapter.uploadDate > 0) {
@@ -125,10 +131,16 @@ fun ChapterItem(
when (downloadState) { when (downloadState) {
MangaMenuViewModel.DownloadState.Downloaded -> { MangaMenuViewModel.DownloadState.Downloaded -> {
DownloadedIconButton(chapter.mangaId to chapter.index, onClick = { deleteDownload(chapter.index) }) DownloadedIconButton(
chapter.mangaId to chapter.index,
onClick = { deleteDownload(chapter.index) }
)
} }
MangaMenuViewModel.DownloadState.Downloading -> { MangaMenuViewModel.DownloadState.Downloading -> {
DownloadingIconButton(downloadChapter, onClick = { stopDownload(chapter.index) }) DownloadingIconButton(
downloadChapter,
onClick = { stopDownload(chapter.index) }
)
} }
MangaMenuViewModel.DownloadState.NotDownloaded -> { MangaMenuViewModel.DownloadState.NotDownloaded -> {
DownloadIconButton(onClick = { downloadAChapter(chapter.index) }) DownloadIconButton(onClick = { downloadAChapter(chapter.index) })
@@ -136,6 +148,7 @@ fun ChapterItem(
} }
} }
} }
}
} }
@Composable @Composable
@@ -152,7 +165,7 @@ private fun DownloadIconButton(onClick: () -> Unit) {
Icons.Default.ArrowDownward, Icons.Default.ArrowDownward,
null, null,
Modifier Modifier
.requiredSize(22.dp) .size(22.dp)
.padding(2.dp), .padding(2.dp),
LocalContentColor.current.copy(alpha = ContentAlpha.disabled) LocalContentColor.current.copy(alpha = ContentAlpha.disabled)
) )
@@ -173,7 +186,7 @@ private fun DownloadingIconButton(downloadChapter: DownloadChapter?, onClick: ()
when (downloadChapter?.state) { when (downloadChapter?.state) {
null, DownloadState.Queued -> CircularProgressIndicator( null, DownloadState.Queued -> CircularProgressIndicator(
Modifier Modifier
.requiredSize(26.dp) .size(26.dp)
.padding(2.dp), .padding(2.dp),
LocalContentColor.current.copy(alpha = ContentAlpha.disabled), LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
2.dp 2.dp
@@ -182,7 +195,7 @@ private fun DownloadingIconButton(downloadChapter: DownloadChapter?, onClick: ()
CircularProgressIndicator( CircularProgressIndicator(
downloadChapter.progress, downloadChapter.progress,
Modifier Modifier
.requiredSize(26.dp) .size(26.dp)
.padding(2.dp), .padding(2.dp),
LocalContentColor.current.copy(alpha = ContentAlpha.disabled), LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
2.dp 2.dp
@@ -191,14 +204,14 @@ private fun DownloadingIconButton(downloadChapter: DownloadChapter?, onClick: ()
Icons.Default.ArrowDownward, Icons.Default.ArrowDownward,
null, null,
Modifier Modifier
.requiredSize(22.dp) .size(22.dp)
.padding(2.dp), .padding(2.dp),
LocalContentColor.current.copy(alpha = ContentAlpha.disabled) LocalContentColor.current.copy(alpha = ContentAlpha.disabled)
) )
} else { } else {
CircularProgressIndicator( CircularProgressIndicator(
Modifier Modifier
.requiredSize(26.dp) .size(26.dp)
.padding(2.dp), .padding(2.dp),
LocalContentColor.current.copy(alpha = ContentAlpha.disabled), LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
2.dp 2.dp
@@ -209,7 +222,7 @@ private fun DownloadingIconButton(downloadChapter: DownloadChapter?, onClick: ()
Icons.Default.Error, Icons.Default.Error,
null, null,
Modifier Modifier
.requiredSize(22.dp) .size(22.dp)
.padding(2.dp), .padding(2.dp),
Color.Red Color.Red
) )
@@ -219,7 +232,7 @@ private fun DownloadingIconButton(downloadChapter: DownloadChapter?, onClick: ()
Icons.Default.Check, Icons.Default.Check,
null, null,
Modifier Modifier
.requiredSize(22.dp) .size(22.dp)
.padding(2.dp), .padding(2.dp),
MaterialTheme.colors.surface MaterialTheme.colors.surface
) )
@@ -243,7 +256,7 @@ private fun DownloadedIconButton(chapter: Pair<Long, Int?>, onClick: () -> Unit)
Icons.Default.Check, Icons.Default.Check,
null, null,
Modifier Modifier
.requiredSize(22.dp) .size(22.dp)
.padding(2.dp), .padding(2.dp),
MaterialTheme.colors.surface MaterialTheme.colors.surface
) )