mirror/mihon
1
0
Fork 0
mirror of https://github.com/mihonapp/mihon.git synced 2025-10-30 22:07:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

New manga info expander (#5771)

Browse Source 
* 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 <andreas.everos@gmail.com>
This commit is contained in:
Soitora
2021-08-27 04:07:30 +02:00
committed by GitHub
parent b3854ad382
commit 57aefcd917
7 changed files with 129 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/src/main/res/drawable/manga_backdrop_gradient.xml Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#ffffffff" />
<corners android:radius="0dp" />
</shape>

5
app/src/main/res/drawable/manga_info_gradient.xml
View File

@@ -4,8 +4,9 @@
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#ffffffff" />
android:endColor="#00000000"
android:centerColor="#CC000000"
android:startColor="#E6000000" />
<corners android:radius="0dp" />
</shape>

9
app/src/main/res/drawable/manga_info_more_gradient.xml
View File

@@ -3,10 +3,11 @@
android:shape="rectangle">
<gradient
android:angle="180"
android:centerColor="#ff000000"
android:endColor="#00000000"
android:startColor="#ff000000" />
android:type="radial"
android:gradientRadius="18dp"
android:startColor="#CC000000"
android:centerColor="#CC000000"
android:endColor="#0D000000" />
<corners android:radius="0dp" />

50
app/src/main/res/layout-sw720dp/manga_info_header.xml
View File

@@ -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" />
<View
android:id="@+id/manga_info_scrim"
android:layout_width="0dp"
android:layout_height="32sp"
android:background="@drawable/manga_info_gradient"
android:backgroundTint="?android:attr/colorBackground"
app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
app:layout_constraintEnd_toEndOf="@+id/manga_summary_text"
app:layout_constraintStart_toStartOf="@+id/manga_summary_text" />
<View
android:id="@+id/manga_info_toggle_more_scrim"
android:layout_width="20dp"
android:layout_height="0dp"
android:layout_width="36sp"
android:layout_height="18sp"
android:background="@drawable/manga_info_more_gradient"
android:backgroundTint="?android:attr/colorBackground"
app:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
app:layout_constraintEnd_toStartOf="@+id/manga_info_toggle_more"
app:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more" />
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" />
<com.google.android.material.button.MaterialButton
android:id="@+id/manga_info_toggle_more"
style="@style/Widget.Tachiyomi.Button.InlineButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="8dp"
android:paddingEnd="16dp"
android:text="@string/manga_info_expand"
android:textAlignment="viewEnd"
app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
app:layout_constraintEnd_toEndOf="parent" />
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" />
<com.google.android.material.button.MaterialButton
android:id="@+id/manga_info_toggle_less"
style="@style/Widget.Tachiyomi.Button.InlineButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/ic_expand_less_24dp"
android:backgroundTint="?android:attr/textColorPrimary"
android:paddingStart="8dp"
android:paddingEnd="16dp"
android:text="@string/manga_info_collapse"
android:textAlignment="viewEnd"
android:paddingEnd="8dp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/manga_summary_text"
tools:visibility="gone" />
@@ -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">
<com.google.android.material.chip.ChipGroup
android:id="@+id/manga_genres_tags_compact_chips"

51
app/src/main/res/layout/manga_info_header.xml
View File

@@ -26,7 +26,7 @@
android:id="@+id/backdrop_overlay"
android:layout_width="match_parent"
android:layout_height="0dp"
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_constraintTop_toTopOf="parent" />
@@ -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">
<TextView
android:id="@+id/manga_summary_text"
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" />
<View
android:id="@+id/manga_info_scrim"
android:layout_width="0dp"
android:layout_height="32sp"
android:background="@drawable/manga_info_gradient"
android:backgroundTint="?android:attr/colorBackground"
app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
app:layout_constraintEnd_toEndOf="@+id/manga_summary_text"
app:layout_constraintStart_toStartOf="@+id/manga_summary_text" />
<View
android:id="@+id/manga_info_toggle_more_scrim"
android:layout_width="20dp"
android:layout_height="0dp"
android:layout_width="36sp"
android:layout_height="18sp"
android:background="@drawable/manga_info_more_gradient"
android:backgroundTint="?android:attr/colorBackground"
app:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
app:layout_constraintEnd_toStartOf="@+id/manga_info_toggle_more"
app:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more" />
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" />
<com.google.android.material.button.MaterialButton
android:id="@+id/manga_info_toggle_more"
style="@style/Widget.Tachiyomi.Button.InlineButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="8dp"
android:paddingEnd="16dp"
android:text="@string/manga_info_expand"
android:textAlignment="viewEnd"
app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
app:layout_constraintEnd_toEndOf="parent" />
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" />
<com.google.android.material.button.MaterialButton
android:id="@+id/manga_info_toggle_less"
style="@style/Widget.Tachiyomi.Button.InlineButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/ic_expand_less_24dp"
android:backgroundTint="?android:attr/textColorPrimary"
android:paddingStart="8dp"
android:paddingEnd="16dp"
android:text="@string/manga_info_collapse"
android:textAlignment="viewEnd"
android:paddingEnd="8dp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/manga_summary_text"
tools:visibility="gone" />
@@ -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">
<com.google.android.material.chip.ChipGroup
android:id="@+id/manga_genres_tags_compact_chips"

108
app/src/main/res/xml/manga_summary_section_scene.xml
View File

@@ -11,28 +11,23 @@
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/manga_info_toggle_more_scrim"
android:layout_width="20dp"
android:layout_height="0dp"
android:visibility="visible"
motion:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
motion:layout_constraintEnd_toStartOf="@+id/manga_info_toggle_more"
motion:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more" />
<Constraint
android:id="@+id/manga_info_toggle_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
motion:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
motion:layout_constraintEnd_toEndOf="parent" />
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintBottom_toBottomOf="@id/manga_summary_text"
android:layout_marginBottom="-4dp" />
<Constraint
android:id="@+id/manga_info_toggle_less"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toBottomOf="@+id/manga_summary_text" />
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="@id/manga_summary_text" />
<Constraint
android:id="@+id/manga_genres_tags_compact"
android:layout_width="match_parent"
@@ -40,7 +35,7 @@
android:visibility="visible"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="@+id/manga_summary_text" />
motion:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_more" />
<Constraint
android:id="@+id/manga_genres_tags_full_chips"
android:layout_width="match_parent"
@@ -51,31 +46,54 @@
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_less" />
<Constraint
android:layout_width="0dp"
android:layout_height="wrap_content"
motion:layout_constraintTop_toBottomOf="@+id/manga_cover"
android:layout_marginStart="16dp"
motion:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="8dp"
android:id="@+id/manga_summary_text"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp" />
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/manga_info_toggle_more_scrim"
android:layout_width="20dp"
android:layout_height="0dp"
android:visibility="gone"
motion:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
motion:layout_constraintEnd_toStartOf="@+id/manga_info_toggle_more"
motion:layout_constraintTop_toTopOf="@+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" />
<Constraint
android:id="@+id/manga_info_scrim"
motion:layout_constraintEnd_toEndOf="@+id/manga_summary_text"
android:layout_width="0dp"
android:layout_height="24sp"
motion:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
motion:layout_constraintStart_toStartOf="@+id/manga_summary_text"
android:visibility="invisible" />
<Constraint
android:id="@+id/manga_info_toggle_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
motion:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
motion:layout_constraintEnd_toEndOf="parent" />
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintBottom_toBottomOf="@id/manga_summary_text" />
<Constraint
android:id="@+id/manga_info_toggle_less"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toBottomOf="@+id/manga_summary_text" />
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="@id/manga_summary_text" />
<Constraint
android:id="@+id/manga_genres_tags_compact"
android:layout_width="match_parent"
@@ -83,7 +101,7 @@
android:visibility="gone"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="@+id/manga_summary_text" />
motion:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_more" />
<Constraint
android:id="@+id/manga_genres_tags_full_chips"
android:layout_width="match_parent"
@@ -94,49 +112,5 @@
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_less" />
<Constraint
android:id="@+id/manga_summary_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="@+id/manga_cover"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/manga_summary_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="@+id/manga_cover"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/manga_summary_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="@+id/manga_cover"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/manga_summary_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="@+id/manga_cover"
motion:visibilityMode="ignore" />
</ConstraintSet>
</MotionScene>