Improve themes, styling and animations
Andrew
12 months ago
parent
89d93bc80d
commit
ff64a8bc13
@ -0,0 +1,174 @@
|
||||
package org.thoughtcrime.securesms.ui.components
|
||||
|
||||
import androidx.annotation.StringRes
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.interaction.PressInteraction
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.wrapContentHeight
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material.ButtonDefaults
|
||||
import androidx.compose.material.ContentAlpha
|
||||
import androidx.compose.material.MaterialTheme
|
||||
import androidx.compose.material.OutlinedButton
|
||||
import androidx.compose.material.Text
|
||||
import androidx.compose.material.TextButton
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.runtime.staticCompositionLocalOf
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.TextUnit
|
||||
import androidx.compose.ui.unit.dp
|
||||
import kotlinx.coroutines.delay
|
||||
import kotlinx.coroutines.flow.collectLatest
|
||||
import kotlinx.coroutines.flow.filter
|
||||
import org.thoughtcrime.securesms.ui.GetString
|
||||
import org.thoughtcrime.securesms.ui.LaunchedEffectAsync
|
||||
import org.thoughtcrime.securesms.ui.LocalButtonColor
|
||||
import org.thoughtcrime.securesms.ui.colorDestructive
|
||||
import org.thoughtcrime.securesms.ui.contentDescription
|
||||
import kotlin.time.Duration.Companion.seconds
|
||||
|
||||
val LocalButtonSize = staticCompositionLocalOf { mediumButton }
|
||||
val LocalButtonShape = staticCompositionLocalOf<Shape> { RoundedCornerShape(percent = 50) }
|
||||
|
||||
@Composable
|
||||
fun Modifier.applyButtonSize() = then(LocalButtonSize.current)
|
||||
|
||||
val mediumButton = Modifier.height(41.dp)
|
||||
val smallButton = Modifier.wrapContentHeight()
|
||||
|
||||
@Composable
|
||||
fun OutlineButton(@StringRes textId: Int, modifier: Modifier = Modifier, onClick: () -> Unit) {
|
||||
OutlineButton(stringResource(textId), modifier, onClick)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun OutlineButton(text: String, modifier: Modifier = Modifier, onClick: () -> Unit) {
|
||||
OutlineButton(modifier.contentDescription(text), onClick = onClick) { Text(text) }
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun OutlineButton(
|
||||
modifier: Modifier = Modifier,
|
||||
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
|
||||
onClick: () -> Unit,
|
||||
content: @Composable () -> Unit = {}
|
||||
) {
|
||||
OutlinedButton(
|
||||
modifier = modifier.applyButtonSize(),
|
||||
interactionSource = interactionSource,
|
||||
onClick = onClick,
|
||||
border = BorderStroke(1.dp, LocalButtonColor.current),
|
||||
shape = LocalButtonShape.current,
|
||||
colors = ButtonDefaults.outlinedButtonColors(
|
||||
contentColor = LocalButtonColor.current,
|
||||
backgroundColor = Color.Unspecified
|
||||
)
|
||||
) {
|
||||
content()
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun TemporaryStateButton(
|
||||
content: @Composable (MutableInteractionSource, Boolean) -> Unit,
|
||||
) {
|
||||
val interactions = remember { MutableInteractionSource() }
|
||||
|
||||
var clicked by remember { mutableStateOf(false) }
|
||||
|
||||
content(interactions, clicked)
|
||||
|
||||
LaunchedEffectAsync {
|
||||
interactions.releases.collectLatest {
|
||||
clicked = true
|
||||
delay(2.seconds)
|
||||
clicked = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun FilledButton(
|
||||
text: String,
|
||||
modifier: Modifier = Modifier,
|
||||
onClick: () -> Unit
|
||||
) {
|
||||
OutlinedButton(
|
||||
modifier = modifier.size(108.dp, 34.dp),
|
||||
onClick = onClick,
|
||||
shape = RoundedCornerShape(50),
|
||||
colors = ButtonDefaults.outlinedButtonColors(
|
||||
contentColor = MaterialTheme.colors.background,
|
||||
backgroundColor = LocalButtonColor.current
|
||||
)
|
||||
) {
|
||||
Text(text = text)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun BorderlessButtonSecondary(
|
||||
text: String,
|
||||
onClick: () -> Unit
|
||||
) {
|
||||
BorderlessButton(
|
||||
text,
|
||||
contentColor = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
|
||||
onClick = onClick
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun BorderlessButton(
|
||||
text: String,
|
||||
modifier: Modifier = Modifier,
|
||||
contentDescription: GetString = GetString(text),
|
||||
fontSize: TextUnit = TextUnit.Unspecified,
|
||||
lineHeight: TextUnit = TextUnit.Unspecified,
|
||||
contentColor: Color = MaterialTheme.colors.onBackground,
|
||||
backgroundColor: Color = Color.Transparent,
|
||||
onClick: () -> Unit
|
||||
) {
|
||||
TextButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier.contentDescription(contentDescription),
|
||||
shape = RoundedCornerShape(percent = 50),
|
||||
colors = ButtonDefaults.outlinedButtonColors(
|
||||
contentColor = contentColor,
|
||||
backgroundColor = backgroundColor
|
||||
)
|
||||
) {
|
||||
Text(
|
||||
text = text,
|
||||
textAlign = TextAlign.Center,
|
||||
fontSize = fontSize,
|
||||
lineHeight = lineHeight,
|
||||
modifier = Modifier.padding(horizontal = 2.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
private val MutableInteractionSource.releases
|
||||
get() = interactions.filter { it is PressInteraction.Release }
|
||||
|
||||
@Composable
|
||||
fun SmallButtons(content: @Composable () -> Unit) {
|
||||
CompositionLocalProvider(LocalButtonSize provides smallButton) { content() }
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun DestructiveButtons(content: @Composable () -> Unit) {
|
||||
CompositionLocalProvider(LocalButtonColor provides colorDestructive) { content() }
|
||||
}
|
||||
Loading…
Reference in New Issue