From 88d9ffe92e41ab8a4d24655a32aa87a20ee8bd01 Mon Sep 17 00:00:00 2001
From: Soitora <simon.mattila@protonmail.com>
Date: Tue, 1 Jun 2021 23:56:36 +0200
Subject: [PATCH] Add better library item selectors (#5240)

* Add better library item selectors

Inspired by the J2K method of library item selection.

* Tweak theme selection colors

It was missing for Hot Pink and Midnight Dusk.

The selector color is 75% alpha of the color accent, this looked fitting for all themes.
---
 .../res/drawable/library_item_selector.xml    | 35 +++++++++++++++----
 .../layout/source_comfortable_grid_item.xml   |  1 +
 .../res/layout/source_compact_grid_item.xml   |  1 +
 app/src/main/res/values/colors.xml            | 14 ++++----
 app/src/main/res/values/themes.xml            | 10 +++---
 5 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/app/src/main/res/drawable/library_item_selector.xml b/app/src/main/res/drawable/library_item_selector.xml
index 8dc63c3173..7de3c91baa 100644
--- a/app/src/main/res/drawable/library_item_selector.xml
+++ b/app/src/main/res/drawable/library_item_selector.xml
@@ -3,16 +3,39 @@
     android:color="?attr/colorLibrarySelection">
     <item>
         <selector>
-            <item android:state_selected="true">
-                <color android:color="?attr/colorLibrarySelectionActive" />
+            <item
+                android:state_selected="true"
+                android:top="2dp"
+                android:right="2dp"
+                android:bottom="2dp"
+                android:left="2dp">
+                <shape android:shape="rectangle">
+                    <corners android:radius="@dimen/card_radius" />
+                    <solid android:color="?attr/colorLibrarySelectionActive" />
+                </shape>
             </item>
 
-            <item android:state_activated="true">
-                <color android:color="?attr/colorLibrarySelectionActive" />
+            <item
+                android:state_activated="true"
+                android:top="2dp"
+                android:right="2dp"
+                android:bottom="2dp"
+                android:left="2dp">
+                <shape android:shape="rectangle">
+                    <corners android:radius="@dimen/card_radius" />
+                    <solid android:color="?attr/colorLibrarySelectionActive" />
+                </shape>
             </item>
 
-            <item>
-                <color android:color="?android:attr/colorBackground" />
+            <item
+                android:top="2dp"
+                android:right="2dp"
+                android:bottom="2dp"
+                android:left="2dp">
+                <shape android:shape="rectangle">
+                    <corners android:radius="@dimen/card_radius" />
+                    <solid android:color="?android:attr/colorBackground" />
+                </shape>
             </item>
         </selector>
     </item>
diff --git a/app/src/main/res/layout/source_comfortable_grid_item.xml b/app/src/main/res/layout/source_comfortable_grid_item.xml
index 9a857bf032..409cf083e6 100644
--- a/app/src/main/res/layout/source_comfortable_grid_item.xml
+++ b/app/src/main/res/layout/source_comfortable_grid_item.xml
@@ -4,6 +4,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:layout_margin="2dp"
     android:background="@drawable/library_item_selector"
     android:padding="4dp">
 
diff --git a/app/src/main/res/layout/source_compact_grid_item.xml b/app/src/main/res/layout/source_compact_grid_item.xml
index 1dd7123aa4..6cf084dafa 100644
--- a/app/src/main/res/layout/source_compact_grid_item.xml
+++ b/app/src/main/res/layout/source_compact_grid_item.xml
@@ -3,6 +3,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:layout_margin="2dp"
     android:background="@drawable/library_item_selector"
     android:padding="4dp">
 
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 3eed70bdae..98f4741de7 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -26,12 +26,12 @@
     <color name="rippleToolbarColorLight">@color/rippleColorLight</color>
     <color name="backgroundLight">@color/md_grey_50</color>
     <color name="dialogLight">@color/md_white_1000</color>
-    <color name="selectorColorLight">@color/md_blue_A400_38</color>
+    <color name="selectorColorLight">@color/md_blue_A400_75</color>
 
     <!-- Strawberry Daiquiri Theme -->
     <color name="colorAccentStrawberry">#ED4A65</color>
     <color name="rippleSecondaryColorStrawberry">#0AED4A65</color>
-    <color name="selectorColorStrawberry">#6FED4A65</color>
+    <color name="selectorColorStrawberry">#BFED4A65</color>
 
     <!-- Dark Theme -->
     <color name="colorAccentDark">#3399FF</color>
@@ -50,7 +50,7 @@
     <color name="colorAccentApple">#48E484</color>
     <color name="colorOnSecondaryApple">@color/md_black_1000</color>
     <color name="rippleSecondaryColorApple">#0A48E484</color>
-    <color name="selectorColorApple">#8048E484</color>
+    <color name="selectorColorApple">#BF48E484</color>
 
     <!-- Midnight Dusk Theme -->
     <color name="colorAccentDusk">#F02475</color>
@@ -61,7 +61,7 @@
     <color name="rippleSecondaryColorDusk">#0FF02475</color>
     <color name="backgroundDusk">#16151D</color>
     <color name="dialogDusk">#201F27</color>
-    <color name="selectorColorDusk">#80F02475</color>
+    <color name="selectorColorDusk">#BFF02475</color>
 
     <!-- AMOLED Theme -->
     <color name="colorAccentAmoled">#3399FF</color>
@@ -74,7 +74,7 @@
     <color name="rippleToolbarColorAmoled">@color/rippleColorAmoled</color>
     <color name="backgroundAmoled">@color/colorAmoledPrimary</color>
     <color name="dialogAmoled">@color/colorAmoledPrimary</color>
-    <color name="selectorColorAmoled">@color/md_blue_A200_50</color>
+    <color name="selectorColorAmoled">@color/md_blue_A200_75</color>
 
     <!-- Hot Pink Theme -->
     <color name="colorAccentPink">#FF3399</color>
@@ -82,7 +82,7 @@
     <color name="textColorSecondaryPink">@color/md_white_1000_70</color>
     <color name="textColorHintPink">@color/md_white_1000_50</color>
     <color name="rippleSecondaryColorPink">#0AFF3399</color>
-    <color name="selectorColorPink">#80FF69B4</color>
+    <color name="selectorColorPink">#BFFF69B4</color>
 
     <!-- Reader Theme -->
     <color name="readerColorDarkPrimary">@color/colorDarkPrimary</color>
@@ -122,9 +122,11 @@
     <color name="md_grey_900_75">#BF212121</color>
 
     <color name="md_blue_A200">#448AFF</color>
+    <color name="md_blue_A200_75">#BF448AFF</color>
     <color name="md_blue_A200_50">#80448AFF</color>
 
     <color name="md_blue_A400">#2979FF</color>
+    <color name="md_blue_A400_75">#BF2979FF</color>
     <color name="md_blue_A400_38">#612979FF</color>
     <color name="md_blue_A400_4">#0A2979FF</color>
 
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 7ab1fcc6a1..fca875e082 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -307,9 +307,8 @@
         <!-- Themes -->
         <item name="materialAlertDialogTheme">@style/Theme.AlertDialog.Dark.MidnightDusk</item>
 
-        <!-- Custom Attributes -->
-        <item name="colorLibrarySelection">@color/selectorColorDark</item>
-        <item name="colorLibrarySelectionActive">@color/selectorColorDark</item>
+        <!-- Custom Attributes-->
+        <item name="colorLibrarySelectionActive">@color/selectorColorDusk</item>
     </style>
 
     <!--===============-->
@@ -392,7 +391,7 @@
         <item name="md_corner_radius">@dimen/dialog_radius</item>
 
         <!-- Custom Attributes-->
-        <item name="colorLibrarySelection">@color/selectorColorAmoled</item>
+        <item name="colorLibrarySelection">?attr/colorAccent</item>
         <item name="colorLibrarySelectionActive">@color/selectorColorAmoled</item>
         <item name="colorFilterActive">@color/filterColorAmoled</item>
 
@@ -421,6 +420,9 @@
 
         <!-- Themes -->
         <item name="materialAlertDialogTheme">@style/Theme.AlertDialog.Amoled.HotPink</item>
+
+        <!-- Custom Attributes-->
+        <item name="colorLibrarySelectionActive">@color/selectorColorPink</item>
     </style>
 
     <!--===============-->