From be639c45653d40ba8f1a6b58e92ee76c8f353cef Mon Sep 17 00:00:00 2001 From: sevonj <100710152+sevonj@users.noreply.github.com> Date: Thu, 14 Nov 2024 17:19:04 +0200 Subject: [PATCH 01/10] Feat: Resizeable album grid --- .../symphony/ui/components/AlbumGrid.kt | 10 ++- .../symphony/ui/components/MediaSortBar.kt | 68 +++++++++++++++++-- .../symphony/ui/components/ResponsiveGrid.kt | 4 +- 3 files changed, 74 insertions(+), 8 deletions(-) diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt index 25a3a50e..35c0c7e8 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt @@ -9,7 +9,9 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.derivedStateOf import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import io.github.zyrouge.symphony.services.groove.Groove import io.github.zyrouge.symphony.services.groove.repositories.AlbumRepository import io.github.zyrouge.symphony.ui.helpers.ViewContext @@ -27,6 +29,7 @@ fun AlbumGrid( context.symphony.groove.album.sort(albumIds, sortBy, sortReverse) } } + var albumGridSize by remember { mutableStateOf(200f) } MediaSortBarScaffold( mediaSortBar = { @@ -46,6 +49,11 @@ fun AlbumGrid( label = { Text(context.symphony.t.XAlbums((albumsCount ?: albumIds.size).toString())) }, + gridSize = albumGridSize, + onGridSizeChange = { + albumGridSize = it + //println("Grid size: %f".format(albumGridSize)) + } ) }, content = { @@ -61,7 +69,7 @@ fun AlbumGrid( content = { Text(context.symphony.t.DamnThisIsSoEmpty) } ) - else -> ResponsiveGrid { + else -> ResponsiveGrid(size = albumGridSize) { itemsIndexed( sortedAlbumIds, key = { i, x -> "$i-$x" }, diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/MediaSortBar.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/MediaSortBar.kt index b865aaab..8d243df4 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/MediaSortBar.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/MediaSortBar.kt @@ -2,6 +2,7 @@ package io.github.zyrouge.symphony.ui.components import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer @@ -11,7 +12,9 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.ArrowDownward +import androidx.compose.material.icons.filled.ArrowDropDown import androidx.compose.material.icons.filled.ArrowUpward +import androidx.compose.material.icons.filled.GridView import androidx.compose.material.icons.filled.Shuffle import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.DropdownMenu @@ -23,6 +26,7 @@ import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MenuDefaults import androidx.compose.material3.ProvideTextStyle import androidx.compose.material3.RadioButton +import androidx.compose.material3.Slider import androidx.compose.material3.Text import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable @@ -32,9 +36,11 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp import io.github.zyrouge.symphony.ui.helpers.ViewContext +import kotlin.math.roundToInt @Composable fun > MediaSortBar( @@ -46,8 +52,11 @@ fun > MediaSortBar( onSortChange: (T) -> Unit, label: @Composable () -> Unit, onShufflePlay: (() -> Unit)? = null, + gridSize: Float? = null, + onGridSizeChange: ((Float) -> Unit)? = null, ) { - var showDropdown by remember { mutableStateOf(false) } + var showSortDropdown by remember { mutableStateOf(false) } + var showViewDropdown by remember { mutableStateOf(false) } val currentTextStyle = MaterialTheme.typography.bodySmall.run { copy(color = MaterialTheme.colorScheme.onSurface) } @@ -81,18 +90,18 @@ fun > MediaSortBar( TextButton( colors = textButtonStyle, onClick = { - showDropdown = !showDropdown + showSortDropdown = !showSortDropdown } ) { Text(sorts[sort]!!(context), style = currentTextStyle) } DropdownMenu( - expanded = showDropdown, - onDismissRequest = { showDropdown = false } + expanded = showSortDropdown, + onDismissRequest = { showSortDropdown = false } ) { sorts.map { val onClick = { - showDropdown = false + showSortDropdown = false onSortChange(it.key) } @@ -119,6 +128,55 @@ fun > MediaSortBar( } } } + gridSize?.let { + Box { + TextButton( + colors = textButtonStyle, + onClick = { showViewDropdown = !showViewDropdown }, + ) { + Icon( + Icons.Filled.GridView, + null, + modifier = iconModifier, + ) + Icon( + Icons.Filled.ArrowDropDown, + null, + modifier = iconModifier, + ) + } + DropdownMenu( + expanded = showViewDropdown, + onDismissRequest = { showViewDropdown = false } + ) { + Row( + modifier = Modifier.padding( + MenuDefaults.DropdownMenuItemContentPadding.run { + val horizontalPadding = + calculateLeftPadding(LayoutDirection.Ltr) + PaddingValues( + start = horizontalPadding.div(2), + end = horizontalPadding.div(2), + ) + }, + ) + ) { + Column(modifier = Modifier.padding(horizontal = 16.dp)) { + Text(text = "Grid size") + val width = LocalConfiguration.current.screenWidthDp.toFloat() + val stops = width / 100f + Slider( + modifier = Modifier.width(192.dp), + value = stops - (width / gridSize) + 1, + onValueChange = { onGridSizeChange?.invoke(width / (stops - it + 1)) }, + valueRange = 1f..stops, + steps = (stops - 2).roundToInt(), + ) + } + } + } + } + } } Row(verticalAlignment = Alignment.CenterVertically) { ProvideTextStyle(currentTextStyle) { diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt index 60c2b594..2058eb5c 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt @@ -13,9 +13,9 @@ import kotlin.math.roundToInt data class ResponsiveGridData(val columnsCount: Int) @Composable -fun ResponsiveGrid(content: LazyGridScope.(ResponsiveGridData) -> Unit) { +fun ResponsiveGrid(size: Float = 200f, content: LazyGridScope.(ResponsiveGridData) -> Unit) { BoxWithConstraints(modifier = Modifier.fillMaxSize()) { - val cols = (maxWidth.value / 200).roundToInt() + val cols = (maxWidth.value / size).roundToInt() val gridState = rememberLazyGridState() val responsiveGridData = ResponsiveGridData(columnsCount = cols) From d0845fc8db6f30dd347e8c45ebcd17d05346e583 Mon Sep 17 00:00:00 2001 From: sevonj <100710152+sevonj@users.noreply.github.com> Date: Thu, 14 Nov 2024 19:25:52 +0200 Subject: [PATCH 02/10] Fix merge mistake --- .../io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt index 2058eb5c..376ec9f4 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt @@ -15,7 +15,7 @@ data class ResponsiveGridData(val columnsCount: Int) @Composable fun ResponsiveGrid(size: Float = 200f, content: LazyGridScope.(ResponsiveGridData) -> Unit) { BoxWithConstraints(modifier = Modifier.fillMaxSize()) { - val cols = (maxWidth.value / size).roundToInt() + val cols = (this@BoxWithConstraints.maxWidth.value / size).roundToInt() val gridState = rememberLazyGridState() val responsiveGridData = ResponsiveGridData(columnsCount = cols) From a2b0c42074712cfe17de38a3c096fe4d3da4899b Mon Sep 17 00:00:00 2001 From: sevonj <100710152+sevonj@users.noreply.github.com> Date: Thu, 14 Nov 2024 19:30:47 +0200 Subject: [PATCH 03/10] Remove leftovers --- .../java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt | 1 - 1 file changed, 1 deletion(-) diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt index 35c0c7e8..349354d2 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt @@ -52,7 +52,6 @@ fun AlbumGrid( gridSize = albumGridSize, onGridSizeChange = { albumGridSize = it - //println("Grid size: %f".format(albumGridSize)) } ) }, From 6027a97dc091cb09d52493bd7e42dd3b006a5a03 Mon Sep 17 00:00:00 2001 From: sevonj <100710152+sevonj@users.noreply.github.com> Date: Thu, 14 Nov 2024 19:31:37 +0200 Subject: [PATCH 04/10] Rename tileSize --- .../io/github/zyrouge/symphony/ui/components/AlbumGrid.kt | 2 +- .../github/zyrouge/symphony/ui/components/ResponsiveGrid.kt | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt index 349354d2..97913d62 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt @@ -68,7 +68,7 @@ fun AlbumGrid( content = { Text(context.symphony.t.DamnThisIsSoEmpty) } ) - else -> ResponsiveGrid(size = albumGridSize) { + else -> ResponsiveGrid(tileSize = albumGridSize) { itemsIndexed( sortedAlbumIds, key = { i, x -> "$i-$x" }, diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt index 376ec9f4..e0c69d49 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt @@ -13,9 +13,9 @@ import kotlin.math.roundToInt data class ResponsiveGridData(val columnsCount: Int) @Composable -fun ResponsiveGrid(size: Float = 200f, content: LazyGridScope.(ResponsiveGridData) -> Unit) { +fun ResponsiveGrid(tileSize: Float = 200f, content: LazyGridScope.(ResponsiveGridData) -> Unit) { BoxWithConstraints(modifier = Modifier.fillMaxSize()) { - val cols = (this@BoxWithConstraints.maxWidth.value / size).roundToInt() + val cols = (this@BoxWithConstraints.maxWidth.value / tileSize).roundToInt() val gridState = rememberLazyGridState() val responsiveGridData = ResponsiveGridData(columnsCount = cols) From 808ac1753213436b2f4e6b3e2fc71891ea900b5b Mon Sep 17 00:00:00 2001 From: sevonj <100710152+sevonj@users.noreply.github.com> Date: Thu, 14 Nov 2024 19:31:37 +0200 Subject: [PATCH 05/10] Rename tileSize --- .../io/github/zyrouge/symphony/ui/components/AlbumGrid.kt | 8 ++++---- .../zyrouge/symphony/ui/components/ResponsiveGrid.kt | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt index 349354d2..8c44ad3f 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt @@ -29,7 +29,7 @@ fun AlbumGrid( context.symphony.groove.album.sort(albumIds, sortBy, sortReverse) } } - var albumGridSize by remember { mutableStateOf(200f) } + var tileSize by remember { mutableStateOf(200f) } MediaSortBarScaffold( mediaSortBar = { @@ -49,9 +49,9 @@ fun AlbumGrid( label = { Text(context.symphony.t.XAlbums((albumsCount ?: albumIds.size).toString())) }, - gridSize = albumGridSize, + gridSize = tileSize, onGridSizeChange = { - albumGridSize = it + tileSize = it } ) }, @@ -68,7 +68,7 @@ fun AlbumGrid( content = { Text(context.symphony.t.DamnThisIsSoEmpty) } ) - else -> ResponsiveGrid(size = albumGridSize) { + else -> ResponsiveGrid(tileSize = tileSize) { itemsIndexed( sortedAlbumIds, key = { i, x -> "$i-$x" }, diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt index 376ec9f4..e0c69d49 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt @@ -13,9 +13,9 @@ import kotlin.math.roundToInt data class ResponsiveGridData(val columnsCount: Int) @Composable -fun ResponsiveGrid(size: Float = 200f, content: LazyGridScope.(ResponsiveGridData) -> Unit) { +fun ResponsiveGrid(tileSize: Float = 200f, content: LazyGridScope.(ResponsiveGridData) -> Unit) { BoxWithConstraints(modifier = Modifier.fillMaxSize()) { - val cols = (this@BoxWithConstraints.maxWidth.value / size).roundToInt() + val cols = (this@BoxWithConstraints.maxWidth.value / tileSize).roundToInt() val gridState = rememberLazyGridState() val responsiveGridData = ResponsiveGridData(columnsCount = cols) From b14fd2a6bb5a2f6364e5e1e4639db518ad43ac7d Mon Sep 17 00:00:00 2001 From: sevonj <100710152+sevonj@users.noreply.github.com> Date: Thu, 14 Nov 2024 20:25:06 +0200 Subject: [PATCH 06/10] Bottom sheet initial --- .../symphony/ui/components/AlbumGrid.kt | 27 ++++++-- .../symphony/ui/components/MediaSortBar.kt | 68 ++----------------- .../symphony/ui/components/ResponsiveGrid.kt | 39 +++++++++++ 3 files changed, 66 insertions(+), 68 deletions(-) diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt index 3c1a973a..377cee39 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt @@ -3,12 +3,17 @@ package io.github.zyrouge.symphony.ui.components import androidx.compose.foundation.lazy.grid.itemsIndexed import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Album +import androidx.compose.material3.Button +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon +import androidx.compose.material3.ModalBottomSheet import androidx.compose.material3.Text +import androidx.compose.material3.rememberModalBottomSheetState import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.derivedStateOf import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableFloatStateOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue @@ -16,6 +21,7 @@ import io.github.zyrouge.symphony.services.groove.Groove import io.github.zyrouge.symphony.services.groove.repositories.AlbumRepository import io.github.zyrouge.symphony.ui.helpers.ViewContext +@OptIn(ExperimentalMaterial3Api::class) @Composable fun AlbumGrid( context: ViewContext, @@ -29,7 +35,9 @@ fun AlbumGrid( context.symphony.groove.album.sort(albumIds, sortBy, sortReverse) } } - var tileSize by remember { mutableStateOf(200f) } + var tileSize by remember { mutableFloatStateOf(200f) } + val sheetState = rememberModalBottomSheetState() + var showBottomSheet by remember { mutableStateOf(false) } MediaSortBarScaffold( mediaSortBar = { @@ -49,10 +57,6 @@ fun AlbumGrid( label = { Text(context.symphony.t.XAlbums((albumsCount ?: albumIds.size).toString())) }, - gridSize = tileSize, - onGridSizeChange = { - tileSize = it - } ) }, content = { @@ -80,6 +84,19 @@ fun AlbumGrid( } } } + + Button(onClick = { showBottomSheet = true }) { Text("bottom sheet") } + if (showBottomSheet) { + ModalBottomSheet( + onDismissRequest = { showBottomSheet = false }, + sheetState = sheetState + ) { + ResponsiveGridSizeAdjust( + tileSize, + onTileSizeChange = { tileSize = it }, + ) + } + } } ) } diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/MediaSortBar.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/MediaSortBar.kt index 8d243df4..b865aaab 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/MediaSortBar.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/MediaSortBar.kt @@ -2,7 +2,6 @@ package io.github.zyrouge.symphony.ui.components import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer @@ -12,9 +11,7 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.ArrowDownward -import androidx.compose.material.icons.filled.ArrowDropDown import androidx.compose.material.icons.filled.ArrowUpward -import androidx.compose.material.icons.filled.GridView import androidx.compose.material.icons.filled.Shuffle import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.DropdownMenu @@ -26,7 +23,6 @@ import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MenuDefaults import androidx.compose.material3.ProvideTextStyle import androidx.compose.material3.RadioButton -import androidx.compose.material3.Slider import androidx.compose.material3.Text import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable @@ -36,11 +32,9 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp import io.github.zyrouge.symphony.ui.helpers.ViewContext -import kotlin.math.roundToInt @Composable fun > MediaSortBar( @@ -52,11 +46,8 @@ fun > MediaSortBar( onSortChange: (T) -> Unit, label: @Composable () -> Unit, onShufflePlay: (() -> Unit)? = null, - gridSize: Float? = null, - onGridSizeChange: ((Float) -> Unit)? = null, ) { - var showSortDropdown by remember { mutableStateOf(false) } - var showViewDropdown by remember { mutableStateOf(false) } + var showDropdown by remember { mutableStateOf(false) } val currentTextStyle = MaterialTheme.typography.bodySmall.run { copy(color = MaterialTheme.colorScheme.onSurface) } @@ -90,18 +81,18 @@ fun > MediaSortBar( TextButton( colors = textButtonStyle, onClick = { - showSortDropdown = !showSortDropdown + showDropdown = !showDropdown } ) { Text(sorts[sort]!!(context), style = currentTextStyle) } DropdownMenu( - expanded = showSortDropdown, - onDismissRequest = { showSortDropdown = false } + expanded = showDropdown, + onDismissRequest = { showDropdown = false } ) { sorts.map { val onClick = { - showSortDropdown = false + showDropdown = false onSortChange(it.key) } @@ -128,55 +119,6 @@ fun > MediaSortBar( } } } - gridSize?.let { - Box { - TextButton( - colors = textButtonStyle, - onClick = { showViewDropdown = !showViewDropdown }, - ) { - Icon( - Icons.Filled.GridView, - null, - modifier = iconModifier, - ) - Icon( - Icons.Filled.ArrowDropDown, - null, - modifier = iconModifier, - ) - } - DropdownMenu( - expanded = showViewDropdown, - onDismissRequest = { showViewDropdown = false } - ) { - Row( - modifier = Modifier.padding( - MenuDefaults.DropdownMenuItemContentPadding.run { - val horizontalPadding = - calculateLeftPadding(LayoutDirection.Ltr) - PaddingValues( - start = horizontalPadding.div(2), - end = horizontalPadding.div(2), - ) - }, - ) - ) { - Column(modifier = Modifier.padding(horizontal = 16.dp)) { - Text(text = "Grid size") - val width = LocalConfiguration.current.screenWidthDp.toFloat() - val stops = width / 100f - Slider( - modifier = Modifier.width(192.dp), - value = stops - (width / gridSize) + 1, - onValueChange = { onGridSizeChange?.invoke(width / (stops - it + 1)) }, - valueRange = 1f..stops, - steps = (stops - 2).roundToInt(), - ) - } - } - } - } - } } Row(verticalAlignment = Alignment.CenterVertically) { ProvideTextStyle(currentTextStyle) { diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt index e0c69d49..b40e02b2 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt @@ -1,13 +1,23 @@ package io.github.zyrouge.symphony.ui.components import androidx.compose.foundation.layout.BoxWithConstraints +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.foundation.lazy.grid.rememberLazyGridState +import androidx.compose.material3.MenuDefaults +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalConfiguration +import androidx.compose.ui.unit.LayoutDirection +import androidx.compose.ui.unit.dp import kotlin.math.roundToInt data class ResponsiveGridData(val columnsCount: Int) @@ -28,3 +38,32 @@ fun ResponsiveGrid(tileSize: Float = 200f, content: LazyGridScope.(ResponsiveGri } } } + +@Composable +fun ResponsiveGridSizeAdjust(tileSize: Float, onTileSizeChange: (Float) -> Unit) { + Row( + modifier = Modifier.padding( + MenuDefaults.DropdownMenuItemContentPadding.run { + val horizontalPadding = + calculateLeftPadding(LayoutDirection.Ltr) + PaddingValues( + start = horizontalPadding.div(2), + end = horizontalPadding.div(2), + ) + }, + ) + ) { + Column(modifier = Modifier.padding(horizontal = 16.dp)) { + Text(text = "Grid size") + val width = LocalConfiguration.current.screenWidthDp.toFloat() + val stops = width / 100f + androidx.compose.material3.Slider( + modifier = Modifier.fillMaxWidth(), + value = stops - (width / tileSize) + 1, + onValueChange = { onTileSizeChange(width / (stops - it + 1)) }, + valueRange = 1f..stops, + steps = (stops - 2).roundToInt(), + ) + } + } +} \ No newline at end of file From 1735cc67dbeeea86914ccb96d85da55cea4213d9 Mon Sep 17 00:00:00 2001 From: sevonj <100710152+sevonj@users.noreply.github.com> Date: Thu, 14 Nov 2024 20:35:57 +0200 Subject: [PATCH 07/10] Fix: Number of columns can't be zero --- .../io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt index b40e02b2..05fd4e26 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt @@ -18,6 +18,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp +import kotlin.math.max import kotlin.math.roundToInt data class ResponsiveGridData(val columnsCount: Int) @@ -25,7 +26,7 @@ data class ResponsiveGridData(val columnsCount: Int) @Composable fun ResponsiveGrid(tileSize: Float = 200f, content: LazyGridScope.(ResponsiveGridData) -> Unit) { BoxWithConstraints(modifier = Modifier.fillMaxSize()) { - val cols = (this@BoxWithConstraints.maxWidth.value / tileSize).roundToInt() + val cols = max((this@BoxWithConstraints.maxWidth.value / tileSize).roundToInt(), 1) val gridState = rememberLazyGridState() val responsiveGridData = ResponsiveGridData(columnsCount = cols) From 3e4fc424963cc4d7ebe6f4fa792aaa8fe29fb265 Mon Sep 17 00:00:00 2001 From: sevonj <100710152+sevonj@users.noreply.github.com> Date: Thu, 14 Nov 2024 21:03:06 +0200 Subject: [PATCH 08/10] Album tileSize persistence --- .../io/github/zyrouge/symphony/services/Settings.kt | 1 + .../github/zyrouge/symphony/ui/components/AlbumGrid.kt | 10 +++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/app/src/main/java/io/github/zyrouge/symphony/services/Settings.kt b/app/src/main/java/io/github/zyrouge/symphony/services/Settings.kt index 932f9abb..f84bb1a2 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/services/Settings.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/services/Settings.kt @@ -147,6 +147,7 @@ class Settings(private val symphony: Symphony) { AlbumRepository.SortBy.ALBUM_NAME, ) val lastUsedAlbumsSortReverse = BooleanEntry("last_used_albums_sort_reverse", false) + val lastUsedAlbumsTileSize = FloatEntry("last_used_albums_tile_size", 200f) val lastUsedGenresSortBy = EnumEntry( "last_used_genres_sort_by", enumEntries(), diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt index 377cee39..41b97ee8 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt @@ -13,7 +13,6 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.derivedStateOf import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableFloatStateOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue @@ -35,7 +34,8 @@ fun AlbumGrid( context.symphony.groove.album.sort(albumIds, sortBy, sortReverse) } } - var tileSize by remember { mutableFloatStateOf(200f) } + val tileSize by context.symphony.settings.lastUsedAlbumsTileSize.flow.collectAsState() + val sheetState = rememberModalBottomSheetState() var showBottomSheet by remember { mutableStateOf(false) } @@ -93,7 +93,11 @@ fun AlbumGrid( ) { ResponsiveGridSizeAdjust( tileSize, - onTileSizeChange = { tileSize = it }, + onTileSizeChange = { + context.symphony.settings.lastUsedAlbumsTileSize.setValue( + it + ) + }, ) } } From 5676584084c46ee07d5f79fff4854f882641b010 Mon Sep 17 00:00:00 2001 From: sevonj <100710152+sevonj@users.noreply.github.com> Date: Thu, 14 Nov 2024 21:19:44 +0200 Subject: [PATCH 09/10] GridZize localize --- .phrasey/schema.toml | 3 +++ .../io/github/zyrouge/symphony/ui/components/AlbumGrid.kt | 1 + .../github/zyrouge/symphony/ui/components/ResponsiveGrid.kt | 5 +++-- i18n/en.toml | 1 + 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/.phrasey/schema.toml b/.phrasey/schema.toml index f08b5cbc..f83b07b2 100644 --- a/.phrasey/schema.toml +++ b/.phrasey/schema.toml @@ -744,3 +744,6 @@ name = "UseMetaphonyMetadataDecoder" [[keys]] name = "PlayStore" + +[[keys]] +name = "GridSize" diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt index 41b97ee8..6cd0a8ae 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt @@ -92,6 +92,7 @@ fun AlbumGrid( sheetState = sheetState ) { ResponsiveGridSizeAdjust( + context, tileSize, onTileSizeChange = { context.symphony.settings.lastUsedAlbumsTileSize.setValue( diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt index 05fd4e26..11ee7d78 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/ResponsiveGrid.kt @@ -18,6 +18,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp +import io.github.zyrouge.symphony.ui.helpers.ViewContext import kotlin.math.max import kotlin.math.roundToInt @@ -41,7 +42,7 @@ fun ResponsiveGrid(tileSize: Float = 200f, content: LazyGridScope.(ResponsiveGri } @Composable -fun ResponsiveGridSizeAdjust(tileSize: Float, onTileSizeChange: (Float) -> Unit) { +fun ResponsiveGridSizeAdjust(context: ViewContext, tileSize: Float, onTileSizeChange: (Float) -> Unit) { Row( modifier = Modifier.padding( MenuDefaults.DropdownMenuItemContentPadding.run { @@ -55,7 +56,7 @@ fun ResponsiveGridSizeAdjust(tileSize: Float, onTileSizeChange: (Float) -> Unit) ) ) { Column(modifier = Modifier.padding(horizontal = 16.dp)) { - Text(text = "Grid size") + Text(context.symphony.t.GridSize) val width = LocalConfiguration.current.screenWidthDp.toFloat() val stops = width / 100f androidx.compose.material3.Slider( diff --git a/i18n/en.toml b/i18n/en.toml index 053a82b2..fc79ddd4 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -249,3 +249,4 @@ High = "High" Loseless = "Loseless" UseMetaphonyMetadataDecoder = "Use Metaphony metadata decoder" PlayStore = "Play Store" +GridSize = "Grid size" From f7834ff17d02f5ea23c3d584c6bcfb1b044c1854 Mon Sep 17 00:00:00 2001 From: sevonj <100710152+sevonj@users.noreply.github.com> Date: Thu, 14 Nov 2024 21:35:47 +0200 Subject: [PATCH 10/10] Finish sheet button --- .../zyrouge/symphony/ui/components/AlbumGrid.kt | 2 +- .../zyrouge/symphony/ui/components/MediaSortBar.kt | 13 +++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt index 6cd0a8ae..55c469ec 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/AlbumGrid.kt @@ -57,6 +57,7 @@ fun AlbumGrid( label = { Text(context.symphony.t.XAlbums((albumsCount ?: albumIds.size).toString())) }, + onShowSheet = { showBottomSheet = true }, ) }, content = { @@ -85,7 +86,6 @@ fun AlbumGrid( } } - Button(onClick = { showBottomSheet = true }) { Text("bottom sheet") } if (showBottomSheet) { ModalBottomSheet( onDismissRequest = { showBottomSheet = false }, diff --git a/app/src/main/java/io/github/zyrouge/symphony/ui/components/MediaSortBar.kt b/app/src/main/java/io/github/zyrouge/symphony/ui/components/MediaSortBar.kt index b865aaab..8589ceaa 100644 --- a/app/src/main/java/io/github/zyrouge/symphony/ui/components/MediaSortBar.kt +++ b/app/src/main/java/io/github/zyrouge/symphony/ui/components/MediaSortBar.kt @@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.width import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.ArrowDownward import androidx.compose.material.icons.filled.ArrowUpward +import androidx.compose.material.icons.filled.GridView import androidx.compose.material.icons.filled.Shuffle import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.DropdownMenu @@ -46,6 +47,7 @@ fun > MediaSortBar( onSortChange: (T) -> Unit, label: @Composable () -> Unit, onShufflePlay: (() -> Unit)? = null, + onShowSheet: (() -> Unit)? = null, ) { var showDropdown by remember { mutableStateOf(false) } val currentTextStyle = MaterialTheme.typography.bodySmall.run { @@ -119,6 +121,17 @@ fun > MediaSortBar( } } } + onShowSheet?.let { + IconButton( + { onShowSheet() } + ) { + Icon( + Icons.Filled.GridView, + null, + modifier = iconModifier, + ) + } + } } Row(verticalAlignment = Alignment.CenterVertically) { ProvideTextStyle(currentTextStyle) {