From 22cdfc32c66fe1b8ebd5362c4c318e3f8cb34d7d Mon Sep 17 00:00:00 2001 From: Alberto Mac Date: Sat, 24 Aug 2024 01:43:24 +0100 Subject: ui changes --- .idea/.name | 1 + .idea/codeStyles/Project.xml | 123 ++++++++ .idea/codeStyles/codeStyleConfig.xml | 5 + .idea/deploymentTargetSelector.xml | 10 + .idea/gradle.xml | 5 +- .idea/migrations.xml | 10 + .idea/misc.xml | 1 - .idea/other.xml | 252 +++++++++++++++++ .idea/vcs.xml | 6 + app/build.gradle | 1 - .../presentation/activities/MainActivity.kt | 5 +- .../presentation/screens/BottomNavScreen.kt | 66 +++++ .../presentation/screens/CalculatorScreen.kt | 315 ++++++++++++--------- .../calculatorv2/presentation/ui/theme/Color.kt | 14 +- .../calculatorv2/presentation/ui/theme/Theme.kt | 26 +- .../pwc/calculatorv2/presentation/ui/theme/Type.kt | 33 +-- .../presentation/ui/widgets/BottomNav.kt | 85 ++++-- .../calculatorv2/presentation/ui/widgets/Button.kt | 187 ++++++++++++ app/src/main/res/drawable/dots.xml | 9 + app/src/main/res/drawable/erase.xml | 12 + app/src/main/res/drawable/undo.xml | 9 + app/src/main/res/font/roboto.xml | 15 + app/src/main/res/font/robotobold.ttf | Bin 0 -> 167336 bytes app/src/main/res/font/robotomedium.ttf | Bin 0 -> 168644 bytes app/src/main/res/font/robotoregular.ttf | Bin 0 -> 168260 bytes app/src/main/res/values/colors.xml | 1 + gradle/wrapper/gradle-wrapper.properties | 2 +- 27 files changed, 1002 insertions(+), 191 deletions(-) create mode 100644 .idea/.name create mode 100644 .idea/codeStyles/Project.xml create mode 100644 .idea/codeStyles/codeStyleConfig.xml create mode 100644 .idea/deploymentTargetSelector.xml create mode 100644 .idea/migrations.xml create mode 100644 .idea/other.xml create mode 100644 .idea/vcs.xml create mode 100644 app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/Button.kt create mode 100644 app/src/main/res/drawable/dots.xml create mode 100644 app/src/main/res/drawable/erase.xml create mode 100644 app/src/main/res/drawable/undo.xml create mode 100644 app/src/main/res/font/roboto.xml create mode 100644 app/src/main/res/font/robotobold.ttf create mode 100644 app/src/main/res/font/robotomedium.ttf create mode 100644 app/src/main/res/font/robotoregular.ttf diff --git a/.idea/.name b/.idea/.name new file mode 100644 index 0000000..da36277 --- /dev/null +++ b/.idea/.name @@ -0,0 +1 @@ +calculatorV2 \ No newline at end of file diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 0000000..7643783 --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,123 @@ + + + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..79ee123 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml new file mode 100644 index 0000000..b268ef3 --- /dev/null +++ b/.idea/deploymentTargetSelector.xml @@ -0,0 +1,10 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/gradle.xml b/.idea/gradle.xml index 02a60b0..0b0534c 100644 --- a/.idea/gradle.xml +++ b/.idea/gradle.xml @@ -4,16 +4,15 @@ diff --git a/.idea/migrations.xml b/.idea/migrations.xml new file mode 100644 index 0000000..f8051a6 --- /dev/null +++ b/.idea/migrations.xml @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml index 0ad17cb..8978d23 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -1,4 +1,3 @@ - diff --git a/.idea/other.xml b/.idea/other.xml new file mode 100644 index 0000000..4604c44 --- /dev/null +++ b/.idea/other.xml @@ -0,0 +1,252 @@ + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/app/build.gradle b/app/build.gradle index b4889d8..1bd0d0a 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -51,7 +51,6 @@ android { } dependencies { - implementation 'androidx.core:core-ktx:1.10.1' implementation platform('org.jetbrains.kotlin:kotlin-bom:1.8.0') implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1' diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/activities/MainActivity.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/activities/MainActivity.kt index 59a91f0..76dff27 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/activities/MainActivity.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/activities/MainActivity.kt @@ -9,6 +9,7 @@ import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import com.pwc.calculatorv2.presentation.screens.BottomNavScreen import com.pwc.calculatorv2.presentation.ui.theme.CalculatorV2Theme @@ -18,10 +19,8 @@ class MainActivity : ComponentActivity() { super.onCreate(savedInstanceState) setContent { CalculatorV2Theme { - // A surface container using the 'background' color from the theme Surface( - modifier = Modifier.fillMaxSize(), - color = MaterialTheme.colorScheme.background + modifier = Modifier.fillMaxSize() ) { BottomNavScreen() } diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/screens/BottomNavScreen.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/screens/BottomNavScreen.kt index 1f05318..2e69faa 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/screens/BottomNavScreen.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/screens/BottomNavScreen.kt @@ -1,7 +1,15 @@ package com.pwc.calculatorv2.presentation.screens +import androidx.compose.foundation.Canvas +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.text.BasicTextField import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold @@ -18,7 +26,16 @@ import com.pwc.calculatorv2.data.viewmodels.CalculatorViewModel import com.pwc.calculatorv2.presentation.navigation.AppScreens import com.pwc.calculatorv2.presentation.ui.widgets.BottomNav import androidx.compose.runtime.getValue +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Path +import androidx.compose.ui.graphics.Shadow +import androidx.compose.ui.graphics.drawscope.Fill import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp @OptIn(ExperimentalMaterial3Api::class) @Composable @@ -41,6 +58,55 @@ fun BottomNavScreen() { .padding(bottom = it.calculateBottomPadding()), color = MaterialTheme.colorScheme.background ) { + Column ( + modifier = Modifier.fillMaxSize() + ) { + Box ( + modifier = Modifier + .weight(1f) + .fillMaxWidth(.5f) + ){ + Canvas( + modifier = Modifier + .fillMaxSize() + ) { + val path = Path().apply { + moveTo(0f, 0f) // Top-left corner + lineTo(size.width, 0f) // Top-right corner + lineTo(0f, size.height) // Bottom-left corner + close() // Closes the path to form a triangle + } + + drawPath( + path = path, + color = Color(0xFF222222) , + style = Fill, + ) + } + BasicTextField(value = "ACV-1", + onValueChange = {}, + readOnly = true, // Makes the field non-writable + modifier = Modifier + .width(300.dp) + .padding(20.dp), + textStyle = TextStyle( + fontSize = 12.sp, + fontWeight = FontWeight.Medium, + color = MaterialTheme.colorScheme.secondary, // Using your theme's color for text + shadow = Shadow( + color = MaterialTheme.colorScheme.secondary.copy(alpha = 0.2f), // White glow with some transparency + blurRadius = 2f // Adjust the blur for the glow effect + ) + + ), + ) + } + Spacer( + modifier = Modifier + .fillMaxWidth() + .weight(2f) // Spacer takes the other half of the available height + ) + } NavHost( navController = bottomNavController, startDestination = AppScreens.CalculatorScreen.route diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/screens/CalculatorScreen.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/screens/CalculatorScreen.kt index 5cef814..a22cc31 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/screens/CalculatorScreen.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/screens/CalculatorScreen.kt @@ -1,31 +1,38 @@ package com.pwc.calculatorv2.presentation.screens import android.annotation.SuppressLint +import androidx.compose.animation.AnimatedVisibility 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.width -import androidx.compose.material3.Button +import androidx.compose.foundation.text.BasicTextField import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text -import androidx.compose.material3.TextField import androidx.compose.runtime.Composable import androidx.compose.runtime.MutableState import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Shadow import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import com.pwc.calculatorv2.R import com.pwc.calculatorv2.data.viewmodels.CalculatorViewModel -import com.pwc.calculatorv2.data.viewmodels.CalculatorViewState +import com.pwc.calculatorv2.presentation.ui.widgets.NeumorphicButton @SuppressLint("StateFlowValueCalledInComposition") @OptIn(ExperimentalMaterial3Api::class) @@ -34,189 +41,227 @@ fun CalculatorScreen( viewModel: CalculatorViewModel, ) { + val isVisible = remember { mutableStateOf(false) } val expression = remember { mutableStateOf("") } Box( modifier = Modifier .fillMaxSize(), - contentAlignment = Alignment.Center) + contentAlignment = Alignment.BottomCenter) { Column( - modifier = Modifier.width(width = 300.dp), - verticalArrangement = Arrangement.Center, + modifier = Modifier.width(width = 500.dp), + verticalArrangement = Arrangement.Bottom, horizontalAlignment = Alignment.CenterHorizontally ) { - TextField( - value = expression.value, - onValueChange = { expression.value = it }, - modifier = Modifier.width(300.dp), - textStyle = TextStyle(fontSize = 24.sp, textAlign = TextAlign.End) - ) - + BasicTextField(value = expression.value, + onValueChange = {expression.value = it}, + readOnly = true, // Makes the field non-writable + modifier = Modifier + .width(300.dp), + textStyle = TextStyle( + fontSize = 32.sp, + fontWeight = FontWeight.Medium, + color = MaterialTheme.colorScheme.onBackground, // Using your theme's color for text + textAlign = TextAlign.End, + shadow = Shadow( + color = Color.White.copy(alpha = 0.6f), // White glow with some transparency + blurRadius = 2f // Adjust the blur for the glow effect + ) + ), + ) Column( modifier = Modifier .padding(16.dp) - .width(300.dp) + .width(500.dp), + + verticalArrangement = Arrangement.Center ) { Row( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 0.dp), - horizontalArrangement = Arrangement.SpaceEvenly + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.Center ) { - Button( - onClick = { viewModel.calculatorViewState.value?.let { expression.value = viewModel.showLast() } }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "^", color = Color.Black) + NeumorphicButton( + text = "CE", + color = MaterialTheme.colorScheme.error, + textColor = MaterialTheme.colorScheme.onError, + backgroundColor = MaterialTheme.colorScheme.primary + ){ + clearExpression(expression) } - Button( - onClick = { appendToExpression(expression, " ( ") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "(", color = Color.Black) + NeumorphicButton( + text = "(", + color = MaterialTheme.colorScheme.secondary, + textColor = MaterialTheme.colorScheme.onSecondary, + ){ + appendToExpression(expression, " ( ") } - Button( - onClick = { appendToExpression(expression, " ) ") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = ")", color = Color.Black) + NeumorphicButton( + text = ")", + color = MaterialTheme.colorScheme.secondary, + textColor = MaterialTheme.colorScheme.onSecondary, + ){ + appendToExpression(expression, " ) ") } - Button( - onClick = { erase(expression) }, - modifier = Modifier.width(57.dp) - ) { - Text(text = "<", color = Color.Black) + NeumorphicButton( + text = "undo", + color = MaterialTheme.colorScheme.secondary, + textColor = MaterialTheme.colorScheme.onSecondary, + imageDrawable = R.drawable.undo, + ){ + viewModel.calculatorViewState.value?.let { expression.value = viewModel.showLast() } + } + NeumorphicButton( + text = "more", + color = MaterialTheme.colorScheme.secondary, + textColor = MaterialTheme.colorScheme.onSecondary, + imageDrawable = R.drawable.dots, + isMore = true + ){ + isVisible.value = !isVisible.value + } + } + AnimatedVisibility(visible = isVisible.value) { + Column { + Text( + text = "test", + fontWeight = FontWeight.Normal, + style = MaterialTheme.typography.bodyMedium, // Adjust this as needed + ) } } Row( - modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.SpaceEvenly + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 0.dp), + horizontalArrangement = Arrangement.Center ) { - Button( - onClick = { appendToExpression(expression, "7") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "7", color = Color.Black) + NeumorphicButton( + text = "erase", + color = MaterialTheme.colorScheme.secondary, + textColor = MaterialTheme.colorScheme.onSecondary, + imageDrawable = R.drawable.erase + ){ + erase(expression) + } + NeumorphicButton( + text = "*", + color = MaterialTheme.colorScheme.secondary, + textColor = MaterialTheme.colorScheme.onSecondary, + ){ + appendToExpression(expression, " * ") } - Button( - onClick = { appendToExpression(expression, "8") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "8", color = Color.Black) + NeumorphicButton( + text = "+", + color = MaterialTheme.colorScheme.secondary, + textColor = MaterialTheme.colorScheme.onSecondary, + ){ + appendToExpression(expression, " + ") } - Button( - onClick = { appendToExpression(expression, "9") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "9", color = Color.Black) + NeumorphicButton( + text = "-", + color = MaterialTheme.colorScheme.secondary, + textColor = MaterialTheme.colorScheme.onSecondary, + ){ + appendToExpression(expression, " - ") } - Button( - onClick = { appendToExpression(expression, " + ") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "+", color = Color.Black) + NeumorphicButton( + text = "/", + color = MaterialTheme.colorScheme.secondary, + textColor = MaterialTheme.colorScheme.onSecondary, + ){ + appendToExpression(expression, " / ") } } Row( modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.SpaceEvenly + horizontalArrangement = Arrangement.Center ) { - Button( - onClick = { appendToExpression(expression, "4") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "4", color = Color.Black) + NeumorphicButton( + text = "1" + ){ + appendToExpression(expression, "1") } - Button( - onClick = { appendToExpression(expression, "5") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "5", color = Color.Black) + NeumorphicButton( + text = "2" + ){ + appendToExpression(expression, "2") } - Button( - onClick = { appendToExpression(expression, "6") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "6", color = Color.Black) + NeumorphicButton( + text = "3" + ){ + appendToExpression(expression, "3") } - Button( - onClick = { appendToExpression(expression, " - ") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "-", color = Color.Black) + NeumorphicButton( + text = "4" + ){ + appendToExpression(expression, "4") + } + NeumorphicButton( + text = "5" + ){ + appendToExpression(expression, "5") } } Row( modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.SpaceEvenly + horizontalArrangement = Arrangement.Center ) { - Button( - onClick = { appendToExpression(expression, "1") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "1", color = Color.Black) + NeumorphicButton( + text = "6" + ){ + appendToExpression(expression, "6") + } + NeumorphicButton( + text = "7" + ){ + appendToExpression(expression, "7") } - Button( - onClick = { appendToExpression(expression, "2") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "2", color = Color.Black) + NeumorphicButton( + text = "8" + ){ + appendToExpression(expression, "8") } - Button( - onClick = { appendToExpression(expression, "3") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "3", color = Color.Black) + NeumorphicButton( + text = "9" + ){ + appendToExpression(expression, "9") } - Button( - onClick = { appendToExpression(expression, " * ") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "*", color = Color.Black) + NeumorphicButton( + text = "0" + ){ + appendToExpression(expression, "0") } } - Row( modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.SpaceEvenly + horizontalArrangement = Arrangement.Center ) { - Button( - onClick = { appendDotToExpression(expression) }, - modifier = Modifier.width(70.dp) - ) { - Text(text = ".", color = Color.Black) - } - Button( - onClick = { appendToExpression(expression, "0") }, - modifier = Modifier.width(75.dp) - ) { - Text(text = "0", color = Color.Black) - } - Button( - onClick = { viewModel.calculateResult(expression) }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "=", color = Color.Black) - } - Button( - onClick = { appendToExpression(expression, " / ") }, - modifier = Modifier.width(70.dp) - ) { - Text(text = "/", color = Color.Black) - } } - // Add more rows of buttons for other numbers and operators - Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) { - Button( - onClick = { clearExpression(expression) }, - modifier = Modifier.width(145.dp) - ) { - Text(text = "Clear", color = Color.Black) + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.Center + ) { + NeumorphicButton( + text = "=", + backgroundWidth = 266.dp, + buttonWidth = 240.dp, + color = MaterialTheme.colorScheme.tertiary, + textColor = MaterialTheme.colorScheme.onTertiary + ){ + viewModel.calculateResult(expression) + } + NeumorphicButton( + text = ".", + backgroundWidth = 114.dp, + alignment = Alignment.CenterEnd + ){ + appendDotToExpression(expression) } } } + Spacer(modifier = Modifier.height(30.dp)) } } } diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Color.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Color.kt index 47ec008..c5420b4 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Color.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Color.kt @@ -2,10 +2,12 @@ package com.pwc.calculatorv2.presentation.ui.theme import androidx.compose.ui.graphics.Color -val Purple80 = Color(0xFFD0BCFF) -val PurpleGrey80 = Color(0xFFCCC2DC) -val Pink80 = Color(0xFFEFB8C8) -val Purple40 = Color(0xFF6650a4) -val PurpleGrey40 = Color(0xFF625b71) -val Pink40 = Color(0xFF7D5260) \ No newline at end of file +val Dark = Color(0xFF1E1E1E) +val Clear = Color(0xFFEAE9E7) + +val ButtonsWhite = Color(0xFFD5D1CC) +val ButtonsGrey = Color(0xFF81807F) +val ButtonsRed = Color(0xFFD74626) +val TextWhite = Color(0xFFECEAE8) +val TextBlack = Color(0xFF181B1C) diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Theme.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Theme.kt index 5568c46..2655814 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Theme.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Theme.kt @@ -16,15 +16,27 @@ import androidx.compose.ui.platform.LocalView import androidx.core.view.WindowCompat private val DarkColorScheme = darkColorScheme( - primary = Purple80, - secondary = PurpleGrey80, - tertiary = Pink80 + primary = ButtonsWhite, + secondary = ButtonsGrey, + tertiary = ButtonsRed, + background = Dark, + onBackground = Clear, + onSurface = Clear, + onPrimary = TextBlack, + onSecondary = TextWhite, + onTertiary = TextWhite, ) private val LightColorScheme = lightColorScheme( - primary = Purple40, - secondary = PurpleGrey40, - tertiary = Pink40 + primary = ButtonsWhite, + secondary = ButtonsGrey, + tertiary = ButtonsRed, + background = Dark, + onBackground = Clear, + onPrimary = TextBlack, + onSecondary = TextWhite, + onTertiary = TextWhite, + onSurface = Clear, /* Other default colors to override background = Color(0xFFFFFBFE), @@ -41,7 +53,7 @@ private val LightColorScheme = lightColorScheme( fun CalculatorV2Theme( darkTheme: Boolean = isSystemInDarkTheme(), // Dynamic color is available on Android 12+ - dynamicColor: Boolean = true, + dynamicColor: Boolean = false, content: @Composable () -> Unit ) { val colorScheme = when { diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Type.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Type.kt index 424eda5..a92980f 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Type.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Type.kt @@ -2,33 +2,34 @@ package com.pwc.calculatorv2.presentation.ui.theme import androidx.compose.material3.Typography import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.Font import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.sp +import com.pwc.calculatorv2.R + +val robotoFamily = FontFamily( + Font(R.font.robotoregular, FontWeight.Normal), + Font(R.font.robotomedium, FontWeight.Medium), + Font(R.font.robotobold, FontWeight.Bold) +) -// Set of Material typography styles to start with val Typography = Typography( bodyLarge = TextStyle( - fontFamily = FontFamily.Default, + fontFamily = robotoFamily, fontWeight = FontWeight.Normal, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.5.sp - ) - /* Other default text styles to override - titleLarge = TextStyle( - fontFamily = FontFamily.Default, - fontWeight = FontWeight.Normal, - fontSize = 22.sp, - lineHeight = 28.sp, - letterSpacing = 0.sp ), - labelSmall = TextStyle( - fontFamily = FontFamily.Default, + bodyMedium = TextStyle( + fontFamily = robotoFamily, fontWeight = FontWeight.Medium, - fontSize = 11.sp, - lineHeight = 16.sp, - letterSpacing = 0.5.sp + fontSize = 14.sp + ), + bodySmall = TextStyle( + fontFamily = robotoFamily, + fontWeight = FontWeight.Bold, + fontSize = 12.sp ) - */ ) \ No newline at end of file diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/BottomNav.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/BottomNav.kt index 1ba2d4c..1cb79e1 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/BottomNav.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/BottomNav.kt @@ -1,32 +1,81 @@ package com.pwc.calculatorv2.presentation.ui.widgets +import androidx.compose.foundation.border +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.width import androidx.compose.runtime.Composable import androidx.compose.material.BottomNavigation -import androidx.compose.material.Button -import androidx.compose.material.Text -import androidx.compose.material.TopAppBar +import androidx.compose.material3.Button +import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import androidx.navigation.NavController import com.pwc.calculatorv2.presentation.navigation.AppScreens @Composable fun BottomNav(navController: NavController) { BottomNavigation( - + backgroundColor = MaterialTheme.colorScheme.tertiary, ) { - Button(onClick = { - navController.navigate(AppScreens.CalculatorScreen.route) - }) { - Text(text = "Calculator") - } - Button(onClick = { - navController.navigate(AppScreens.FunctionListScreen.route) - }) { - Text(text = "History") - } - Button(onClick = { - navController.navigate(AppScreens.WipeScreen.route) - }) { - Text(text = "Wipe") + Row ( + modifier = Modifier + .fillMaxSize(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceEvenly + ){ + Box( + modifier = Modifier + .height(40.dp) + .width(100.dp) + .clickable( + indication = null, // Remove the default highlight + interactionSource = remember { MutableInteractionSource() }, // Required for indication to work properly + onClick = { + navController.navigate(AppScreens.CalculatorScreen.route) + } + ), + contentAlignment = Alignment.Center + ) { + Text( + text = "Calculator", + fontSize = 16.sp, + color = MaterialTheme.colorScheme.onTertiary + ) + } + + Box( + modifier = Modifier + .height(40.dp) + .width(100.dp) + .clickable( + indication = null, // Remove the default highlight + interactionSource = remember { MutableInteractionSource() }, // Required for indication to work properly + onClick = { + navController.navigate(AppScreens.FunctionListScreen.route) + } + ), + contentAlignment = Alignment.Center + ) { + Text( + text = "Formulas", + fontSize = 16.sp, + color = MaterialTheme.colorScheme.onTertiary + ) + } } } } diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/Button.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/Button.kt new file mode 100644 index 0000000..f6abcb0 --- /dev/null +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/Button.kt @@ -0,0 +1,187 @@ +package com.pwc.calculatorv2.presentation.ui.widgets + +import android.graphics.drawable.AnimatedImageDrawable +import androidx.compose.animation.core.animateDpAsState +import androidx.compose.animation.core.animateIntAsState +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.offset +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.BlurredEdgeTreatment +import androidx.compose.ui.draw.blur +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.geometry.Size +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.ColorFilter +import androidx.compose.ui.graphics.RectangleShape +import androidx.compose.ui.graphics.lerp +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.IntOffset +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import kotlinx.coroutines.delay + + +@Composable +fun NeumorphicButton( + text: String, + color: Color = MaterialTheme.colorScheme.primary, + backgroundColor: Color? = null, + backgroundWidth: Dp = 76.dp, + textColor: Color = MaterialTheme.colorScheme.onPrimary, + buttonWidth: Dp = 50.dp, + buttonHeight: Dp = 50.dp, + alignment: Alignment = Alignment.Center, + fontSize: Int = 24, + isMenu: Boolean = false, + imageDrawable: Int? = null, + isMore: Boolean = false, + onClick: () -> Unit, +) { + val isPressed = remember { mutableStateOf(false) } + + val offset by animateIntAsState(targetValue = if (isPressed.value) 2 else 12) + val sizeReduction by animateIntAsState(targetValue = if (isPressed.value) 2 else 0) + val blur by animateDpAsState(targetValue = if (isPressed.value) 4.dp else 10.dp) + + LaunchedEffect(isPressed.value) { + if (isPressed.value) { + if(!isMore){ + delay(100) // Delay for 2 seconds + isPressed.value = false // Reset after delay + } + } + } + + + fun lightenOrDarkenColor(color: Color, factor: Float): Color { + return lerp(color, if (factor < 0) Color.Black else Color.White, kotlin.math.abs(factor)) + } + + val buttonShadeColor = if (color == MaterialTheme.colorScheme.error){ + color + } + else{ + lightenOrDarkenColor(color, -.1f) + } + val backgroundColorReal = backgroundColor ?: color + val clearShadeColor = lightenOrDarkenColor(backgroundColorReal, .3f) + val darkShadeColor = lightenOrDarkenColor(backgroundColorReal, -.3f) + + Box( + Modifier + .width(backgroundWidth) + .height(76.dp) + .fillMaxSize() + .padding(3.dp) + .background(backgroundColorReal, + shape = RoundedCornerShape(16.dp) // Same rounded shape for the background + ) + .clickable( + indication = null, // Remove the default highlight + interactionSource = remember { MutableInteractionSource() }, // Required for indication to work properly + onClick = { + if (isMore){ + isPressed.value = !isPressed.value + }else{ + isPressed.value = true + } + onClick() + }) + .padding( horizontal = if (isMenu) {0.dp}else{10.dp}) + , + contentAlignment = alignment, + ) { + Box( + Modifier + .width(buttonWidth - sizeReduction.dp) + .height(buttonHeight - sizeReduction.dp) + .offset { IntOffset(-offset, -offset) } + .blur(blur, edgeTreatment = BlurredEdgeTreatment.Unbounded) + .background(clearShadeColor, if (isMenu) RoundedCornerShape(12.dp) else CircleShape) + ) + + Box( + Modifier + .width(buttonWidth - sizeReduction.dp) + .height(buttonHeight - sizeReduction.dp) + .offset { IntOffset(offset, offset) } + .blur(blur, edgeTreatment = BlurredEdgeTreatment.Unbounded) + .background(darkShadeColor, if (isMenu) RoundedCornerShape(12.dp) else CircleShape) + ) + Box( + Modifier + .width(buttonWidth - sizeReduction.dp) + .height(buttonHeight - sizeReduction.dp) + .background( + brush = Brush.verticalGradient( + colors = listOf( + color, + buttonShadeColor + ) + ), + shape = if (isMenu) RoundedCornerShape(12.dp) else CircleShape, + ) + .border( + width = 1.dp, + shape = if (isMenu) RoundedCornerShape(12.dp) else CircleShape, + brush = if(buttonWidth == 50.dp) { + Brush.linearGradient( + colors = listOf( + clearShadeColor, + darkShadeColor, + ), + ) + }else { + Brush.verticalGradient( + colors = listOf( + clearShadeColor, + darkShadeColor, + ), + ) + } + ), + contentAlignment = Alignment.Center + ){ + if(imageDrawable == null){ + Text( + text = text, + fontWeight = FontWeight.Normal, + fontSize = (fontSize - sizeReduction).sp, // Ensure font doesn't shrink too much + color = textColor, + style = MaterialTheme.typography.bodyMedium, // Adjust this as needed + ) + }else{ + Image( + painter = painterResource(id = imageDrawable), + contentDescription = text, + modifier = Modifier + .height((25-sizeReduction).dp), + colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSecondary) + ) + } + } + } +} diff --git a/app/src/main/res/drawable/dots.xml b/app/src/main/res/drawable/dots.xml new file mode 100644 index 0000000..fd0fc01 --- /dev/null +++ b/app/src/main/res/drawable/dots.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/drawable/erase.xml b/app/src/main/res/drawable/erase.xml new file mode 100644 index 0000000..ff76ceb --- /dev/null +++ b/app/src/main/res/drawable/erase.xml @@ -0,0 +1,12 @@ + + + + diff --git a/app/src/main/res/drawable/undo.xml b/app/src/main/res/drawable/undo.xml new file mode 100644 index 0000000..d09d655 --- /dev/null +++ b/app/src/main/res/drawable/undo.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/font/roboto.xml b/app/src/main/res/font/roboto.xml new file mode 100644 index 0000000..4b45b8e --- /dev/null +++ b/app/src/main/res/font/roboto.xml @@ -0,0 +1,15 @@ + + + + + + \ No newline at end of file diff --git a/app/src/main/res/font/robotobold.ttf b/app/src/main/res/font/robotobold.ttf new file mode 100644 index 0000000..e64db79 Binary files /dev/null and b/app/src/main/res/font/robotobold.ttf differ diff --git a/app/src/main/res/font/robotomedium.ttf b/app/src/main/res/font/robotomedium.ttf new file mode 100644 index 0000000..0707e15 Binary files /dev/null and b/app/src/main/res/font/robotomedium.ttf differ diff --git a/app/src/main/res/font/robotoregular.ttf b/app/src/main/res/font/robotoregular.ttf new file mode 100644 index 0000000..2d116d9 Binary files /dev/null and b/app/src/main/res/font/robotoregular.ttf differ diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml index f8c6127..6c10930 100644 --- a/app/src/main/res/values/colors.xml +++ b/app/src/main/res/values/colors.xml @@ -7,4 +7,5 @@ #FF018786 #FF000000 #FFFFFFFF + #1e1e1e \ No newline at end of file diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties index b35a740..d6c013b 100644 --- a/gradle/wrapper/gradle-wrapper.properties +++ b/gradle/wrapper/gradle-wrapper.properties @@ -1,6 +1,6 @@ #Fri Jul 07 09:35:12 WEST 2023 distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-8.0-bin.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-bin.zip zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists -- cgit v1.2.3-54-g00ecf