From 57aefcd9176450c6413d8e34482fb6c57d120498 Mon Sep 17 00:00:00 2001 From: Soitora Date: Fri, 27 Aug 2021 04:07:30 +0200 Subject: [PATCH] New manga info expander (#5771) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Replace "More" with Arrows We used to have arrows but it was set away from the description which took a lot of space. It was changed to "More" text, but with the recent design changes I think it'd look better to get a mix between them both. * Properly align icons Co-Authored-By: Andreas <6576096+ghostbear@users.noreply.github.com> * Expand support to Tablets Get it... expand... hehe 😎 * Fix expanded width Also fixes so that the constraint for the toggleLess is dependant on the right thing * Give info toggles its own space Uses its own margin now to push info rather than just being attached as a info margin. * Remove weird duplicates I did not add I did not add these but I don't see a reason to keep dupes * Add bottom scrim * Change to centered arrow under info Anyone wanna experiment/build on top off then feel free to tweak * Add background glow to icon for contrast Co-Authored-By: Andreas <6576096+ghostbear@users.noreply.github.com> Co-authored-by: Andreas <6576096+ghostbear@users.noreply.github.com> Co-authored-by: Andreas --- .../ui/manga/info/MangaInfoHeaderAdapter.kt | 13 ++- .../res/drawable/manga_backdrop_gradient.xml | 11 ++ .../main/res/drawable/manga_info_gradient.xml | 5 +- .../res/drawable/manga_info_more_gradient.xml | 9 +- .../res/layout-sw720dp/manga_info_header.xml | 50 ++++---- app/src/main/res/layout/manga_info_header.xml | 51 +++++---- .../res/xml/manga_summary_section_scene.xml | 108 +++++++----------- 7 files changed, 129 insertions(+), 118 deletions(-) create mode 100644 app/src/main/res/drawable/manga_backdrop_gradient.xml diff --git a/app/src/main/java/eu/kanade/tachiyomi/ui/manga/info/MangaInfoHeaderAdapter.kt b/app/src/main/java/eu/kanade/tachiyomi/ui/manga/info/MangaInfoHeaderAdapter.kt index df3a246787..70d9496ef5 100644 --- a/app/src/main/java/eu/kanade/tachiyomi/ui/manga/info/MangaInfoHeaderAdapter.kt +++ b/app/src/main/java/eu/kanade/tachiyomi/ui/manga/info/MangaInfoHeaderAdapter.kt @@ -48,6 +48,8 @@ class MangaInfoHeaderAdapter( private var initialLoad: Boolean = true + private val maxLines = 3 + override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): HeaderViewHolder { binding = MangaInfoHeaderBinding.inflate(LayoutInflater.from(parent.context), parent, false) updateCoverPosition() @@ -297,7 +299,10 @@ class MangaInfoHeaderAdapter( binding.mangaSummaryText.text = if (manga.description.isNullOrBlank()) { view.context.getString(R.string.unknown) } else { - manga.description + // Max lines of 3 with a blank line looks whack so we remove + // any line breaks that is 2 or more and replace it with 1 + manga.description!! + .replace(Regex("[\\r\\n]{2,}", setOf(RegexOption.MULTILINE)), "\n") } // Update genres list @@ -335,7 +340,7 @@ class MangaInfoHeaderAdapter( } // Refreshes will change the state and it needs to be set to correct state to display correctly - if (binding.mangaSummaryText.maxLines == 2) { + if (binding.mangaSummaryText.maxLines == maxLines) { binding.mangaSummarySection.transitionToState(R.id.start) } else { binding.mangaSummarySection.transitionToState(R.id.end) @@ -348,7 +353,7 @@ class MangaInfoHeaderAdapter( } private fun toggleMangaInfo() { - val isCurrentlyExpanded = binding.mangaSummaryText.maxLines != 2 + val isCurrentlyExpanded = binding.mangaSummaryText.maxLines != maxLines if (isCurrentlyExpanded) { binding.mangaSummarySection.transitionToStart() @@ -357,7 +362,7 @@ class MangaInfoHeaderAdapter( } binding.mangaSummaryText.maxLines = if (isCurrentlyExpanded) { - 2 + maxLines } else { Int.MAX_VALUE } diff --git a/app/src/main/res/drawable/manga_backdrop_gradient.xml b/app/src/main/res/drawable/manga_backdrop_gradient.xml new file mode 100644 index 0000000000..02692a50b0 --- /dev/null +++ b/app/src/main/res/drawable/manga_backdrop_gradient.xml @@ -0,0 +1,11 @@ + + + + + + + diff --git a/app/src/main/res/drawable/manga_info_gradient.xml b/app/src/main/res/drawable/manga_info_gradient.xml index 02692a50b0..35e6c06eae 100644 --- a/app/src/main/res/drawable/manga_info_gradient.xml +++ b/app/src/main/res/drawable/manga_info_gradient.xml @@ -4,8 +4,9 @@ + android:endColor="#00000000" + android:centerColor="#CC000000" + android:startColor="#E6000000" /> diff --git a/app/src/main/res/drawable/manga_info_more_gradient.xml b/app/src/main/res/drawable/manga_info_more_gradient.xml index f3a077d041..503ea5359c 100644 --- a/app/src/main/res/drawable/manga_info_more_gradient.xml +++ b/app/src/main/res/drawable/manga_info_more_gradient.xml @@ -3,10 +3,11 @@ android:shape="rectangle"> + android:type="radial" + android:gradientRadius="18dp" + android:startColor="#CC000000" + android:centerColor="#CC000000" + android:endColor="#0D000000" /> diff --git a/app/src/main/res/layout-sw720dp/manga_info_header.xml b/app/src/main/res/layout-sw720dp/manga_info_header.xml index 5b0c165ac7..f0b381ba9a 100644 --- a/app/src/main/res/layout-sw720dp/manga_info_header.xml +++ b/app/src/main/res/layout-sw720dp/manga_info_header.xml @@ -27,7 +27,7 @@ android:layout_width="0dp" android:layout_height="0dp" android:alpha="1" - android:background="@drawable/manga_info_gradient" + android:background="@drawable/manga_backdrop_gradient" android:backgroundTint="?android:attr/colorBackground" app:layout_constraintBottom_toBottomOf="@+id/backdrop" app:layout_constraintEnd_toEndOf="parent" @@ -190,51 +190,61 @@ style="@style/TextAppearance.Regular.Body1.Secondary" android:layout_width="0dp" android:layout_height="wrap_content" - android:layout_marginStart="16dp" android:layout_marginTop="8dp" android:layout_marginEnd="16dp" + android:layout_marginStart="16dp" android:clickable="true" android:focusable="true" - android:maxLines="2" + android:maxLines="3" + android:ellipsize="end" android:textIsSelectable="false" - app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/manga_cover" - tools:text="Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content" /> + tools:text="Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content" /> + + + app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text" + app:layout_constraintEnd_toEndOf="@+id/manga_info_toggle_more" + app:layout_constraintStart_toStartOf="@+id/manga_info_toggle_more" /> + android:background="@drawable/ic_expand_more_24dp" + android:backgroundTint="?android:attr/textColorPrimary" + app:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more" + app:layout_constraintEnd_toEndOf="@+id/manga_info_toggle_more" + app:layout_constraintStart_toStartOf="@+id/manga_info_toggle_more" /> @@ -246,7 +256,7 @@ android:scrollbars="none" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" - app:layout_constraintTop_toBottomOf="@+id/manga_summary_text"> + app:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_more"> @@ -180,59 +180,68 @@ android:layout_height="wrap_content" app:layoutDescription="@xml/manga_summary_section_scene" app:layout_constraintEnd_toEndOf="parent" - app:layout_constraintStart_toStartOf="parent" - app:layout_constraintTop_toBottomOf="@+id/manga_actions"> + app:layout_constraintStart_toStartOf="parent"> + + + app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text" + app:layout_constraintEnd_toEndOf="@+id/manga_info_toggle_more" + app:layout_constraintStart_toStartOf="@+id/manga_info_toggle_more" /> + android:background="@drawable/ic_expand_more_24dp" + android:backgroundTint="?android:attr/textColorPrimary" + app:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more" + app:layout_constraintEnd_toEndOf="@+id/manga_info_toggle_more" + app:layout_constraintStart_toStartOf="@+id/manga_info_toggle_more" /> @@ -244,7 +253,7 @@ android:scrollbars="none" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" - app:layout_constraintTop_toBottomOf="@+id/manga_summary_text"> + app:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_more"> - + motion:layout_constraintEnd_toEndOf="parent" + motion:layout_constraintStart_toStartOf="parent" + motion:layout_constraintBottom_toBottomOf="@id/manga_summary_text" + android:layout_marginBottom="-4dp" /> + motion:layout_constraintStart_toStartOf="parent" + motion:layout_constraintTop_toBottomOf="@id/manga_summary_text" /> + motion:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_more" /> + + android:id="@+id/manga_summary_text" + android:layout_width="0dp" + android:layout_height="wrap_content" + android:layout_marginTop="8dp" + android:layout_marginEnd="16dp" + android:layout_marginStart="16dp" + motion:layout_constraintEnd_toEndOf="parent" + motion:layout_constraintStart_toStartOf="parent" + motion:layout_constraintTop_toBottomOf="@+id/manga_cover" + motion:visibilityMode="ignore" /> + + motion:layout_constraintEnd_toEndOf="parent" + motion:layout_constraintStart_toStartOf="parent" + motion:layout_constraintBottom_toBottomOf="@id/manga_summary_text" /> + motion:layout_constraintStart_toStartOf="parent" + motion:layout_constraintTop_toBottomOf="@id/manga_summary_text" /> + motion:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_more" /> - - - -