feat(ui): Size slider for the list display mode (#1906)

aniyomiorg · Jan 31, 2025 · 2b1dbc1 · 2b1dbc1
1 parent ccbb44c
commit 2b1dbc1
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 50 deletions.
diff --git a/app/src/main/java/eu/kanade/presentation/entries/anime/components/BaseAnimeListItem.kt b/app/src/main/java/eu/kanade/presentation/entries/anime/components/BaseAnimeListItem.kt
@@ -31,8 +31,8 @@ fun BaseAnimeListItem(
     Row(
         modifier = modifier
             .clickable(onClick = onClickItem)
-            .height(56.dp)
-            .padding(horizontal = MaterialTheme.padding.medium),
+            .height(76.dp)
+            .padding(horizontal = MaterialTheme.padding.medium, vertical = 3.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         cover()
@@ -42,9 +42,8 @@ fun BaseAnimeListItem(
 }
 
 private val defaultCover: @Composable RowScope.(Anime, () -> Unit) -> Unit = { anime, onClick ->
-    ItemCover.Square(
+    ItemCover.Book(
         modifier = Modifier
-            .padding(vertical = MaterialTheme.padding.small)
             .fillMaxHeight(),
         data = anime,
         onClick = onClick,
@@ -58,7 +57,6 @@ private val defaultContent: @Composable RowScope.(Anime) -> Unit = {
             modifier = Modifier
                 .padding(start = MaterialTheme.padding.medium),
             overflow = TextOverflow.Ellipsis,
-            maxLines = 1,
             style = MaterialTheme.typography.bodyMedium,
         )
     }

diff --git a/app/src/main/java/eu/kanade/presentation/entries/manga/components/BaseMangaListItem.kt b/app/src/main/java/eu/kanade/presentation/entries/manga/components/BaseMangaListItem.kt
@@ -31,8 +31,8 @@ fun BaseMangaListItem(
     Row(
         modifier = modifier
             .clickable(onClick = onClickItem)
-            .height(56.dp)
-            .padding(horizontal = MaterialTheme.padding.medium),
+            .height(76.dp)
+            .padding(horizontal = MaterialTheme.padding.medium, vertical = 3.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         cover()
@@ -42,9 +42,8 @@ fun BaseMangaListItem(
 }
 
 private val defaultCover: @Composable RowScope.(Manga, () -> Unit) -> Unit = { manga, onClick ->
-    ItemCover.Square(
+    ItemCover.Book(
         modifier = Modifier
-            .padding(vertical = MaterialTheme.padding.small)
             .fillMaxHeight(),
         data = manga,
         onClick = onClick,
@@ -58,7 +57,6 @@ private val defaultContent: @Composable RowScope.(Manga) -> Unit = {
             modifier = Modifier
                 .padding(start = MaterialTheme.padding.medium),
             overflow = TextOverflow.Ellipsis,
-            maxLines = 1,
             style = MaterialTheme.typography.bodyMedium,
         )
     }

diff --git a/app/src/main/java/eu/kanade/presentation/library/anime/AnimeLibraryList.kt b/app/src/main/java/eu/kanade/presentation/library/anime/AnimeLibraryList.kt
@@ -22,6 +22,8 @@ import tachiyomi.presentation.core.util.plus
 @Composable
 internal fun AnimeLibraryList(
     items: List<AnimeLibraryItem>,
+    entries: Int,
+    containerHeight: Int,
     contentPadding: PaddingValues,
     selection: List<LibraryAnime>,
     onClick: (LibraryAnime) -> Unit,
@@ -74,6 +76,8 @@ internal fun AnimeLibraryList(
                 } else {
                     null
                 },
+                entries = entries,
+                containerHeight = containerHeight,
             )
         }
     }

diff --git a/app/src/main/java/eu/kanade/presentation/library/anime/AnimeLibraryPager.kt b/app/src/main/java/eu/kanade/presentation/library/anime/AnimeLibraryPager.kt
@@ -14,8 +14,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.dp
 import eu.kanade.core.preference.PreferenceMutableState
@@ -42,8 +44,13 @@ fun AnimeLibraryPager(
     onLongClickAnime: (LibraryAnime) -> Unit,
     onClickContinueWatching: ((LibraryAnime) -> Unit)?,
 ) {
+    var containerHeight by remember { mutableIntStateOf(0) }
     HorizontalPager(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .fillMaxSize()
+            .onGloballyPositioned { layoutCoordinates ->
+                containerHeight = layoutCoordinates.size.height
+            },
         state = state,
         verticalAlignment = Alignment.Top,
     ) { page ->
@@ -64,19 +71,16 @@ fun AnimeLibraryPager(
         }
 
         val displayMode by getDisplayMode(page)
-        val columns by if (displayMode != LibraryDisplayMode.List) {
-            val configuration = LocalConfiguration.current
-            val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
-
-            remember(isLandscape) { getColumnsForOrientation(isLandscape) }
-        } else {
-            remember { mutableIntStateOf(0) }
-        }
+        val configuration = LocalConfiguration.current
+        val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
+        val columns by remember(isLandscape) { getColumnsForOrientation(isLandscape) }
 
         when (displayMode) {
             LibraryDisplayMode.List -> {
                 AnimeLibraryList(
                     items = library,
+                    entries = columns,
+                    containerHeight = containerHeight,
                     contentPadding = contentPadding,
                     selection = selectedAnime,
                     onClick = onClickAnime,

diff --git a/app/src/main/java/eu/kanade/presentation/library/anime/AnimeLibrarySettingsDialog.kt b/app/src/main/java/eu/kanade/presentation/library/anime/AnimeLibrarySettingsDialog.kt
@@ -36,6 +36,7 @@ import tachiyomi.presentation.core.components.SettingsChipRow
 import tachiyomi.presentation.core.components.SliderItem
 import tachiyomi.presentation.core.components.SortItem
 import tachiyomi.presentation.core.components.TriStateItem
+import tachiyomi.presentation.core.i18n.pluralStringResource
 import tachiyomi.presentation.core.i18n.stringResource
 import tachiyomi.presentation.core.util.collectAsState
 
@@ -248,17 +249,29 @@ private fun ColumnScope.DisplayPage(
         }
     }
 
-    if (displayMode != LibraryDisplayMode.List) {
-        val configuration = LocalConfiguration.current
-        val columnPreference = remember {
-            if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
-                screenModel.libraryPreferences.animeLandscapeColumns()
-            } else {
-                screenModel.libraryPreferences.animePortraitColumns()
-            }
+    val configuration = LocalConfiguration.current
+    val columnPreference = remember {
+        if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
+            screenModel.libraryPreferences.animeLandscapeColumns()
+        } else {
+            screenModel.libraryPreferences.animePortraitColumns()
         }
+    }
 
-        val columns by columnPreference.collectAsState()
+    val columns by columnPreference.collectAsState()
+    if (displayMode == LibraryDisplayMode.List) {
+        SliderItem(
+            label = stringResource(MR.strings.pref_library_rows),
+            max = 10,
+            value = columns,
+            valueText = if (columns > 0) {
+                pluralStringResource(MR.plurals.pref_library_entries_in_column, columns, columns)
+            } else {
+                stringResource(MR.strings.label_default)
+            },
+            onChange = columnPreference::set,
+        )
+    } else {
         SliderItem(
             label = stringResource(MR.strings.pref_library_columns),
             max = 10,

diff --git a/app/src/main/java/eu/kanade/presentation/library/components/CommonEntryItem.kt b/app/src/main/java/eu/kanade/presentation/library/components/CommonEntryItem.kt
@@ -33,6 +33,7 @@ import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shadow
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
@@ -338,19 +339,34 @@ fun EntryListItem(
     onClick: () -> Unit,
     badge: @Composable (RowScope.() -> Unit),
     onClickContinueViewing: (() -> Unit)? = null,
+    entries: Int = -1,
+    containerHeight: Int = 0,
 ) {
+    val density = LocalDensity.current
     Row(
         modifier = Modifier
             .selectedBackground(isSelected)
-            .height(56.dp)
+            .height(
+                when (entries) {
+                    -1 -> {
+                        76.dp
+                    }
+                    0 -> {
+                        with(density) { (containerHeight / 7).toDp() } - (3 / 7).dp
+                    }
+                    else -> {
+                        with(density) { (containerHeight / entries).toDp() } - (3 / entries).dp
+                    }
+                },
+            )
             .combinedClickable(
                 onClick = onClick,
                 onLongClick = onLongClick,
             )
-            .padding(horizontal = 16.dp, vertical = 8.dp),
+            .padding(horizontal = 16.dp, vertical = 3.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        ItemCover.Square(
+        ItemCover.Book(
             modifier = Modifier
                 .fillMaxHeight()
                 .alpha(coverAlpha),
@@ -361,7 +377,7 @@ fun EntryListItem(
             modifier = Modifier
                 .padding(horizontal = 16.dp)
                 .weight(1f),
-            maxLines = 2,
+            // maxLines = 2,
             overflow = TextOverflow.Ellipsis,
             style = MaterialTheme.typography.bodyMedium,
         )

diff --git a/app/src/main/java/eu/kanade/presentation/library/manga/MangaLibraryList.kt b/app/src/main/java/eu/kanade/presentation/library/manga/MangaLibraryList.kt
@@ -22,6 +22,8 @@ import tachiyomi.presentation.core.util.plus
 @Composable
 internal fun MangaLibraryList(
     items: List<MangaLibraryItem>,
+    entries: Int,
+    containerHeight: Int,
     contentPadding: PaddingValues,
     selection: List<LibraryManga>,
     onClick: (LibraryManga) -> Unit,
@@ -74,6 +76,8 @@ internal fun MangaLibraryList(
                 } else {
                     null
                 },
+                entries = entries,
+                containerHeight = containerHeight,
             )
         }
     }

diff --git a/app/src/main/java/eu/kanade/presentation/library/manga/MangaLibraryPager.kt b/app/src/main/java/eu/kanade/presentation/library/manga/MangaLibraryPager.kt
@@ -14,8 +14,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.dp
 import eu.kanade.core.preference.PreferenceMutableState
@@ -42,8 +44,13 @@ fun MangaLibraryPager(
     onLongClickManga: (LibraryManga) -> Unit,
     onClickContinueReading: ((LibraryManga) -> Unit)?,
 ) {
+    var containerHeight by remember { mutableIntStateOf(0) }
     HorizontalPager(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .fillMaxSize()
+            .onGloballyPositioned { layoutCoordinates ->
+                containerHeight = layoutCoordinates.size.height
+            },
         state = state,
         verticalAlignment = Alignment.Top,
     ) { page ->
@@ -64,19 +71,16 @@ fun MangaLibraryPager(
         }
 
         val displayMode by getDisplayMode(page)
-        val columns by if (displayMode != LibraryDisplayMode.List) {
-            val configuration = LocalConfiguration.current
-            val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
-
-            remember(isLandscape) { getColumnsForOrientation(isLandscape) }
-        } else {
-            remember { mutableIntStateOf(0) }
-        }
+        val configuration = LocalConfiguration.current
+        val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
+        val columns by remember(isLandscape) { getColumnsForOrientation(isLandscape) }
 
         when (displayMode) {
             LibraryDisplayMode.List -> {
                 MangaLibraryList(
                     items = library,
+                    entries = columns,
+                    containerHeight = containerHeight,
                     contentPadding = contentPadding,
                     selection = selectedManga,
                     onClick = onClickManga,

diff --git a/app/src/main/java/eu/kanade/presentation/library/manga/MangaLibrarySettingsDialog.kt b/app/src/main/java/eu/kanade/presentation/library/manga/MangaLibrarySettingsDialog.kt
@@ -36,6 +36,7 @@ import tachiyomi.presentation.core.components.SettingsChipRow
 import tachiyomi.presentation.core.components.SliderItem
 import tachiyomi.presentation.core.components.SortItem
 import tachiyomi.presentation.core.components.TriStateItem
+import tachiyomi.presentation.core.i18n.pluralStringResource
 import tachiyomi.presentation.core.i18n.stringResource
 import tachiyomi.presentation.core.util.collectAsState
 
@@ -247,17 +248,29 @@ private fun ColumnScope.DisplayPage(
         }
     }
 
-    if (displayMode != LibraryDisplayMode.List) {
-        val configuration = LocalConfiguration.current
-        val columnPreference = remember {
-            if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
-                screenModel.libraryPreferences.mangaLandscapeColumns()
-            } else {
-                screenModel.libraryPreferences.mangaPortraitColumns()
-            }
+    val configuration = LocalConfiguration.current
+    val columnPreference = remember {
+        if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
+            screenModel.libraryPreferences.mangaLandscapeColumns()
+        } else {
+            screenModel.libraryPreferences.mangaPortraitColumns()
         }
+    }
 
-        val columns by columnPreference.collectAsState()
+    val columns by columnPreference.collectAsState()
+    if (displayMode == LibraryDisplayMode.List) {
+        SliderItem(
+            label = stringResource(MR.strings.pref_library_rows),
+            max = 10,
+            value = columns,
+            valueText = if (columns > 0) {
+                pluralStringResource(MR.plurals.pref_library_entries_in_column, columns, columns)
+            } else {
+                stringResource(MR.strings.label_default)
+            },
+            onChange = columnPreference::set,
+        )
+    } else {
         SliderItem(
             label = stringResource(MR.strings.pref_library_columns),
             max = 10,

diff --git a/i18n/src/commonMain/moko-resources/base/plurals.xml b/i18n/src/commonMain/moko-resources/base/plurals.xml
@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+	<plurals name="pref_library_entries_in_column">
+		<item quantity="one">1 entry</item>
+		<item quantity="other">%d entries</item>
+	</plurals>
     <plurals name="lock_after_mins">
         <item quantity="one">After %1$s minute</item>
         <item quantity="other">After %1$s minutes</item>

diff --git a/i18n/src/commonMain/moko-resources/base/strings.xml b/i18n/src/commonMain/moko-resources/base/strings.xml
@@ -540,6 +540,7 @@
     <string name="pref_category_display">Display</string>
     <string name="pref_library_columns">Grid size</string>
     <string name="pref_library_columns_per_row">%d per row</string>
+    <string name="pref_library_rows">List size</string>
     <string name="portrait">Portrait</string>
     <string name="landscape">Landscape</string>
     <string name="pref_category_library_update">Global update</string>