Skip to content

Commit

Permalink
Replace ToggleButtonGroup with SegmentedButton
Browse files Browse the repository at this point in the history
  • Loading branch information
@fibelatti
fibelatti committed Feb 15, 2024
1 parent dde291d commit 52ccb40
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 66 deletions.
68 changes: 39 additions & 29 deletions app/src/main/kotlin/com/fibelatti/pinboard/features/notes/presentation/NoteListScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SingleChoiceSegmentedButtonRow
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
Expand Down Expand Up @@ -46,8 +49,6 @@ import com.fibelatti.pinboard.features.appstate.SidePanelContent
import com.fibelatti.pinboard.features.appstate.ViewNote
import com.fibelatti.pinboard.features.notes.domain.model.Note
import com.fibelatti.pinboard.features.notes.domain.model.NoteSorting
import com.fibelatti.ui.components.RowToggleButtonGroup
import com.fibelatti.ui.components.ToggleButtonGroup
import com.fibelatti.ui.foundation.asHorizontalPaddingDp
import com.fibelatti.ui.foundation.navigationBarsCompat
import com.fibelatti.ui.preview.ThemePreviews
Expand Down Expand Up @@ -145,6 +146,7 @@ fun NoteListScreen(
}

@Composable
@OptIn(ExperimentalMaterial3Api::class)
private fun NoteListContent(
notes: List<Note>,
onSortOptionClicked: (NoteList.Sorting) -> Unit = {},
Expand All @@ -170,28 +172,43 @@ private fun NoteListContent(
val (leftPadding, rightPadding) = WindowInsets.navigationBarsCompat
.asHorizontalPaddingDp(addStart = 16.dp, addEnd = 16.dp)

RowToggleButtonGroup(
items = NoteList.Sorting.entries.map { sorting ->
ToggleButtonGroup.Item(
id = sorting.id,
text = stringResource(id = sorting.label),
)
},
onButtonClick = {
val (index, sorting) = requireNotNull(NoteList.Sorting.findByIdWithIndex(it.id))
selectedSortingIndex = index
onSortOptionClicked(sorting)
},
SingleChoiceSegmentedButtonRow(
modifier = Modifier
.fillMaxWidth()
.padding(
start = leftPadding,
end = if (sidePanelVisible) 16.dp else rightPadding,
),
selectedIndex = selectedSortingIndex,
buttonHeight = 40.dp,
textStyle = MaterialTheme.typography.bodySmall,
)
) {
NoteList.Sorting.entries.forEachIndexed { index, sorting ->
SegmentedButton(
selected = index == selectedSortingIndex,
onClick = {
selectedSortingIndex = index
onSortOptionClicked(sorting)
},
shape = when (index) {
0 -> RoundedCornerShape(
topStart = 16.dp,
bottomStart = 16.dp,
)

NoteList.Sorting.entries.size - 1 -> RoundedCornerShape(
topEnd = 16.dp,
bottomEnd = 16.dp,
)

else -> RoundedCornerShape(0.dp)
},
label = {
Text(
text = stringResource(id = sorting.label),
style = MaterialTheme.typography.bodySmall,
)
},
)
}
}

val (listLeftPadding, listRightPadding) = WindowInsets.navigationBarsCompat.asHorizontalPaddingDp()

Expand Down Expand Up @@ -258,18 +275,11 @@ private fun NoteListItem(

object NoteList {

enum class Sorting(val id: String, val label: Int) {
ByDateUpdatedDesc(id = "date-updated-desc", label = R.string.note_sorting_date_updated_desc),
ByDateUpdatedAsc(id = "date-updated-asc", label = R.string.note_sorting_date_updated_asc),
AtoZ(id = "a-to-z", label = R.string.note_sorting_a_to_z),
enum class Sorting(val label: Int) {
ByDateUpdatedDesc(label = R.string.note_sorting_date_updated_desc),
ByDateUpdatedAsc(label = R.string.note_sorting_date_updated_asc),
AtoZ(label = R.string.note_sorting_a_to_z),
;

companion object {

fun findByIdWithIndex(id: String): IndexedValue<Sorting>? = entries
.withIndex()
.find { it.value.id == id }
}
}
}

Expand Down
84 changes: 47 additions & 37 deletions app/src/main/kotlin/com/fibelatti/pinboard/features/tags/presentation/TagList.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,14 @@ import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SingleChoiceSegmentedButtonRow
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
Expand Down Expand Up @@ -69,8 +72,6 @@ import com.fibelatti.pinboard.features.appstate.PostsForTag
import com.fibelatti.pinboard.features.appstate.RefreshTags
import com.fibelatti.pinboard.features.tags.domain.model.Tag
import com.fibelatti.pinboard.features.tags.domain.model.TagSorting
import com.fibelatti.ui.components.RowToggleButtonGroup
import com.fibelatti.ui.components.ToggleButtonGroup
import com.fibelatti.ui.foundation.asHorizontalPaddingDp
import com.fibelatti.ui.foundation.imeCompat
import com.fibelatti.ui.foundation.navigationBarsCompat
Expand Down Expand Up @@ -257,6 +258,7 @@ fun TagList(
}

@Composable
@OptIn(ExperimentalMaterial3Api::class)
private fun TagListSortingControls(
onSortOptionClicked: (TagList.Sorting) -> Unit,
onSearchInputChanged: (newValue: String) -> Unit,
Expand All @@ -272,32 +274,47 @@ private fun TagListSortingControls(
var showFilter by rememberSaveable { mutableStateOf(false) }
val focusManager = LocalFocusManager.current

RowToggleButtonGroup(
items = TagList.Sorting.entries.map { sorting ->
ToggleButtonGroup.Item(
id = sorting.id,
text = stringResource(id = sorting.label),
)
},
onButtonClick = {
val (index, sorting) = requireNotNull(TagList.Sorting.findByIdWithIndex(it.id))
selectedSortingIndex = index
showFilter = sorting == TagList.Sorting.Search

onSortOptionClicked(sorting)

if (!showFilter) {
onSearchInputChanged("")
onSearchInputFocusChanged(false)
}
},
SingleChoiceSegmentedButtonRow(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
selectedIndex = selectedSortingIndex,
buttonHeight = 40.dp,
textStyle = MaterialTheme.typography.bodySmall,
)
) {
TagList.Sorting.entries.forEachIndexed { index, sorting ->
SegmentedButton(
selected = index == selectedSortingIndex,
onClick = {
selectedSortingIndex = index
showFilter = sorting == TagList.Sorting.Search

onSortOptionClicked(sorting)

if (!showFilter) {
onSearchInputChanged("")
onSearchInputFocusChanged(false)
}
},
shape = when (index) {
0 -> RoundedCornerShape(
topStart = 16.dp,
bottomStart = 16.dp,
)

TagList.Sorting.entries.size - 1 -> RoundedCornerShape(
topEnd = 16.dp,
bottomEnd = 16.dp,
)

else -> RoundedCornerShape(0.dp)
},
label = {
Text(
text = stringResource(id = sorting.label),
style = MaterialTheme.typography.bodySmall,
)
},
)
}
}

AnimatedVisibility(
visible = showFilter,
Expand Down Expand Up @@ -382,20 +399,13 @@ private fun ScrollToTopButton(

object TagList {

enum class Sorting(val id: String, val label: Int) {
enum class Sorting(val label: Int) {

Alphabetically(id = "alphabetically", label = R.string.tags_sorting_a_to_z),
MoreFirst(id = "more-first", label = R.string.tags_sorting_more_first),
LessFirst(id = "less-first", label = R.string.tags_sorting_less_first),
Search(id = "search", label = R.string.tags_sorting_filter),
Alphabetically(label = R.string.tags_sorting_a_to_z),
MoreFirst(label = R.string.tags_sorting_more_first),
LessFirst(label = R.string.tags_sorting_less_first),
Search(label = R.string.tags_sorting_filter),
;

companion object {

fun findByIdWithIndex(id: String): IndexedValue<Sorting>? = entries
.withIndex()
.find { it.value.id == id }
}
}
}

Expand Down

0 comments on commit 52ccb40

Please sign in to comment.