ios, android: improve preference change chat items layout (#1454)

apps/android/app/src/main/java/chat/simplex/app/model/ChatModel.kt

@@ -1297,11 +1297,11 @@ sealed class CIContent: ItemContent {
       is SndGroupEventContent -> sndGroupEvent.text
       is RcvConnEventContent -> rcvConnEvent.text
       is SndConnEventContent -> sndConnEvent.text
-      is RcvChatFeature -> "${feature.text()}: ${enabled.text}"
-      is SndChatFeature -> "${feature.text()}: ${enabled.text}"
-      is RcvGroupFeature -> "${feature.text()}: ${preference.enable.text}"
-      is SndGroupFeature -> "${feature.text()}: ${preference.enable.text}"
-      is RcvChatFeatureRejected -> "${feature.text()}: ${generalGetString(R.string.feature_received_prohibited)}"
+      is RcvChatFeature -> "${feature.text}: ${enabled.text}"
+      is SndChatFeature -> "${feature.text}: ${enabled.text}"
+      is RcvGroupFeature -> "${feature.text}: ${preference.enable.text}"
+      is SndGroupFeature -> "${feature.text}: ${preference.enable.text}"
+      is RcvChatFeatureRejected -> "${feature.text}: ${generalGetString(R.string.feature_received_prohibited)}"
     }
 }
 

apps/android/app/src/main/java/chat/simplex/app/model/SimpleXAPI.kt

@@ -18,6 +18,7 @@ import androidx.compose.material.icons.outlined.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
@@ -2052,16 +2053,22 @@ enum class Feature {
   @SerialName("fullDelete") FullDelete,
   @SerialName("voice") Voice;
 
-  fun text() =
-    when(this) {
+  val text: String
+    get() = when(this) {
       FullDelete -> generalGetString(R.string.full_deletion)
       Voice -> generalGetString(R.string.voice_messages)
     }
 
-  fun icon(filled: Boolean) =
-    when(this) {
-      FullDelete -> if (filled) Icons.Filled.DeleteForever else Icons.Outlined.DeleteForever
-      Voice -> if (filled) Icons.Filled.KeyboardVoice else Icons.Outlined.KeyboardVoice
+  val icon: ImageVector
+    get() = when(this) {
+      FullDelete -> Icons.Outlined.DeleteForever
+      Voice -> Icons.Outlined.KeyboardVoice
+    }
+
+  val iconFilled: ImageVector
+    get() = when(this) {
+      FullDelete -> Icons.Filled.DeleteForever
+      Voice -> Icons.Filled.KeyboardVoice
     }
 
   fun allowDescription(allowed: FeatureAllowed): String =

apps/android/app/src/main/java/chat/simplex/app/views/chat/ContactPreferences.kt

@@ -104,8 +104,8 @@ private fun FeatureSection(
   )
 
   SectionView(
-    feature.text().uppercase(),
-    icon = feature.icon(true),
+    feature.text.uppercase(),
+    icon = feature.iconFilled,
     iconTint = if (enabled.forUser) SimplexGreen else if (enabled.forContact) WarningYellow else Color.Red,
     leadingIcon = true,
   ) {

apps/android/app/src/main/java/chat/simplex/app/views/chat/group/GroupPreferences.kt

@@ -86,16 +86,16 @@ private fun FeatureSection(feature: Feature, enableFeature: State<GroupFeatureEn
     if (groupInfo.canEdit) {
       SectionItemView {
         ExposedDropDownSettingRow(
-          feature.text(),
+          feature.text,
           GroupFeatureEnabled.values().map { it to it.text },
           enableFeature,
-          icon = feature.icon(false),
+          icon = feature.icon,
           onSelected = onSelected
         )
       }
     } else {
       InfoRow(
-        feature.text(),
+        feature.text,
         enableFeature.value.text
       )
     }

apps/android/app/src/main/java/chat/simplex/app/views/chat/item/CIChatFeatureView.kt

@@ -9,7 +9,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.model.*
-import chat.simplex.app.ui.theme.*
 
 @Composable
 fun CIChatFeatureView(
@@ -18,9 +17,11 @@ fun CIChatFeatureView(
   iconColor: Color
 ) {
   Row(
-    verticalAlignment = Alignment.CenterVertically
+    Modifier.padding(horizontal = 6.dp, vertical = 6.dp),
+    verticalAlignment = Alignment.CenterVertically,
+    horizontalArrangement = Arrangement.spacedBy(4.dp)
   ) {
-    Icon(feature.icon(true), feature.text(), Modifier.size(15.dp), tint = iconColor)
+    Icon(feature.iconFilled, feature.text, Modifier.size(15.dp), tint = iconColor)
     Text(
       chatEventText(chatItem),
       Modifier,

apps/android/app/src/main/java/chat/simplex/app/views/chat/item/CIEventView.kt

@@ -18,33 +18,40 @@ import chat.simplex.app.ui.theme.SimpleXTheme
 
 @Composable
 fun CIEventView(ci: ChatItem) {
+  @Composable
+  fun chatEventTextView(text: AnnotatedString) {
+    Text(text, style = MaterialTheme.typography.body1.copy(lineHeight = 22.sp))
+  }
+
   Surface {
     Row(
       Modifier.padding(horizontal = 6.dp, vertical = 6.dp),
-      verticalAlignment = Alignment.Bottom
+      verticalAlignment = Alignment.CenterVertically
     ) {
-      Text(
-        chatEventText(ci),
-        style = MaterialTheme.typography.body1.copy(lineHeight = 22.sp)
-      )
+      val memberDisplayName = ci.memberDisplayName
+      if (memberDisplayName != null) {
+        chatEventTextView(
+          buildAnnotatedString {
+            withChatEventStyle(this, memberDisplayName)
+            append(" ")
+          }.plus(chatEventText(ci))
+        )
+      } else {
+        chatEventTextView(chatEventText(ci))
+      }
     }
   }
 }
 
-private fun withGroupEventStyle(builder: AnnotatedString.Builder, text: String) {
+private fun withChatEventStyle(builder: AnnotatedString.Builder, text: String) {
   return builder.withStyle(SpanStyle(fontSize = 12.sp, fontWeight = FontWeight.Light, color = HighOrLowlight)) { append(text) }
 }
 
 fun chatEventText(ci: ChatItem): AnnotatedString =
   buildAnnotatedString {
-    val memberDisplayName = ci.memberDisplayName
-    if (memberDisplayName != null) {
-      withGroupEventStyle(this, memberDisplayName)
-      append(" ")
-    }
-    withGroupEventStyle(this, ci.content.text)
+    withChatEventStyle(this, ci.content.text)
     append(" ")
-    withGroupEventStyle(this, ci.timestampText)
+    withChatEventStyle(this, ci.timestampText)
   }
 
 @Preview(showBackground = true)

apps/android/app/src/main/java/chat/simplex/app/views/usersettings/Preferences.kt

@@ -84,10 +84,10 @@ private fun FeatureSection(feature: Feature, allowFeature: State<FeatureAllowed>
   SectionView {
     SectionItemView {
       ExposedDropDownSettingRow(
-        feature.text(),
+        feature.text,
         FeatureAllowed.values().map { it to it.text },
         allowFeature,
-        icon = feature.icon(false),
+        icon = feature.icon,
         onSelected = onSelected
       )
     }

apps/ios/Shared/Views/Chat/ChatItem/CIChatFeatureView.swift

@@ -15,8 +15,8 @@ struct CIChatFeatureView: View {
     var iconColor: Color
 
     var body: some View {
-        HStack(alignment: .bottom, spacing: 0) {
-            Image(systemName: feature.icon + ".fill")
+        HStack(alignment: .bottom, spacing: 4) {
+            Image(systemName: feature.iconFilled)
                 .foregroundColor(iconColor)
             chatEventText(chatItem)
         }

apps/ios/SimpleXChat/ChatTypes.swift

@@ -263,7 +263,14 @@ public enum Feature: String, Decodable {
     public var icon: String {
         switch self {
         case .fullDelete: return "trash.slash"
-        case .voice: return "speaker.wave.2"
+        case .voice: return "mic"
+        }
+    }
+
+    public var iconFilled: String {
+        switch self {
+        case .fullDelete: return "trash.slash.fill"
+        case .voice: return "mic.fill"
         }
     }