From c3aff60a9cd3e28367166a02f57f993bf22edbc2 Mon Sep 17 00:00:00 2001
From: Zakhar Timoshenko <vp1984tanki@gmail.com>
Date: Fri, 8 Dec 2023 00:39:13 +0300
Subject: [PATCH] Spinner and EditText enhancements

---
 .../filter/ui/tags/TagsCatalogSheet.kt        | 10 +----
 .../m3_spinner_popup_background.xml           | 15 +++++++
 .../drawable/m3_spinner_popup_background.xml  | 15 +++++++
 app/src/main/res/layout/sheet_filter.xml      | 28 ++++++------
 app/src/main/res/layout/sheet_list_mode.xml   |  9 ++--
 app/src/main/res/layout/sheet_tags.xml        | 44 ++++++++-----------
 app/src/main/res/values/attrs.xml             |  1 +
 app/src/main/res/values/styles.xml            | 13 ++++++
 app/src/main/res/values/themes.xml            |  2 +
 9 files changed, 82 insertions(+), 55 deletions(-)
 create mode 100644 app/src/main/res/drawable-v23/m3_spinner_popup_background.xml
 create mode 100644 app/src/main/res/drawable/m3_spinner_popup_background.xml

diff --git a/app/src/main/kotlin/org/koitharu/kotatsu/filter/ui/tags/TagsCatalogSheet.kt b/app/src/main/kotlin/org/koitharu/kotatsu/filter/ui/tags/TagsCatalogSheet.kt
index 00e5185ca..c41bf72b3 100644
--- a/app/src/main/kotlin/org/koitharu/kotatsu/filter/ui/tags/TagsCatalogSheet.kt
+++ b/app/src/main/kotlin/org/koitharu/kotatsu/filter/ui/tags/TagsCatalogSheet.kt
@@ -27,7 +27,7 @@ import org.koitharu.kotatsu.filter.ui.model.TagCatalogItem
 
 @AndroidEntryPoint
 class TagsCatalogSheet : BaseAdaptiveSheet<SheetTagsBinding>(), OnListItemClickListener<TagCatalogItem>, TextWatcher,
-	AdaptiveSheetCallback, View.OnClickListener, View.OnFocusChangeListener, TextView.OnEditorActionListener {
+	AdaptiveSheetCallback, View.OnFocusChangeListener, TextView.OnEditorActionListener {
 
 	private val viewModel by viewModels<TagsCatalogViewModel>(
 		extrasProducer = {
@@ -50,7 +50,6 @@ class TagsCatalogSheet : BaseAdaptiveSheet<SheetTagsBinding>(), OnListItemClickL
 		binding.editSearch.addTextChangedListener(this)
 		binding.editSearch.onFocusChangeListener = this
 		binding.editSearch.setOnEditorActionListener(this)
-		binding.buttonSearchClear.setOnClickListener(this)
 		viewModel.content.observe(viewLifecycleOwner, adapter)
 		addSheetCallback(this)
 		disableFitToContents()
@@ -61,12 +60,6 @@ class TagsCatalogSheet : BaseAdaptiveSheet<SheetTagsBinding>(), OnListItemClickL
 		filter.setTag(item.tag, !item.isChecked)
 	}
 
-	override fun onClick(v: View) {
-		when (v.id) {
-			R.id.button_search_clear -> viewBinding?.editSearch?.text?.clear()
-		}
-	}
-
 	override fun onFocusChange(v: View?, hasFocus: Boolean) {
 		setExpanded(
 			isExpanded = hasFocus || isExpanded,
@@ -90,7 +83,6 @@ class TagsCatalogSheet : BaseAdaptiveSheet<SheetTagsBinding>(), OnListItemClickL
 	override fun afterTextChanged(s: Editable?) {
 		val q = s?.toString().orEmpty()
 		viewModel.searchQuery.value = q
-		viewBinding?.buttonSearchClear?.isVisible = q.isNotEmpty()
 	}
 
 	override fun onStateChanged(sheet: View, newState: Int) {
diff --git a/app/src/main/res/drawable-v23/m3_spinner_popup_background.xml b/app/src/main/res/drawable-v23/m3_spinner_popup_background.xml
new file mode 100644
index 000000000..04ee60a0a
--- /dev/null
+++ b/app/src/main/res/drawable-v23/m3_spinner_popup_background.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+	<item>
+		<shape>
+			<solid android:color="?attr/colorSurfaceContainerHigh" />
+			<corners android:radius="4dp" />
+		</shape>
+	</item>
+	<item>
+		<shape>
+			<solid android:color="@color/m3_popupmenu_overlay_color" />
+			<corners android:radius="4dp" />
+		</shape>
+	</item>
+</layer-list>
diff --git a/app/src/main/res/drawable/m3_spinner_popup_background.xml b/app/src/main/res/drawable/m3_spinner_popup_background.xml
new file mode 100644
index 000000000..9cb3a631a
--- /dev/null
+++ b/app/src/main/res/drawable/m3_spinner_popup_background.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+	<item>
+		<shape>
+			<solid android:color="@color/kotatsu_surfaceContainerHighest" />
+			<corners android:radius="4dp" />
+		</shape>
+	</item>
+	<item>
+		<shape>
+			<solid android:color="@color/kotatsu_surfaceContainerHighest" />
+			<corners android:radius="4dp" />
+		</shape>
+	</item>
+</layer-list>
diff --git a/app/src/main/res/layout/sheet_filter.xml b/app/src/main/res/layout/sheet_filter.xml
index 4350f8c04..e906dbad5 100644
--- a/app/src/main/res/layout/sheet_filter.xml
+++ b/app/src/main/res/layout/sheet_filter.xml
@@ -38,23 +38,20 @@
 
 			<com.google.android.material.card.MaterialCardView
 				android:id="@+id/card_order"
-				style="?materialCardViewOutlinedStyle"
+				style="?m3SpinnerStyle"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginHorizontal="16dp"
 				android:layout_marginTop="@dimen/margin_normal"
 				android:visibility="gone"
-				app:cardBackgroundColor="@color/m3_chip_background_color"
-				app:shapeAppearance="?shapeAppearanceCornerMedium"
-				app:strokeColor="@color/m3_button_outline_color_selector"
-				app:strokeWidth="@dimen/m3_comp_outlined_button_outline_width"
 				tools:visibility="visible">
 
 				<Spinner
 					android:id="@+id/spinner_order"
 					android:layout_width="match_parent"
-					android:layout_height="wrap_content"
-					android:minHeight="?listPreferredItemHeightSmall" />
+					android:layout_height="56dp"
+					android:minHeight="?listPreferredItemHeightSmall"
+					android:paddingHorizontal="8dp" />
 
 			</com.google.android.material.card.MaterialCardView>
 
@@ -72,23 +69,21 @@
 
 			<com.google.android.material.card.MaterialCardView
 				android:id="@+id/card_locale"
-				style="?materialCardViewOutlinedStyle"
+				style="?m3SpinnerStyle"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginHorizontal="16dp"
 				android:layout_marginTop="@dimen/margin_normal"
 				android:visibility="gone"
-				app:cardBackgroundColor="@color/m3_chip_background_color"
-				app:shapeAppearance="?shapeAppearanceCornerMedium"
-				app:strokeColor="@color/m3_button_outline_color_selector"
-				app:strokeWidth="@dimen/m3_comp_outlined_button_outline_width"
 				tools:visibility="visible">
 
 				<Spinner
 					android:id="@+id/spinner_locale"
 					android:layout_width="match_parent"
-					android:layout_height="wrap_content"
-					android:minHeight="?listPreferredItemHeightSmall" />
+					android:layout_height="56dp"
+					android:minHeight="?listPreferredItemHeightSmall"
+					android:paddingHorizontal="8dp"
+					android:popupBackground="@drawable/m3_spinner_popup_background" />
 
 			</com.google.android.material.card.MaterialCardView>
 
@@ -119,9 +114,14 @@
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginTop="8dp"
+				android:paddingVertical="8dp"
+				android:drawablePadding="16dp"
 				android:paddingHorizontal="@dimen/margin_normal"
+				android:gravity="center_vertical"
 				android:textAppearance="?textAppearanceBodySmall"
 				android:visibility="gone"
+				app:drawableStartCompat="@drawable/ic_error_small"
+				app:drawableTint="?attr/colorControlNormal"
 				tools:text="@string/error_multiple_genres_not_supported"
 				tools:visibility="visible" />
 
diff --git a/app/src/main/res/layout/sheet_list_mode.xml b/app/src/main/res/layout/sheet_list_mode.xml
index 6f38ad09d..b8171e9f0 100644
--- a/app/src/main/res/layout/sheet_list_mode.xml
+++ b/app/src/main/res/layout/sheet_list_mode.xml
@@ -113,22 +113,19 @@
 
 			<com.google.android.material.card.MaterialCardView
 				android:id="@+id/card_order"
-				style="?materialCardViewOutlinedStyle"
+				style="?m3SpinnerStyle"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_marginHorizontal="16dp"
 				android:layout_marginTop="@dimen/margin_normal"
 				android:visibility="gone"
-				app:cardBackgroundColor="@color/m3_chip_background_color"
-				app:shapeAppearance="?shapeAppearanceCornerMedium"
-				app:strokeColor="@color/m3_button_outline_color_selector"
-				app:strokeWidth="@dimen/m3_comp_outlined_button_outline_width"
 				tools:visibility="visible">
 
 				<Spinner
 					android:id="@+id/spinner_order"
 					android:layout_width="match_parent"
-					android:layout_height="wrap_content"
+					android:layout_height="56dp"
+					android:paddingHorizontal="8dp"
 					android:minHeight="?listPreferredItemHeightSmall" />
 
 			</com.google.android.material.card.MaterialCardView>
diff --git a/app/src/main/res/layout/sheet_tags.xml b/app/src/main/res/layout/sheet_tags.xml
index 859104ce4..55ca23201 100644
--- a/app/src/main/res/layout/sheet_tags.xml
+++ b/app/src/main/res/layout/sheet_tags.xml
@@ -15,38 +15,30 @@
 		app:layout_constraintTop_toTopOf="parent"
 		app:title="@string/filter" />
 
-	<EditText
-		android:id="@+id/edit_search"
+	<com.google.android.material.textfield.TextInputLayout
+		android:id="@+id/text_input_layout"
 		android:layout_width="0dp"
 		android:layout_height="wrap_content"
-		android:drawableStart="?android:actionModeWebSearchDrawable"
-		android:drawablePadding="12dp"
+		app:startIconDrawable="?android:actionModeWebSearchDrawable"
+		app:endIconMode="clear_text"
+		app:endIconDrawable="@drawable/abc_ic_clear_material"
 		android:hint="@string/genres_search_hint"
-		android:imeOptions="actionSearch|flagNoFullscreen"
-		android:importantForAutofill="no"
-		android:inputType="text"
-		android:paddingHorizontal="6dp"
-		android:singleLine="true"
+		android:layout_marginHorizontal="16dp"
+		android:layout_marginBottom="4dp"
 		app:layout_constraintEnd_toEndOf="parent"
 		app:layout_constraintStart_toStartOf="parent"
 		app:layout_constraintTop_toBottomOf="@id/headerBar"
-		tools:ignore="LabelFor" />
+		app:layout_constraintBottom_toTopOf="@id/recyclerView">
 
-	<ImageButton
-		android:id="@+id/button_search_clear"
-		android:layout_width="wrap_content"
-		android:layout_height="wrap_content"
-		android:layout_marginEnd="4dp"
-		android:background="?selectableItemBackgroundBorderless"
-		android:contentDescription="@string/clear"
-		android:minWidth="?minTouchTargetSize"
-		android:minHeight="?minTouchTargetSize"
-		android:src="@drawable/abc_ic_clear_material"
-		android:visibility="gone"
-		app:layout_constraintBottom_toBottomOf="@id/edit_search"
-		app:layout_constraintEnd_toEndOf="@id/edit_search"
-		app:layout_constraintTop_toTopOf="@id/edit_search"
-		tools:visibility="visible" />
+		<com.google.android.material.textfield.TextInputEditText
+			android:id="@+id/edit_search"
+			android:layout_width="match_parent"
+			android:layout_height="wrap_content"
+			android:imeOptions="actionSearch|flagNoFullscreen"
+			android:importantForAutofill="no"
+			android:inputType="text"/>
+
+	</com.google.android.material.textfield.TextInputLayout>
 
 	<org.koitharu.kotatsu.core.ui.list.fastscroll.FastScrollRecyclerView
 		android:id="@+id/recyclerView"
@@ -59,7 +51,7 @@
 		app:layout_constraintBottom_toBottomOf="parent"
 		app:layout_constraintEnd_toEndOf="parent"
 		app:layout_constraintStart_toStartOf="parent"
-		app:layout_constraintTop_toBottomOf="@id/edit_search"
+		app:layout_constraintTop_toBottomOf="@id/text_input_layout"
 		app:scrollerOffset="8dp"
 		tools:listitem="@layout/item_checkable_new" />
 
diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
index e36b5b405..580091d0e 100644
--- a/app/src/main/res/values/attrs.xml
+++ b/app/src/main/res/values/attrs.xml
@@ -12,6 +12,7 @@
 	<attr name="m3ColorExploreButton" />
 	<attr name="m3ColorCardBackground" />
 	<attr name="m3ColorBottomMenuBackground" />
+	<attr name="m3SpinnerStyle" />
 
 	<!--CoverImageView attrs-->
 	<declare-styleable name="CoverImageView">
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 246f45e52..b53ef7b86 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -58,6 +58,19 @@
 		<item name="android:paddingBottom">0dp</item>
 	</style>
 
+	<style name="Widget.Kotatsu.Spinner.DropDown" parent="Widget.AppCompat.Spinner.DropDown">
+		<item name="android:popupBackground">@drawable/m3_spinner_popup_background</item>
+		<item name="android:elevation">8dp</item>
+		<item name="android:popupElevation">3dp</item>
+	</style>
+
+	<style name="Widget.Kotatsu.Material3.Spinner" parent="Widget.Material3.CardView.Outlined">
+		<item name="cardBackgroundColor">@android:color/transparent</item>
+		<item name="strokeWidth">2dp</item>
+		<item name="strokeColor">?attr/colorOutline</item>
+		<item name="cardCornerRadius">4dp</item>
+	</style>
+
 	<style name="ShapeAppearanceOverlay.Kotatsu.BottomSheet" parent="">
 		<item name="cornerFamily">rounded</item>
 		<item name="cornerSizeTopRight">@dimen/bottom_sheet_corner_radius</item>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index a0be20982..67175828c 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -94,6 +94,8 @@
 		<item name="linearProgressIndicatorStyle">@style/Widget.Kotatsu.LinearProgressIndicator
 		</item>
 		<item name="bottomSheetDragHandleStyle">@style/Widget.Kotatsu.BottomSheet.DragHandle</item>
+		<item name="android:dropDownSpinnerStyle">@style/Widget.Kotatsu.Spinner.DropDown</item>
+		<item name="m3SpinnerStyle">@style/Widget.Kotatsu.Material3.Spinner</item>
 
 		<!-- Text appearance -->
 		<item name="actionMenuTextAppearance">@style/TextAppearance.Kotatsu.Menu</item>