DROID-202 Editor | Nested decoration for header blocks (#2439)

core-ui/src/main/java/com/anytypeio/anytype/core_ui/features/editor/holders/text/Header.kt

@@ -3,9 +3,11 @@ package com.anytypeio.anytype.core_ui.features.editor.holders.text
 import android.text.Editable
 import android.view.View
 import androidx.core.view.updatePadding
+import com.anytypeio.anytype.core_ui.BuildConfig
 import com.anytypeio.anytype.core_ui.R
 import com.anytypeio.anytype.core_ui.features.editor.BlockViewHolder
 import com.anytypeio.anytype.core_ui.features.editor.TextBlockHolder
+import com.anytypeio.anytype.core_ui.features.editor.decoration.DecoratableViewHolder
 import com.anytypeio.anytype.core_ui.features.editor.marks
 import com.anytypeio.anytype.core_ui.widgets.text.TextInputWidget
 import com.anytypeio.anytype.core_utils.ext.dimen
@@ -17,7 +19,11 @@ import com.anytypeio.anytype.presentation.editor.editor.slash.SlashEvent
 abstract class Header(
     view: View,
     clicked: (ListenerType) -> Unit,
-) : Text(view, clicked), TextBlockHolder, BlockViewHolder.IndentableHolder {
+) : Text(view, clicked),
+    TextBlockHolder,
+    BlockViewHolder.IndentableHolder,
+    DecoratableViewHolder
+{
 
     abstract val header: TextInputWidget
 
@@ -49,8 +55,10 @@ abstract class Header(
     }
 
     override fun indentize(item: BlockView.Indentable) {
-        header.updatePadding(
-            left = dimen(R.dimen.default_document_content_padding_start) + item.indent * dimen(R.dimen.indent)
-        )
+        if (!BuildConfig.NESTED_DECORATION_ENABLED) {
+            header.updatePadding(
+                left = dimen(R.dimen.default_document_content_padding_start) + item.indent * dimen(R.dimen.indent)
+            )
+        }
     }
 }

core-ui/src/main/java/com/anytypeio/anytype/core_ui/features/editor/holders/text/HeaderOne.kt

@@ -2,11 +2,16 @@ package com.anytypeio.anytype.core_ui.features.editor.holders.text
 
 import android.graphics.drawable.Drawable
 import android.view.View
+import android.widget.FrameLayout
 import androidx.core.content.ContextCompat
+import androidx.core.view.updateLayoutParams
+import com.anytypeio.anytype.core_ui.BuildConfig
 import com.anytypeio.anytype.core_ui.R
 import com.anytypeio.anytype.core_ui.databinding.ItemBlockHeaderOneBinding
+import com.anytypeio.anytype.core_ui.features.editor.decoration.EditorDecorationContainer
 import com.anytypeio.anytype.core_ui.widgets.text.TextInputWidget
 import com.anytypeio.anytype.presentation.editor.editor.listener.ListenerType
+import com.anytypeio.anytype.presentation.editor.editor.model.BlockView
 
 class HeaderOne(
     val binding: ItemBlockHeaderOneBinding,
@@ -23,6 +28,9 @@ class HeaderOne(
     private val mentionUncheckedIcon: Drawable?
     private val mentionInitialsSize: Float
 
+    override val decoratableContainer: EditorDecorationContainer
+        get() = binding.decorationContainer
+
     init {
         setup()
         with(itemView.context) {
@@ -42,4 +50,17 @@ class HeaderOne(
     override fun getMentionCheckedIcon(): Drawable? = mentionCheckedIcon
     override fun getMentionUncheckedIcon(): Drawable? = mentionUncheckedIcon
     override fun getMentionInitialsSize(): Float = mentionInitialsSize
+
+    override fun applyDecorations(decorations: List<BlockView.Decoration>) {
+        if (BuildConfig.NESTED_DECORATION_ENABLED) {
+            decoratableContainer.decorate(decorations) { rect ->
+                binding.box.updateLayoutParams<FrameLayout.LayoutParams> {
+                    marginStart = rect.left
+                    marginEnd = rect.right
+                    bottomMargin = rect.bottom
+                    // TODO handle top and bottom offsets
+                }
+            }
+        }
+    }
 }

core-ui/src/main/java/com/anytypeio/anytype/core_ui/features/editor/holders/text/HeaderThree.kt

@@ -2,11 +2,16 @@ package com.anytypeio.anytype.core_ui.features.editor.holders.text
 
 import android.graphics.drawable.Drawable
 import android.view.View
+import android.widget.FrameLayout
 import androidx.core.content.ContextCompat
+import androidx.core.view.updateLayoutParams
+import com.anytypeio.anytype.core_ui.BuildConfig
 import com.anytypeio.anytype.core_ui.R
 import com.anytypeio.anytype.core_ui.databinding.ItemBlockHeaderThreeBinding
+import com.anytypeio.anytype.core_ui.features.editor.decoration.EditorDecorationContainer
 import com.anytypeio.anytype.core_ui.widgets.text.TextInputWidget
 import com.anytypeio.anytype.presentation.editor.editor.listener.ListenerType
+import com.anytypeio.anytype.presentation.editor.editor.model.BlockView
 
 class HeaderThree(
     val binding: ItemBlockHeaderThreeBinding,
@@ -23,6 +28,9 @@ class HeaderThree(
     private val mentionUncheckedIcon: Drawable?
     private val mentionInitialsSize: Float
 
+    override val decoratableContainer: EditorDecorationContainer
+        get() = binding.decorationContainer
+
     init {
         setup()
         with(itemView.context) {
@@ -42,4 +50,17 @@ class HeaderThree(
     override fun getMentionCheckedIcon(): Drawable? = mentionCheckedIcon
     override fun getMentionUncheckedIcon(): Drawable? = mentionUncheckedIcon
     override fun getMentionInitialsSize(): Float = mentionInitialsSize
+
+    override fun applyDecorations(decorations: List<BlockView.Decoration>) {
+        if (BuildConfig.NESTED_DECORATION_ENABLED) {
+            decoratableContainer.decorate(decorations) { rect ->
+                binding.box.updateLayoutParams<FrameLayout.LayoutParams> {
+                    marginStart = rect.left
+                    marginEnd = rect.right
+                    bottomMargin = rect.bottom
+                    // TODO handle top and bottom offsets
+                }
+            }
+        }
+    }
 }

core-ui/src/main/java/com/anytypeio/anytype/core_ui/features/editor/holders/text/HeaderTwo.kt

@@ -2,11 +2,16 @@ package com.anytypeio.anytype.core_ui.features.editor.holders.text
 
 import android.graphics.drawable.Drawable
 import android.view.View
+import android.widget.FrameLayout
 import androidx.core.content.ContextCompat
+import androidx.core.view.updateLayoutParams
+import com.anytypeio.anytype.core_ui.BuildConfig
 import com.anytypeio.anytype.core_ui.R
 import com.anytypeio.anytype.core_ui.databinding.ItemBlockHeaderTwoBinding
+import com.anytypeio.anytype.core_ui.features.editor.decoration.EditorDecorationContainer
 import com.anytypeio.anytype.core_ui.widgets.text.TextInputWidget
 import com.anytypeio.anytype.presentation.editor.editor.listener.ListenerType
+import com.anytypeio.anytype.presentation.editor.editor.model.BlockView
 
 class HeaderTwo(
     val binding: ItemBlockHeaderTwoBinding,
@@ -17,6 +22,9 @@ class HeaderTwo(
     override val content: TextInputWidget get() = header
     override val root: View = itemView
 
+    override val decoratableContainer: EditorDecorationContainer
+        get() = binding.decorationContainer
+
     private val mentionIconSize: Int
     private val mentionIconPadding: Int
     private val mentionCheckedIcon: Drawable?
@@ -42,4 +50,17 @@ class HeaderTwo(
     override fun getMentionCheckedIcon(): Drawable? = mentionCheckedIcon
     override fun getMentionUncheckedIcon(): Drawable? = mentionUncheckedIcon
     override fun getMentionInitialsSize(): Float = mentionInitialsSize
+
+    override fun applyDecorations(decorations: List<BlockView.Decoration>) {
+        if (BuildConfig.NESTED_DECORATION_ENABLED) {
+            decoratableContainer.decorate(decorations) { rect ->
+                binding.box.updateLayoutParams<FrameLayout.LayoutParams> {
+                    marginStart = rect.left
+                    marginEnd = rect.right
+                    bottomMargin = rect.bottom
+                    // TODO handle top and bottom offsets
+                }
+            }
+        }
+    }
 }

core-ui/src/main/res/layout/item_block_header_one.xml

@@ -3,19 +3,29 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/root"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:layout_marginTop="22dp"
-    android:paddingStart="@dimen/default_document_item_padding_start"
-    android:paddingEnd="@dimen/default_document_item_padding_end">
+    android:layout_height="wrap_content">
 
-    <com.anytypeio.anytype.core_ui.widgets.text.TextInputWidget
-        android:id="@+id/headerOne"
-        style="@style/BlockHeaderOneContentStyle"
-        android:layout_marginTop="1dp"
-        android:layout_marginBottom="1dp"
-        android:background="@drawable/item_block_multi_select_mode_selector"
-        android:hint="@string/hint_header_one"
-        tools:background="@drawable/item_block_multi_select_selected"
-        tools:text="Header 1" />
+    <com.anytypeio.anytype.core_ui.features.editor.decoration.EditorDecorationContainer
+        android:id="@+id/decorationContainer"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+
+    <FrameLayout
+        android:id="@+id/box"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="22dp"
+        android:paddingStart="@dimen/default_document_item_padding_start"
+        android:paddingEnd="@dimen/default_document_item_padding_end">
+
+        <com.anytypeio.anytype.core_ui.widgets.text.TextInputWidget
+            android:id="@+id/headerOne"
+            style="@style/BlockHeaderOneContentStyle"
+            android:layout_marginTop="1dp"
+            android:layout_marginBottom="1dp"
+            android:background="@drawable/item_block_multi_select_mode_selector"
+            android:hint="@string/hint_header_one"
+            tools:background="@drawable/item_block_multi_select_selected"
+            tools:text="Header 1" />
+    </FrameLayout>
 </FrameLayout>
-

core-ui/src/main/res/layout/item_block_header_three.xml

@@ -3,18 +3,29 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/root"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:layout_marginTop="14dp"
-    android:paddingStart="@dimen/default_document_item_padding_start"
-    android:paddingEnd="@dimen/default_document_item_padding_end">
+    android:layout_height="wrap_content">
 
-    <com.anytypeio.anytype.core_ui.widgets.text.TextInputWidget
-        android:id="@+id/headerThree"
-        style="@style/BlockHeaderThreeContentStyle"
-        android:layout_marginTop="1dp"
-        android:layout_marginBottom="1dp"
-        android:background="@drawable/item_block_multi_select_mode_selector"
-        android:hint="@string/hint_header_three"
-        tools:background="@drawable/item_block_multi_select_selected"
-        tools:text="Header 3" />
+    <com.anytypeio.anytype.core_ui.features.editor.decoration.EditorDecorationContainer
+        android:id="@+id/decorationContainer"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+
+    <FrameLayout
+        android:id="@+id/box"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="14dp"
+        android:paddingStart="@dimen/default_document_item_padding_start"
+        android:paddingEnd="@dimen/default_document_item_padding_end">
+
+        <com.anytypeio.anytype.core_ui.widgets.text.TextInputWidget
+            android:id="@+id/headerThree"
+            style="@style/BlockHeaderThreeContentStyle"
+            android:layout_marginTop="1dp"
+            android:layout_marginBottom="1dp"
+            android:background="@drawable/item_block_multi_select_mode_selector"
+            android:hint="@string/hint_header_three"
+            tools:background="@drawable/item_block_multi_select_selected"
+            tools:text="Header 3" />
+    </FrameLayout>
 </FrameLayout>

core-ui/src/main/res/layout/item_block_header_two.xml

@@ -3,18 +3,29 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/root"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:layout_marginTop="14dp"
-    android:paddingStart="@dimen/default_document_item_padding_start"
-    android:paddingEnd="@dimen/default_document_item_padding_end">
+    android:layout_height="wrap_content">
 
-    <com.anytypeio.anytype.core_ui.widgets.text.TextInputWidget
-        android:id="@+id/headerTwo"
-        style="@style/BlockHeaderTwoContentStyle"
-        android:layout_marginTop="1dp"
-        android:layout_marginBottom="1dp"
-        android:background="@drawable/item_block_multi_select_mode_selector"
-        android:hint="@string/hint_header_two"
-        tools:background="@drawable/item_block_multi_select_selected"
-        tools:text="Header 2" />
+    <com.anytypeio.anytype.core_ui.features.editor.decoration.EditorDecorationContainer
+        android:id="@+id/decorationContainer"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+
+    <FrameLayout
+        android:id="@+id/box"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="14dp"
+        android:paddingStart="@dimen/default_document_item_padding_start"
+        android:paddingEnd="@dimen/default_document_item_padding_end">
+
+        <com.anytypeio.anytype.core_ui.widgets.text.TextInputWidget
+            android:id="@+id/headerTwo"
+            style="@style/BlockHeaderTwoContentStyle"
+            android:layout_marginTop="1dp"
+            android:layout_marginBottom="1dp"
+            android:background="@drawable/item_block_multi_select_mode_selector"
+            android:hint="@string/hint_header_two"
+            tools:background="@drawable/item_block_multi_select_selected"
+            tools:text="Header 2" />
+    </FrameLayout>
 </FrameLayout>