Переглянути джерело

Update UI of notification screen on android, showing title first then on click open modal bottom sheet for details of that notification item

Khubaib 10 місяців тому
батько
коміт
29d536fd9f

+ 156 - 23
app/src/main/java/com/vpn/fastestvpnservice/customItems/NotificationItem.kt

@@ -1,19 +1,43 @@
 package com.vpn.fastestvpnservice.customItems
 
+import android.util.Log
+import android.widget.Toast
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+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.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.selection.selectable
 import androidx.compose.material.Text
+import androidx.compose.material3.BottomSheetDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.RadioButtonDefaults
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
+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.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
@@ -21,39 +45,147 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.vpn.fastestvpnservice.R
 import com.vpn.fastestvpnservice.beans.Notification
+import com.vpn.fastestvpnservice.constants.smartConnect
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddTextSettings
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddTextSettingsLanguage
+import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
+import com.vpn.fastestvpnservice.ui.theme.customTypography
 import com.vpn.fastestvpnservice.ui.theme.customTypography2
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun NotificationItem(item: Notification) {
-    Box(modifier = Modifier
-        .background(MaterialTheme.colorScheme.background)
-        .fillMaxWidth()
+    val context = LocalContext.current
+    var isNotificationItemSheetOpen by remember { mutableStateOf(false) }
+
+    Box(
+        modifier = Modifier
+            .background(MaterialTheme.colorScheme.background)
+            .fillMaxWidth()
     ) {
         Column() {
-            Text(
-                text = item.title,
-                color = MaterialTheme.colorScheme.primary,
-                style = MaterialTheme.typography.displayLarge.copy(
-                    color = MaterialTheme.colorScheme.primary,
-                    fontSize = 18.sp
-                ),
-                textAlign = TextAlign.Start,
+            Box(
                 modifier = Modifier
-                    .padding(start = 16.dp, bottom = 5.dp, end = 4.dp)
-                    .fillMaxWidth(),
-            )
-            Text(
-                text = item.html,
-                color = MaterialTheme.colorScheme.primary,
-                style = MaterialTheme.typography.labelMedium,
-                textAlign = TextAlign.Start,
-                modifier = Modifier
-                    .padding(start = 16.dp, bottom = 0.dp, end = 4.dp)
-                    .fillMaxWidth(),
-            )
+                    .fillMaxWidth()
+                    .wrapContentHeight()
+                    .background(Color.Transparent)
+                    .pointerInput(Unit) {
+                        detectTapGestures {
+                            isNotificationItemSheetOpen = true
+                        }
+                    },
+            ) {
+                Text(
+                    text = item.title,
+                    color = MaterialTheme.colorScheme.primary,
+                    style = MaterialTheme.typography.displayLarge.copy(
+                        color = MaterialTheme.colorScheme.primary,
+                        fontSize = 18.sp
+                    ),
+                    textAlign = TextAlign.Start,
+                    modifier = Modifier
+                        .padding(start = 16.dp, bottom = 0.dp, end = 35.dp)
+//                        .background(Color.LightGray)
+//                        .fillMaxWidth(),
+                )
+//                Spacer(modifier = Modifier.weight(1F))
+                Image(
+                    painter = painterResource(id = R.drawable.frontarrow3x),
+                    contentDescription = "Front_Arrow",
+                    colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary),
+                    modifier = Modifier
+                        .padding(start = 0.dp, end = 16.dp)
+                        .size(10.dp, 18.dp)
+                        .align(Alignment.CenterEnd)
+//                    .weight(1f),
+                )
+            }
+
+
+//            Text(
+//                text = item.html,
+//                color = MaterialTheme.colorScheme.primary,
+//                style = MaterialTheme.typography.labelMedium,
+//                textAlign = TextAlign.Start,
+//                modifier = Modifier
+//                    .padding(start = 16.dp, bottom = 0.dp, end = 4.dp)
+//                    .fillMaxWidth(),
+//            )
             Spacer(modifier = Modifier.height(20.dp))
         }
     }
+
+    if (isNotificationItemSheetOpen) {
+        val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+
+        ModalBottomSheet(
+            onDismissRequest = {
+                isNotificationItemSheetOpen = false
+            },
+            dragHandle = {
+                BottomSheetDefaults.DragHandle(
+                    color = MaterialTheme.colorScheme.primary,
+                )
+            },
+            sheetState = sheetState,
+            containerColor = MaterialTheme.colorScheme.onBackground,
+            modifier = Modifier
+                .padding(top = 15.dp)
+                .fillMaxSize()
+        ) {
+            Box(
+                modifier = Modifier
+                    .background(Color.Transparent)
+                    .fillMaxSize()
+                    .padding(start = 0.dp, top = 10.dp, bottom = 25.dp),
+            ) {
+                Column(
+//                    verticalArrangement = Arrangement.Top,
+//                    horizontalAlignment = Alignment.Start
+                ) {
+                    AddTextSettingsLanguage(
+                        text = "Details",
+                        size = 18.sp,
+                        color = MaterialTheme.colorScheme.primary,
+                        bottomPadding = 0.dp,
+                        startPadding = 0.dp,
+                        style = MaterialTheme.typography.customTypography.displayLarge.copy(
+                            color = MaterialTheme.colorScheme.primary
+                        ),
+                    )
+
+                    Column(
+                        horizontalAlignment = Alignment.Start,
+                        modifier = Modifier
+                            .padding(top = 30.dp)
+                    ) {
+                        Text(
+                            text = item.title,
+                            color = MaterialTheme.colorScheme.primary,
+                            style = MaterialTheme.typography.displayLarge.copy(
+                                color = MaterialTheme.colorScheme.primary,
+                                fontSize = 16.sp
+                            ),
+                            textAlign = TextAlign.Start,
+                            modifier = Modifier
+                                .padding(start = 10.dp, bottom = 0.dp, end = 4.dp)
+                                .fillMaxWidth(),
+                        )
+                        Spacer(modifier = Modifier.height(10.dp))
+                        Text(
+                            text = item.html,
+                            color = MaterialTheme.colorScheme.primary,
+                            style = MaterialTheme.typography.labelMedium,
+                            textAlign = TextAlign.Start,
+                            modifier = Modifier
+                                .padding(start = 10.dp, bottom = 0.dp, end = 4.dp)
+                                .fillMaxWidth(),
+                        )
+                    }
+                }
+            }
+        }
+    }
 }
 
 @Composable
@@ -87,6 +219,7 @@ fun NotificationItemTV(item: Notification) {
         }
     }
 }
+
 @Preview
 @Composable
 fun NotificationItemPreview() {