Crops Posts in 350 chars.

app/src/main/java/com/vitorpamplona/amethyst/ui/components/RichTextViewer.kt

@@ -3,10 +3,19 @@ package com.vitorpamplona.amethyst.ui.components
 import android.content.res.Resources
 import android.util.LruCache
 import android.util.Patterns
+import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.ClickableText
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.LocalTextStyle
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
@@ -16,7 +25,10 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.style.TextDirection
 import androidx.compose.ui.unit.dp
@@ -70,6 +82,7 @@ fun RichTextViewer(content: String, canPreview: Boolean, tags: List<List<String>
   }
 
   var showOriginal by remember { mutableStateOf(false) }
+  var showFullText by remember { mutableStateOf(false) }
 
   LaunchedEffect(Unit) {
     LanguageTranslatorService.autoTranslate(content).addOnCompleteListener { task ->
@@ -79,11 +92,16 @@ fun RichTextViewer(content: String, canPreview: Boolean, tags: List<List<String>
     }
   }
 
-  val text = if (showOriginal) content else translatedTextState.value.result
+  val toBeViewed = if (showOriginal) content else translatedTextState.value.result ?: content
+  val text = if (showFullText) toBeViewed else toBeViewed.take(350)
 
   Column(modifier = Modifier.padding(top = 5.dp)) {
+
+    Box(contentAlignment = Alignment.BottomCenter) {
+
+      Column(Modifier.fillMaxWidth().animateContentSize()) {
         // FlowRow doesn't work well with paragraphs. So we need to split them
-    text?.split('\n')?.forEach { paragraph ->
+        text.split('\n').forEach { paragraph ->
 
           FlowRow() {
             paragraph.split(' ').forEach { word: String ->
@@ -141,19 +159,49 @@ fun RichTextViewer(content: String, canPreview: Boolean, tags: List<List<String>
             }
           }
         }
+      }
+
+      if (toBeViewed.length > 350 && !showFullText) {
+        Row(
+          verticalAlignment = Alignment.CenterVertically,
+          horizontalArrangement = Arrangement.Center,
+          modifier = Modifier.fillMaxWidth().background(
+            brush = Brush.verticalGradient(
+              colors = listOf(
+                MaterialTheme.colors.background.copy(alpha = 0f),
+                MaterialTheme.colors.background
+              )
+            )
+          )
+        ) {
+          Button(
+            modifier = Modifier.padding(top = 10.dp),
+            onClick = { showFullText = !showFullText },
+            shape = RoundedCornerShape(20.dp),
+            colors = ButtonDefaults
+              .buttonColors(
+                backgroundColor = MaterialTheme.colors.primary
+              ),
+            contentPadding = PaddingValues(vertical = 6.dp, horizontal = 16.dp)
+          ) {
+            Text(text = "Show More", color = Color.White)
+          }
+        }
+      }
+    }
 
     val target = translatedTextState.value.targetLang
     val source = translatedTextState.value.sourceLang
 
     if (source != null && target != null) {
       if (source != target) {
-        Row() {
+        FlowRow() {
           Text(
             text = "Auto-translated from ",
             color = MaterialTheme.colors.onSurface.copy(alpha = 0.32f),
           )
           ClickableText(
-            text = AnnotatedString("${Locale(source).displayName}"),
+            text = AnnotatedString(Locale(source).displayName),
             onClick = { showOriginal = true },
             style = LocalTextStyle.current.copy(color = MaterialTheme.colors.primary.copy(alpha = 0.52f))
           )
@@ -162,7 +210,7 @@ fun RichTextViewer(content: String, canPreview: Boolean, tags: List<List<String>
             color = MaterialTheme.colors.onSurface.copy(alpha = 0.32f),
           )
           ClickableText(
-            text = AnnotatedString("${Locale(target).displayName}"),
+            text = AnnotatedString(Locale(target).displayName),
             onClick = { showOriginal = false },
             style = LocalTextStyle.current.copy(color = MaterialTheme.colors.primary.copy(alpha = 0.52f))
           )