Improve the look of message bubbles.

This commit is contained in:
Greyson Parrelli
2018-06-26 10:27:44 -07:00
parent 7cfcb62c25
commit 24b062d8dd
202 changed files with 2671 additions and 1451 deletions

View File

@@ -65,9 +65,9 @@
<attr name="conversation_item_received_text_secondary_color" format="reference|color"/>
<attr name="conversation_item_sent_text_indicator_tab_color" format="reference|color"/>
<attr name="conversation_item_sent_indicator_text_background" format="reference" />
<attr name="conversation_item_header_background" format="reference"/>
<attr name="conversation_item_last_seen_background" format="reference|color"/>
<attr name="conversation_item_last_seen_text_background" format="reference"/>
<attr name="conversation_item_update_text_color" format="reference"/>
<attr name="conversation_item_last_seen_text_color" format="reference"/>
<attr name="conversation_item_last_seen_line_color" format="reference"/>
<attr name="dialog_info_icon" format="reference" />
<attr name="dialog_alert_icon" format="reference" />
@@ -133,6 +133,7 @@
<attr name="shared_contact_details_header_background" format="color"/>
<attr name="shared_contact_details_titlebar" format="color"/>
<attr name="shared_contact_item_button_color" format="color"/>
<attr name="search_toolbar_background" format="color"/>
<attr name="search_background" format="color"/>
@@ -153,7 +154,6 @@
</declare-styleable>
<declare-styleable name="ThumbnailView">
<attr name="backgroundColorHint" format="color" />
<attr name="minWidth" format="dimension" />
<attr name="maxWidth" format="dimension" />
<attr name="minHeight" format="dimension" />
@@ -205,12 +205,6 @@
<attr name="pickerColors" format="reference" />
</declare-styleable>
<declare-styleable name="DocumentView">
<attr name="documentWidgetBackground" format="color"/>
<attr name="documentForegroundTintColor" format="color" />
<attr name="documentBackgroundTintColor" format="color" />
</declare-styleable>
<declare-styleable name="EmojiTextView">
<attr name="scaleEmojis" format="boolean" />
</declare-styleable>
@@ -252,7 +246,29 @@
<enum name="outgoing" value="1" />
<enum name="incoming" value="2" />
</attr>
<attr name="quote_colorPrimary" format="color" />
<attr name="quote_colorSecondary" format="color" />
</declare-styleable>
<declare-styleable name="SharedContactView">
<attr name="contact_titleColor" format="color" />
<attr name="contact_captionColor" format="color" />
</declare-styleable>
<declare-styleable name="DocumentView">
<attr name="doc_titleColor" format="color" />
<attr name="doc_captionColor" format="color" />
</declare-styleable>
<declare-styleable name="ConversationItemFooter">
<attr name="footer_color" format="color" />
</declare-styleable>
<declare-styleable name="ConversationItemThumbnail">
<attr name="conversationThumbnail_minWidth" format="dimension" />
<attr name="conversationThumbnail_maxWidth" format="dimension" />
<attr name="conversationThumbnail_minHeight" format="dimension" />
<attr name="conversationThumbnail_maxHeight" format="dimension" />
</declare-styleable>
</resources>

View File

@@ -28,6 +28,7 @@
<color name="transparent_black_20">#20000000</color>
<color name="transparent_black_30">#30000000</color>
<color name="transparent_black_40">#40000000</color>
<color name="transparent_black_70">#70000000</color>
<color name="transparent_white_05">#05ffffff</color>
<color name="transparent_white_10">#10ffffff</color>

View File

@@ -1,11 +1,32 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="conversation_red_700">#d32f2f</color>
<color name="conversation_pink_600">#d81b60</color>
<color name="conversation_indigo_600">#3949ab</color>
<color name="conversation_blue_700">#1976d2</color>
<color name="conversation_cyan_800">#00838f</color>
<color name="conversation_teal_700">#00796b</color>
<color name="conversation_green_800">#2e7d32</color>
<color name="conversation_deep_orange_900">#bf360c</color>
<color name="conversation_red">#d32f2f</color>
<color name="conversation_red_shade">#9a0007</color>
<color name="conversation_pink">#d81b60</color>
<color name="conversation_pink_shade">#a00037</color>
<color name="conversation_purple">#8e24aa</color>
<color name="conversation_purple_shade">#5c007a</color>
<color name="conversation_indigo">#3949ab</color>
<color name="conversation_indigo_shade">#00227b</color>
<color name="conversation_blue">#1976d2</color>
<color name="conversation_blue_shade">#004ba0</color>
<color name="conversation_cyan">#00838f</color>
<color name="conversation_cyan_shade">#005662</color>
<color name="conversation_teal">#00796b</color>
<color name="conversation_teal_shade">#004c40</color>
<color name="conversation_green">#2e7d32</color>
<color name="conversation_green_shade">#005005</color>
<color name="conversation_orange">#bf360c</color>
<color name="conversation_orange_shade">#870000</color>
<color name="conversation_grey">#757575</color>
<color name="conversation_grey_shade">#494949</color>
</resources>

View File

@@ -16,17 +16,37 @@
<dimen name="contact_photo_target_size">64dp</dimen>
<dimen name="contact_selection_photo_size">50dp</dimen>
<dimen name="message_bubble_corner_radius">4dp</dimen>
<!-- TODO: Consolidate these two message corner things -->
<dimen name="message_corner_radius">16dp</dimen>
<dimen name="message_corner_collapse_radius">4dp</dimen>
<dimen name="message_bubble_corner_radius">2dp</dimen>
<dimen name="message_bubble_shadow_distance">1.5dp</dimen>
<dimen name="message_bubble_horizontal_padding">12dp</dimen>
<dimen name="message_bubble_top_padding">6dp</dimen>
<dimen name="message_bubble_quote_padding">6dp</dimen>
<dimen name="message_bubble_collapsed_footer_padding">6dp</dimen>
<dimen name="message_bubble_edge_margin">48dp</dimen>
<dimen name="message_bubble_bottom_padding">8dp</dimen>
<dimen name="message_bubble_footer_top_padding">4dp</dimen>
<dimen name="media_bubble_remove_button_size">24dp</dimen>
<dimen name="media_bubble_edit_button_size">24dp</dimen>
<dimen name="media_bubble_default_dimens">210dp</dimen>
<dimen name="media_bubble_min_width">150dp</dimen>
<dimen name="media_bubble_max_width">250dp</dimen>
<dimen name="media_bubble_max_width">240dp</dimen>
<dimen name="media_bubble_min_height">100dp</dimen>
<dimen name="media_bubble_max_height">320dp</dimen>
<dimen name="conversation_individual_right_gutter">16dp</dimen>
<dimen name="conversation_individual_left_gutter">16dp</dimen>
<dimen name="conversation_group_right_gutter">16dp</dimen>
<dimen name="conversation_group_left_gutter">52dp</dimen>
<dimen name="conversation_vertical_message_spacing_default">16dp</dimen>
<dimen name="conversation_vertical_message_spacing_collapse">2dp</dimen>
<dimen name="quote_corner_radius">3dp</dimen>
<dimen name="quote_corner_radius_large">10dp</dimen>
<dimen name="quote_corner_radius_bottom">4dp</dimen>
<dimen name="quote_corner_radius_preview">18dp</dimen>
<dimen name="quote_outline_width">1dp</dimen>
<integer name="media_overview_cols">3</integer>
@@ -62,4 +82,11 @@
<dimen name="floating_action_button_margin">16dp</dimen>
<dimen name="text_headline_lineSpacingExtra">6sp</dimen>
<dimen name="text_body_lineSpacingExtra">8sp</dimen>
<dimen name="text_preview_lineSpacingExtra">6sp</dimen>
<dimen name="text_caption_lineSpacingExtra">4sp</dimen>
<dimen name="alertview_small_icon_size">14dp</dimen>
</resources>

View File

@@ -110,11 +110,10 @@
<string name="ContactShareEditActivity_invalid_contact">Selected contact was invalid</string>
<!-- ConversationItem -->
<string name="ConversationItem_error_not_delivered">Not delivered</string>
<string name="ConversationItem_error_not_delivered">Send failed, tap for details</string>
<string name="ConversationItem_received_key_exchange_message_tap_to_process">Received key exchange message, tap to process.</string>
<string name="ConversationItem_group_action_left">%1$s has left the group.</string>
<string name="ConversationItem_click_for_details">Tap for details</string>
<string name="ConversationItem_click_to_approve_unencrypted">Tap for unsecured fallback</string>
<string name="ConversationItem_click_to_approve_unencrypted">Send failed, tap for unsecured fallback</string>
<string name="ConversationItem_click_to_approve_unencrypted_sms_dialog_title">Fallback to unencrypted SMS?</string>
<string name="ConversationItem_click_to_approve_unencrypted_mms_dialog_title">Fallback to unencrypted MMS?</string>
<string name="ConversationItem_click_to_approve_unencrypted_dialog_message">This message will <b>not</b> be encrypted because the recipient is no longer a Signal user.\n\nSend unsecured message?</string>
@@ -251,11 +250,17 @@
<string name="CustomDefaultPreference_none">None</string>
<!-- DateUtils -->
<string name="DateUtils_just_now">Just now</string>
<string name="DateUtils_just_now">Now</string>
<string name="DateUtils_minutes_ago">%d min</string>
<string name="DateUtils_today">Today</string>
<string name="DateUtils_yesterday">Yesterday</string>
<!-- DeliveryStatus -->
<string name="DeliveryStatus_sending">Sending</string>
<string name="DeliveryStatus_sent">Sent</string>
<string name="DeliveryStatus_delivered">Delivered</string>
<string name="DeliveryStatus_read">Read</string>
<!-- DeviceListActivity -->
<string name="DeviceListActivity_unlink_s">Unlink \'%s\'?</string>
<string name="DeviceListActivity_by_unlinking_this_device_it_will_no_longer_be_able_to_send_or_receive">By unlinking this device, it will no longer be able to send or receive messages.</string>
@@ -400,13 +405,16 @@
<string name="MessageRecord_message_encrypted_with_a_legacy_protocol_version_that_is_no_longer_supported">Received a message encrypted using an old version of Signal that is no longer supported. Please ask the sender to update to the most recent version and resend the message.</string>
<string name="MessageRecord_left_group">You have left the group.</string>
<string name="MessageRecord_you_updated_group">You updated the group.</string>
<string name="MessageRecord_you_called">You called</string>
<string name="MessageRecord_called_you">Contact called</string>
<string name="MessageRecord_missed_call">Missed call</string>
<string name="MessageRecord_s_updated_group">%s updated the group.</string>
<string name="MessageRecord_s_called_you">%s called you</string>
<string name="MessageRecord_called_s">Called %s</string>
<string name="MessageRecord_missed_call_from">Missed call from %s</string>
<string name="MessageRecord_s_joined_signal">%s is on Signal!</string>
<string name="MessageRecord_you_set_disappearing_message_time_to_s">You set disappearing message time to %1$s.</string>
<string name="MessageRecord_s_set_disappearing_message_time_to_s">%1$s set disappearing message time to %2$s.</string>
<string name="MessageRecord_you_set_disappearing_message_time_to_s">You set the disappearing message timer to %1$s.</string>
<string name="MessageRecord_s_set_disappearing_message_time_to_s">%1$s set the disappearing message timer to %2$s.</string>
<string name="MessageRecord_your_safety_number_with_s_has_changed">Your safety number with %s has changed.</string>
<string name="MessageRecord_you_marked_your_safety_number_with_s_verified">You marked your safety number with %s verified</string>
<string name="MessageRecord_you_marked_your_safety_number_with_s_verified_from_another_device">You marked your safety number with %s verified from another device</string>

View File

@@ -175,7 +175,7 @@
<item name="android:background">@drawable/error_round</item>
</style>
<style name="ComposeEditText" parent="@style/Widget.AppCompat.EditText">
<style name="ComposeEditText" parent="@style/Signal.Text.Body">
<item name="android:padding">2dp</item>
<item name="android:background">@null</item>
<item name="android:maxLines">4</item>

View File

@@ -2,29 +2,47 @@
<resources>
<style name="Signal.Text.Headline" parent="Base.TextAppearance.AppCompat.Headline">
<item name="android:textSize">28sp</item>
<item name="android:lineSpacingExtra">6sp</item>
<item name="android:lineSpacingExtra">3sp</item>
<item name="android:fontFamily">sans-serif</item>
<item name="android:letterSpacing">0</item>
<!-- TODO: Get proper letterSpacing -->
</style>
<style name="Signal.Text.Body" parent="Base.TextAppearance.AppCompat.Body1">
<item name="android:textSize">16sp</item>
<item name="android:lineSpacingExtra">8sp</item>
<item name="android:lineSpacingExtra">4sp</item>
<item name="android:fontFamily">sans-serif</item>
<item name="android:letterSpacing">0.15</item>
<item name="android:letterSpacing">0.01</item>
</style>
<style name="Signal.Text.Preview" parent="Base.TextAppearance.AppCompat.Body2">
<item name="android:textSize">14sp</item>
<item name="android:lineSpacingExtra">6sp</item>
<item name="android:lineSpacingExtra">3sp</item>
<item name="android:fontFamily">sans-serif</item>
<item name="android:letterSpacing">0.25</item>
<item name="android:letterSpacing">0.02</item>
</style>
<style name="Signal.Text.Caption" parent="Base.TextAppearance.AppCompat.Caption">
<item name="android:textSize">12sp</item>
<item name="android:lineSpacingExtra">4sp</item>
<item name="android:lineSpacingExtra">2sp</item>
<item name="android:fontFamily">sans-serif</item>
<item name="android:letterSpacing">0.40</item>
<item name="android:letterSpacing">0.03</item>
</style>
<style name="Signal.Text.Caption.MessageSent">
<item name="android:textColor">?conversation_item_sent_text_secondary_color</item>
<item name="android:shadowRadius">0</item>
</style>
<style name="Signal.Text.Caption.MessageReceived">
<item name="android:textColor">?conversation_item_received_text_secondary_color</item>
<item name="android:shadowRadius">0</item>
<item name="android:alpha">0.7</item>
</style>
<style name="Signal.Text.Caption.MessageImageOverlay">
<item name="android:textColor">@color/core_white</item>
</style>
</resources>

View File

@@ -23,9 +23,6 @@
<item name="media_overview_header_foreground">@color/gray50</item>
<item name="media_overview_document_foreground">@color/gray70</item>
<item name="media_overview_document_background">@color/white</item>
<item name="shared_contact_details_header_background">@color/grey_100</item>
<item name="shared_contact_details_titlebar">@color/grey_400</item>
</style>
<style name="TextSecure.DarkNoActionBar" parent="@style/TextSecure.DarkTheme">
@@ -50,9 +47,6 @@
<item name="media_overview_header_foreground">@color/gray10</item>
<item name="media_overview_document_foreground">@color/white</item>
<item name="media_overview_document_background">@color/black</item>
<item name="shared_contact_details_header_background">@color/grey_800</item>
<item name="shared_contact_details_titlebar">@color/grey_900</item>
</style>
<style name="TextSecure.HighlightTheme" parent="@style/TextSecure.LightTheme">
@@ -134,9 +128,9 @@
<!--<item name="android:windowContentOverlay">@drawable/compat_actionbar_shadow_background</item>-->
<item name="attachment_type_selector_background">@color/white</item>
<item name="conversation_list_item_background">@drawable/conversation_list_item_background</item>
<item name="conversation_list_item_contact_color">#FF333333</item>
<item name="conversation_list_item_subject_color">#FF444444</item>
<item name="conversation_list_item_date_color">#ff999999</item>
<item name="conversation_list_item_contact_color">@color/core_light_90</item>
<item name="conversation_list_item_subject_color">@color/core_light_60</item>
<item name="conversation_list_item_date_color">@color/core_light_60</item>
<item name="conversation_list_item_divider">@drawable/conversation_list_divider_shape</item>
<item name="fab_color">@color/textsecure_primary</item>
@@ -144,7 +138,7 @@
<item name="conversation_group_member_name">#99000000</item>
<item name="conversation_background">@color/gray5</item>
<item name="conversation_background">@color/core_white</item>
<item name="conversation_editor_background">#22000000</item>
<item name="conversation_editor_text_color">#ff111111</item>
<item name="conversation_transport_sms_indicator">@drawable/ic_send_sms_insecure</item>
@@ -183,15 +177,15 @@
<item name="emoji_category_emoticons">@drawable/emoji_category_emoticons_light</item>
<item name="conversation_item_bubble_background">@color/white</item>
<item name="conversation_item_sent_text_primary_color">@color/grey_800</item>
<item name="conversation_item_sent_text_secondary_color">@color/grey_900</item>
<item name="conversation_item_bubble_background">@color/core_light_10</item>
<item name="conversation_item_sent_text_primary_color">@color/core_light_90</item>
<item name="conversation_item_sent_text_secondary_color">@color/core_light_60</item>
<item name="conversation_item_sent_text_indicator_tab_color">#99000000</item>
<item name="conversation_item_received_text_primary_color">@color/white</item>
<item name="conversation_item_received_text_secondary_color">#BFffffff</item>
<item name="conversation_item_header_background">@drawable/conversation_item_header_background</item>
<item name="conversation_item_last_seen_background">@drawable/last_seen_background</item>
<item name="conversation_item_last_seen_text_background">@drawable/last_seen_divider_text_background_light</item>
<item name="conversation_item_received_text_secondary_color">#b3ffffff</item>
<item name="conversation_item_update_text_color">@color/core_light_60</item>
<item name="conversation_item_last_seen_text_color">@color/core_light_90</item>
<item name="conversation_item_last_seen_line_color">@color/core_light_60</item>
<item name="quick_camera_icon">@drawable/quick_camera_light</item>
<item name="quick_mic_icon">@drawable/ic_mic_grey600_24dp</item>
@@ -242,6 +236,10 @@
<item name="search_toolbar_background">@color/white</item>
<item name="search_background">@color/white</item>
<item name="invite_background">@color/signal_primary</item>
<item name="shared_contact_details_header_background">@color/grey_100</item>
<item name="shared_contact_details_titlebar">@color/grey_400</item>
<item name="shared_contact_item_button_color">@color/core_light_02</item>
</style>
<style name="TextSecure.DarkTheme" parent="@style/Theme.AppCompat">
@@ -268,16 +266,16 @@
<item name="conversation_group_member_name">#99ffffff</item>
<item name="conversation_item_bubble_background">#ff333333</item>
<item name="conversation_item_sent_text_primary_color">#ffffffff</item>
<item name="conversation_item_sent_text_secondary_color">#aaeeeeee</item>
<item name="conversation_item_bubble_background">@color/core_dark_70</item>
<item name="conversation_item_sent_text_primary_color">@color/core_dark_05</item>
<item name="conversation_item_sent_text_secondary_color">@color/core_dark_30</item>
<item name="conversation_item_sent_text_indicator_tab_color">#99ffffff</item>
<item name="conversation_item_received_text_primary_color">@color/white</item>
<item name="conversation_item_received_text_secondary_color">#BFffffff</item>
<item name="conversation_item_received_text_primary_color">@color/core_dark_05</item>
<item name="conversation_item_received_text_secondary_color">#b3efefef</item>
<item name="conversation_item_sent_indicator_text_background">@drawable/conversation_item_sent_indicator_text_shape_dark</item>
<item name="conversation_item_header_background">@drawable/conversation_item_header_background_dark</item>
<item name="conversation_item_last_seen_background">#66333333</item>
<item name="conversation_item_last_seen_text_background">@drawable/last_seen_divider_text_background_dark</item>
<item name="conversation_item_update_text_color">@color/core_light_35</item>
<item name="conversation_item_last_seen_text_color">@color/core_light_02</item>
<item name="conversation_item_last_seen_line_color">@color/core_light_10</item>
<item name="contact_list_divider">@drawable/contact_list_divider_dark</item>
@@ -367,6 +365,10 @@
<item name="search_toolbar_background">@color/black</item>
<item name="search_background">@color/black</item>
<item name="invite_background">@color/black</item>
<item name="shared_contact_details_header_background">@color/grey_800</item>
<item name="shared_contact_details_titlebar">@color/grey_900</item>
<item name="shared_contact_item_button_color">@color/core_dark_85</item>
</style>
<style name="RationaleDialog" parent="Theme.AppCompat.Light.Dialog.Alert">