More SC theme improvements, including a reworked light theme

Change-Id: I373daedc45bee3aa9e24e09bb632b01e27754010
This commit is contained in:
SpiritCroc 2021-06-28 13:44:57 +02:00
parent 15625e7424
commit dab04d52fd
9 changed files with 125 additions and 37 deletions

View File

@ -18,7 +18,7 @@
</style>
<style name="AppTheme.SC.Light.v23" parent="AppTheme.Base.SC.Light">
<item name="android:statusBarColor">@color/android_status_bar_background_light</item>
<item name="android:statusBarColor">@color/background_sc_light_statusbar</item>
<item name="android:windowLightStatusBar">true</item>
</style>

View File

@ -1,6 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Accent colors -->
<color name="accent_sc">#8BC34A</color>
<color name="accent_sc_alpha25">#3F8BC34A</color>
<color name="accent_sc_alpha12">#1E8BC34A</color>
@ -13,29 +14,52 @@
<color name="accent_sc_pale">@color/accent_sc_300</color>
<color name="direct_chat_ring_color_sc">@color/accent_sc_dark</color>
<!-- Username/avatar colors -->
<color name="avatar_fill_sc_1">@color/accent_sc</color>
<color name="username_sc_1">@color/accent_sc</color>
<!-- Dark theme text/foreground colors -->
<color name="text_color_primary_sc">#ffffff</color>
<color name="text_color_secondary_sc">#b3ffffff</color>
<color name="text_color_tertiary_sc">#80ffffff</color>
<color name="text_color_disabled_sc">#80ffffff</color>
<!-- Dark theme background colors -->
<color name="background_sc">#ff303030</color>
<color name="background_dark_sc">#ff212121</color>
<color name="background_black_sc">#ff000000</color>
<color name="background_floating_sc">#ff424242</color>
<color name="background_touch_guard_sc">#bf000000</color>
<!-- Light theme text/foreground colors -->
<color name="text_color_primary_sc_light">#de000000</color>
<color name="text_color_secondary_sc_light">#8a000000</color>
<color name="text_color_tertiary_sc_light">#4c000000</color>
<color name="text_color_disabled_sc_light">#4c000000</color>
<!-- Light theme background colors -->
<color name="background_sc_light_bright">#ffffffff</color>
<color name="background_sc_light">#fffafafa</color>
<color name="background_sc_light_secondary">#ffeeeeee</color>
<color name="background_sc_light_toolbar">#fff5f5f5</color>
<color name="background_sc_light_statusbar">#ffe0e0e0</color>
<color name="background_floating_sc_light">#ffffffff</color>
<color name="background_touch_guard_sc_light">#61000000</color>
<!-- List divider colors -->
<color name="list_divider_color_sc">#1fffffff</color>
<color name="list_divider_color_sc_light">#1f000000</color>
<!-- Timestamp colors -->
<color name="timestamp_overlay_fg">#ffffff</color>
<color name="timestamp_overlay_bg">#80000000</color>
<!-- Reaction colors -->
<color name="sc_reaction_background_on_light">@color/accent_sc_50</color>
<color name="sc_reaction_background_on_dark">@color/accent_sc_900</color>
<!-- Exposed Element colors -->
<!-- This is actually not an SC color, but the one found in element for ic_material_play_circle PNGs -->
<color name="element_accent_pale">#76cfa6</color>
</resources>

View File

@ -3,7 +3,9 @@
<style name="Widget.Vector.AppBarLayout" parent="Widget.MaterialComponents.AppBarLayout.Primary">
<item name="android:background">?vctr_toolbar_background</item>
<!-- Defining this here actually breaks elevation...?
<item name="elevation">4dp</item>
-->
</style>
</resources>

View File

@ -27,7 +27,7 @@
<item name="vctr_room_active_widgets_banner_text">?vctr_content_secondary</item>
<item name="vctr_reaction_background_off">@color/background_sc</item>
<item name="vctr_reaction_background_on">@color/sc_reaction_background_on_dark</item>
<item name="vctr_waiting_background_color">#555555</item>
<item name="vctr_waiting_background_color">#55555555</item>
<item name="vctr_chat_effect_snow_background">@android:color/transparent</item>
<item name="vctr_toolbar_background">?android:colorBackground</item>

View File

@ -3,51 +3,98 @@
<!-- SC THEME COLORS -->
<style name="AppTheme.Base.SC.Light" parent="Base.Theme.Vector.Light">
<item name="colorPrimary">@color/accent_sc</item>
<item name="colorPrimaryVariant">@color/accent_sc</item>
<item name="colorSecondary">@color/accent_sc</item>
<item name="colorSecondaryVariant">@color/accent_sc</item>
<!-- Element attribute for palette -->
<!-- content colors -->
<item name="vctr_content_primary">@color/text_color_primary_sc_light</item>
<item name="vctr_content_secondary">@color/text_color_secondary_sc_light</item>
<item name="vctr_content_tertiary">@color/text_color_tertiary_sc_light</item>
<item name="vctr_content_quaternary">@color/text_color_tertiary_sc_light</item>
<item name="vctr_content_quinary">@color/text_color_disabled_sc_light</item>
<!-- Keep color accent for legacy widget-->
<item name="colorAccent">@color/accent_sc</item>
<!-- system colors -->
<item name="vctr_system">@color/background_sc_light</item>
<!-- other colors -->
<item name="vctr_unread_room_badge">?colorAccent</item>
<item name="vctr_fab_label_bg">@color/background_floating_sc_light</item>
<item name="vctr_fab_label_stroke">@color/background_floating_sc_light</item>
<item name="vctr_fab_label_color">?vctr_content_primary</item>
<item name="vctr_touch_guard_bg">@color/background_touch_guard_sc_light</item>
<item name="vctr_keys_backup_banner_accent_color">@color/background_floating_sc_light</item>
<item name="vctr_attachment_selector_background">?colorBackgroundFloating</item>
<item name="vctr_attachment_selector_border">@color/list_divider_color_sc_light</item>
<item name="vctr_room_active_widgets_banner_bg">@color/background_floating_sc_light</item>
<item name="vctr_room_active_widgets_banner_text">?vctr_content_secondary</item>
<item name="vctr_reaction_background_off">@color/background_sc_light_secondary</item>
<item name="vctr_reaction_background_on">@color/sc_reaction_background_on_light</item>
<item name="vctr_waiting_background_color">#AAAAAAAA</item>
<item name="vctr_chat_effect_snow_background">@color/black_alpha</item>
<item name="vctr_toolbar_background">@color/background_sc_light_toolbar</item>
<!-- room message colors -->
<item name="vctr_notice_secondary">?vctr_content_secondary</item>
<item name="vctr_unsent_message_text_color">?colorError</item>
<item name="vctr_message_text_color">?vctr_content_primary</item>
<item name="vctr_notice_text_color">?vctr_content_primary</item>
<item name="vctr_encrypting_message_text_color">@color/accent_sc</item>
<item name="vctr_sending_message_text_color">?vctr_content_secondary</item>
<item name="vctr_markdown_block_background_color">@color/background_sc_light</item> <!-- needs contrast on background_sc_light_bright for no-bubble case, and background_sc_light_secondary for bubble case -->
<item name="vctr_spoiler_background_color">#FF000000</item>
<!-- Some alias -->
<item name="vctr_header_background">@color/background_sc_light_bright</item>
<!--
<item name="vctr_header_background">?android:colorBackground</item>
-->
<item name="vctr_list_separator">@color/list_divider_color_sc_light</item>
<item name="vctr_list_separator_system">?vctr_list_separator</item>
<item name="vctr_list_separator_on_surface">?vctr_list_separator</item>
<!-- Material color -->
<item name="colorPrimary">?colorAccent</item>
<item name="colorPrimaryVariant">?colorAccent</item>
<item name="colorOnPrimary">@color/text_color_primary_sc</item><!-- primary = accent -> better to use a light text color -->
<item name="colorSecondary">?colorAccent</item>
<item name="colorSecondaryVariant">?colorAccent</item>
<item name="colorOnSecondary">?colorOnPrimary</item><!-- primary = accent -> better to use a light text color -->
<item name="colorError">@color/element_alert_light</item>
<item name="colorOnError">@color/text_color_primary_sc</item> <!-- needs light text, e.g. used for unread counter badges -->
<item name="colorSurface">?android:colorBackground</item>
<item name="colorOnSurface">?vctr_content_primary</item>
<item name="android:colorBackground">@color/background_sc_light</item>
<item name="colorOnBackground">?vctr_content_primary</item>
<item name="android:textColorLink">@color/element_link_light</item>
<!-- Menu text color -->
<item name="android:actionMenuTextColor">?colorSecondary</item>
<!-- Default color for text View -->
<item name="android:textColorTertiary">?vctr_content_tertiary</item>
<item name="materialAlertDialogTheme">@style/VectorAlertDialogStyleLight.SC</item>
<item name="vctr_encrypting_message_text_color">@color/accent_sc</item>
<!-- custom action bar -->
<item name="android:actionBarStyle">@style/Vector.Styled.ActionBar.SC</item>
<item name="actionBarStyle">@style/Vector.Styled.ActionBar.SC</item>
<!-- SC additions -->
<item name="sc_message_bg_incoming">#FFEEEEEE</item>
<item name="sc_message_bg_outgoing">@color/accent_sc_alpha12</item>
<item name="riotx_unread_unimportant_room_badge">?vctr_content_tertiary</item>
<item name="colorAccentPale">@color/accent_sc_pale</item>
<item name="bottomSheetDialogTheme">@style/Vector.BottomSheet.SC.Light</item>
<item name="vctr_unread_room_badge">?colorAccent</item>
<!-- SC additions -->
<item name="colorAccent">@color/accent_sc</item>
<item name="android:colorAccent">@color/accent_sc</item>
<item name="sc_message_bg_incoming">@color/background_sc_light_secondary</item>
<item name="sc_message_bg_outgoing">@color/accent_sc_alpha12</item>
<item name="riotx_unread_unimportant_room_badge">#737373</item><!-- like text_color_secondary_sc_light, but without transparency -->
<item name="colorAccentPale">@color/accent_sc_pale</item>
<!-- OptionsMenu background -->
<item name="itemBackground">@color/background_sc_light_bright</item>
<item name="android:itemBackground">@color/background_sc_light_bright</item>
<!-- Use dark color, to have enough contrast with icons color. windowLightStatusBar is only available in API 23+ -->
<item name="android:statusBarColor">@color/background_black_sc</item>
<!-- Use dark color, to have enough contrast with icons color. windowLightNavigationBar is only available in API 27+ -->
<item name="android:navigationBarColor">@color/background_black_sc</item>
<!-- enable window content transitions -->
<item name="android:windowContentTransitions">true</item>
<!-- specify shared element enter and exit transitions -->
<item name="android:windowSharedElementEnterTransition">@transition/image_preview_transition</item>
<item name="android:windowSharedElementExitTransition">@transition/image_preview_transition</item>
<item name="vctr_reaction_background_off">@color/vctr_reaction_background_off_light</item>
<item name="vctr_reaction_background_on">@color/sc_reaction_background_on_light</item>
<!-- Some alias -->
<item name="vctr_list_separator">@color/list_divider_color_sc_light</item>
<item name="vctr_list_separator_system">?vctr_list_separator</item>
<item name="vctr_list_separator_on_surface">?vctr_list_separator</item>
</style>
<!-- Default AppTheme for usage where settings don't apply -->

View File

@ -16,6 +16,7 @@
package im.vector.app.core.ui.list
import android.view.Gravity
import android.widget.LinearLayout
import android.widget.TextView
import androidx.annotation.ColorInt
import com.airbnb.epoxy.EpoxyAttribute
@ -53,6 +54,10 @@ abstract class GenericFooterItem : VectorEpoxyModel<GenericFooterItem.Holder>()
@ColorInt
var textColor: Int? = null
@EpoxyAttribute
@ColorInt
var backgroundColor: Int? = null
override fun bind(holder: Holder) {
super.bind(holder)
@ -67,10 +72,17 @@ abstract class GenericFooterItem : VectorEpoxyModel<GenericFooterItem.Holder>()
holder.text.setTextColor(ThemeUtils.getColor(holder.view.context, R.attr.vctr_content_secondary))
}
if (backgroundColor != null) {
holder.layout.setBackgroundColor(backgroundColor!!)
} else {
holder.layout.background = null
}
holder.view.onClick(itemClickAction)
}
class Holder : VectorEpoxyHolder() {
val text by bind<TextView>(R.id.itemGenericFooterText)
val layout by bind<LinearLayout>(R.id.itemGenericFooterLayout)
}
}

View File

@ -22,6 +22,7 @@ import im.vector.app.R
import im.vector.app.core.epoxy.expandableTextItem
import im.vector.app.core.epoxy.profiles.buildProfileAction
import im.vector.app.core.epoxy.profiles.buildProfileSection
import im.vector.app.core.resources.ColorProvider
import im.vector.app.core.resources.StringProvider
import im.vector.app.core.ui.list.genericFooterItem
import im.vector.app.features.home.ShortcutCreator
@ -34,6 +35,7 @@ import javax.inject.Inject
class RoomProfileController @Inject constructor(
private val stringProvider: StringProvider,
private val colorProvider: ColorProvider,
private val vectorPreferences: VectorPreferences,
private val shortcutCreator: ShortcutCreator
) : TypedEpoxyController<RoomProfileViewState>() {
@ -98,6 +100,7 @@ class RoomProfileController @Inject constructor(
id("e2e info")
centered(false)
text(host.stringProvider.getString(learnMoreSubtitle))
backgroundColor(host.colorProvider.getColorFromAttribute(R.attr.vctr_header_background))
}
// SC: Move down in the list, this one-time action is not important to enough to show this prevalent at the top
//buildEncryptionAction(data.actionPermissions, roomSummary)

View File

@ -4,7 +4,7 @@
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:colorBackground"
android:background="?vctr_header_background"
android:padding="16dp">
<im.vector.app.core.ui.views.NonScrollingTextView
@ -34,4 +34,4 @@
app:tint="?vctr_content_secondary"
tools:ignore="MissingPrefix" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

View File

@ -1,9 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/itemGenericFooterLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?vctr_header_background"
android:orientation="vertical"
android:padding="16dp">