TaskEditRow composable with slots

app/src/main/java/com/todoroo/astrid/tags/TagsControlSet.kt

@@ -3,15 +3,13 @@ package com.todoroo.astrid.tags
 import android.app.Activity
 import android.content.Intent
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import dagger.hilt.android.AndroidEntryPoint
 import org.tasks.R
+import org.tasks.compose.DisabledText
 import org.tasks.compose.collectAsStateLifecycleAware
 import org.tasks.data.TagData
 import org.tasks.tags.TagPickerActivity
@@ -35,11 +33,7 @@ class TagsControlSet : TaskEditControlComposeFragment() {
         val tags = viewModel.selectedTags.collectAsStateLifecycleAware()
         ChipGroup(modifier = Modifier.padding(top = 20.dp, bottom = 20.dp, end = 16.dp)) {
             if (tags.value.isEmpty()) {
-                Text(
+                DisabledText(text = stringResource(id = R.string.add_tags))
-                    text = stringResource(id = R.string.add_tags),
-                    style = MaterialTheme.typography.body1,
-                    color = colorResource(id = R.color.text_tertiary),
-                )
             } else {
                 tags.value.sortedBy(TagData::name).forEach { tag ->
                     chipProvider.TagChip(tag, this@TagsControlSet::onRowClick)

app/src/main/java/com/todoroo/astrid/ui/ReminderControlSet.kt

@@ -15,13 +15,10 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.dp
-import androidx.core.content.res.ResourcesCompat
 import androidx.fragment.app.viewModels
 import com.google.accompanist.permissions.ExperimentalPermissionsApi
 import com.google.accompanist.permissions.PermissionStatus
@@ -33,6 +30,7 @@ import org.tasks.R
 import org.tasks.activities.DateAndTimePickerActivity
 import org.tasks.compose.AddReminderDialog
 import org.tasks.compose.AlarmRow
+import org.tasks.compose.DisabledText
 import org.tasks.compose.collectAsStateLifecycleAware
 import org.tasks.data.Alarm
 import org.tasks.data.Alarm.Companion.TYPE_DATE_TIME
@@ -193,9 +191,8 @@ class ReminderControlSet : TaskEditControlComposeFragment() {
                 }
             }
             Row(modifier = Modifier.fillMaxWidth()) {
-                Text(
+                DisabledText(
                     text = stringResource(id = R.string.add_reminder),
-                    style = MaterialTheme.typography.body1,
                     modifier = Modifier
                         .padding(vertical = 12.dp)
                         .clickable(
@@ -203,12 +200,6 @@ class ReminderControlSet : TaskEditControlComposeFragment() {
                             indication = rememberRipple(bounded = false),
                             onClick = { addAlarm() }
                         )
-                        .alpha(
-                            ResourcesCompat.getFloat(
-                                LocalContext.current.resources,
-                                R.dimen.alpha_disabled
-                            )
-                        )
                 )
                 Spacer(modifier = Modifier.weight(1f))
                 val ringMode = remember { this@ReminderControlSet.ringMode }

app/src/main/java/com/todoroo/astrid/ui/StartDateControlSet.kt

@@ -5,6 +5,7 @@ import android.content.Context
 import android.content.Intent
 import android.content.res.Configuration
 import android.os.Bundle
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.MaterialTheme
@@ -153,7 +154,7 @@ fun StartDate(
             startDate < currentTime -> colorResource(id = R.color.overdue)
             else -> MaterialTheme.colors.onSurface
         },
-        modifier = Modifier.padding(vertical = 20.dp),
+        modifier = Modifier.padding(vertical = 20.dp).height(24.dp),
     )
 }
 

app/src/main/java/org/tasks/compose/DisabledText.kt

@@ -1,11 +1,13 @@
 package org.tasks.compose
 
+import androidx.compose.foundation.layout.height
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.unit.dp
 
 @Composable
 fun DisabledText(
@@ -15,6 +17,8 @@ fun DisabledText(
     Text(
         text = text,
         style = MaterialTheme.typography.body1,
-        modifier = modifier.alpha(alpha = ContentAlpha.disabled)
+        modifier = modifier
+            .alpha(alpha = ContentAlpha.disabled)
+            .height(24.dp),
     )
 }

app/src/main/java/org/tasks/compose/TaskEditIcon.kt

@@ -0,0 +1,18 @@
+package org.tasks.compose
+
+import androidx.annotation.DrawableRes
+import androidx.compose.material.ContentAlpha
+import androidx.compose.material.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.res.painterResource
+
+@Composable
+fun TaskEditIcon(@DrawableRes id: Int, modifier: Modifier = Modifier) {
+    Icon(
+        painter = painterResource(id = id),
+        contentDescription = null,
+        modifier = modifier.alpha(ContentAlpha.high),
+    )
+}

app/src/main/java/org/tasks/compose/TaskEditRow.kt

@@ -0,0 +1,23 @@
+package org.tasks.compose
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Row
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+fun TaskEditRow(
+    icon: @Composable () -> Unit,
+    content: @Composable () -> Unit,
+    onClick: (() -> Unit)? = null,
+) {
+    Row(modifier = Modifier
+        .clickable(
+            enabled = onClick != null,
+            onClick = { onClick?.invoke() }
+        )
+    ) {
+        icon()
+        content()
+    }
+}

app/src/main/java/org/tasks/ui/DeadlineControlSet.kt

@@ -3,7 +3,6 @@ package org.tasks.ui
 import android.app.Activity
 import android.content.Intent
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.ContentAlpha
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -16,6 +15,7 @@ import com.todoroo.andlib.utility.DateUtilities
 import com.todoroo.astrid.data.Task.Companion.hasDueTime
 import dagger.hilt.android.AndroidEntryPoint
 import org.tasks.R
+import org.tasks.compose.DisabledText
 import org.tasks.compose.collectAsStateLifecycleAware
 import org.tasks.date.DateTimeUtils
 import org.tasks.dialogs.DateTimePicker
@@ -47,27 +47,30 @@ class DeadlineControlSet : TaskEditControlComposeFragment() {
     @Composable
     override fun Body() {
         val dueDate = viewModel.dueDate.collectAsStateLifecycleAware().value
-        Text(
+        if (dueDate == 0L) {
-            text = if (dueDate == 0L) {
+            DisabledText(
-                stringResource(id = R.string.no_due_date)
+                text = stringResource(id = R.string.no_due_date),
+                modifier = Modifier.padding(vertical = 20.dp)
+            )
         } else {
-                DateUtilities.getRelativeDateTime(
+            Text(
+                text = DateUtilities.getRelativeDateTime(
                     LocalContext.current,
                     dueDate,
                     locale,
                     FormatStyle.FULL,
                     preferences.alwaysDisplayFullDate,
                     false
-                )
+                ),
-            },
+                color = if (dueDate.isOverdue) {
-            color = when {
+                    colorResource(id = R.color.overdue)
-                dueDate == 0L -> MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
+                } else {
-                dueDate.isOverdue -> colorResource(id = R.color.overdue)
+                    MaterialTheme.colors.onSurface
-                else -> MaterialTheme.colors.onSurface
                 },
                 modifier = Modifier.padding(vertical = 20.dp)
             )
         }
+    }
 
     override val icon = R.drawable.ic_outline_schedule_24px
 

app/src/main/java/org/tasks/ui/TaskEditControlComposeFragment.kt

@@ -1,24 +1,58 @@
 package org.tasks.ui
 
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
 import android.view.ViewGroup
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.ViewModelProvider
 import com.google.android.material.composethemeadapter.MdcTheme
-import org.tasks.R
+import org.tasks.compose.TaskEditIcon
+import org.tasks.compose.TaskEditRow
 
 abstract class TaskEditControlComposeFragment : TaskEditControlFragment() {
 
-    override fun bind(parent: ViewGroup?) =
+    override fun onCreateView(
-        (parent?.findViewById(R.id.compose_view) as ComposeView).apply {
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        val composeView = ComposeView(requireActivity())
+        viewModel = ViewModelProvider(requireParentFragment())[TaskEditViewModel::class.java]
+        bind(composeView)
+        createView(savedInstanceState)
+        return composeView
+    }
+
+    override fun bind(parent: ViewGroup?): View =
+        (parent as ComposeView).apply {
             setContent {
                 MdcTheme {
-                    Body()
+                    TaskEditRow(
+                        icon = { Icon() },
+                        content = { Body() },
+                        onClick = if (this@TaskEditControlComposeFragment.isClickable)
+                            this@TaskEditControlComposeFragment::onRowClick
+                        else
+                            null
+                    )
                 }
             }
         }
 
     @Composable
-    protected abstract fun Body()
+    protected open fun Icon() {
+        TaskEditIcon(
+            id = icon,
+            modifier = Modifier
+                .padding(start = 16.dp, top = 20.dp, end = 32.dp, bottom = 20.dp),
+        )
+    }
 
-    override val rootLayout = R.layout.control_set_template_compose
+    @Composable
+    protected abstract fun Body()
 }

app/src/main/java/org/tasks/ui/TaskEditControlFragment.kt

@@ -14,7 +14,7 @@ abstract class TaskEditControlFragment : Fragment() {
 
     override fun onCreateView(
             inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
-        val view = inflater.inflate(rootLayout, null)
+        val view = inflater.inflate(R.layout.control_set_template, null)
         viewModel = ViewModelProvider(requireParentFragment())[TaskEditViewModel::class.java]
         val content = view.findViewById<ViewGroup>(R.id.content)
         bind(content)
@@ -32,12 +32,11 @@ abstract class TaskEditControlFragment : Fragment() {
     protected open fun createView(savedInstanceState: Bundle?) {}
 
     protected open fun onRowClick() {}
+
     protected open val isClickable: Boolean
         get() = false
 
     protected abstract val icon: Int
     abstract fun controlId(): Int
     protected abstract fun bind(parent: ViewGroup?): View
-
-    protected open val rootLayout = R.layout.control_set_template
 }

app/src/main/res/layout/control_set_template_compose.xml

@@ -1,30 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:id="@+id/content"
-    android:layout_width="fill_parent"
-    android:layout_height="wrap_content"
-    android:background="?attr/selectableItemBackground"
-    android:orientation="horizontal">
-
-    <ImageView
-        android:id="@+id/icon"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="top"
-        android:alpha="@dimen/alpha_secondary"
-        android:paddingStart="@dimen/keyline_first"
-        android:paddingTop="20dp"
-        android:paddingEnd="@dimen/keyline_second"
-        android:paddingBottom="20dp"
-        android:scaleType="center"
-        app:tint="@color/icon_tint"
-        tools:ignore="ContentDescription" />
-
-    <androidx.compose.ui.platform.ComposeView
-        android:id="@+id/compose_view"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content" />
-
-</LinearLayout>