Emoji Reactions Support (#645)

* Display Pleroma emoji reactions

* Interact with existing Pleroma emoji reactions

* Setting for emoji reaction support

* Setting for displaying reactions in timelines

* More horizontal padding on reactions display item

* List accounts who reacted

* Arbitrary emoji reaction from status footer

* Hide custom emoji keyboard when emoji is selected

* Clear preferences before applying
All preferences get written anyways so nothing will be lost

* Reset react visibility state on bind

* Fix custom emoji turning black when reacting

* Load reactions when a new one is added

* Emoji reactions grid

* Load custom emoji in reactions list fragment

* New reaction toast messages and Unicode emoji regex

* Make custom emoji picker for reactions scrollable

* Scroll down to show custom emoji picker when reacting

* Divider after reaction custom emoji picker

* Animate react button opacity back in

* fix plural strings

* re-implement reactions using horizontal recycler view

* update reactions with event

* tweak emoji font size

* tweak button styles (a tiny bit)

* change footer react button behavior

* fix emoji reaction status item padding

* move emoji reactions below content items

* add content description and tooltip

* use custom emoji keyboard to enter unicode emoji

* fix reactions clearing on status counter updates

* fix space next to emoji reactions not clickable

* make compatible with glitch-soc

* Remove now unused EmojiReactionsView class

* improve handling of reaction padding

---------

Co-authored-by: sk <sk22@mailbox.org>
This commit is contained in:
Jacoco
2023-08-18 18:14:33 +02:00
committed by GitHub
parent 1cdc58378a
commit a79779f813
26 changed files with 1163 additions and 173 deletions

View File

@@ -7,156 +7,205 @@
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="11sp">
<!-- avatar width (46sp) / 2 - button width (24sp) / 2 -->
android:rowCount="2"
android:columnCount="1">
<FrameLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/reply_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingVertical="12dp">
<ImageView
android:layout_width="24sp"
android:layout_height="24sp"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:duplicateParentState="true"
android:src="@drawable/ic_fluent_chat_multiple_24_selector_text"
android:tint="?android:textColorSecondary"
android:gravity="center_vertical" />
<TextView
android:id="@+id/reply"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:paddingStart="8dp"
android:minWidth="16dp"
android:gravity="center_vertical"
android:textAppearance="@style/m3_label_large"
android:maxLines="1"
android:ellipsize="end"
tools:text="123"
tools:ignore="RtlSymmetry" />
</LinearLayout>
</FrameLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="11sp">
<!-- avatar width (46sp) / 2 - button width (24sp) / 2 -->
<FrameLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/boost_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:foregroundTint="@color/boost_icon"
android:paddingVertical="12dp">
<ImageView
android:layout_width="24sp"
android:layout_height="24sp"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:duplicateParentState="true"
android:src="@drawable/ic_boost"
android:tint="@color/boost_icon"
android:gravity="center_vertical" />
<TextView
android:id="@+id/boost"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:paddingStart="8dp"
android:minWidth="16dp"
android:duplicateParentState="true"
android:textColor="@color/boost_icon"
android:gravity="center_vertical"
android:textAppearance="@style/m3_label_large"
android:maxLines="1"
android:ellipsize="end"
tools:text="123"
tools:ignore="RtlSymmetry" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/favorite_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingVertical="12dp">
<ImageView
android:layout_width="24sp"
android:layout_height="24sp"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:duplicateParentState="true"
android:src="@drawable/ic_fluent_star_24_selector"
android:tint="@color/favorite_icon"
android:gravity="center_vertical" />
<TextView
android:id="@+id/favorite"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:paddingStart="8dp"
android:minWidth="16dp"
android:textColor="@color/favorite_icon"
android:gravity="center_vertical"
android:textAppearance="@style/m3_label_large"
android:maxLines="1"
android:ellipsize="end"
tools:text="123"
tools:ignore="RtlSymmetry" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/bookmark_btn"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/reply_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingVertical="12dp">
<ImageView
android:layout_width="24sp"
android:layout_height="24sp"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:duplicateParentState="true"
android:src="@drawable/ic_fluent_chat_multiple_24_selector_text"
android:tint="?android:textColorSecondary"
android:gravity="center_vertical" />
<TextView
android:id="@+id/reply"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:paddingStart="8dp"
android:minWidth="16dp"
android:gravity="center_vertical"
android:textAppearance="@style/m3_label_large"
android:maxLines="1"
android:ellipsize="end"
tools:text="123"
tools:ignore="RtlSymmetry" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/boost_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:foregroundTint="@color/boost_icon"
android:paddingVertical="12dp">
<ImageView
android:layout_width="24sp"
android:layout_height="24sp"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:duplicateParentState="true"
android:src="@drawable/ic_boost"
android:tint="@color/boost_icon"
android:gravity="center_vertical" />
<TextView
android:id="@+id/boost"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:paddingStart="8dp"
android:minWidth="16dp"
android:duplicateParentState="true"
android:textColor="@color/boost_icon"
android:gravity="center_vertical"
android:textAppearance="@style/m3_label_large"
android:maxLines="1"
android:ellipsize="end"
tools:text="123"
tools:ignore="RtlSymmetry" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/favorite_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingVertical="12dp">
<ImageView
android:layout_width="24sp"
android:layout_height="24sp"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:duplicateParentState="true"
android:src="@drawable/ic_fluent_star_24_selector"
android:tint="@color/favorite_icon"
android:gravity="center_vertical" />
<TextView
android:id="@+id/favorite"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:paddingStart="8dp"
android:minWidth="16dp"
android:textColor="@color/favorite_icon"
android:gravity="center_vertical"
android:textAppearance="@style/m3_label_large"
android:maxLines="1"
android:ellipsize="end"
tools:text="123"
tools:ignore="RtlSymmetry" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:id="@+id/react_layout"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/react_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingVertical="12dp">
<ImageView
android:id="@+id/react"
android:layout_width="24sp"
android:layout_height="24sp"
android:layout_gravity="center_vertical"
android:layout_marginHorizontal="16dp"
android:src="@drawable/ic_fluent_emoji_laugh_24_regular"
android:tint="@color/bookmark_icon"
android:gravity="center_vertical"
android:textAppearance="@style/m3_label_large" />
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone">
<EditText
android:layout_width="100dp"
android:layout_height="20dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:id="@+id/react_input"/>
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/bookmark_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingVertical="12dp">
<ImageView
android:id="@+id/bookmark"
android:layout_width="24sp"
android:layout_height="24sp"
android:layout_gravity="center_vertical"
android:layout_marginHorizontal="16dp"
android:src="@drawable/ic_fluent_bookmark_24_selector"
android:tint="@color/bookmark_icon"
android:gravity="center_vertical"
android:textAppearance="@style/m3_label_large" />
</FrameLayout>
</FrameLayout>
<FrameLayout
android:id="@+id/share_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingVertical="12dp">
<ImageView
android:id="@+id/bookmark"
android:id="@+id/share"
android:layout_width="24sp"
android:layout_height="24sp"
android:layout_gravity="center_vertical"
android:layout_marginHorizontal="16dp"
android:src="@drawable/ic_fluent_bookmark_24_selector"
android:tint="@color/bookmark_icon"
android:gravity="center_vertical"
android:textAppearance="@style/m3_label_large" />
android:src="@drawable/ic_fluent_share_24_regular"
android:tint="?android:textColorSecondary"
android:gravity="center_vertical"/>
</FrameLayout>
</FrameLayout>
<FrameLayout
android:id="@+id/share_btn"
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingVertical="12dp">
<ImageView
android:id="@+id/share"
android:layout_width="24sp"
android:layout_height="24sp"
android:layout_gravity="center_vertical"
android:layout_marginHorizontal="16dp"
android:src="@drawable/ic_fluent_share_24_regular"
android:tint="?android:textColorSecondary"
android:gravity="center_vertical"/>
</FrameLayout>
android:layout_height="wrap_content"
android:id="@+id/footer_emoji_keyboard_container"
android:orientation="vertical">
</LinearLayout>
</GridLayout>
</LinearLayout>
</org.joinmastodon.android.ui.views.MaxWidthFrameLayout>

View File

@@ -350,6 +350,18 @@
<string name="sk_tab_notifications">Notifications</string>
<string name="sk_tab_profile">Profile</string>
<string name="sk_settings_show_labels_in_navigation_bar">Show tab labels in the navigation bar</string>
<string name="sk_settings_emoji_reactions">Enable emoji reactions</string>
<string name="sk_settings_emoji_reactions_explanation">Displays emoji reactions to posts and lets you interact with them. Some modified versions of Mastodon support this, but Mastodon doesn\'t.</string>
<string name="sk_settings_emoji_reactions_in_lists">Show emoji reactions in timelines</string>
<string name="sk_settings_emoji_reactions_in_lists_explanation">Whether emoji reactions should be displayed on timelines. If this option is off, emoji reactions will only be displayed when viewing a thread.</string>
<plurals name="sk_users_reacted_with">
<item quantity="one">One user reacted with %2$s</item>
<item quantity="other">%1$,d users reacted with %2$s</item>
</plurals>
<string name="sk_button_react">React with emoji</string>
<string name="sk_again_for_system_keyboard">Tap again for System Keyboard</string>
<string name="sk_enter_emoji_toast">You need to type an emoji</string>
<string name="sk_enter_emoji_hint">Type to react with an emoji</string>
<string name="sk_mute_label">Duration</string>
<string name="sk_duration_indefinite">Indefinite</string>
<string name="sk_duration_minutes_5">5 minutes</string>