Show attachment button while composing text.

Previously, we'd only show the attachment button when the user had
yet to enter any text. To add an attachment after text was entered,
you'd have to go to the three-dot menu. Now we just show a little
attach button in the text area.

I also took the opportunity to clean up other button paddings and
stuff in the compose area so things look better and react to text
sizes more predictably.
This commit is contained in:
Greyson Parrelli 2018-08-10 12:18:02 -04:00
parent dbd42c4af2
commit c7da83a702
7 changed files with 108 additions and 72 deletions

View File

@ -54,30 +54,32 @@
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingStart="10dp"
android:clipChildren="false"
android:clipToPadding="false">
<org.thoughtcrime.securesms.components.emoji.EmojiToggle
android:id="@+id/emoji_toggle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginLeft="14dp"
android:layout_marginStart="14dp"
android:background="@drawable/touch_highlight_background"
android:layout_height="@dimen/conversation_compose_height"
android:layout_gravity="bottom"
android:paddingLeft="4dp"
android:paddingStart="4dp"
android:paddingRight="6dp"
android:paddingEnd="6dp"
android:background="?selectableItemBackgroundBorderless"
android:contentDescription="@string/conversation_activity__emoji_toggle_description" />
<Space
android:layout_width="0dp"
android:layout_height="@dimen/conversation_compose_height" />
<org.thoughtcrime.securesms.components.ComposeText
style="@style/ComposeEditText"
android:id="@+id/embedded_text_editor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginStart="6dp"
android:layout_marginRight="6dp"
android:layout_marginEnd="6dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:nextFocusForward="@+id/send_button"
@ -87,57 +89,84 @@
<requestFocus />
</org.thoughtcrime.securesms.components.ComposeText>
<org.thoughtcrime.securesms.components.HidingLinearLayout
android:id="@+id/quick_attachment_toggle"
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false">
<ImageButton
android:id="@+id/quick_camera_toggle"
<org.thoughtcrime.securesms.components.HidingLinearLayout
android:id="@+id/quick_attachment_toggle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:src="?quick_camera_icon"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:background="@drawable/touch_highlight_background"
android:contentDescription="@string/conversation_activity__quick_attachment_drawer_toggle_camera_description" />
<org.thoughtcrime.securesms.components.MicrophoneRecorderView
android:id="@+id/recorder_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical"
android:layout_gravity="right|end"
android:clipChildren="false"
android:clipToPadding="false">
<ImageButton
android:id="@+id/quick_audio_toggle"
android:id="@+id/quick_camera_toggle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:layout_marginEnd="2dp"
android:padding="6dp"
android:src="?quick_mic_icon"
android:background="@null"
android:contentDescription="@string/conversation_activity__quick_attachment_drawer_record_and_send_audio_description" />
android:src="?quick_camera_icon"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:background="?selectableItemBackgroundBorderless"
android:contentDescription="@string/conversation_activity__quick_attachment_drawer_toggle_camera_description" />
<ImageView
android:id="@+id/quick_audio_fab"
android:layout_width="74dp"
android:layout_height="74dp"
android:src="@drawable/ic_mic_white_48dp"
android:background="@drawable/circle_tintable"
android:backgroundTint="@color/core_red"
android:visibility="gone"
android:scaleType="center"/>
<org.thoughtcrime.securesms.components.MicrophoneRecorderView
android:id="@+id/recorder_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical"
android:clipChildren="false"
android:clipToPadding="false">
</org.thoughtcrime.securesms.components.MicrophoneRecorderView>
<ImageButton
android:id="@+id/quick_audio_toggle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:layout_marginEnd="2dp"
android:padding="6dp"
android:src="?quick_mic_icon"
android:background="@null"
android:contentDescription="@string/conversation_activity__quick_attachment_drawer_record_and_send_audio_description" />
</org.thoughtcrime.securesms.components.HidingLinearLayout>
<ImageView
android:id="@+id/quick_audio_fab"
android:layout_width="74dp"
android:layout_height="74dp"
android:src="@drawable/ic_mic_white_48dp"
android:background="@drawable/circle_tintable"
android:backgroundTint="@color/core_red"
android:visibility="gone"
android:scaleType="center"/>
</org.thoughtcrime.securesms.components.MicrophoneRecorderView>
</org.thoughtcrime.securesms.components.HidingLinearLayout>
<org.thoughtcrime.securesms.components.HidingLinearLayout
android:id="@+id/inline_attachment_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right|end">
<ImageButton
android:id="@+id/inline_attachment_button"
android:layout_width="wrap_content"
android:layout_height="@dimen/conversation_compose_height"
android:layout_gravity="bottom"
android:padding="8dp"
android:src="@drawable/ic_add_white_24dp"
android:tint="?attr/conversation_input_inline_attach_icon_tint"
android:background="?selectableItemBackgroundBorderless"/>
</org.thoughtcrime.securesms.components.HidingLinearLayout>
</FrameLayout>
</LinearLayout>
@ -198,8 +227,8 @@
<org.thoughtcrime.securesms.components.AnimatingToggle
android:id="@+id/button_toggle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_width="@dimen/conversation_compose_height"
android:layout_height="@dimen/conversation_compose_height"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp"
android:background="@drawable/circle_tintable"

View File

@ -1,9 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="@string/conversation__menu_add_attachment"
android:id="@+id/menu_add_attachment" />
<item android:title="@string/conversation__menu_view_all_media"
android:id="@+id/menu_view_media" />

View File

@ -30,6 +30,7 @@
<attr name="conversation_editor_background" format="reference|color"/>
<attr name="conversation_editor_text_color" format="reference|color"/>
<attr name="conversation_input_background" format="reference"/>
<attr name="conversation_input_inline_attach_icon_tint" format="reference"/>
<attr name="conversation_transport_sms_indicator" format="reference"/>
<attr name="conversation_transport_push_indicator" format="reference"/>
<attr name="conversation_transport_popup_background" format="reference"/>

View File

@ -34,6 +34,7 @@
<dimen name="media_bubble_min_height">100dp</dimen>
<dimen name="media_bubble_max_height">320dp</dimen>
<dimen name="conversation_compose_height">40dp</dimen>
<dimen name="conversation_individual_right_gutter">16dp</dimen>
<dimen name="conversation_individual_left_gutter">16dp</dimen>
<dimen name="conversation_group_left_gutter">52dp</dimen>

View File

@ -148,6 +148,7 @@
<item name="conversation_editor_background">#22000000</item>
<item name="conversation_editor_text_color">#ff111111</item>
<item name="conversation_input_background">@drawable/compose_background_light</item>
<item name="conversation_input_inline_attach_icon_tint">@color/core_light_60</item>
<item name="conversation_transport_sms_indicator">@drawable/ic_send_sms_insecure</item>
<item name="conversation_transport_push_indicator">@drawable/ic_send_push</item>
<item name="conversation_transport_popup_background">@color/white</item>
@ -321,6 +322,7 @@
<item name="conversation_editor_background">#22ffffff</item>
<item name="conversation_editor_text_color">#ffeeeeee</item>
<item name="conversation_input_background">@drawable/compose_background_dark</item>
<item name="conversation_input_inline_attach_icon_tint">@color/core_dark_05</item>
<item name="conversation_transport_sms_indicator">@drawable/ic_send_sms_insecure_dark</item>
<item name="conversation_transport_push_indicator">@drawable/ic_send_push</item>
<item name="conversation_transport_popup_background">@color/black</item>

View File

@ -250,6 +250,7 @@ public class ConversationActivity extends PassphraseRequiredActionBarActivity
private BroadcastReceiver securityUpdateReceiver;
private Stub<EmojiDrawer> emojiDrawerStub;
protected HidingLinearLayout quickAttachmentToggle;
protected HidingLinearLayout inlineAttachmentToggle;
private QuickAttachmentDrawer quickAttachmentDrawer;
private InputPanel inputPanel;
@ -566,7 +567,6 @@ public class ConversationActivity extends PassphraseRequiredActionBarActivity
switch (item.getItemId()) {
case R.id.menu_call_secure:
case R.id.menu_call_insecure: handleDial(getRecipient()); return true;
case R.id.menu_add_attachment: handleAddAttachment(); return true;
case R.id.menu_view_media: handleViewMedia(); return true;
case R.id.menu_add_to_contacts: handleAddToContacts(); return true;
case R.id.menu_reset_secure_session: handleResetSecureSession(); return true;
@ -1265,26 +1265,28 @@ public class ConversationActivity extends PassphraseRequiredActionBarActivity
ActionBar supportActionBar = getSupportActionBar();
if (supportActionBar == null) throw new AssertionError();
titleView = (ConversationTitleView) supportActionBar.getCustomView();
buttonToggle = ViewUtil.findById(this, R.id.button_toggle);
sendButton = ViewUtil.findById(this, R.id.send_button);
attachButton = ViewUtil.findById(this, R.id.attach_button);
composeText = ViewUtil.findById(this, R.id.embedded_text_editor);
charactersLeft = ViewUtil.findById(this, R.id.space_left);
emojiDrawerStub = ViewUtil.findStubById(this, R.id.emoji_drawer_stub);
unblockButton = ViewUtil.findById(this, R.id.unblock_button);
makeDefaultSmsButton = ViewUtil.findById(this, R.id.make_default_sms_button);
registerButton = ViewUtil.findById(this, R.id.register_button);
composePanel = ViewUtil.findById(this, R.id.bottom_panel);
container = ViewUtil.findById(this, R.id.layout_container);
reminderView = ViewUtil.findStubById(this, R.id.reminder_stub);
unverifiedBannerView = ViewUtil.findStubById(this, R.id.unverified_banner_stub);
groupShareProfileView = ViewUtil.findStubById(this, R.id.group_share_profile_view_stub);
quickAttachmentDrawer = ViewUtil.findById(this, R.id.quick_attachment_drawer);
quickAttachmentToggle = ViewUtil.findById(this, R.id.quick_attachment_toggle);
inputPanel = ViewUtil.findById(this, R.id.bottom_panel);
titleView = (ConversationTitleView) supportActionBar.getCustomView();
buttonToggle = ViewUtil.findById(this, R.id.button_toggle);
sendButton = ViewUtil.findById(this, R.id.send_button);
attachButton = ViewUtil.findById(this, R.id.attach_button);
composeText = ViewUtil.findById(this, R.id.embedded_text_editor);
charactersLeft = ViewUtil.findById(this, R.id.space_left);
emojiDrawerStub = ViewUtil.findStubById(this, R.id.emoji_drawer_stub);
unblockButton = ViewUtil.findById(this, R.id.unblock_button);
makeDefaultSmsButton = ViewUtil.findById(this, R.id.make_default_sms_button);
registerButton = ViewUtil.findById(this, R.id.register_button);
composePanel = ViewUtil.findById(this, R.id.bottom_panel);
container = ViewUtil.findById(this, R.id.layout_container);
reminderView = ViewUtil.findStubById(this, R.id.reminder_stub);
unverifiedBannerView = ViewUtil.findStubById(this, R.id.unverified_banner_stub);
groupShareProfileView = ViewUtil.findStubById(this, R.id.group_share_profile_view_stub);
quickAttachmentDrawer = ViewUtil.findById(this, R.id.quick_attachment_drawer);
quickAttachmentToggle = ViewUtil.findById(this, R.id.quick_attachment_toggle);
inlineAttachmentToggle = ViewUtil.findById(this, R.id.inline_attachment_container);
inputPanel = ViewUtil.findById(this, R.id.bottom_panel);
ImageButton quickCameraToggle = ViewUtil.findById(this, R.id.quick_camera_toggle);
ImageButton quickCameraToggle = ViewUtil.findById(this, R.id.quick_camera_toggle);
ImageButton inlineAttachmentButton = ViewUtil.findById(this, R.id.inline_attachment_button);
container.addOnKeyboardShownListener(this);
inputPanel.setListener(this);
@ -1330,6 +1332,8 @@ public class ConversationActivity extends PassphraseRequiredActionBarActivity
quickCameraToggle.setVisibility(View.GONE);
quickCameraToggle.setEnabled(false);
}
inlineAttachmentButton.setOnClickListener(v -> handleAddAttachment());
}
protected void initializeActionBar() {
@ -1844,9 +1848,11 @@ public class ConversationActivity extends PassphraseRequiredActionBarActivity
if (composeText.getText().length() == 0 && !attachmentManager.isAttachmentPresent()) {
buttonToggle.display(attachButton);
quickAttachmentToggle.show();
inlineAttachmentToggle.hide();
} else {
buttonToggle.display(sendButton);
quickAttachmentToggle.hide();
inlineAttachmentToggle.show();
}
}

View File

@ -35,7 +35,7 @@ public class HidingLinearLayout extends LinearLayout {
if (!isEnabled() || getVisibility() == GONE) return;
AnimationSet animation = new AnimationSet(true);
animation.addAnimation(new ScaleAnimation(1, 0, 1, 1, Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 0.5f));
animation.addAnimation(new ScaleAnimation(1, 0.5f, 1, 1, Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 0.5f));
animation.addAnimation(new AlphaAnimation(1, 0));
animation.setDuration(100);
@ -63,7 +63,7 @@ public class HidingLinearLayout extends LinearLayout {
setVisibility(VISIBLE);
AnimationSet animation = new AnimationSet(true);
animation.addAnimation(new ScaleAnimation(0, 1, 1, 1, Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 0.5f));
animation.addAnimation(new ScaleAnimation(0.5f, 1, 1, 1, Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 0.5f));
animation.addAnimation(new AlphaAnimation(0, 1));
animation.setDuration(100);