Merge pull request #1369 from nextcloud/a11y-contrastBubble-HitBoxSize

Improve Chat Accessibility
This commit is contained in:
Andy Scherzinger 2021-06-30 16:48:41 +02:00 committed by GitHub
commit e9fb3eda84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 155 additions and 131 deletions

View File

@ -563,6 +563,8 @@ class ChatController(args: Bundle) :
} }
} }
binding.messageInputView.setPadding(0, 0, 0, 0)
if (args.containsKey("showToggleChat") && args.getBoolean("showToggleChat")) { if (args.containsKey("showToggleChat") && args.getBoolean("showToggleChat")) {
binding.callControlToggleChat.visibility = View.VISIBLE binding.callControlToggleChat.visibility = View.VISIBLE
wasDetached = true wasDetached = true

View File

@ -2,6 +2,8 @@
~ Nextcloud Talk application ~ Nextcloud Talk application
~ ~
~ @author Mario Danic ~ @author Mario Danic
~ @author Andy Scherzinger
~ Copyright (C) 2021 Andy Scherzinger <info@andy-scherzinger.de>
~ Copyright (C) 2017-2018 Mario Danic <mario@lovelyhq.com> ~ Copyright (C) 2017-2018 Mario Danic <mario@lovelyhq.com>
~ ~
~ This program is free software: you can redistribute it and/or modify ~ This program is free software: you can redistribute it and/or modify
@ -18,33 +20,38 @@
~ along with this program. If not, see <http://www.gnu.org/licenses/>. ~ along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:animateLayoutChanges="true" android:animateLayoutChanges="true"
android:background="@color/bg_default"> android:background="@color/bg_default"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<include <include
android:id="@+id/lobby" android:id="@+id/lobby"
layout="@layout/lobby_view" layout="@layout/lobby_view"
android:visibility="gone" android:visibility="gone"
tools:visibility="visible"/> tools:visibility="visible" />
<com.facebook.drawee.view.SimpleDraweeView <com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/callControlToggleChat" android:id="@+id/callControlToggleChat"
android:layout_width="60dp" android:layout_width="60dp"
android:layout_height="60dp" android:layout_height="60dp"
android:layout_margin="16dp"
android:layout_alignParentEnd="true" android:layout_alignParentEnd="true"
android:layout_margin="16dp"
android:elevation="10dp"
android:visibility="gone"
app:backgroundImage="@color/call_buttons_background" app:backgroundImage="@color/call_buttons_background"
app:placeholderImage="@drawable/ic_call_black_24dp" app:placeholderImage="@drawable/ic_call_black_24dp"
app:roundAsCircle="true" app:roundAsCircle="true"
android:elevation="10dp" tools:visibility="visible" />
android:visibility="gone"
tools:visibility="visible"
/>
<LinearLayout <LinearLayout
android:id="@+id/progressBar" android:id="@+id/progressBar"
@ -62,43 +69,13 @@
<include layout="@layout/item_custom_incoming_text_message_shimmer" /> <include layout="@layout/item_custom_incoming_text_message_shimmer" />
</LinearLayout> </LinearLayout>
<View
android:id="@+id/separator"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="@+id/messageInputView"
android:background="@color/controller_chat_separator" />
<com.stfalcon.chatkit.messages.MessageInput
android:id="@+id/messageInputView"
android:animateLayoutChanges="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:inputType="textLongMessage|textAutoComplete"
android:maxLength="1000"
app:showAttachmentButton="true"
app:attachmentButtonHeight="28dp"
app:attachmentButtonWidth="28dp"
app:attachmentButtonIcon="@drawable/ic_baseline_attach_file_24"
app:attachmentButtonBackground="@color/transparent"
app:inputButtonDefaultBgColor="@color/colorPrimary"
app:inputButtonHeight="35dp"
app:inputButtonMargin="8dp"
app:inputButtonWidth="36dp"
app:inputHint="@string/nc_hint_enter_a_message"
app:inputTextColor="@color/nc_incoming_text_default"
app:inputTextSize="16sp"
app:delayTypingStatus="200"/>
<com.stfalcon.chatkit.messages.MessagesList <com.stfalcon.chatkit.messages.MessagesList
android:id="@+id/messagesListView" android:id="@+id/messagesListView"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:layout_above="@+id/messageInputView" android:paddingBottom="0dp"
android:visibility="gone" android:visibility="gone"
app:dateHeaderTextSize="13sp" app:dateHeaderTextSize="13sp"
android:paddingBottom="4dp"
app:incomingBubblePaddingBottom="@dimen/message_bubble_corners_padding" app:incomingBubblePaddingBottom="@dimen/message_bubble_corners_padding"
app:incomingBubblePaddingLeft="@dimen/message_bubble_corners_padding" app:incomingBubblePaddingLeft="@dimen/message_bubble_corners_padding"
app:incomingBubblePaddingRight="@dimen/message_bubble_corners_padding" app:incomingBubblePaddingRight="@dimen/message_bubble_corners_padding"
@ -129,7 +106,7 @@
android:id="@+id/popupBubbleView" android:id="@+id/popupBubbleView"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_above="@+id/separator" android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" android:layout_centerHorizontal="true"
android:layout_margin="16dp" android:layout_margin="16dp"
android:paddingStart="0dp" android:paddingStart="0dp"
@ -139,4 +116,40 @@
app:pb_text="@string/nc_new_messages" app:pb_text="@string/nc_new_messages"
app:pb_textColor="@color/textColorOnPrimaryBackground" /> app:pb_textColor="@color/textColorOnPrimaryBackground" />
</RelativeLayout> </RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:id="@+id/separator"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/controller_chat_separator" />
<com.stfalcon.chatkit.messages.MessageInput
android:id="@+id/messageInputView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:inputType="textLongMessage|textAutoComplete"
android:maxLength="1000"
app:attachmentButtonBackground="@color/transparent"
app:attachmentButtonHeight="48dp"
app:attachmentButtonIcon="@drawable/ic_baseline_attach_file_24"
app:attachmentButtonMargin="0dp"
app:attachmentButtonWidth="48dp"
app:delayTypingStatus="200"
app:inputButtonDefaultBgColor="@color/transparent"
app:inputButtonDefaultIconColor="@color/colorPrimary"
app:inputButtonHeight="48dp"
app:inputButtonMargin="0dp"
app:inputButtonWidth="48dp"
app:inputHint="@string/nc_hint_enter_a_message"
app:inputTextColor="@color/nc_incoming_text_default"
app:inputTextSize="16sp"
app:showAttachmentButton="true" />
</LinearLayout>
</LinearLayout>

View File

@ -2,6 +2,10 @@
~ Nextcloud Talk application ~ Nextcloud Talk application
~ ~
~ @author Mario Danic ~ @author Mario Danic
~ @author Marcel Hibbe
~ @author Andy Scherzinger
~ Copyright (C) 2021 Andy Scherzinger <info@andy-scherzinger.de>
~ Copyright (C) 2021 Marcel Hibbe <dev@mhibbe.de>
~ Copyright (C) 2017-2018 Mario Danic <mario@lovelyhq.com> ~ Copyright (C) 2017-2018 Mario Danic <mario@lovelyhq.com>
~ ~
~ This program is free software: you can redistribute it and/or modify ~ This program is free software: you can redistribute it and/or modify
@ -26,7 +30,8 @@
<RelativeLayout <RelativeLayout
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content"> android:layout_height="wrap_content"
android:layout_marginEnd="4dp">
<include layout="@layout/item_message_quote" <include layout="@layout/item_message_quote"
android:layout_width="match_parent" android:layout_width="match_parent"
@ -36,24 +41,26 @@
<ImageButton <ImageButton
android:id="@id/attachmentButton" android:id="@id/attachmentButton"
android:layout_width="28dp" android:layout_width="48dp"
android:layout_height="28dp" android:layout_height="48dp"
android:padding="12dp"
android:layout_below="@id/quotedChatMessageView" android:layout_below="@id/quotedChatMessageView"
android:background="@color/transparent"
android:src="@drawable/ic_baseline_attach_file_24"
app:tint="?attr/colorControlNormal"
android:scaleType="centerCrop" android:scaleType="centerCrop"
android:layout_marginTop="5dp"
android:contentDescription="@string/nc_add_attachment" /> android:contentDescription="@string/nc_add_attachment" />
<ImageButton <ImageButton
android:id="@+id/smileyButton" android:id="@+id/smileyButton"
android:layout_width="28dp" android:layout_width="48dp"
android:layout_height="28dp" android:layout_height="48dp"
android:padding="12dp"
android:layout_below="@id/quotedChatMessageView" android:layout_below="@id/quotedChatMessageView"
android:layout_toEndOf="@id/attachmentButton" android:layout_toEndOf="@id/attachmentButton"
android:background="@color/transparent" android:background="@color/transparent"
android:src="@drawable/ic_insert_emoticon_black_24dp" android:src="@drawable/ic_insert_emoticon_black_24dp"
android:scaleType="centerCrop" android:scaleType="centerCrop"
android:layout_marginTop="5dp"
android:layout_marginStart="8dp"
app:tint="?attr/colorControlNormal" app:tint="?attr/colorControlNormal"
android:contentDescription="@string/nc_add_emojis" /> android:contentDescription="@string/nc_add_emojis" />
@ -63,11 +70,12 @@
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_below="@+id/quotedChatMessageView" android:layout_below="@+id/quotedChatMessageView"
android:layout_centerHorizontal="true" android:layout_centerHorizontal="true"
android:layout_toEndOf="@id/smileyButton"
android:layout_toStartOf="@id/messageSendButton" android:layout_toStartOf="@id/messageSendButton"
android:layout_toEndOf="@id/smileyButton"
android:imeOptions="actionDone" android:imeOptions="actionDone"
android:inputType="textAutoCorrect|textMultiLine|textCapSentences" android:inputType="textAutoCorrect|textMultiLine|textCapSentences"
android:lineSpacingMultiplier="1.2" /> android:lineSpacingMultiplier="1.2"
android:minHeight="48dp" />
<TextView <TextView
android:id="@+id/slideToCancelDescription" android:id="@+id/slideToCancelDescription"
@ -88,14 +96,14 @@
<ImageView <ImageView
android:id="@+id/microphoneEnabledInfoBackground" android:id="@+id/microphoneEnabledInfoBackground"
android:layout_width="35dp" android:layout_width="48dp"
android:layout_height="35dp" android:layout_height="48dp"
android:layout_below="@id/quotedChatMessageView" android:layout_below="@id/quotedChatMessageView"
android:scaleType="centerInside" android:scaleType="centerInside"
android:layout_alignParentStart="true" android:layout_alignParentStart="true"
android:background="@color/bg_default" android:background="@color/bg_default"
android:visibility="gone" android:visibility="gone"
tools:visibility="visible" tools:visibility="gone"
android:contentDescription="@null" /> android:contentDescription="@null" />
<!-- the height of this ImageView is used to define the overall height of the <!-- the height of this ImageView is used to define the overall height of the
@ -104,15 +112,15 @@
linebreaks. --> linebreaks. -->
<ImageView <ImageView
android:id="@+id/microphoneEnabledInfo" android:id="@+id/microphoneEnabledInfo"
android:layout_width="35dp" android:layout_width="48dp"
android:layout_height="43dp" android:layout_height="48dp"
android:layout_below="@id/quotedChatMessageView" android:layout_below="@id/quotedChatMessageView"
android:scaleType="centerInside" android:scaleType="centerInside"
android:layout_alignParentStart="true" android:layout_alignParentStart="true"
android:src="@drawable/ic_baseline_mic_red_24" android:src="@drawable/ic_baseline_mic_red_24"
android:contentDescription="@null" android:contentDescription="@null"
android:visibility="gone" android:visibility="gone"
tools:visibility="visible"/> tools:visibility="gone"/>
<Chronometer <Chronometer
android:id="@+id/audioRecordDuration" android:id="@+id/audioRecordDuration"
@ -128,12 +136,13 @@
android:paddingEnd="5dp" android:paddingEnd="5dp"
android:background="@color/bg_default" android:background="@color/bg_default"
android:visibility="gone" android:visibility="gone"
tools:visibility="visible" /> tools:visibility="gone" />
<ImageButton <ImageButton
android:id="@id/messageSendButton" android:id="@id/messageSendButton"
android:layout_width="wrap_content" android:layout_width="48dp"
android:layout_height="wrap_content" android:layout_height="48dp"
android:padding="12dp"
android:layout_below="@id/quotedChatMessageView" android:layout_below="@id/quotedChatMessageView"
android:layout_alignParentEnd="true" android:layout_alignParentEnd="true"
android:adjustViewBounds="true" android:adjustViewBounds="true"
@ -142,8 +151,8 @@
<ImageButton <ImageButton
android:id="@+id/recordAudioButton" android:id="@+id/recordAudioButton"
android:layout_width="36dp" android:layout_width="48dp"
android:layout_height="36dp" android:layout_height="48dp"
android:layout_below="@id/quotedChatMessageView" android:layout_below="@id/quotedChatMessageView"
android:layout_alignParentEnd="true" android:layout_alignParentEnd="true"
android:background="@color/transparent" android:background="@color/transparent"

View File

@ -56,8 +56,8 @@
<!-- Chat window incoming message text & informational --> <!-- Chat window incoming message text & informational -->
<color name="bg_bottom_sheet">#121212</color> <color name="bg_bottom_sheet">#121212</color>
<color name="bg_message_list_incoming_bubble">#484848</color> <color name="bg_message_list_incoming_bubble">#1CFFFFFF</color>
<color name="bg_message_list_incoming_bubble_deleted">#66484848</color> <color name="bg_message_list_incoming_bubble_deleted">#14FFFFFF</color>
<color name="textColorMaxContrast">#8c8c8c</color> <color name="textColorMaxContrast">#8c8c8c</color>