Refactor CarouselButtons

This commit is contained in:
andrew 2023-07-03 18:30:15 +09:30
parent 1d29b5465f
commit 0ec93e4b36
2 changed files with 52 additions and 59 deletions

View File

@ -2,7 +2,6 @@ package org.thoughtcrime.securesms.conversation.v2
import android.content.Intent import android.content.Intent
import android.os.Bundle import android.os.Bundle
import androidx.annotation.DrawableRes
import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
@ -10,7 +9,6 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
@ -21,19 +19,15 @@ import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Divider import androidx.compose.material.Divider
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.LocalTextStyle import androidx.compose.material.LocalTextStyle
import androidx.compose.material.Text import androidx.compose.material.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.livedata.observeAsState import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.ComposeView import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
@ -46,7 +40,6 @@ import androidx.lifecycle.ViewModel
import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
import com.bumptech.glide.integration.compose.GlideImage import com.bumptech.glide.integration.compose.GlideImage
import dagger.hilt.android.AndroidEntryPoint import dagger.hilt.android.AndroidEntryPoint
import kotlinx.coroutines.launch
import network.loki.messenger.R import network.loki.messenger.R
import org.session.libsession.messaging.sending_receiving.attachments.DatabaseAttachment import org.session.libsession.messaging.sending_receiving.attachments.DatabaseAttachment
import org.session.libsession.utilities.Util import org.session.libsession.utilities.Util
@ -60,6 +53,8 @@ import org.thoughtcrime.securesms.database.model.MmsMessageRecord
import org.thoughtcrime.securesms.dependencies.DatabaseComponent import org.thoughtcrime.securesms.dependencies.DatabaseComponent
import org.thoughtcrime.securesms.mms.Slide import org.thoughtcrime.securesms.mms.Slide
import org.thoughtcrime.securesms.ui.AppTheme import org.thoughtcrime.securesms.ui.AppTheme
import org.thoughtcrime.securesms.ui.CarouselNextButton
import org.thoughtcrime.securesms.ui.CarouselPrevButton
import org.thoughtcrime.securesms.ui.Cell import org.thoughtcrime.securesms.ui.Cell
import org.thoughtcrime.securesms.ui.CellNoMargin import org.thoughtcrime.securesms.ui.CellNoMargin
import org.thoughtcrime.securesms.ui.CellWithPaddingAndMargin import org.thoughtcrime.securesms.ui.CellWithPaddingAndMargin
@ -337,10 +332,10 @@ class MessageDetailActivity : PassphraseRequiredActionBarActivity() {
Column(verticalArrangement = Arrangement.spacedBy(16.dp)) { Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
Row { Row {
CarouselButtonOrSpace( CarouselPrevButton(
Direction.PREVIOUS,
pagerState, pagerState,
modifier = Modifier.align(Alignment.CenterVertically)) modifier = Modifier.align(Alignment.CenterVertically)
)
Box(modifier = Modifier.weight(1f)) { Box(modifier = Modifier.weight(1f)) {
CellNoMargin { CellNoMargin {
HorizontalPager(state = pagerState) { i -> HorizontalPager(state = pagerState) { i ->
@ -362,8 +357,7 @@ class MessageDetailActivity : PassphraseRequiredActionBarActivity() {
) )
} }
} }
CarouselButtonOrSpace( CarouselNextButton(
Direction.NEXT,
pagerState, pagerState,
modifier = Modifier.align(Alignment.CenterVertically) modifier = Modifier.align(Alignment.CenterVertically)
) )
@ -372,53 +366,7 @@ class MessageDetailActivity : PassphraseRequiredActionBarActivity() {
} }
} }
@OptIn(ExperimentalFoundationApi::class)
enum class Direction constructor(
val enabled: (PagerState) -> Boolean,
@DrawableRes val id: Int,
val delta: Int
) {
PREVIOUS(
PagerState::canScrollBackward,
R.drawable.ic_prev,
-1
),
NEXT(
PagerState::canScrollForward,
R.drawable.ic_next,
1
)
}
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CarouselButtonOrSpace(direction: Direction, pagerState: PagerState, modifier: Modifier = Modifier) {
if (pagerState.pageCount >= 2) CarouselButton(pagerState, modifier = modifier, direction = direction)
else Spacer(modifier = Modifier.width(32.dp))
}
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CarouselButton(
pagerState: PagerState,
modifier: Modifier = Modifier,
direction: Direction
) {
val animationScope = rememberCoroutineScope()
pagerState.apply {
IconButton(
modifier = Modifier
.width(40.dp)
.then(modifier),
enabled = direction.enabled(pagerState),
onClick = { animationScope.launch { animateScrollToPage(currentPage + direction.delta) } }) {
Icon(
painter = painterResource(id = direction.id),
contentDescription = "",
)
}
}
}
@OptIn(ExperimentalFoundationApi::class, ExperimentalLayoutApi::class) @OptIn(ExperimentalFoundationApi::class, ExperimentalLayoutApi::class)
@Composable @Composable

View File

@ -3,6 +3,7 @@ package org.thoughtcrime.securesms.ui
import androidx.annotation.DrawableRes import androidx.annotation.DrawableRes
import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Spacer
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
@ -14,10 +15,12 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ButtonColors import androidx.compose.material.ButtonColors
import androidx.compose.material.Card import androidx.compose.material.Card
import androidx.compose.material.Icon import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text import androidx.compose.material.Text
import androidx.compose.material.TextButton import androidx.compose.material.TextButton
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
@ -26,6 +29,8 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.google.accompanist.pager.HorizontalPagerIndicator import com.google.accompanist.pager.HorizontalPagerIndicator
import kotlinx.coroutines.launch
import network.loki.messenger.R
@Composable @Composable
fun ItemButton( fun ItemButton(
@ -88,9 +93,49 @@ fun CellWithPaddingAndMargin(
fun SessionHorizontalPagerIndicator(modifier: Modifier, pagerState: PagerState, pageCount: Int) { fun SessionHorizontalPagerIndicator(modifier: Modifier, pagerState: PagerState, pageCount: Int) {
Card(shape = RoundedCornerShape(50.dp), Card(shape = RoundedCornerShape(50.dp),
backgroundColor = Color.Black.copy(alpha = 0.4f), backgroundColor = Color.Black.copy(alpha = 0.4f),
modifier = Modifier.padding(8.dp).then(modifier)) { modifier = Modifier
.padding(8.dp)
.then(modifier)) {
Box(modifier = Modifier.padding(8.dp)) { Box(modifier = Modifier.padding(8.dp)) {
HorizontalPagerIndicator(pagerState = pagerState, pageCount = pageCount) HorizontalPagerIndicator(pagerState = pagerState, pageCount = pageCount)
} }
} }
} }
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CarouselPrevButton(pagerState: PagerState, modifier: Modifier = Modifier) {
CarouselButton(pagerState, pagerState.canScrollBackward, R.drawable.ic_prev, -1, modifier)
}
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CarouselNextButton(pagerState: PagerState, modifier: Modifier = Modifier) {
CarouselButton(pagerState, pagerState.canScrollForward, R.drawable.ic_next, 1, modifier)
}
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CarouselButton(
pagerState: PagerState,
enabled: Boolean,
@DrawableRes id: Int,
delta: Int,
modifier: Modifier = Modifier
) {
if (pagerState.pageCount <= 1) Spacer(modifier = Modifier.width(32.dp))
else {
val animationScope = rememberCoroutineScope()
IconButton(
modifier = Modifier
.width(40.dp)
.then(modifier),
enabled = enabled,
onClick = { animationScope.launch { pagerState.animateScrollToPage(pagerState.currentPage + delta) } }) {
Icon(
painter = painterResource(id = id),
contentDescription = "",
)
}
}
}