feat: Show text counter on caption dialog, request focus (#1045)

Previous layout didn't enable the character counter for entered text, so
it was difficult for the user to see how much they had used.

Fix that. To get the layout to play nicely switch to a ConstraintLayout
with a chain to split the dialog roughly 50/50 between the image and the
caption views.

While I'm here:

- Remove the margins around the image, so it's clearer, and is more
consistent with the "set focus" dialog.
- Set focus on the description immediately, so the keyboard pops up.
- Remove focusability from the image, since the user shouldn't be able
to interact with it.
This commit is contained in:
Nik Clayton 2024-10-24 15:21:16 +02:00 committed by GitHub
parent 8a649393d9
commit e7068da7e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 18 deletions

View File

@ -38,7 +38,9 @@ import com.bumptech.glide.load.resource.bitmap.DownsampleStrategy
import com.bumptech.glide.request.target.CustomTarget
import com.bumptech.glide.request.transition.Transition
/** Maximum length of a media description. */
// https://github.com/tootsuite/mastodon/blob/c6904c0d3766a2ea8a81ab025c127169ecb51373/app/models/media_attachment.rb#L32
// https://github.com/mastodon/mastodon/issues/28338
private const val MEDIA_DESCRIPTION_CHARACTER_LIMIT = 1500
class CaptionDialog : DialogFragment() {
@ -50,6 +52,8 @@ class CaptionDialog : DialogFragment() {
val binding = DialogImageDescriptionBinding.inflate(layoutInflater)
binding.textInputLayout.counterMaxLength = MEDIA_DESCRIPTION_CHARACTER_LIMIT
input = binding.imageDescriptionText
val imageView = binding.imageDescriptionView
imageView.maxZoom = 6f
@ -61,6 +65,7 @@ class CaptionDialog : DialogFragment() {
)
input.filters = arrayOf(InputFilter.LengthFilter(MEDIA_DESCRIPTION_CHARACTER_LIMIT))
input.setText(arguments?.getString(ARG_EXISTING_DESCRIPTION))
input.requestFocus()
val localId = arguments?.getInt(ARG_LOCAL_ID) ?: error("Missing localId")
val dialog = AlertDialog.Builder(context)

View File

@ -1,38 +1,45 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="0dp">
tools:context=".components.compose.ComposeActivity">
<com.ortiz.touchview.TouchImageView
android:id="@+id/imageDescriptionView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:contentDescription="@string/post_media_image"/>
android:layout_height="wrap_content"
android:contentDescription="@string/post_media_image"
android:focusable="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/textInputLayout"
app:layout_constraintVertical_chainStyle="spread_inside"
tools:srcCompat="@tools:sample/backgrounds/scenic" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textInputLayout"
style="@style/AppTextInput"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginStart="?dialogPreferredPadding"
android:layout_marginTop="?dialogPreferredPadding"
android:layout_marginEnd="?dialogPreferredPadding"
app:hintEnabled="false"
app:counterEnabled="false"
app:counterTextColor="?android:textColorTertiary">
android:layout_height="wrap_content"
android:paddingHorizontal="?dialogPreferredPadding"
app:counterEnabled="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="@id/imageDescriptionView">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/imageDescriptionText"
android:inputType="textCapSentences|textMultiLine|textAutoCorrect"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:hint="@string/hint_description"
android:gravity="start"
android:importantForAutofill="no" />
android:importantForAutofill="no"
android:inputType="textCapSentences|textMultiLine|textAutoCorrect" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>