Theme FAB menu

This commit is contained in:
Benoit Marty 2019-06-06 16:33:22 +02:00
parent dd563ec9ae
commit bfbb29b2cf
14 changed files with 94 additions and 22 deletions

View File

@ -29,6 +29,7 @@ import im.vector.riotredesign.R
import im.vector.riotredesign.core.animations.ANIMATION_DURATION_SHORT
import im.vector.riotredesign.core.animations.SimpleTransitionListener
import im.vector.riotredesign.core.animations.VectorFullTransitionSet
import im.vector.riotredesign.features.themes.ThemeUtils
import kotlinx.android.synthetic.main.merge_fab_menu_view.view.*

class FabMenuView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null,
@ -57,6 +58,11 @@ class FabMenuView @JvmOverloads constructor(context: Context, attrs: AttributeSe
createRoomItemGroupLabel.isVisible = false
// Collapse end

// Tint label background
listOf(createRoomItemChatLabel, createRoomItemGroupLabel)
.forEach {
it.setBackgroundResource(ThemeUtils.getResourceId(context, R.drawable.vector_label_background_light))
}

createRoomButton.setOnClickListener {
toggleFabMenu()

View File

@ -184,9 +184,10 @@ object ThemeUtils {
THEME_LIGHT_VALUE -> resourceId
THEME_DARK_VALUE -> {
return when (resourceId) {
R.drawable.bg_search_edit_text_light -> R.drawable.bg_search_edit_text_dark
R.drawable.bg_unread_notification_light -> R.drawable.bg_unread_notification_dark
else -> {
R.drawable.bg_search_edit_text_light -> R.drawable.bg_search_edit_text_dark
R.drawable.bg_unread_notification_light -> R.drawable.bg_unread_notification_dark
R.drawable.vector_label_background_light -> R.drawable.vector_label_background_dark
else -> {
Timber.w("Warning, missing case for wanted drawable in dark theme")
resourceId
}
@ -194,9 +195,10 @@ object ThemeUtils {
}
THEME_BLACK_VALUE -> {
return when (resourceId) {
R.drawable.bg_search_edit_text_light -> R.drawable.bg_search_edit_text_black
R.drawable.bg_unread_notification_light -> R.drawable.bg_unread_notification_black
else -> {
R.drawable.bg_search_edit_text_light -> R.drawable.bg_search_edit_text_black
R.drawable.bg_unread_notification_light -> R.drawable.bg_unread_notification_black
R.drawable.vector_label_background_light -> R.drawable.vector_label_background_black
else -> {
Timber.w("Warning, missing case for wanted drawable in black theme")
resourceId
}

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<corners android:radius="3dp" />

<solid android:color="@color/riotx_fab_label_bg_black" />

<stroke
android:width="0.5dp"
android:color="@color/black" />

</shape>

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<corners android:radius="3dp" />

<solid android:color="@color/riotx_fab_label_bg_dark" />

<stroke
android:width="0.5dp"
android:color="@color/black" />

</shape>

View File

@ -4,7 +4,7 @@

<corners android:radius="3dp" />

<solid android:color="#FFFFFF" />
<solid android:color="@color/riotx_fab_label_bg_light" />

<stroke
android:width="0.5dp"

View File

@ -8,8 +8,7 @@
android:id="@+id/createRoomTouchGuard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:background="#323232"
android:background="?riotx_touch_guard_bg"
android:visibility="gone" />

<!-- Sub menu item 2 -->

View File

@ -8,8 +8,7 @@
android:id="@+id/createRoomTouchGuard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.5"
android:background="#323232" />
android:background="?riotx_touch_guard_bg" />

<!-- Sub menu item 2 -->
<com.google.android.material.floatingactionbutton.FloatingActionButton

View File

@ -12,9 +12,7 @@
android:id="@+id/createRoomTouchGuard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:background="#323232"
tools:alpha="0.5" />
android:background="?riotx_touch_guard_bg" />

<!-- Sub menu item 2 -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
@ -24,10 +22,10 @@
android:layout_gravity="bottom|end"
android:src="@drawable/ic_fab_add_room"
android:visibility="gone"
app:backgroundTint="#FFFFFF"
app:backgroundTint="?riotx_fab_secondary_bg"
app:fabCustomSize="48dp"
app:maxImageSize="26dp"
app:tint="@color/black"
app:tint="?riotx_fab_secondary_color"
tools:ignore="MissingConstraints"
tools:visibility="visible" />

@ -46,10 +44,10 @@
android:layout_gravity="bottom|end"
android:src="@drawable/ic_fab_add_chat"
android:visibility="gone"
app:backgroundTint="#FFFFFF"
app:backgroundTint="?riotx_fab_secondary_bg"
app:fabCustomSize="48dp"
app:maxImageSize="29dp"
app:tint="@color/black"
app:tint="?riotx_fab_secondary_color"
tools:ignore="MissingConstraints"
tools:visibility="visible" />


View File

@ -119,8 +119,33 @@
<!-- Other colors, which are not in the pallette -->
<attr name="riotx_unread_room_badge" format="color" />
<color name="riotx_unread_room_badge_light">#FF61708B</color>
<color name="riotx_unread_room_badge_dark">#FF181B21</color>
<color name="riotx_unread_room_badge_dark">#FF61708B</color>
<color name="riotx_unread_room_badge_black">#FF61708B</color>

<attr name="riotx_fab_secondary_bg" format="color" />
<color name="riotx_fab_secondary_bg_light">@color/white</color>
<color name="riotx_fab_secondary_bg_dark">#FF181B21</color>
<color name="riotx_fab_secondary_bg_black">#FF181B21</color>

<attr name="riotx_fab_secondary_color" format="color" />
<color name="riotx_fab_secondary_color_light">@color/black</color>
<color name="riotx_fab_secondary_color_dark">@color/white</color>
<color name="riotx_fab_secondary_color_black">@color/white</color>

<attr name="riotx_fab_label_bg" format="color" />
<color name="riotx_fab_label_bg_light">@color/white</color>
<color name="riotx_fab_label_bg_dark">#FF181B21</color>
<color name="riotx_fab_label_bg_black">#FF181B21</color>

<attr name="riotx_fab_label_color" format="color" />
<color name="riotx_fab_label_color_light">#FF2E2F32</color>
<color name="riotx_fab_label_color_dark">#FFA1B2D1</color>
<color name="riotx_fab_label_color_black">#FFA1B2D1</color>

<attr name="riotx_touch_guard_bg" format="color" />
<color name="riotx_touch_guard_bg_light">#66000000</color>
<color name="riotx_touch_guard_bg_dark">#BF000000</color>
<color name="riotx_touch_guard_bg_black">#BF000000</color>


</resources>

View File

@ -274,8 +274,9 @@
<item name="android:paddingTop">4dp</item>
<item name="android:paddingBottom">4dp</item>
<item name="android:textSize">15sp</item>
<item name="android:textColor">?riotx_text_primary</item>
<item name="android:background">@drawable/vector_label_background</item>
<item name="android:textColor">?riotx_fab_label_color</item>
<!-- Note bg will be updated in the code -->
<item name="android:background">@drawable/vector_label_background_light</item>
</style>

</resources>

View File

@ -25,6 +25,11 @@
<item name="riotx_android_status_bar">@color/riotx_android_status_bar_black</item>
<item name="riotx_line_break_mobile">@color/riotx_line_break_mobile_black</item>
<item name="riotx_unread_room_badge">@color/riotx_unread_room_badge_black</item>
<item name="riotx_fab_secondary_bg">@color/riotx_fab_secondary_bg_black</item>
<item name="riotx_fab_secondary_color">@color/riotx_fab_secondary_color_black</item>
<item name="riotx_fab_label_bg">@color/riotx_fab_label_bg_black</item>
<item name="riotx_fab_label_color">@color/riotx_fab_label_color_black</item>
<item name="riotx_touch_guard_bg">@color/riotx_touch_guard_bg_black</item>

<!-- Material color: Note: this block should be the same in all theme because it references only common colors and ?riotx attributes -->
<item name="colorPrimary">@color/riotx_accent</item>

View File

@ -23,6 +23,11 @@
<item name="riotx_android_status_bar">@color/riotx_android_status_bar_dark</item>
<item name="riotx_line_break_mobile">@color/riotx_line_break_mobile_dark</item>
<item name="riotx_unread_room_badge">@color/riotx_unread_room_badge_dark</item>
<item name="riotx_fab_secondary_bg">@color/riotx_fab_secondary_bg_dark</item>
<item name="riotx_fab_secondary_color">@color/riotx_fab_secondary_color_dark</item>
<item name="riotx_fab_label_bg">@color/riotx_fab_label_bg_dark</item>
<item name="riotx_fab_label_color">@color/riotx_fab_label_color_dark</item>
<item name="riotx_touch_guard_bg">@color/riotx_touch_guard_bg_dark</item>

<!-- Material color: Note: this block should be the same in all theme because it references only common colors and ?riotx attributes -->
<item name="colorPrimary">@color/riotx_accent</item>

View File

@ -23,6 +23,11 @@
<item name="riotx_android_status_bar">@color/riotx_android_status_bar_light</item>
<item name="riotx_line_break_mobile">@color/riotx_line_break_mobile_light</item>
<item name="riotx_unread_room_badge">@color/riotx_unread_room_badge_light</item>
<item name="riotx_fab_secondary_bg">@color/riotx_fab_secondary_bg_light</item>
<item name="riotx_fab_secondary_color">@color/riotx_fab_secondary_color_light</item>
<item name="riotx_fab_label_bg">@color/riotx_fab_label_bg_light</item>
<item name="riotx_fab_label_color">@color/riotx_fab_label_color_light</item>
<item name="riotx_touch_guard_bg">@color/riotx_touch_guard_bg_light</item>

<!-- Material color: Note: this block should be the same in all theme because it references only common colors and ?riotx attributes -->
<item name="colorPrimary">@color/riotx_accent</item>

View File

@ -3,7 +3,8 @@

<!-- STATUS.IM THEME COLORS -->

<style name="AppTheme.Base.Status" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
<!-- Inherit of Light theme to avoid crash TODO Adapt color (phase 2) -->
<style name="AppTheme.Base.Status" parent="AppTheme.Base.Light">
<item name="colorPrimaryDark">@color/primary_color_dark_status</item>
<item name="colorPrimary">@color/primary_color_status</item>
<item name="colorAccent">@color/accent_color_status</item>