Reply sheet polish.

Author: cody-signal

app/src/main/java/org/thoughtcrime/securesms/components/emoji/EmojiToggle.java

@@ -1,10 +1,12 @@
 package org.thoughtcrime.securesms.components.emoji;
 
 import android.content.Context;
+import android.content.res.TypedArray;
 import android.graphics.drawable.Drawable;
 import android.util.AttributeSet;
 
 import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
 import androidx.appcompat.widget.AppCompatImageButton;
 
 import org.thoughtcrime.securesms.R;
@@ -24,17 +26,17 @@ public class EmojiToggle extends AppCompatImageButton implements MediaKeyboard.M
 
   public EmojiToggle(Context context) {
     super(context);
-    initialize();
+    initialize(null);
   }
 
   public EmojiToggle(Context context, AttributeSet attrs) {
     super(context, attrs);
-    initialize();
+    initialize(attrs);
   }
 
   public EmojiToggle(Context context, AttributeSet attrs, int defStyle) {
     super(context, attrs, defStyle);
-    initialize();
+    initialize(attrs);
   }
 
   public void setToMedia() {
@@ -45,11 +47,18 @@ public void setToIme() {
     setImageDrawable(imeToggle);
   }
 
-  private void initialize() {
-    this.emojiToggle   = ContextUtil.requireDrawable(getContext(), R.drawable.ic_emoji);
+  private void initialize(@Nullable AttributeSet attrs) {
+    boolean forceOutline = false;
+    if (attrs != null) {
+      TypedArray typedArray = getContext().getTheme().obtainStyledAttributes(attrs, R.styleable.EmojiToggle, 0, 0);
+      forceOutline = typedArray.getBoolean(R.styleable.EmojiToggle_force_outline, false);
+      typedArray.recycle();
+    }
+
+    this.emojiToggle   = ContextUtil.requireDrawable(getContext(), forceOutline ? R.drawable.ic_emoji_outline : R.drawable.ic_emoji);
     this.stickerToggle = ContextUtil.requireDrawable(getContext(), R.drawable.ic_sticker_24);
     this.gifToggle     = ContextUtil.requireDrawable(getContext(), R.drawable.ic_gif_24);
-    this.imeToggle     = ContextUtil.requireDrawable(getContext(), R.drawable.ic_keyboard_24);
+    this.imeToggle     = ContextUtil.requireDrawable(getContext(), forceOutline ? R.drawable.ic_keyboard_outline_24 : R.drawable.ic_keyboard_24);
     this.mediaToggle   = emojiToggle;
 
     setToMedia();

app/src/main/res/drawable/ic_emoji_outline.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:fillColor="@color/signal_inverse_primary"
+      android:pathData="M12,18.7c-2.1,0 -4.2,-1 -5.5,-2.7c-0.2,-0.3 -0.2,-0.8 0.2,-1.1s0.8,-0.2 1.1,0.2l0,0c1,1.3 2.6,2.1 4.3,2.1c1.7,0 3.3,-0.8 4.3,-2.1c0.2,-0.3 0.7,-0.4 1,-0.2c0,0 0,0 0,0c0.3,0.2 0.4,0.7 0.2,1C16.2,17.6 14.2,18.7 12,18.7zM12,2.5c-5.1,-0.2 -9.3,3.8 -9.5,8.9c0,0.2 0,0.4 0,0.6c-0.2,5.1 3.8,9.3 8.9,9.5c0.2,0 0.4,0 0.6,0c5.1,0.2 9.3,-3.8 9.5,-8.9c0,-0.2 0,-0.4 0,-0.6c0.2,-5.1 -3.8,-9.3 -8.9,-9.5C12.4,2.5 12.2,2.5 12,2.5M12,1c5.9,-0.2 10.8,4.5 11,10.4c0,0.2 0,0.4 0,0.6c0.2,5.9 -4.5,10.8 -10.4,11c-0.2,0 -0.4,0 -0.6,0C6.1,23.2 1.2,18.5 1,12.6c0,-0.2 0,-0.4 0,-0.6C0.8,6.1 5.5,1.2 11.4,1C11.6,1 11.8,1 12,1zM8.5,8C7.7,8 7,8.9 7,10s0.7,2 1.5,2s1.5,-0.9 1.5,-2S9.3,8 8.5,8zM15.5,8C14.7,8 14,8.9 14,10s0.7,2 1.5,2s1.5,-0.9 1.5,-2S16.3,8 15.5,8z"/>
+</vector>

app/src/main/res/drawable/ic_keyboard_outline_24.xml

@@ -0,0 +1,5 @@
+<vector android:autoMirrored="true" android:height="24dp"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@color/signal_icon_tint_primary" android:pathData="M20,4.5A1.538,1.538 0,0 1,21.5 6L21.5,17.5A1.538,1.538 0,0 1,20 19L4,19a1.538,1.538 0,0 1,-1.5 -1.5L2.5,6A1.538,1.538 0,0 1,4 4.5L20,4.5M20,3L4,3A2.946,2.946 0,0 0,1 6L1,17.5a2.946,2.946 0,0 0,3 3L20,20.5a2.946,2.946 0,0 0,3 -3L23,6A2.946,2.946 0,0 0,20 3ZM16.5,15h-9v2h9ZM7.5,12h0A1.538,1.538 0,0 0,6 10.5L6,10.5A1.538,1.538 0,0 0,4.5 12h0A1.538,1.538 0,0 0,6 13.5L6,13.5A1.538,1.538 0,0 0,7.5 12ZM11.5,12h0A1.538,1.538 0,0 0,10 10.5h0A1.538,1.538 0,0 0,8.5 12h0A1.538,1.538 0,0 0,10 13.5h0A1.538,1.538 0,0 0,11.5 12ZM15.5,12h0A1.538,1.538 0,0 0,14 10.5h0A1.538,1.538 0,0 0,12.5 12h0A1.538,1.538 0,0 0,14 13.5h0A1.538,1.538 0,0 0,15.5 12ZM19.5,12h0A1.538,1.538 0,0 0,18 10.5h0A1.538,1.538 0,0 0,16.5 12h0A1.538,1.538 0,0 0,18 13.5h0A1.538,1.538 0,0 0,19.5 12ZM7.5,8h0A1.538,1.538 0,0 0,6 6.5L6,6.5A1.538,1.538 0,0 0,4.5 8h0A1.538,1.538 0,0 0,6 9.5L6,9.5A1.538,1.538 0,0 0,7.5 8ZM11.5,8h0A1.538,1.538 0,0 0,10 6.5h0A1.538,1.538 0,0 0,8.5 8h0A1.538,1.538 0,0 0,10 9.5h0A1.538,1.538 0,0 0,11.5 8ZM15.5,8h0A1.538,1.538 0,0 0,14 6.5h0A1.538,1.538 0,0 0,12.5 8h0A1.538,1.538 0,0 0,14 9.5h0A1.538,1.538 0,0 0,15.5 8ZM19.5,8h0A1.538,1.538 0,0 0,18 6.5h0A1.538,1.538 0,0 0,16.5 8h0A1.538,1.538 0,0 0,18 9.5h0A1.538,1.538 0,0 0,19.5 8Z"/>
+</vector>

app/src/main/res/layout/stories_reply_to_story_composer_content.xml

@@ -5,7 +5,6 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="@color/signal_background_tertiary"
-    android:orientation="horizontal"
     android:paddingTop="12dp">
 
     <org.thoughtcrime.securesms.components.FromTextView
@@ -17,6 +16,8 @@
         android:textAppearance="@style/Signal.Text.Caption"
         android:textColor="@color/signal_inverse_transparent_60"
         android:visibility="gone"
+        app:layout_constraintBottom_toTopOf="@+id/bubble"
+        app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
         tools:text="Replying privately to Miles Morales"
@@ -28,16 +29,14 @@
         android:layout_height="wrap_content"
         android:layout_marginStart="18dp"
         android:layout_marginTop="8dp"
-        android:layout_marginEnd="6dp"
+        android:layout_marginEnd="8dp"
         android:layout_marginBottom="8dp"
-        android:layout_weight="1"
         android:background="@drawable/rounded_rectangle_secondary_18"
-        android:orientation="vertical"
         android:padding="8dp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@id/reply_reaction_switch"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/private_reply_recipient"
+        app:layout_constraintTop_toBottomOf="@+id/private_reply_recipient"
         app:layout_goneMarginTop="0dp">
 
         <org.thoughtcrime.securesms.components.QuoteView
@@ -52,13 +51,13 @@
             app:message_type="story_reply_preview"
             app:quote_colorPrimary="@color/signal_text_primary"
             app:quote_colorSecondary="@color/signal_text_primary"
-            tools:visibility="visible" />
+            tools:visibility="gone" />
 
         <org.thoughtcrime.securesms.components.ComposeText
             android:id="@+id/compose_text"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginStart="4dp"
+            android:layout_marginStart="8dp"
             android:layout_marginTop="8dp"
             android:background="@null"
             android:hint="@string/StoryViewerPageFragment__reply"
@@ -68,67 +67,53 @@
             android:maxLines="3"
             android:paddingBottom="2dp"
             android:textAppearance="@style/Signal.Text.Body"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toEndOf="@id/emoji_toggle"
             app:layout_constraintTop_toBottomOf="@id/quote_view"
-            app:layout_goneMarginTop="0dp" />
+            app:layout_goneMarginTop="0dp"
+            tools:text="hello\nasdf" />
 
         <org.thoughtcrime.securesms.components.emoji.EmojiToggle
             android:id="@+id/emoji_toggle"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="8dp"
             android:background="?selectableItemBackgroundBorderless"
+            app:force_outline="true"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/quote_view"
             app:layout_goneMarginTop="0dp" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
-    <org.thoughtcrime.securesms.components.ComposeText
-        android:id="@+id/fake_compose_text"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginBottom="8dp"
-        android:background="@null"
-        android:clickable="false"
-        android:enabled="false"
-        android:focusable="false"
-        android:paddingBottom="2dp"
-        android:textAppearance="@style/Signal.Text.Body"
-        android:visibility="invisible"
-        app:layout_constraintBottom_toBottomOf="@id/bubble"
-        app:layout_goneMarginTop="0dp" />
-
     <ViewSwitcher
         android:id="@+id/reply_reaction_switch"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
+        android:layout_width="36dp"
+        android:layout_height="36dp"
         android:layout_marginEnd="6dp"
-        app:layout_constraintBottom_toBottomOf="@id/fake_compose_text"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="@id/fake_compose_text">
+        android:layout_marginBottom="2dp"
+        app:layout_constraintBottom_toBottomOf="@+id/bubble"
+        app:layout_constraintEnd_toEndOf="parent">
 
         <ImageView
             android:id="@+id/reaction"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
-            android:layout_gravity="bottom"
+            android:layout_width="36dp"
+            android:layout_height="36dp"
             android:background="?attr/selectableItemBackgroundBorderless"
             android:contentDescription="@string/StoryReplyComposer__react_to_this_story"
-            android:scaleType="centerInside"
+            android:padding="6dp"
             app:srcCompat="@drawable/ic_add_reaction_outline_24"
             app:tint="@color/signal_icon_tint_primary" />
 
         <ImageView
             android:id="@+id/reply"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
+            android:layout_width="36dp"
+            android:layout_height="36dp"
             android:layout_gravity="bottom"
-            android:background="@drawable/story_text_circle_button_background_inset_6"
+            android:background="@drawable/circle_tintable"
             android:contentDescription="@string/StoryReplyComposer__react_to_this_story"
-            android:scaleType="centerInside"
+            android:padding="6dp"
             app:backgroundTint="@color/core_ultramarine"
             app:srcCompat="@drawable/ic_send_24" />
     </ViewSwitcher>

app/src/main/res/values/attrs.xml

@@ -360,4 +360,8 @@
             <enum name="badge_112" value="5" />
         </attr>
     </declare-styleable>
+
+    <declare-styleable name="EmojiToggle">
+        <attr name="force_outline" format="boolean" />
+    </declare-styleable>
 </resources>