Upgrade to AndroidX, move to MaterialComponents theme (#953)

* upgrade to AndroidX, upgrade libraries

* move to MaterialComponents theme

* make sure the compose button looks good everywhere

* fix tollbar title/button alignment on tablet

* move to new material color theming, consolidate colors and themes

* fix build, fix imports

* set error on TextInputLayout instead of EditText

* fix imports, TootButton when

* improve snackbar style

* fix task description color
This commit is contained in:
Konrad Pozniak 2018-12-17 15:25:35 +01:00 committed by GitHub
commit a445c12094
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
179 changed files with 862 additions and 866 deletions

View file

@ -9,6 +9,7 @@
</declare-styleable>
<!--Themed Attributes-->
<attr name="recents_background_color" format="reference|color" />
<attr name="window_background" format="reference" />
<attr name="custom_tab_toolbar" format="reference" />
<attr name="toolbar_background_color" format="reference" />
@ -30,10 +31,8 @@
<attr name="account_header_background_color" format="reference|color" />
<attr name="account_toolbar_icon_tint_uncollapsed" format="reference|color" />
<attr name="account_toolbar_icon_tint_collapsed" format="reference|color" />
<attr name="toolbar_popup_theme" format="reference" />
<attr name="compose_close_button_tint" format="reference|color" />
<attr name="compose_media_button_disabled_tint" format="reference|color" />
<attr name="compose_mention_color" format="reference|color" />
<attr name="compose_content_warning_bar_background" format="reference" />
<attr name="compose_reply_content_background" format="reference|color" />
<attr name="report_status_background_color" format="reference|color" />
@ -47,6 +46,4 @@
<attr name="status_text_medium" format="dimension" />
<attr name="status_text_large" format="dimension" />
</resources>

View file

@ -1,42 +1,31 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--These colors are not affected by themes.-->
<color name="view_video_background">#000000</color>
<!--These colors are not affected by themes or used in all themes.-->
<color name="tusky_blue">#2b90d9</color>
<color name="tusky_blue_light">#56a7e1</color>
<color name="tusky_orange">#ca8f04</color>
<color name="tusky_orange_light">#fab207</color>
<color name="toolbar_view_media">#8f000000</color>
<color name="semi_transparent">#33000000</color>
<color name="header_background_filter">#44000000</color>
<color name="description_marker_unselected">#333</color>
<color name="white">#ffffff</color>
<!--Dark Theme Colors-->
<color name="color_primary_dark">#4c5368</color>
<color name="color_primary_dark_dark">#313543</color> <!--Dark Dark-->
<color name="color_accent_dark">#2b90d9</color>
<color name="button_dark">#2b90d9</color>
<color name="color_background_dark">#1a1c23</color>
<color name="window_background_dark">#282c37</color>
<color name="edit_text_color_dark">#FFFFFF</color>
<color name="text_color_primary_dark">#FFFFFF</color>
<color name="text_color_primary_dark">#ffffff</color>
<color name="text_color_secondary_dark">#d9e1e8</color>
<color name="text_color_tertiary_dark">#9baec8</color>
<color name="text_color_primary_inverse_dark">#000000</color>
<color name="text_color_secondary_inverse_dark">#000000</color>
<color name="text_color_tertiary_inverse_dark">#000000</color>
<color name="toolbar_background_dark">#4c5368</color>
<color name="toolbar_icon_dark">#d9e1e8</color>
<color name="image_button_dark">#606984</color>
<color name="status_reblog_button_dark">#606984</color>
<color name="status_reblog_button_marked_dark">#2b90d9</color>
<color name="status_reblog_button_disabled_dark">#444b5d</color>
<color name="status_favourite_button_dark">#606984</color>
<color name="status_favourite_button_marked_dark">#ca8f04</color>
<color name="sensitive_media_warning_background_dark">#303030</color>
<color name="media_preview_unloaded_background_dark">#2F2F2F</color>
<color name="status_divider_dark">#2f3441</color>
<color name="tab_page_margin_dark">#1a1c23</color>
<color name="account_toolbar_icon_collapsed_dark">#FFFFFF</color>
<color name="account_toolbar_icon_collapsed_dark">#ffffff</color>
<color name="compose_media_button_disabled_dark">#586173</color>
<color name="compose_mention_dark">#AFBFCF</color>
<color name="report_status_background_dark">#000000</color>
<color name="report_status_divider_dark">#2F2F2F</color>
<color name="custom_tab_toolbar_dark">#313543</color>
<color name="compose_reply_content_background_dark">#373c4b</color>
@ -53,31 +42,20 @@
<!--Light Theme Colors-->
<color name="color_primary_light">#dfdfdf</color>
<color name="color_primary_dark_light">#8f8f8f</color>
<color name="color_accent_light">#2b90d9</color>
<color name="button_light">#52a5e0</color>
<color name="color_background_light">#f4f4f4</color>
<color name="window_background_light">#f4f4f4</color>
<color name="edit_text_color_light">#CC000000</color>
<color name="text_color_primary_light">#CC000000</color>
<color name="text_color_secondary_light">#3c3c3c</color>
<color name="text_color_tertiary_light">#5f636f</color>
<color name="text_color_primary_inverse_light">#ffffff</color>
<color name="text_color_secondary_inverse_light">#ffffff</color>
<color name="text_color_tertiary_inverse_light">#ffffff</color>
<color name="toolbar_background_light">#f6f7f7</color>
<color name="toolbar_icon_light">#7C000000</color>
<color name="status_reblog_button_light">#4f4f4f</color>
<color name="status_reblog_button_marked_light">#56a7e1</color>
<color name="status_reblog_button_disabled_light">#BFBFBF</color>
<color name="status_favourite_button_light">#4f4f4f</color>
<color name="status_favourite_button_marked_light">#fab207</color>
<color name="sensitive_media_warning_background_light">#b0b0b0</color>
<color name="media_preview_unloaded_background_light">#cfcfcf</color>
<color name="status_divider_light">#cfcfcf</color>
<color name="tab_page_margin_light">#cfcfcf</color>
<color name="account_toolbar_icon_collapsed_light">#DE000000</color>
<color name="compose_media_button_disabled_light">#a3a5ab</color>
<color name="compose_mention_light">#2F5F6F</color>
<color name="report_status_background_light">#EFEFEF</color>
<color name="report_status_divider_light">#9F9F9F</color>
<color name="custom_tab_toolbar_light">#ffffff</color>
@ -87,13 +65,11 @@
<!-- colors used in the elephant friend drawables -->
<color name="elephant_friend_border_color">#121419</color>
<color name="elephant_friend_accent_color">@color/primary</color>
<color name="elephant_friend_accent_color">@color/tusky_blue</color>
<color name="elephant_friend_body_color">#9BAEC8</color>
<color name="elephant_friend_dark_body_color_1">#8192A6</color>
<color name="elephant_friend_dark_body_color_2">#7F90A4</color>
<color name="elephant_friend_light_color_1">#CAD4E0</color>
<color name="elephant_friend_light_color_2">#d9e1e8</color>
</resources>

View file

@ -27,11 +27,7 @@
<style name="TextSizeLargest">
<item name="status_text_small">18sp</item>
<item name="status_text_medium">20sp</item>
<item name="status_text_large">22sp</item>`
</style>
<style name="TabLayoutTextStyle" parent="TextAppearance.Design.Tab">
<item name="android:textStyle">normal|bold</item>
<item name="status_text_large">22sp</item>
</style>
<style name="AppTheme.Account.AppBarLayout" parent="ThemeOverlay.AppCompat">
@ -40,7 +36,7 @@
<item name="android:textColorTertiary">@color/text_color_tertiary_dark</item>
</style>
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<style name="SplashTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="android:windowBackground">@drawable/background_splash</item>
<item name="colorPrimaryDark">@color/color_primary_dark_dark</item>
<item name="android:windowNoTitle">true</item>
@ -51,29 +47,34 @@
<style name="TuskyDialogActivityTheme" parent="@style/TuskyTheme" />
<style name="TuskyBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/color_primary_light</item>
<style name="TuskyBaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">@color/tusky_blue</item>
<item name="colorOnPrimary">@color/white</item>
<item name="colorSecondary">@color/tusky_blue</item>
<item name="colorOnSecondary">@color/white</item>
<item name="colorSurface">@color/color_background_light</item>
<item name="colorPrimaryDark">@color/color_primary_dark_light</item>
<item name="colorAccent">@color/color_accent_light</item>
<item name="colorButtonNormal">@color/color_primary_dark_light</item>
<item name="android:buttonStyle">@style/Widget.AppCompat.Button.Colored</item>
<item name="android:colorBackground">@color/color_background_light</item>
<item name="recents_background_color">@color/color_primary_light</item>
<item name="android:windowBackground">@color/window_background_light</item>
<item name="android:editTextColor">@color/edit_text_color_light</item>
<item name="android:textColorPrimary">@color/text_color_primary_light</item>
<item name="android:textColorSecondary">@color/text_color_secondary_light</item>
<item name="android:textColorTertiary">@color/text_color_tertiary_light</item>
<item name="android:actionMenuTextColor">@color/text_color_primary_light</item>
<item name="bottomSheetDialogTheme">@style/AppTheme.BottomSheetDialog.Light</item>
<item name="alertDialogTheme">@style/TuskyDialog.Light</item>
<item name="snackbarButtonStyle">@style/TuskyButton.TextButton</item>
<item name="window_background">@color/window_background_light</item>
<item name="custom_tab_toolbar">@color/custom_tab_toolbar_light</item>
<item name="toolbar_background_color">@color/toolbar_background_light</item>
<item name="toolbar_icon_tint">@color/toolbar_icon_light</item>
<item name="image_button_style">@style/AppTheme.ImageButton.Light</item>
<item name="image_button_style">@style/TuskyImageButton.Light</item>
<item name="status_reblog_small_drawable">@drawable/ic_reblog_light_18dp</item>
<item name="status_reblog_inactive_drawable">@drawable/reblog_inactive_light</item>
<item name="status_reblog_disabled_drawable">@drawable/reblog_private_light</item>
@ -81,30 +82,21 @@
<item name="status_favourite_active_drawable">@drawable/favourite_active_light</item>
<item name="status_favourite_inactive_drawable">@drawable/favourite_inactive_light</item>
<item name="content_warning_button">@drawable/toggle_small_light</item>
<item name="sensitive_media_warning_background_color">
@color/sensitive_media_warning_background_light
</item>
<item name="sensitive_media_warning_background_color">@color/sensitive_media_warning_background_light</item>
<item name="media_preview_unloaded_drawable">@drawable/media_preview_unloaded_light</item>
<item name="status_divider_drawable">@drawable/status_divider_light</item>
<item name="conversation_thread_line_drawable">@drawable/conversation_thread_line_light
</item>
<item name="tab_icon_selected_tint">@color/color_accent_light</item>
<item name="conversation_thread_line_drawable">@drawable/conversation_thread_line_light</item>
<item name="tab_icon_selected_tint">@color/tusky_blue</item>
<item name="tab_page_margin_drawable">@drawable/tab_page_margin_light</item>
<item name="account_header_background_color">@color/color_primary_dark_light</item>
<item name="account_toolbar_icon_tint_uncollapsed">@color/toolbar_icon_dark
</item> <!--Default to dark on purpose, because header backgrounds with gradients are always dark.-->
<item name="account_toolbar_icon_tint_collapsed">
@color/account_toolbar_icon_collapsed_light
</item>
<item name="toolbar_popup_theme">@style/AppTheme.Account.ToolbarPopupTheme.Light</item>
<item name="account_toolbar_icon_tint_collapsed">@color/account_toolbar_icon_collapsed_light</item>
<item name="compose_close_button_tint">@color/toolbar_icon_light</item>
<item name="compose_media_button_disabled_tint">@color/compose_media_button_disabled_light
</item>
<item name="compose_mention_color">@color/compose_mention_light</item>
<item name="compose_media_button_disabled_tint">@color/compose_media_button_disabled_light</item>
<item name="compose_content_warning_bar_background">@drawable/border_background_light</item>
<item name="compose_reply_content_background">
@color/compose_reply_content_background_light
</item>
<item name="compose_reply_content_background">@color/compose_reply_content_background_light</item>
<item name="report_status_background_color">@color/report_status_background_light</item>
<item name="report_status_divider_drawable">@drawable/report_status_divider_light</item>
@ -119,6 +111,8 @@
<item name="material_drawer_selected_text">@color/text_color_primary_light</item>
<item name="material_drawer_header_selection_text">@color/text_color_primary_dark
</item> <!--Intentionally dark so it can be overlayed over the account's header image.-->
<item name="material_drawer_header_selection_subtext">@color/text_color_secondary_dark
</item> <!--Intentionally dark so it can be overlayed over the account's header image.-->
<item name="card_background">@drawable/card_frame_light</item>
<item name="card_image_background">@color/text_color_tertiary_light</item>
@ -131,36 +125,56 @@
</style>
<style name="AppTheme.ImageButton.Light" parent="Widget.AppCompat.Button.Borderless.Colored">
<style name="TuskyImageButton.Light" parent="@style/Widget.MaterialComponents.Button.UnelevatedButton">
<item name="android:tint">@color/text_color_tertiary_light</item>
<item name="android:background">?attr/selectableItemBackgroundBorderless</item>
</style>
<style name="AppTheme.BottomSheetDialog.Light" parent="@style/Theme.Design.Light.BottomSheetDialog">
<item name="colorAccent">@color/color_accent_light</item>
<item name="android:colorBackground">@color/color_background_light</item>
<style name="TuskyDialog.Light" parent="@style/ThemeOverlay.MaterialComponents.Dialog">
<item name="dialogCornerRadius">8dp</item>
</style>
<style name="AppTheme.Account.ToolbarPopupTheme.Light" parent="ThemeOverlay.AppCompat">
<item name="android:textColorPrimary">@color/text_color_primary_light</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
<style name="TuskyTabAppearance" parent="TextAppearance.Design.Tab">
<style name="TuskyTabAppearance" parent="Widget.MaterialComponents.TabLayout">
<item name="android:textSize">?attr/status_text_medium</item>
<item name="android:textAllCaps">true</item>
<item name="tabIndicatorHeight">3dp</item>
<item name="tabIndicatorColor">?attr/tab_icon_selected_tint</item>
<item name="tabTextColor">?android:attr/textColorSecondary</item>
<item name="tabSelectedTextColor">?attr/tab_icon_selected_tint</item>
</style>
<style name="TuskyFloatingActionButton" parent="Widget.MaterialComponents.FloatingActionButton">
</style>
<style name="TuskyButton" parent="Widget.MaterialComponents.Button">
<item name="android:letterSpacing">0</item>
</style>
<style name="TuskyButton.Outlined" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="android:letterSpacing">0</item>
</style>
<style name="TuskyButton.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:color">@color/tusky_blue</item>
<item name="android:letterSpacing">0</item>
</style>
<style name="TuskyTextInput" parent="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">@color/text_input_layout_box_stroke_color</item>
<item name="android:textColorHint">?android:attr/textColorTertiary</item>
</style>
<!--Black Application Theme Styles-->
<style name="TuskyBlackThemeBase" parent="TuskyBaseTheme">
<item name="colorPrimary">@color/color_primary_black</item>
<item name="colorPrimaryDark">@color/color_primary_dark_black</item>
<item name="android:colorBackground">@color/color_primary_dark_black</item>
<item name="android:windowBackground">@color/window_background_black</item>
<item name="android:editTextColor">@color/edit_text_color_black</item>
<item name="android:textColorPrimary">@color/text_color_primary_black</item>
<item name="android:actionMenuTextColor">@color/text_color_primary_black</item>
<item name="recents_background_color">@color/toolbar_background_black</item>
<item name="window_background">@color/window_background_black</item>
<item name="toolbar_background_color">@color/toolbar_background_black</item>
<item name="sensitive_media_warning_background_color">@color/color_background_black</item>

View file

@ -2,6 +2,6 @@
<resources>
<bool name="show_small_toot_button">true</bool>
<dimen name="toot_button_width">48dp</dimen>
<dimen name="toot_button_drawable_padding">4dp</dimen>
<dimen name="toot_button_horizontal_padding">12dp</dimen>
</resources>