From aab5bf2055f919a01dc137a0efe143def93b0c74 Mon Sep 17 00:00:00 2001 From: Alex Mumo Date: Sat, 30 Mar 2024 12:43:33 +0300 Subject: [PATCH 1/2] Add share screen design --- .../presentation/share/ShareScreen.kt | 52 ++++++++++++++++--- 1 file changed, 45 insertions(+), 7 deletions(-) diff --git a/presentation/src/main/java/com/alexmumo/presentation/share/ShareScreen.kt b/presentation/src/main/java/com/alexmumo/presentation/share/ShareScreen.kt index 4ef075b..37945b9 100644 --- a/presentation/src/main/java/com/alexmumo/presentation/share/ShareScreen.kt +++ b/presentation/src/main/java/com/alexmumo/presentation/share/ShareScreen.kt @@ -20,16 +20,21 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.material3.Button +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.OutlinedCard import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarDefaults.topAppBarColors 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.Modifier +import androidx.compose.ui.platform.testTag import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.navigation.NavController @@ -41,13 +46,22 @@ fun ShareScreen( ) { Scaffold( topBar = { - TopAppBar(title = { - Text(text = "Share") - }) + TopAppBar( + colors = topAppBarColors( + containerColor = MaterialTheme.colorScheme.primaryContainer, + titleContentColor = MaterialTheme.colorScheme.primary + ), + title = { + Text(text = "Share") + } + ) } ) { paddingValues -> Column( - modifier = Modifier.padding(paddingValues) + modifier = Modifier + .padding(paddingValues) + .padding(all = 4.dp) + .testTag("share_screen_test_tag") ) { val title by remember { mutableStateOf("") } val description by remember { mutableStateOf("") } @@ -56,27 +70,51 @@ fun ShareScreen( OutlinedTextField( value = title, onValueChange = {}, modifier = Modifier.fillMaxWidth(), - singleLine = true + singleLine = true, + placeholder = { + Text(text = "Title") + } ) Spacer(modifier = Modifier.height(4.dp)) OutlinedTextField( value = description, onValueChange = {}, modifier = Modifier.fillMaxWidth(), - singleLine = true, + maxLines = 3, + placeholder = { + Text(text = "Description") + } ) Spacer(modifier = Modifier.height(4.dp)) OutlinedTextField( value = date, onValueChange = {}, modifier = Modifier.fillMaxWidth(), - singleLine = true + singleLine = true, + placeholder = { + Text(text = "Location") + } ) Spacer(modifier = Modifier.height(4.dp)) + // Implement dropdown selector OutlinedTextField( value = author, onValueChange = {}, + placeholder = { Text(text = "Category") }, modifier = Modifier.fillMaxWidth(), singleLine = true ) Spacer(modifier = Modifier.height(4.dp)) + OutlinedCard( + modifier = Modifier.fillMaxWidth(), + + ) { + Text(text = "+") + } + Spacer(modifier = Modifier.height(4.dp)) + Button( + onClick = { /*TODO*/ }, + modifier = Modifier.fillMaxWidth() + ) { + Text(text = "Share") + } } } } From 01d4685aec887f267e658764f3a451ddd96cf1d8 Mon Sep 17 00:00:00 2001 From: Alex Mumo Date: Sun, 31 Mar 2024 11:20:14 +0300 Subject: [PATCH 2/2] Updated share screen design --- .../alexmumo/presentation/home/HomeScreen.kt | 21 ++-- .../presentation/share/ShareScreen.kt | 105 +++++++++++++++--- .../presentation/share/ShareScreenTest.kt | 19 +++- 3 files changed, 123 insertions(+), 22 deletions(-) diff --git a/presentation/src/main/java/com/alexmumo/presentation/home/HomeScreen.kt b/presentation/src/main/java/com/alexmumo/presentation/home/HomeScreen.kt index e0be44c..0c8b234 100644 --- a/presentation/src/main/java/com/alexmumo/presentation/home/HomeScreen.kt +++ b/presentation/src/main/java/com/alexmumo/presentation/home/HomeScreen.kt @@ -17,20 +17,23 @@ package com.alexmumo.presentation.home import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Add +import androidx.compose.material.icons.outlined.Share import androidx.compose.material3.ExtendedFloatingActionButton import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarDefaults.topAppBarColors import androidx.compose.runtime.Composable import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier import androidx.compose.ui.platform.testTag -import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontStyle +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.sp import androidx.hilt.navigation.compose.hiltViewModel @@ -48,15 +51,19 @@ fun HomeScreen( Scaffold( topBar = { TopAppBar( + modifier = Modifier.fillMaxWidth().testTag("title_test_tag"), title = { Text( "News App", fontSize = 20.sp, - fontFamily = FontFamily.Monospace, - fontStyle = FontStyle.Normal, - modifier = Modifier.testTag("title_test_tag") + fontWeight = FontWeight.Bold, + fontStyle = FontStyle.Normal ) - } + }, + colors = topAppBarColors( + containerColor = MaterialTheme.colorScheme.primaryContainer, + titleContentColor = MaterialTheme.colorScheme.primary + ) ) }, floatingActionButton = { @@ -66,7 +73,7 @@ fun HomeScreen( }, modifier = Modifier.testTag("share_fab_test_tag"), icon = { - Icon(Icons.Default.Add, contentDescription = null) + Icon(Icons.Outlined.Share, contentDescription = "share") }, text = { Text( diff --git a/presentation/src/main/java/com/alexmumo/presentation/share/ShareScreen.kt b/presentation/src/main/java/com/alexmumo/presentation/share/ShareScreen.kt index 37945b9..2a2a127 100644 --- a/presentation/src/main/java/com/alexmumo/presentation/share/ShareScreen.kt +++ b/presentation/src/main/java/com/alexmumo/presentation/share/ShareScreen.kt @@ -15,14 +15,26 @@ */ package com.alexmumo.presentation.share +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column 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.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.ArrowDropDown import androidx.compose.material3.Button +import androidx.compose.material3.Card +import androidx.compose.material3.CardDefaults +import androidx.compose.material3.DropdownMenu +import androidx.compose.material3.DropdownMenuItem +import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.OutlinedCard import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Scaffold import androidx.compose.material3.Text @@ -33,10 +45,20 @@ 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.geometry.Size +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.layout.onGloballyPositioned +import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.platform.testTag +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.text.font.FontStyle +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import androidx.compose.ui.unit.toSize import androidx.navigation.NavController import androidx.navigation.compose.rememberNavController @@ -47,12 +69,18 @@ fun ShareScreen( Scaffold( topBar = { TopAppBar( + modifier = Modifier.testTag("top_bar_test_tag"), colors = topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary ), title = { - Text(text = "Share") + Text( + text = "Share", + fontWeight = FontWeight.Bold, + fontStyle = FontStyle.Normal, + fontSize = 18.sp + ) } ) } @@ -94,24 +122,73 @@ fun ShareScreen( } ) Spacer(modifier = Modifier.height(4.dp)) - // Implement dropdown selector - OutlinedTextField( - value = author, onValueChange = {}, - placeholder = { Text(text = "Category") }, - modifier = Modifier.fillMaxWidth(), - singleLine = true - ) - Spacer(modifier = Modifier.height(4.dp)) - OutlinedCard( - modifier = Modifier.fillMaxWidth(), + var selectedCategory by remember { mutableStateOf("") } + var expanded by remember { mutableStateOf(false) } + var categories = listOf("Technology", "Sports", "Health", "Others", "Education") + var textField by remember { + mutableStateOf(androidx.compose.ui.geometry.Size.Zero) + } + val icon = if (expanded) + Icons.Filled.ArrowDropDown + else + Icons.Filled.ArrowDropDown + + Box { + OutlinedTextField( + value = selectedCategory, + onValueChange = { selectedCategory = it }, + placeholder = { Text(text = "Category") }, + singleLine = true, + modifier = Modifier + .fillMaxWidth() + .onGloballyPositioned { layoutCoordinates -> + textField = layoutCoordinates.size.toSize() + }, + trailingIcon = { + Icon(icon, contentDescription = "Image", Modifier.clickable { expanded = !expanded }) + } + ) + DropdownMenu( + expanded = expanded, onDismissRequest = { expanded = false }, + modifier = Modifier.width(with(LocalDensity.current) { textField.width.toDp() }) + ) { + categories.forEach { category -> + DropdownMenuItem(text = { + Text(text = category) + }, onClick = { selectedCategory = category }) + } + } + } + Spacer(modifier = Modifier.height(4.dp)) + Card( + modifier = Modifier + .fillMaxWidth() + .height(60.dp), + shape = RoundedCornerShape(4.dp), + elevation = CardDefaults.elevatedCardElevation(10.dp), + colors = CardDefaults.cardColors( + contentColor = Color.LightGray + ) ) { - Text(text = "+") + Column( + modifier = Modifier.fillMaxSize(), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + ) { + Text( + text = "+", + fontSize = 18.sp, + fontFamily = FontFamily.SansSerif, + fontStyle = FontStyle.Normal, + color = MaterialTheme.colorScheme.onBackground + ) + } } Spacer(modifier = Modifier.height(4.dp)) Button( onClick = { /*TODO*/ }, - modifier = Modifier.fillMaxWidth() + modifier = Modifier.fillMaxWidth().testTag("share_test_tag") ) { Text(text = "Share") } diff --git a/presentation/src/test/java/com/alexmumo/presentation/share/ShareScreenTest.kt b/presentation/src/test/java/com/alexmumo/presentation/share/ShareScreenTest.kt index cd2092c..fde07e1 100644 --- a/presentation/src/test/java/com/alexmumo/presentation/share/ShareScreenTest.kt +++ b/presentation/src/test/java/com/alexmumo/presentation/share/ShareScreenTest.kt @@ -15,4 +15,21 @@ */ package com.alexmumo.presentation.share -class ShareScreenTest +import androidx.compose.ui.test.junit4.createComposeRule +import org.junit.Before +import org.junit.Rule +import org.junit.runner.RunWith +import org.robolectric.RobolectricTestRunner +import org.robolectric.shadows.ShadowLog + +@RunWith(RobolectricTestRunner::class) +class ShareScreenTest { + + @get:Rule + val composeRule = createComposeRule() + + @Before + fun setUp() { + ShadowLog.stream = System.out + } +}