mirror of https://github.com/tasks/tasks
Convert list settings to compose (#3163)
Hady
12 months ago
committed by
GitHub
parent
87c5ec9f14
commit
8e5b93fc10
@ -0,0 +1,20 @@
|
||||
{
|
||||
"version": 3,
|
||||
"artifactType": {
|
||||
"type": "APK",
|
||||
"kind": "Directory"
|
||||
},
|
||||
"applicationId": "org.tasks.ak",
|
||||
"variantName": "genericRelease",
|
||||
"elements": [
|
||||
{
|
||||
"type": "SINGLE",
|
||||
"filters": [],
|
||||
"attributes": [],
|
||||
"versionCode": 130804,
|
||||
"versionName": "14.0.6",
|
||||
"outputFile": "app-generic-release.apk"
|
||||
}
|
||||
],
|
||||
"elementType": "File"
|
||||
}
|
||||
@ -0,0 +1,199 @@
|
||||
package org.tasks.compose
|
||||
|
||||
import androidx.compose.animation.core.FastOutLinearInEasing
|
||||
import androidx.compose.animation.core.animateFloatAsState
|
||||
import androidx.compose.animation.core.tween
|
||||
import androidx.compose.foundation.ExperimentalFoundationApi
|
||||
import androidx.compose.foundation.gestures.animateScrollBy
|
||||
import androidx.compose.foundation.gestures.detectDragGesturesAfterLongPress
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.lazy.LazyItemScope
|
||||
import androidx.compose.foundation.lazy.LazyListItemInfo
|
||||
import androidx.compose.foundation.lazy.LazyListState
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableFloatStateOf
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.rememberCoroutineScope
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.geometry.Offset
|
||||
import androidx.compose.ui.graphics.graphicsLayer
|
||||
import androidx.compose.ui.input.pointer.pointerInput
|
||||
import androidx.compose.ui.zIndex
|
||||
import kotlinx.coroutines.CoroutineScope
|
||||
import kotlinx.coroutines.Job
|
||||
import kotlinx.coroutines.launch
|
||||
import kotlin.math.max
|
||||
import kotlin.math.min
|
||||
|
||||
/**
|
||||
* Drag - drop to reorder elements of LazyColumn
|
||||
*
|
||||
* Implementation is based on:
|
||||
* https://github.com/realityexpander/DragDropColumnCompose
|
||||
*
|
||||
* Scheme of use:
|
||||
* 1. Hoist state of the LazyColumn (create your own and set it as LazyColumn parameter)
|
||||
* 2. Create and remember DragDropState object by call to "rememberDragDropState"
|
||||
* 3. Use Modifier.doDrag in the LazyColumn
|
||||
* 4. enclose LazyList items into DraggableItem
|
||||
* **/
|
||||
|
||||
class DragDropState internal constructor(
|
||||
val state: LazyListState,
|
||||
private val scope: CoroutineScope,
|
||||
private val confirmDrag: (Int) -> Boolean,
|
||||
private val complete: () -> Unit,
|
||||
private val swap: (Int, Int) -> Unit,
|
||||
) {
|
||||
/* primary ID of the item being dragged */
|
||||
var draggedItemIndex by mutableStateOf<Int?>(null)
|
||||
|
||||
private var draggedDistance by mutableFloatStateOf(0f)
|
||||
private var draggingElementOffset: Int = 0 // cached drugged element offset and size
|
||||
private var draggingElementSize: Int = -1 // size must not be negative when dragging is in progress
|
||||
|
||||
private var overscrollJob by mutableStateOf<Job?>( null )
|
||||
|
||||
/* sibling of draggingElementOffset, not cached, for use in animation */
|
||||
internal val draggingItemOffset: Float
|
||||
get() = state.layoutInfo.visibleItemsInfo
|
||||
.firstOrNull { it.index == draggedItemIndex }
|
||||
?.let { item ->
|
||||
draggingElementOffset + draggedDistance - item.offset
|
||||
} ?: 0f
|
||||
|
||||
fun itemAtOffset(offsetY: Float): LazyListItemInfo? =
|
||||
state.layoutInfo.visibleItemsInfo.firstOrNull {
|
||||
item -> offsetY.toInt() in item.offset..(item.offset + item.size)
|
||||
}
|
||||
|
||||
fun startDragging(item: LazyListItemInfo?) {
|
||||
//Log.d("HADY", "start dragging ${item}")
|
||||
if (item != null && confirmDrag(item.index)) {
|
||||
draggedItemIndex = item.index
|
||||
draggingElementOffset = item.offset
|
||||
draggingElementSize = item.size
|
||||
assert(item.size >= 0) { "Invalid size of element ${item.size}" }
|
||||
}
|
||||
}
|
||||
|
||||
fun stopDragging() {
|
||||
draggedDistance = 0f
|
||||
draggedItemIndex = null
|
||||
draggingElementOffset = 0
|
||||
draggingElementSize = -1
|
||||
overscrollJob?.cancel()
|
||||
complete()
|
||||
}
|
||||
|
||||
fun onDrag(offset: Offset) {
|
||||
|
||||
draggedDistance += offset.y
|
||||
|
||||
if (draggedItemIndex != null) {
|
||||
assert(draggingElementSize >= 0) { "FATAL: Invalid dragging element" }
|
||||
|
||||
val startOffset = draggingElementOffset + draggedDistance
|
||||
val endOffset = startOffset + draggingElementSize
|
||||
|
||||
val draggedIndex = draggedItemIndex
|
||||
val dragged = draggedIndex?.let { index ->
|
||||
state.layoutInfo.visibleItemsInfo.getOrNull(
|
||||
index - state.layoutInfo.visibleItemsInfo.first().index
|
||||
)
|
||||
}
|
||||
if (dragged != null) {
|
||||
val up = (startOffset - dragged.offset) > 0
|
||||
val hovered =
|
||||
if (up) itemAtOffset(startOffset + 0.1f * draggingElementSize)
|
||||
else itemAtOffset(endOffset - 0.1f * draggingElementSize)
|
||||
|
||||
if (hovered != null) {
|
||||
scope.launch { swap(draggedIndex, hovered.index) }
|
||||
draggedItemIndex = hovered.index
|
||||
}
|
||||
|
||||
if (overscrollJob?.isActive != true) {
|
||||
val overscroll = when {
|
||||
draggedDistance > 0 -> max(endOffset - state.layoutInfo.viewportEndOffset+50f, 0f)
|
||||
draggedDistance < 0 -> min(startOffset - state.layoutInfo.viewportStartOffset-50f, 0f)
|
||||
else -> 0f
|
||||
}
|
||||
if (overscroll != 0f) {
|
||||
overscrollJob = scope.launch {
|
||||
state.animateScrollBy(
|
||||
overscroll * 1.3f, tween(easing = FastOutLinearInEasing)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} /* end onDrag */
|
||||
} /* end DragDropState */
|
||||
|
||||
@Composable
|
||||
fun rememberDragDropState(
|
||||
lazyListState: LazyListState,
|
||||
confirmDrag: (Int) -> Boolean = { true },
|
||||
completeDragDrop: () -> Unit,
|
||||
doSwap: (Int, Int) -> Unit
|
||||
): DragDropState {
|
||||
val scope = rememberCoroutineScope()
|
||||
val state = remember(lazyListState) {
|
||||
DragDropState(
|
||||
state = lazyListState,
|
||||
swap = doSwap,
|
||||
complete = completeDragDrop,
|
||||
scope = scope,
|
||||
confirmDrag = confirmDrag
|
||||
)
|
||||
}
|
||||
return state
|
||||
}
|
||||
|
||||
fun Modifier.doDrag(dragDropState: DragDropState): Modifier =
|
||||
this.pointerInput(dragDropState) {
|
||||
detectDragGesturesAfterLongPress(
|
||||
onDragStart = { offset ->
|
||||
dragDropState.startDragging(dragDropState.itemAtOffset(offset.y))
|
||||
},
|
||||
onDrag = { change, offset ->
|
||||
change.consume()
|
||||
dragDropState.onDrag(offset)
|
||||
},
|
||||
onDragEnd = { dragDropState.stopDragging() },
|
||||
onDragCancel = { dragDropState.stopDragging() }
|
||||
)
|
||||
}
|
||||
|
||||
@ExperimentalFoundationApi
|
||||
@Composable
|
||||
fun LazyItemScope.DraggableItem(
|
||||
dragDropState: DragDropState,
|
||||
index: Int,
|
||||
modifier: Modifier = Modifier,
|
||||
content: @Composable (isDragging: Boolean) -> Unit
|
||||
) {
|
||||
val current: Float by animateFloatAsState(
|
||||
targetValue = dragDropState.draggingItemOffset * 0.67f
|
||||
)
|
||||
|
||||
val dragging = index == dragDropState.draggedItemIndex
|
||||
|
||||
val draggingModifier = if (dragging) {
|
||||
Modifier
|
||||
.zIndex(1f)
|
||||
.graphicsLayer { translationY = current }
|
||||
} else {
|
||||
Modifier.animateItemPlacement(
|
||||
tween(easing = FastOutLinearInEasing)
|
||||
)
|
||||
}
|
||||
Box(modifier = modifier.then(draggingModifier)) {
|
||||
content(dragging)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,496 @@
|
||||
package org.tasks.compose
|
||||
|
||||
/**
|
||||
* Composables for FilterSettingActivity
|
||||
**/
|
||||
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.ExperimentalFoundationApi
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.itemsIndexed
|
||||
import androidx.compose.foundation.lazy.rememberLazyListState
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.outlined.Abc
|
||||
import androidx.compose.material.icons.outlined.Add
|
||||
import androidx.compose.material.icons.outlined.Delete
|
||||
import androidx.compose.material3.AlertDialog
|
||||
import androidx.compose.material3.ButtonDefaults
|
||||
import androidx.compose.material3.Card
|
||||
import androidx.compose.material3.CardDefaults
|
||||
import androidx.compose.material3.FloatingActionButton
|
||||
import androidx.compose.material3.HorizontalDivider
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.OutlinedButton
|
||||
import androidx.compose.material3.OutlinedTextField
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.MutableIntState
|
||||
import androidx.compose.runtime.MutableState
|
||||
import androidx.compose.runtime.mutableIntStateOf
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.snapshots.SnapshotStateList
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.SolidColor
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.res.colorResource
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.text.style.TextOverflow
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import androidx.compose.ui.window.Dialog
|
||||
import androidx.core.os.ConfigurationCompat
|
||||
import com.todoroo.astrid.core.CriterionInstance
|
||||
import org.tasks.R
|
||||
import org.tasks.compose.ListSettings.SettingRow
|
||||
import org.tasks.compose.SwipeOut.SwipeOut
|
||||
import org.tasks.extensions.formatNumber
|
||||
import org.tasks.themes.TasksTheme
|
||||
import java.util.Locale
|
||||
|
||||
@Composable
|
||||
@Preview (showBackground = true)
|
||||
private fun CriterionTypeSelectPreview () {
|
||||
TasksTheme {
|
||||
FilterCondition.SelectCriterionType(
|
||||
title = "Select criterion type",
|
||||
selected = 1,
|
||||
types = listOf("AND", "OR", "NOT"),
|
||||
onCancel = { /*TODO*/ }) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
@Preview (showBackground = true)
|
||||
private fun InputTextPreview () {
|
||||
TasksTheme {
|
||||
FilterCondition.InputTextOption(title = "Task name contains...", onCancel = { /*TODO*/ }
|
||||
) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
@Preview (showBackground = true)
|
||||
private fun SwipeOutDecorationPreview () {
|
||||
TasksTheme {
|
||||
Box(modifier = Modifier
|
||||
.height(56.dp)
|
||||
.fillMaxWidth()) {
|
||||
FilterCondition.SwipeOutDecoration()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
@Preview (showBackground = true)
|
||||
private fun FabPreview () {
|
||||
TasksTheme {
|
||||
FilterCondition.NewCriterionFAB(
|
||||
isExtended = remember { mutableStateOf(true) }
|
||||
) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
object FilterCondition {
|
||||
@OptIn(ExperimentalFoundationApi::class)
|
||||
@Composable
|
||||
fun FilterCondition(
|
||||
items: SnapshotStateList<CriterionInstance>,
|
||||
onDelete: (Int) -> Unit,
|
||||
doSwap: (Int, Int) -> Unit,
|
||||
onComplete: () -> Unit,
|
||||
onClick: (String) -> Unit
|
||||
) {
|
||||
|
||||
val getIcon: (CriterionInstance) -> Int = { criterion ->
|
||||
when (criterion.type) {
|
||||
CriterionInstance.TYPE_ADD -> R.drawable.ic_call_split_24px
|
||||
CriterionInstance.TYPE_SUBTRACT -> R.drawable.ic_outline_not_interested_24px
|
||||
CriterionInstance.TYPE_INTERSECT -> R.drawable.ic_outline_add_24px
|
||||
else -> {
|
||||
0
|
||||
} /* assert */
|
||||
}
|
||||
}
|
||||
val listState = rememberLazyListState()
|
||||
val dragDropState = rememberDragDropState(
|
||||
lazyListState = listState,
|
||||
confirmDrag = { index -> index != 0 },
|
||||
completeDragDrop = onComplete,
|
||||
) { fromIndex, toIndex ->
|
||||
if (fromIndex != 0 && toIndex != 0) doSwap(fromIndex, toIndex)
|
||||
}
|
||||
|
||||
Row {
|
||||
Text(
|
||||
text = stringResource(id = R.string.custom_filter_criteria),
|
||||
color = MaterialTheme.colorScheme.secondary,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(Constants.KEYLINE_FIRST)
|
||||
)
|
||||
}
|
||||
Row {
|
||||
LazyColumn(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.doDrag(dragDropState),
|
||||
userScrollEnabled = true,
|
||||
state = listState
|
||||
) {
|
||||
itemsIndexed(
|
||||
items = items,
|
||||
key = { _, item -> item.id + " " + item.type + " " + item.end}
|
||||
) { index, criterion ->
|
||||
if (index == 0) {
|
||||
FilterConditionRow(criterion, false, getIcon, onClick)
|
||||
} else {
|
||||
DraggableItem(
|
||||
dragDropState = dragDropState, index = index
|
||||
) { dragging ->
|
||||
SwipeOut(
|
||||
decoration = { SwipeOutDecoration() },
|
||||
onSwipe = { index -> onDelete(index) },
|
||||
index = index
|
||||
) {
|
||||
FilterConditionRow(criterion, dragging, getIcon, onClick)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} /* FilterCondition */
|
||||
|
||||
@Composable
|
||||
private fun FilterConditionRow(
|
||||
criterion: CriterionInstance,
|
||||
dragging: Boolean,
|
||||
getIcon: (CriterionInstance) -> Int,
|
||||
onClick: (String) -> Unit
|
||||
) {
|
||||
HorizontalDivider(
|
||||
color = when (criterion.type) {
|
||||
CriterionInstance.TYPE_ADD -> Color.Gray
|
||||
else -> Color.Transparent
|
||||
}
|
||||
)
|
||||
val modifier =
|
||||
if (dragging) Modifier.background(Color.LightGray)
|
||||
else Modifier
|
||||
SettingRow(
|
||||
modifier = modifier.clickable { onClick(criterion.id) },
|
||||
left = {
|
||||
Box(
|
||||
modifier = Modifier.size(56.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
)
|
||||
{
|
||||
if (criterion.type != CriterionInstance.TYPE_UNIVERSE) {
|
||||
Icon(
|
||||
modifier = Modifier.padding(Constants.KEYLINE_FIRST),
|
||||
painter = painterResource(id = getIcon(criterion)),
|
||||
contentDescription = null
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
center = {
|
||||
Text(
|
||||
text = criterion.titleFromCriterion,
|
||||
fontSize = 18.sp,
|
||||
maxLines = 1,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
modifier = Modifier.padding(start = 16.dp, top = 16.dp, bottom = 16.dp)
|
||||
)
|
||||
},
|
||||
right = {
|
||||
val context = LocalContext.current
|
||||
val locale = remember {
|
||||
ConfigurationCompat
|
||||
.getLocales(context.resources.configuration)
|
||||
.get(0)
|
||||
?: Locale.getDefault()
|
||||
}
|
||||
Text(
|
||||
text = locale.formatNumber(criterion.end),
|
||||
modifier = Modifier.padding(end = Constants.KEYLINE_FIRST),
|
||||
color = Color.Gray,
|
||||
fontSize = 14.sp,
|
||||
textAlign = TextAlign.End
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun SwipeOutDecoration() {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.background(colorResource(id = org.tasks.kmp.R.color.red_a400))
|
||||
//.background(MaterialTheme.colorScheme.secondary)
|
||||
) {
|
||||
|
||||
@Composable
|
||||
fun deleteIcon() {
|
||||
Icon(
|
||||
modifier = Modifier.padding(horizontal = Constants.KEYLINE_FIRST),
|
||||
imageVector = Icons.Outlined.Delete,
|
||||
contentDescription = "Delete",
|
||||
tint = Color.White.copy(alpha = 0.6f)
|
||||
)
|
||||
}
|
||||
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.height(56.dp),
|
||||
horizontalArrangement = Arrangement.SpaceBetween,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
deleteIcon()
|
||||
deleteIcon()
|
||||
}
|
||||
}
|
||||
} /* end SwipeOutDecoration */
|
||||
|
||||
@Composable
|
||||
fun NewCriterionFAB(
|
||||
isExtended: MutableState<Boolean>,
|
||||
onClick: () -> Unit
|
||||
) {
|
||||
|
||||
Box( // lays out over main content as a space to layout FAB
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
contentAlignment = Alignment.BottomEnd
|
||||
) {
|
||||
FloatingActionButton(
|
||||
onClick = onClick,
|
||||
modifier = Modifier.padding(16.dp),
|
||||
shape = RoundedCornerShape(50),
|
||||
containerColor = MaterialTheme.colorScheme.secondary,
|
||||
contentColor = Color.White,
|
||||
) {
|
||||
val extended = isExtended.value
|
||||
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
Icon(
|
||||
imageVector = Icons.Outlined.Add,
|
||||
contentDescription = "New Criteria",
|
||||
modifier = Modifier.padding(
|
||||
start = if (extended) 16.dp else 0.dp
|
||||
)
|
||||
)
|
||||
if (extended)
|
||||
Text(
|
||||
text = LocalContext.current.getString(R.string.CFA_button_add),
|
||||
modifier = Modifier.padding(end = 16.dp)
|
||||
)
|
||||
}
|
||||
} /* end FloatingActionButton */
|
||||
}
|
||||
} /* end NewCriterionFAB */
|
||||
|
||||
@Composable
|
||||
fun SelectCriterionType(
|
||||
title: String,
|
||||
selected: Int,
|
||||
types: List<String>,
|
||||
onCancel: () -> Unit,
|
||||
help: () -> Unit = {},
|
||||
onSelected: (Int) -> Unit
|
||||
) {
|
||||
val selected = remember { mutableIntStateOf(selected) }
|
||||
|
||||
Dialog(onDismissRequest = onCancel)
|
||||
{
|
||||
Card(
|
||||
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.background)
|
||||
) {
|
||||
Column(modifier = Modifier
|
||||
.padding(horizontal = Constants.KEYLINE_FIRST)
|
||||
.padding(top = Constants.HALF_KEYLINE)
|
||||
) {
|
||||
Text(
|
||||
text = title,
|
||||
color = MaterialTheme.colorScheme.onSurface,
|
||||
style = MaterialTheme.typography.headlineSmall,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(48.dp)
|
||||
.padding(top = 16.dp)
|
||||
)
|
||||
Spacer(modifier = Modifier.height(Constants.HALF_KEYLINE))
|
||||
ToggleGroup(items = types, selected = selected)
|
||||
Row(
|
||||
modifier = Modifier.height(48.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Box(contentAlignment = Alignment.CenterStart) {
|
||||
Constants.TextButton(text = R.string.help, onClick = help)
|
||||
}
|
||||
Box(
|
||||
contentAlignment = Alignment.CenterEnd,
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
) {
|
||||
Row {
|
||||
Constants.TextButton(text = R.string.cancel, onClick = onCancel)
|
||||
Constants.TextButton(text = R.string.ok) { onSelected(selected.intValue) }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} /* end SelectCriterionType */
|
||||
|
||||
@Composable
|
||||
fun ToggleGroup(
|
||||
items: List<String>,
|
||||
selected: MutableIntState = remember { mutableIntStateOf(0) }
|
||||
) {
|
||||
assert(selected.intValue in items.indices)
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(56.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Row {
|
||||
for (index in items.indices) {
|
||||
val highlight = (index == selected.intValue)
|
||||
val color =
|
||||
if (highlight) MaterialTheme.colorScheme.secondary.copy(alpha = 0.5f)
|
||||
else MaterialTheme.colorScheme.onBackground.copy(alpha = 0.5f)
|
||||
OutlinedButton(
|
||||
onClick = { selected.intValue = index },
|
||||
border = BorderStroke(1.dp, SolidColor(color.copy(alpha = 0.5f))),
|
||||
colors = ButtonDefaults.outlinedButtonColors(
|
||||
containerColor = color.copy(alpha = 0.2f),
|
||||
contentColor = MaterialTheme.colorScheme.onBackground),
|
||||
shape = RoundedCornerShape(Constants.HALF_KEYLINE)
|
||||
) {
|
||||
Text(items[index])
|
||||
}
|
||||
if (index<items.size-1) Spacer(modifier = Modifier.size(2.dp))
|
||||
}
|
||||
}
|
||||
}
|
||||
} /* end ToggleGroup */
|
||||
|
||||
|
||||
@Composable
|
||||
fun SelectFromList(
|
||||
names: List<String>,
|
||||
title: String? = null,
|
||||
onCancel: () -> Unit,
|
||||
onSelected: (Int) -> Unit
|
||||
) {
|
||||
Dialog(onDismissRequest = onCancel) {
|
||||
Card(
|
||||
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.background)
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.padding(horizontal = Constants.KEYLINE_FIRST)
|
||||
.padding(bottom = Constants.KEYLINE_FIRST)
|
||||
) {
|
||||
title?.let { title ->
|
||||
Text(
|
||||
text = title,
|
||||
color = MaterialTheme.colorScheme.onSurface,
|
||||
style = MaterialTheme.typography.headlineSmall,
|
||||
fontWeight = FontWeight.Medium,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(48.dp)
|
||||
.padding(top = Constants.KEYLINE_FIRST)
|
||||
)
|
||||
}
|
||||
names.forEachIndexed { index, name ->
|
||||
Text(
|
||||
text = name,
|
||||
color = MaterialTheme.colorScheme.onSurface,
|
||||
style = MaterialTheme.typography.bodyMedium,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(48.dp)
|
||||
.padding(top = Constants.KEYLINE_FIRST)
|
||||
.clickable { onSelected(index) }
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} /* end SelectFromList */
|
||||
|
||||
|
||||
@Composable
|
||||
fun InputTextOption(
|
||||
title: String,
|
||||
onCancel: () -> Unit,
|
||||
onDone: (String) -> Unit
|
||||
) {
|
||||
val text = remember { mutableStateOf("") }
|
||||
AlertDialog(
|
||||
onDismissRequest = onCancel,
|
||||
confirmButton = {
|
||||
Constants.TextButton(
|
||||
text = R.string.ok,
|
||||
onClick = { onDone(text.value) })
|
||||
},
|
||||
dismissButton = { Constants.TextButton(text = R.string.cancel, onClick = onCancel) },
|
||||
text = {
|
||||
Column(modifier = Modifier.fillMaxWidth()) {
|
||||
Text(
|
||||
title,
|
||||
style = MaterialTheme.typography.headlineSmall,
|
||||
)
|
||||
Spacer(Modifier.height(Constants.KEYLINE_FIRST))
|
||||
OutlinedTextField(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
value = text.value,
|
||||
label = { Text(title) },
|
||||
onValueChange = { text.value = it },
|
||||
leadingIcon = {
|
||||
Icon(
|
||||
imageVector = Icons.Outlined.Abc,
|
||||
contentDescription = null
|
||||
)
|
||||
},
|
||||
textStyle = MaterialTheme.typography.bodyMedium,
|
||||
colors = Constants.textFieldColors(),
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
)
|
||||
} /* end InputTextOption */
|
||||
}
|
||||
@ -0,0 +1,374 @@
|
||||
package org.tasks.compose
|
||||
|
||||
/**
|
||||
* Composables for BaseListSettingActivity
|
||||
*/
|
||||
import androidx.compose.foundation.Canvas
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.ColumnScope
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.requiredHeight
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.foundation.text.BasicTextField
|
||||
import androidx.compose.material3.AlertDialog
|
||||
import androidx.compose.material3.HorizontalDivider
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.LinearProgressIndicator
|
||||
import androidx.compose.material3.LocalContentColor
|
||||
import androidx.compose.material3.LocalTextStyle
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.ProvideTextStyle
|
||||
import androidx.compose.material3.Snackbar
|
||||
import androidx.compose.material3.SnackbarHost
|
||||
import androidx.compose.material3.SnackbarHostState
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.LaunchedEffect
|
||||
import androidx.compose.runtime.MutableState
|
||||
import androidx.compose.runtime.State
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.focus.FocusRequester
|
||||
import androidx.compose.ui.focus.focusRequester
|
||||
import androidx.compose.ui.focus.onFocusChanged
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.SolidColor
|
||||
import androidx.compose.ui.graphics.drawscope.Stroke
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
|
||||
import androidx.compose.ui.res.colorResource
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.res.vectorResource
|
||||
import androidx.compose.ui.text.TextStyle
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import kotlinx.coroutines.delay
|
||||
import org.tasks.R
|
||||
import org.tasks.compose.components.TasksIcon
|
||||
import org.tasks.themes.TasksIcons
|
||||
import org.tasks.themes.TasksTheme
|
||||
|
||||
@Composable
|
||||
@Preview (showBackground = true)
|
||||
private fun TitleBarPreview() {
|
||||
TasksTheme {
|
||||
ListSettings.Toolbar(
|
||||
title = "Tollbar title",
|
||||
save = { /*TODO*/ }, optionButton = { DeleteButton {} }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
@Preview(showBackground = true)
|
||||
private fun PromptActionPreview() {
|
||||
TasksTheme {
|
||||
ListSettings.PromptAction(
|
||||
showDialog = remember { mutableStateOf(true) },
|
||||
title = "Delete list?",
|
||||
onAction = { /*TODO*/ })
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
@Preview (showBackground = true)
|
||||
private fun IconSelectPreview () {
|
||||
TasksTheme {
|
||||
ListSettings.SelectIconRow(
|
||||
icon = TasksIcons.FILTER_LIST,
|
||||
selectIcon = {}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
@Preview (showBackground = true)
|
||||
private fun ColorSelectPreview () {
|
||||
TasksTheme {
|
||||
ListSettings.SelectColorRow(
|
||||
color = remember { mutableStateOf(Color.Red) },
|
||||
selectColor = {},
|
||||
clearColor = {}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
object ListSettings {
|
||||
|
||||
@Composable
|
||||
fun Toolbar(
|
||||
title: String,
|
||||
save: () -> Unit,
|
||||
optionButton: @Composable () -> Unit,
|
||||
) {
|
||||
|
||||
/* Hady: reminder for the future
|
||||
val activity = LocalView.current.context as Activity
|
||||
activity.window.statusBarColor = colorResource(id = R.color.drawer_color_selected).toArgb()
|
||||
*/
|
||||
|
||||
Surface(
|
||||
shadowElevation = 4.dp,
|
||||
color = colorResource(id = R.color.content_background),
|
||||
contentColor = colorResource(id = R.color.text_primary),
|
||||
modifier = Modifier.requiredHeight(56.dp)
|
||||
)
|
||||
{
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
IconButton(onClick = save, modifier = Modifier.size(56.dp)) {
|
||||
Icon(
|
||||
imageVector = ImageVector.vectorResource(R.drawable.ic_outline_save_24px),
|
||||
contentDescription = stringResource(id = R.string.save),
|
||||
)
|
||||
}
|
||||
Text(
|
||||
text = title,
|
||||
fontWeight = FontWeight.Medium,
|
||||
fontSize = 20.sp,
|
||||
modifier = Modifier
|
||||
.weight(0.9f)
|
||||
.padding(start = Constants.KEYLINE_FIRST)
|
||||
)
|
||||
optionButton()
|
||||
}
|
||||
}
|
||||
} /* ToolBar */
|
||||
|
||||
@Composable
|
||||
fun ProgressBar(showProgress: State<Boolean>) {
|
||||
Box(modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.requiredHeight(3.dp))
|
||||
{
|
||||
if (showProgress.value) {
|
||||
LinearProgressIndicator(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
trackColor = LocalContentColor.current.copy(alpha = 0.3f), //Color.LightGray,
|
||||
color = colorResource(org.tasks.kmp.R.color.red_a400)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun TitleInput(
|
||||
text: MutableState<String>,
|
||||
error: MutableState<String>,
|
||||
requestKeyboard: Boolean,
|
||||
modifier: Modifier = Modifier,
|
||||
label: String = stringResource(R.string.display_name),
|
||||
errorState: Color = MaterialTheme.colorScheme.secondary,
|
||||
activeState: Color = LocalContentColor.current.copy(alpha = 0.75f),
|
||||
inactiveState: Color = LocalContentColor.current.copy(alpha = 0.3f),
|
||||
) {
|
||||
val keyboardController = LocalSoftwareKeyboardController.current
|
||||
val requester = remember { FocusRequester() }
|
||||
val focused = remember { mutableStateOf(false) }
|
||||
val labelColor = when {
|
||||
(error.value != "") -> errorState
|
||||
(focused.value) -> activeState
|
||||
else -> inactiveState
|
||||
}
|
||||
val dividerColor = if (focused.value) errorState else labelColor
|
||||
val labelText = if (error.value != "") error.value else label
|
||||
|
||||
Row (modifier = modifier)
|
||||
{
|
||||
Column {
|
||||
Text(
|
||||
modifier = Modifier.padding(top = 18.dp, bottom = 4.dp),
|
||||
text = labelText,
|
||||
fontSize = 12.sp,
|
||||
letterSpacing = 0.sp,
|
||||
fontWeight = FontWeight.Medium,
|
||||
color = labelColor
|
||||
)
|
||||
|
||||
BasicTextField(
|
||||
value = text.value,
|
||||
textStyle = TextStyle(
|
||||
fontSize = LocalTextStyle.current.fontSize,
|
||||
color = LocalContentColor.current
|
||||
),
|
||||
onValueChange = {
|
||||
text.value = it
|
||||
if (error.value != "") error.value = ""
|
||||
},
|
||||
cursorBrush = SolidColor(errorState), // SolidColor(LocalContentColor.current),
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(bottom = 3.dp)
|
||||
.focusRequester(requester)
|
||||
.onFocusChanged { focused.value = (it.isFocused) }
|
||||
)
|
||||
HorizontalDivider(
|
||||
color = dividerColor,
|
||||
modifier = Modifier.padding(bottom = 8.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (requestKeyboard) {
|
||||
LaunchedEffect(null) {
|
||||
requester.requestFocus()
|
||||
delay(30) // Workaround. Otherwise keyboard don't show in 4/5 tries
|
||||
keyboardController?.show()
|
||||
}
|
||||
}
|
||||
} /* TextInput */
|
||||
|
||||
@Composable
|
||||
fun SelectColorRow(color: State<Color>, selectColor: () -> Unit, clearColor: () -> Unit) =
|
||||
SettingRow(
|
||||
modifier = Modifier.clickable(onClick = selectColor),
|
||||
left = {
|
||||
IconButton(onClick = { selectColor() }) {
|
||||
if (color.value == Color.Unspecified) {
|
||||
Icon(
|
||||
imageVector = ImageVector.vectorResource(R.drawable.ic_outline_not_interested_24px),
|
||||
tint = colorResource(R.color.icon_tint_with_alpha),
|
||||
contentDescription = null
|
||||
)
|
||||
} else {
|
||||
val borderColor = colorResource(R.color.icon_tint_with_alpha) // colorResource(R.color.text_tertiary)
|
||||
Box(
|
||||
modifier = Modifier.size(56.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Canvas(modifier = Modifier.size(24.dp)) {
|
||||
drawCircle(color = color.value)
|
||||
drawCircle(color = borderColor, style = Stroke(width = 4.0f)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
center = {
|
||||
Text(
|
||||
text = LocalContext.current.getString(R.string.color),
|
||||
modifier = Modifier.padding(start = Constants.KEYLINE_FIRST)
|
||||
)
|
||||
},
|
||||
right = {
|
||||
if (color.value != Color.Unspecified) {
|
||||
IconButton(onClick = clearColor) {
|
||||
Icon(
|
||||
imageVector = ImageVector.vectorResource(id = R.drawable.ic_outline_clear_24px),
|
||||
contentDescription = null
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
@Composable
|
||||
fun SelectIconRow(icon: String, selectIcon: () -> Unit) =
|
||||
SettingRow(
|
||||
modifier = Modifier.clickable(onClick = selectIcon),
|
||||
left = {
|
||||
IconButton(onClick = selectIcon) {
|
||||
TasksIcon(
|
||||
label = icon,
|
||||
tint = colorResource(R.color.icon_tint_with_alpha)
|
||||
)
|
||||
}
|
||||
},
|
||||
center = {
|
||||
Text(
|
||||
text = LocalContext.current.getString(R.string.icon),
|
||||
modifier = Modifier.padding(start = Constants.KEYLINE_FIRST)
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@Composable
|
||||
fun SettingRow(
|
||||
left: @Composable () -> Unit,
|
||||
center: @Composable () -> Unit,
|
||||
right: @Composable (() -> Unit)? = null,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
Row(verticalAlignment = Alignment.CenterVertically, modifier = modifier) {
|
||||
Box (modifier = Modifier.size(56.dp), contentAlignment = Alignment.Center) {
|
||||
left()
|
||||
}
|
||||
Box (
|
||||
modifier = Modifier
|
||||
.height(56.dp)
|
||||
.weight(1f), contentAlignment = Alignment.CenterStart
|
||||
) {
|
||||
center()
|
||||
}
|
||||
right?.let {
|
||||
Box (modifier = Modifier.size(56.dp), contentAlignment = Alignment.Center) {
|
||||
it.invoke()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun SettingsSurface(content: @Composable ColumnScope.() -> Unit) {
|
||||
ProvideTextStyle(LocalTextStyle.current.copy(fontSize = 18.sp)) {
|
||||
Surface(
|
||||
color = colorResource(id = R.color.window_background),
|
||||
contentColor = colorResource(id = R.color.text_primary)
|
||||
) {
|
||||
Column(modifier = Modifier.fillMaxSize()) { content() }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun Toaster(state: SnackbarHostState) {
|
||||
SnackbarHost(state) { data ->
|
||||
Box(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Snackbar(
|
||||
modifier = Modifier.padding(horizontal = 24.dp),
|
||||
shape = RoundedCornerShape(10.dp),
|
||||
containerColor = colorResource(id = R.color.snackbar_background),
|
||||
contentColor = colorResource(id = R.color.snackbar_text_color),
|
||||
) {
|
||||
Text(text = data.visuals.message, fontSize = 18.sp)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun PromptAction(
|
||||
showDialog: MutableState<Boolean>,
|
||||
title: String,
|
||||
onAction: () -> Unit,
|
||||
onCancel: () -> Unit = { showDialog.value = false }
|
||||
) {
|
||||
if (showDialog.value) {
|
||||
AlertDialog(
|
||||
onDismissRequest = onCancel,
|
||||
title = { Text(title, style = MaterialTheme.typography.headlineSmall) },
|
||||
confirmButton = { Constants.TextButton(text = R.string.ok, onClick = onAction) },
|
||||
dismissButton = { Constants.TextButton(text = R.string.cancel, onClick = onCancel) }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,94 @@
|
||||
package org.tasks.compose
|
||||
|
||||
/**
|
||||
* Simple Swipe-to-delete implementation
|
||||
*/
|
||||
|
||||
import androidx.compose.animation.core.exponentialDecay
|
||||
import androidx.compose.animation.core.tween
|
||||
import androidx.compose.foundation.ExperimentalFoundationApi
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.gestures.AnchoredDraggableState
|
||||
import androidx.compose.foundation.gestures.DraggableAnchors
|
||||
import androidx.compose.foundation.gestures.Orientation
|
||||
import androidx.compose.foundation.gestures.anchoredDraggable
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.BoxScope
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.offset
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.platform.LocalConfiguration
|
||||
import androidx.compose.ui.platform.LocalDensity
|
||||
import androidx.compose.ui.res.colorResource
|
||||
import androidx.compose.ui.unit.IntOffset
|
||||
import androidx.compose.ui.unit.dp
|
||||
import org.tasks.R
|
||||
import kotlin.math.roundToInt
|
||||
|
||||
object SwipeOut {
|
||||
|
||||
private enum class Anchors { Left, Center, Right }
|
||||
|
||||
@OptIn(ExperimentalFoundationApi::class)
|
||||
@Composable
|
||||
fun SwipeOut(
|
||||
modifier: Modifier = Modifier,
|
||||
index: Int,
|
||||
onSwipe: (Int) -> Unit,
|
||||
decoration: @Composable BoxScope.() -> Unit = {},
|
||||
content: @Composable BoxScope.() -> Unit
|
||||
) {
|
||||
val screenWidthPx =
|
||||
with(LocalDensity.current) {
|
||||
LocalConfiguration.current.screenWidthDp.dp.roundToPx().toFloat()
|
||||
}
|
||||
|
||||
val dragState: AnchoredDraggableState<Anchors> = remember {
|
||||
AnchoredDraggableState(
|
||||
initialValue = Anchors.Center,
|
||||
anchors = DraggableAnchors {
|
||||
Anchors.Left at -screenWidthPx * 3/4
|
||||
Anchors.Center at 0f
|
||||
Anchors.Right at screenWidthPx * 3/4
|
||||
},
|
||||
positionalThreshold = { _ -> screenWidthPx/3 },
|
||||
velocityThreshold = { 100f },
|
||||
snapAnimationSpec = tween(),
|
||||
decayAnimationSpec = exponentialDecay()
|
||||
)
|
||||
}
|
||||
|
||||
if (dragState.currentValue == Anchors.Left || dragState.currentValue == Anchors.Right) {
|
||||
onSwipe(index)
|
||||
}
|
||||
|
||||
Box( /* container for swipeable and it's background decoration */
|
||||
modifier = modifier.fillMaxSize(),
|
||||
contentAlignment = Alignment.CenterStart
|
||||
) {
|
||||
|
||||
decoration()
|
||||
|
||||
Box(
|
||||
modifier = modifier
|
||||
.fillMaxWidth()
|
||||
.offset {
|
||||
IntOffset(
|
||||
x = dragState
|
||||
.requireOffset()
|
||||
.roundToInt(),
|
||||
y = 0
|
||||
)
|
||||
}
|
||||
.background(colorResource(id = R.color.content_background)) // MUST BE AFTER .offset modifier (?!?!)
|
||||
.anchoredDraggable(state = dragState, orientation = Orientation.Horizontal)
|
||||
) {
|
||||
content()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue