Update companion settings landing page for Wear settings (#2837)

* Update companion settings landing page for Wear settings

* Fix description

* Update text and label

app/src/full/java/io/homeassistant/companion/android/settings/wear/views/SettingsWearLandingView.kt

@@ -1,19 +1,24 @@
 package io.homeassistant.companion.android.settings.wear.views
 
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Button
 import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.mikepenz.iconics.typeface.library.community.material.CommunityMaterial
+import io.homeassistant.companion.android.settings.views.SettingsRow
 import io.homeassistant.companion.android.util.wearDeviceName
 import io.homeassistant.companion.android.common.R as commonR
 
@@ -35,44 +40,51 @@ fun SettingWearLandingView(
                 docsLink = WEAR_DOCS_LINK
             )
         }
-    ) {
+    ) { padding ->
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(all = 16.dp)
+                .padding(padding)
         ) {
-            Text(
-                text = stringResource(id = commonR.string.manage_wear_device, deviceName),
-                textAlign = TextAlign.Center
-            )
+            Row(
+                modifier = Modifier
+                    .height(48.dp)
+                    .padding(start = 72.dp, end = 16.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = stringResource(id = commonR.string.manage_wear_device, deviceName),
+                    style = MaterialTheme.typography.body2,
+                    fontWeight = FontWeight.Bold,
+                    color = MaterialTheme.colors.primary
+                )
+            }
             when {
                 !hasData -> {
                     CircularProgressIndicator(modifier = Modifier.align(Alignment.CenterHorizontally))
                 }
                 isAuthed -> {
-                    Button(
-                        onClick = navigateFavorites,
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(top = 10.dp)
-                    ) {
-                        Text(stringResource(commonR.string.set_favorites_on_device))
-                    }
-                    Button(
-                        onClick = navigateTemplateTile,
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(top = 10.dp)
-                    ) {
-                        Text(stringResource(commonR.string.template_tile))
-                    }
+                    SettingsRow(
+                        primaryText = stringResource(commonR.string.wear_favorite_entities),
+                        secondaryText = stringResource(commonR.string.set_favorites_on_device),
+                        mdiIcon = CommunityMaterial.Icon3.cmd_star,
+                        enabled = true,
+                        onClicked = navigateFavorites
+                    )
+                    SettingsRow(
+                        primaryText = stringResource(commonR.string.template_tile),
+                        secondaryText = stringResource(commonR.string.template_tile_set_on_watch),
+                        mdiIcon = CommunityMaterial.Icon3.cmd_text_box,
+                        enabled = true,
+                        onClicked = navigateTemplateTile
+                    )
                 }
                 else -> {
                     Button(
                         onClick = loginWearOs,
                         modifier = Modifier
                             .fillMaxWidth()
-                            .padding(top = 10.dp)
+                            .padding(top = 10.dp, start = 16.dp, end = 16.dp)
                     ) {
                         Text(stringResource(commonR.string.login_wear_os_device))
                     }

app/src/main/java/io/homeassistant/companion/android/settings/sensor/views/SensorListView.kt

@@ -2,42 +2,29 @@ package io.homeassistant.companion.android.settings.sensor.views
 
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material.ContentAlpha
 import androidx.compose.material.Divider
-import androidx.compose.material.LocalContentAlpha
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
-import androidx.compose.material.contentColorFor
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import com.mikepenz.iconics.IconicsDrawable
-import com.mikepenz.iconics.compose.Image
 import io.homeassistant.companion.android.common.sensors.SensorManager
 import io.homeassistant.companion.android.common.sensors.id
 import io.homeassistant.companion.android.database.sensor.Sensor
 import io.homeassistant.companion.android.settings.sensor.SensorSettingsViewModel
+import io.homeassistant.companion.android.settings.views.SettingsRow
 import io.homeassistant.companion.android.common.R as commonR
 
 @OptIn(ExperimentalFoundationApi::class)
@@ -109,60 +96,27 @@ fun SensorRow(
     onSensorClicked: (String) -> Unit
 ) {
     val context = LocalContext.current
-
-    Row(
-        modifier = Modifier
-            .clickable { onSensorClicked(basicSensor.id) }
-            .heightIn(min = 72.dp)
-            .padding(all = 16.dp)
-            .fillMaxWidth(),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        var iconToUse = basicSensor.statelessIcon
-        if (dbSensor?.enabled == true && dbSensor.icon.isNotBlank()) {
-            iconToUse = dbSensor.icon
-        }
-        val mdiIcon = try {
-            IconicsDrawable(context, "cmd-${iconToUse.split(":")[1]}").icon
-        } catch (e: Exception) { null }
-
-        if (mdiIcon != null) {
-            Image(
-                asset = mdiIcon,
-                modifier = Modifier
-                    .size(24.dp)
-                    .alpha(if (dbSensor?.enabled == true) ContentAlpha.high else ContentAlpha.disabled),
-                colorFilter = ColorFilter.tint(
-                    if (dbSensor?.enabled == true) colorResource(commonR.color.colorSensorIconEnabled)
-                    else contentColorFor(backgroundColor = MaterialTheme.colors.background)
-                )
-            )
-        } else {
-            Spacer(modifier = Modifier.width(24.dp))
-        }
-        Spacer(modifier = Modifier.width(32.dp))
-        Column(
-            verticalArrangement = Arrangement.Center
-        ) {
-            Text(
-                text = stringResource(basicSensor.name),
-                style = MaterialTheme.typography.body1
-            )
-            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
-                Text(
-                    text = if (dbSensor?.enabled == true) {
-                        if (dbSensor.state.isBlank()) {
-                            stringResource(commonR.string.enabled)
-                        } else {
-                            if (basicSensor.unitOfMeasurement.isNullOrBlank()) dbSensor.state
-                            else "${dbSensor.state} ${basicSensor.unitOfMeasurement}"
-                        }
-                    } else {
-                        stringResource(commonR.string.disabled)
-                    },
-                    style = MaterialTheme.typography.body2
-                )
-            }
-        }
+    var iconToUse = basicSensor.statelessIcon
+    if (dbSensor?.enabled == true && dbSensor.icon.isNotBlank()) {
+        iconToUse = dbSensor.icon
     }
+    val mdiIcon = try {
+        IconicsDrawable(context, "cmd-${iconToUse.split(":")[1]}").icon
+    } catch (e: Exception) { null }
+
+    SettingsRow(
+        primaryText = stringResource(basicSensor.name),
+        secondaryText = if (dbSensor?.enabled == true) {
+            if (dbSensor.state.isBlank()) {
+                stringResource(commonR.string.enabled)
+            } else {
+                if (basicSensor.unitOfMeasurement.isNullOrBlank()) dbSensor.state
+                else "${dbSensor.state} ${basicSensor.unitOfMeasurement}"
+            }
+        } else {
+            stringResource(commonR.string.disabled)
+        },
+        mdiIcon = mdiIcon,
+        enabled = dbSensor?.enabled == true
+    ) { onSensorClicked(basicSensor.id) }
 }

app/src/main/java/io/homeassistant/companion/android/settings/views/SettingsRow.kt

@@ -0,0 +1,74 @@
+package io.homeassistant.companion.android.settings.views
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.ContentAlpha
+import androidx.compose.material.LocalContentAlpha
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.material.contentColorFor
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.unit.dp
+import com.mikepenz.iconics.compose.Image
+import com.mikepenz.iconics.typeface.IIcon
+
+@Composable
+fun SettingsRow(
+    primaryText: String,
+    secondaryText: String,
+    mdiIcon: IIcon?,
+    enabled: Boolean,
+    onClicked: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .clickable { onClicked() }
+            .heightIn(min = 72.dp)
+            .padding(all = 16.dp)
+            .fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        if (mdiIcon != null) {
+            Image(
+                asset = mdiIcon,
+                modifier = Modifier
+                    .size(24.dp)
+                    .alpha(if (enabled) ContentAlpha.high else ContentAlpha.disabled),
+                colorFilter = ColorFilter.tint(
+                    if (enabled) MaterialTheme.colors.primary
+                    else contentColorFor(backgroundColor = MaterialTheme.colors.background)
+                )
+            )
+        } else {
+            Spacer(modifier = Modifier.width(24.dp))
+        }
+        Spacer(modifier = Modifier.width(32.dp))
+        Column(
+            verticalArrangement = Arrangement.Center
+        ) {
+            Text(
+                text = primaryText,
+                style = MaterialTheme.typography.body1
+            )
+            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
+                Text(
+                    text = secondaryText,
+                    style = MaterialTheme.typography.body2
+                )
+            }
+        }
+    }
+}

common/src/main/res/values/strings.xml

@@ -695,6 +695,7 @@
     <string name="switches">Switches</string>
     <string name="tag_reader_title">Processing Tag</string>
     <string name="template_tile">Template tile</string>
+    <string name="template_tile_set_on_watch">Set template to display on Wear OS tile</string>
     <string name="template_tile_change_message">Change template in phone settings</string>
     <string name="template_tile_content">Template tile content</string>
     <string name="template_tile_desc">Renders and displays a template</string>
@@ -752,7 +753,7 @@
     <string name="version">Version: %s</string>
     <string name="view_password">View Password</string>
     <string name="wait">Wait</string>
-    <string name="wear_favorite_entities">Wear Favorite Entities</string>
+    <string name="wear_favorite_entities">Favorite Entities</string>
     <string name="wear_os_category">Wear OS</string>
     <string name="wear_os_settings_summary">Manage Wear OS App</string>
     <string name="wear_os_settings_title">Wear OS Settings</string>