Theme FAB menu

vector/src/main/java/im/vector/riotredesign/features/home/room/list/widget/FabMenuView.kt

@@ -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()

vector/src/main/java/im/vector/riotredesign/features/themes/ThemeUtils.kt

@@ -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_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.bg_unread_notification_light  -> R.drawable.bg_unread_notification_dark
-                    else                                    -> {
+                    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_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.bg_unread_notification_light  -> R.drawable.bg_unread_notification_black
-                    else                                    -> {
+                    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
                     }

vector/src/main/res/drawable/vector_label_background_black.xml

@@ -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>

vector/src/main/res/drawable/vector_label_background_dark.xml

@@ -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>

vector/src/main/res/drawable/vector_label_background_light.xml

@@ -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"

vector/src/main/res/layout/constraint_set_fab_menu_close.xml

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

vector/src/main/res/layout/constraint_set_fab_menu_open.xml

@@ -8,8 +8,7 @@
         android:id="@+id/createRoomTouchGuard"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:alpha="0.5"
+        android:background="?riotx_touch_guard_bg" />
-        android:background="#323232" />
 
     <!-- Sub menu item 2 -->
     <com.google.android.material.floatingactionbutton.FloatingActionButton

vector/src/main/res/layout/merge_fab_menu_view.xml

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

vector/src/main/res/values/colors_riotx.xml

@@ -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>

vector/src/main/res/values/styles_riot.xml

@@ -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:textColor">?riotx_fab_label_color</item>
-        <item name="android:background">@drawable/vector_label_background</item>
+        <!-- Note bg will be updated in the code -->
+        <item name="android:background">@drawable/vector_label_background_light</item>
     </style>
 
 </resources>

vector/src/main/res/values/theme_black.xml

@@ -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>

vector/src/main/res/values/theme_dark.xml

@@ -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>

vector/src/main/res/values/theme_light.xml

@@ -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>

vector/src/main/res/values/theme_status.xml

@@ -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>