help tab

Danil0v3s · Dec 1, 2024 · d73cfeb · d73cfeb
1 parent 7a8686b
commit d73cfeb
Show file tree

Hide file tree

Showing 13 changed files with 159 additions and 13 deletions.
diff --git a/target/server/src/main/kotlin/br/com/firstsoft/target/server/ui/AppTheme.kt b/target/server/src/main/kotlin/br/com/firstsoft/target/server/ui/AppTheme.kt
@@ -6,13 +6,20 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.platform.Font
 import androidx.compose.ui.unit.LayoutDirection
 
 val fontFamily = FontFamily(
-    Font(
-        resource = "font/inter.ttf"
-    ),
+    Font(resource = "font/inter_thin.ttf", weight = FontWeight.Thin),
+    Font(resource = "font/inter_extralight.ttf", weight = FontWeight.ExtraLight),
+    Font(resource = "font/inter_light.ttf", weight = FontWeight.Light),
+    Font(resource = "font/inter_regular.ttf", weight = FontWeight.Normal),
+    Font(resource = "font/inter_medium.ttf", weight = FontWeight.Medium),
+    Font(resource = "font/inter_semibold.ttf", weight = FontWeight.SemiBold),
+    Font(resource = "font/inter_bold.ttf", weight = FontWeight.Bold),
+    Font(resource = "font/inter_extrabold.ttf", weight = FontWeight.ExtraBold),
+    Font(resource = "font/inter_black.ttf", weight = FontWeight.Black),
 )
 
 @Composable

diff --git a/...server/src/main/kotlin/br/com/firstsoft/target/server/ui/components/CollapsibleSection.kt b/...server/src/main/kotlin/br/com/firstsoft/target/server/ui/components/CollapsibleSection.kt
@@ -6,6 +6,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -34,7 +35,7 @@ import br.com.firstsoft.target.server.ui.ColorTokens.MutedGray
 @Composable
 fun CollapsibleSection(
     title: String,
-    content: @Composable () -> Unit
+    content: @Composable ColumnScope.() -> Unit
 ) {
     var expanded by remember { mutableStateOf(false) }
 

diff --git a/.../server/src/main/kotlin/br/com/firstsoft/target/server/ui/settings/tabs/HelpSettingsUi.kt b/.../server/src/main/kotlin/br/com/firstsoft/target/server/ui/settings/tabs/HelpSettingsUi.kt
@@ -1,14 +1,38 @@
 package br.com.firstsoft.target.server.ui.settings.tabs
 
+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.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.text.ClickableText
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.ParagraphStyle
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.style.TextIndent
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import br.com.firstsoft.target.server.ui.ColorTokens.DarkGray
+import br.com.firstsoft.target.server.ui.ColorTokens.LabelGray
 import br.com.firstsoft.target.server.ui.components.CollapsibleSection
 
 @Composable
@@ -17,28 +41,142 @@ internal fun HelpSettingsUi() {
         modifier = Modifier.padding(bottom = 8.dp, top = 20.dp).verticalScroll(rememberScrollState()),
         verticalArrangement = Arrangement.spacedBy(16.dp)
     ) {
-        CollapsibleSection(
-            title = "SHORCUTS",
-        ) {
-            Text("fasdadas")
-        }
-
         CollapsibleSection(
             title = "HOW TO SETUP",
         ) {
-            Text("fasdadas")
+            StyledNumberedList(
+                "Run it",
+                "Setup the sensors",
+                "Enjoy"
+            )
         }
 
         CollapsibleSection(
             title = "CURRENT LIMITATIONS",
         ) {
-            Text("fasdadas")
+            BulletList(
+                listOf("Doesn't work with exclusive fullscreen")
+            )
         }
 
         CollapsibleSection(
             title = "FREQUENTLY ASKED QUESTIONS",
         ) {
-            Text("fasdadas")
+            FrequentlyAskedQuestions(
+                "The sensors look wrong" to buildAnnotatedString { append("Try setting up each sensor via the Stats tab") },
+                "Still has questions?" to buildAnnotatedString {
+                    append("Join our ")
+                    pushStringAnnotation("click", "https://discord.gg/phqwe89cvE")
+                    withStyle(SpanStyle(textDecoration = TextDecoration.Underline)) {
+                        append("Discord Server")
+                    }
+                    pop()
+                }
+            )
+        }
+    }
+}
+
+@Composable
+private fun BulletList(
+    items: List<String>,
+) {
+    val bullet = "\u2022"
+    val paragraphStyle = ParagraphStyle(textIndent = TextIndent(restLine = 12.sp))
+    Text(
+        text = buildAnnotatedString {
+            items.forEach {
+                withStyle(style = paragraphStyle) {
+                    append(bullet)
+                    append("  ")
+                    append(it)
+                }
+            }
+        },
+        style = TextStyle(
+            fontSize = 14.sp,
+            color = DarkGray,
+            fontWeight = FontWeight(500)
+        )
+    )
+}
+
+@Composable
+private fun StyledNumberedList(
+    vararg items: String
+) {
+    Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
+        items.forEachIndexed { index, item ->
+            Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                Box(
+                    modifier = Modifier.background(DarkGray, CircleShape).size(26.dp)
+                ) {
+                    Text(
+                        text = "${index + 1}",
+                        style = TextStyle(
+                            fontSize = 14.sp,
+                            color = Color.White,
+                            fontWeight = FontWeight.Thin,
+                            lineHeight = 0.sp,
+                            textAlign = TextAlign.Center
+                        ),
+                        modifier = Modifier.align(Alignment.Center).padding(bottom = 2.dp)
+                    )
+                }
+                Text(
+                    text = item,
+                    style = TextStyle(
+                        fontSize = 14.sp,
+                        color = DarkGray,
+                        fontWeight = FontWeight.Medium,
+                        lineHeight = 0.sp,
+                    )
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun FrequentlyAskedQuestions(
+    vararg items: Pair<String, AnnotatedString>
+) {
+    val uriHandler = LocalUriHandler.current
+
+    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
+        items.forEachIndexed { index, pair ->
+            Column(verticalArrangement = Arrangement.spacedBy(6.dp)) {
+                Text(
+                    text = buildAnnotatedString {
+                        append("${index + 1}.")
+                        append("  ")
+                        append(pair.first)
+                    },
+                    style = TextStyle(
+                        fontSize = 14.sp,
+                        color = DarkGray,
+                        fontWeight = FontWeight(500),
+                        lineHeight = 0.sp
+                    )
+                )
+                Row {
+                    Spacer(modifier = Modifier.width(16.dp))
+                    ClickableText(
+                        text = pair.second,
+                        style = TextStyle(
+                            fontSize = 14.sp,
+                            color = LabelGray,
+                            fontWeight = FontWeight(400),
+                            lineHeight = 0.sp
+                        ),
+                        onClick = { offset ->
+                            pair.second.getStringAnnotations("click", offset, offset).firstOrNull()?.let {
+                                uriHandler.openUri(it.item)
+                            }
+                        }
+                    )
+                }
+            }
         }
     }
 }
diff --git a/target/server/src/main/resources/font/inter.ttf b/target/server/src/main/resources/font/inter.ttf
diff --git a/target/server/src/main/resources/font/inter_black.ttf b/target/server/src/main/resources/font/inter_black.ttf
diff --git a/target/server/src/main/resources/font/inter_bold.ttf b/target/server/src/main/resources/font/inter_bold.ttf
diff --git a/target/server/src/main/resources/font/inter_extrabold.ttf b/target/server/src/main/resources/font/inter_extrabold.ttf
diff --git a/target/server/src/main/resources/font/inter_extralight.ttf b/target/server/src/main/resources/font/inter_extralight.ttf
diff --git a/target/server/src/main/resources/font/inter_light.ttf b/target/server/src/main/resources/font/inter_light.ttf
diff --git a/target/server/src/main/resources/font/inter_medium.ttf b/target/server/src/main/resources/font/inter_medium.ttf
diff --git a/target/server/src/main/resources/font/inter_regular.ttf b/target/server/src/main/resources/font/inter_regular.ttf
diff --git a/target/server/src/main/resources/font/inter_semibold.ttf b/target/server/src/main/resources/font/inter_semibold.ttf
diff --git a/target/server/src/main/resources/font/inter_thin.ttf b/target/server/src/main/resources/font/inter_thin.ttf