Skip to content

Commit e7a995e

Browse files
JahidHasanCOJahidHasanCO
committed
Enhance UI and add real-time diff functionality
This commit introduces several UI improvements and a new real-time diff feature to the `DiffCheckerScreen`. Key changes: - **UI Enhancements (`DiffCheckerScreen.kt`):** - Implemented a `Scaffold` with a `TopAppBar` displaying the app title "Diffly". - Replaced standard `TextField`s with `OutlinedTextField`s for a modern look. - Text fields now have labels ("Original Text", "Changed Text") and rounded corners. - Customized text field colors for focused/unfocused states. - Updated the "Compare" button text to "Find Difference" and applied custom styling (primary color background, rounded corners). - Styled the "Real-time Diff" switch and its label. - **Real-Time Diff Functionality (`DiffCheckerScreen.kt`):** - Added a `Switch` to toggle real-time diffing. - When real-time diff is enabled, `viewModel.calculateDiff` is called automatically as the user types in either text field. - The "Find Difference" button is hidden when real-time diff is active. - **Component Update (`CharDiffText.kt`):** - Changed "Old Text" label to "Original Text" and "New Text" to "Changed Text" for consistency with the input field labels.
1 parent af38b58 commit e7a995e

2 files changed

Lines changed: 146 additions & 31 deletions

File tree

‎app/src/main/java/dev/jahidhasanco/diffly/presentation/component/CharDiffText.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ fun CharDiffText(diffResult: List<DiffEntry>) {
3939
) {
4040
item {
4141
Text(
42-
"Old Text",
42+
"Original Text",
4343
modifier = Modifier.padding(8.dp),
4444
style = MaterialTheme.typography.titleMedium
4545
)
@@ -86,7 +86,7 @@ fun CharDiffText(diffResult: List<DiffEntry>) {
8686
) {
8787
item {
8888
Text(
89-
"New Text",
89+
"Changed Text",
9090
modifier = Modifier.padding(8.dp),
9191
style = MaterialTheme.typography.titleMedium
9292
)

‎app/src/main/java/dev/jahidhasanco/diffly/presentation/screen/DiffCheckerScreen.kt‎

Lines changed: 144 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
11
package dev.jahidhasanco.diffly.presentation.screen
22

3+
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.layout.Arrangement
36
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.Row
48
import androidx.compose.foundation.layout.Spacer
59
import androidx.compose.foundation.layout.fillMaxSize
610
import androidx.compose.foundation.layout.fillMaxWidth
711
import androidx.compose.foundation.layout.height
812
import androidx.compose.foundation.layout.padding
13+
import androidx.compose.foundation.shape.RoundedCornerShape
914
import androidx.compose.material3.Button
15+
import androidx.compose.material3.ButtonDefaults
16+
import androidx.compose.material3.ExperimentalMaterial3Api
17+
import androidx.compose.material3.MaterialTheme
18+
import androidx.compose.material3.OutlinedTextField
19+
import androidx.compose.material3.Scaffold
20+
import androidx.compose.material3.Switch
21+
import androidx.compose.material3.SwitchDefaults
1022
import androidx.compose.material3.Text
11-
import androidx.compose.material3.TextField
23+
import androidx.compose.material3.TextFieldDefaults
24+
import androidx.compose.material3.TopAppBar
1225
import androidx.compose.runtime.Composable
1326
import androidx.compose.runtime.collectAsState
1427
import androidx.compose.runtime.getValue
@@ -17,52 +30,154 @@ import androidx.compose.runtime.remember
1730
import androidx.compose.runtime.setValue
1831
import androidx.compose.ui.Alignment
1932
import androidx.compose.ui.Modifier
33+
import androidx.compose.ui.graphics.Color
2034
import androidx.compose.ui.unit.dp
2135
import dev.jahidhasanco.diffly.presentation.MainViewModel
2236
import dev.jahidhasanco.diffly.presentation.component.CharDiffText
37+
import dev.jahidhasanco.diffly.presentation.theme.background
38+
import dev.jahidhasanco.diffly.presentation.theme.primary
2339

40+
@OptIn(ExperimentalMaterial3Api::class)
2441
@Composable
2542
fun DiffCheckerScreen(viewModel: MainViewModel) {
2643
var oldText by remember { mutableStateOf("") }
2744
var newText by remember { mutableStateOf("") }
2845
val diffResult by viewModel.diffResult.collectAsState()
46+
var realTimeDiff by remember { mutableStateOf(false) }
2947

30-
Column(
48+
Scaffold(
3149
modifier = Modifier
3250
.fillMaxSize()
33-
.padding(16.dp)
34-
) {
35-
Text("Old Text")
36-
TextField(
37-
value = oldText,
38-
onValueChange = { oldText = it },
51+
.background(background),
52+
topBar = {
53+
TopAppBar(
54+
title = { Text("Diffly") },
55+
)
56+
}) { innerPadding ->
57+
Column(
3958
modifier = Modifier
40-
.fillMaxWidth()
41-
.height(150.dp)
42-
)
59+
.padding(innerPadding)
60+
.padding(16.dp)
61+
.fillMaxSize()
62+
) {
63+
Row(
64+
verticalAlignment = Alignment.CenterVertically,
65+
horizontalArrangement = Arrangement.Center,
66+
modifier = Modifier.padding(bottom = 8.dp)
67+
) {
68+
Text(
69+
text = "Real-time Diff",
70+
style = MaterialTheme.typography.titleMedium,
71+
color = if (realTimeDiff) primary else Color.Gray,
72+
modifier = Modifier.padding(end = 8.dp)
73+
)
74+
Switch(
75+
checked = realTimeDiff,
76+
onCheckedChange = { realTimeDiff = it },
77+
colors = SwitchDefaults.colors(
78+
checkedThumbColor = primary,
79+
uncheckedThumbColor = Color.Gray,
80+
checkedTrackColor = primary.copy(alpha = 0.3f),
81+
uncheckedTrackColor = Color.LightGray
82+
)
83+
)
84+
}
4385

44-
Spacer(modifier = Modifier.height(8.dp))
86+
OutlinedTextField(
87+
value = oldText,
88+
onValueChange = {
89+
oldText = it
90+
if (realTimeDiff) {
91+
viewModel.calculateDiff(oldText, newText)
92+
}
93+
},
94+
label = {
95+
Text(
96+
"Original Text",
97+
style = MaterialTheme.typography.titleSmall
98+
)
99+
},
100+
modifier = Modifier
101+
.fillMaxWidth()
102+
.height(150.dp)
103+
.background(
104+
color = Color.White, shape = RoundedCornerShape(8.dp)
105+
),
45106

46-
Text("New Text")
47-
TextField(
48-
value = newText,
49-
onValueChange = { newText = it },
50-
modifier = Modifier
51-
.fillMaxWidth()
52-
.height(150.dp)
53-
)
107+
shape = RoundedCornerShape(8.dp),
108+
colors = TextFieldDefaults.colors(
109+
focusedIndicatorColor = primary,
110+
unfocusedIndicatorColor = Color.Transparent,
111+
focusedContainerColor = Color.Transparent,
112+
unfocusedContainerColor = Color.Transparent,
113+
focusedLabelColor = primary,
114+
unfocusedLabelColor = Color.Gray,
115+
focusedTextColor = Color.Black,
116+
unfocusedTextColor = Color.Black
117+
),
54118

55-
Spacer(modifier = Modifier.height(16.dp))
119+
maxLines = Int.MAX_VALUE,
120+
singleLine = false
121+
)
56122

57-
Button(
58-
onClick = { viewModel.calculateDiff(oldText, newText) },
59-
modifier = Modifier.align(Alignment.CenterHorizontally)
60-
) {
61-
Text("Compare")
62-
}
123+
Spacer(modifier = Modifier.height(8.dp))
124+
OutlinedTextField(
125+
value = newText, onValueChange = {
126+
newText = it
127+
if (realTimeDiff) {
128+
viewModel.calculateDiff(oldText, newText)
129+
}
130+
}, modifier = Modifier
131+
.fillMaxWidth()
132+
.height(150.dp)
133+
.background(
134+
color = Color.White, shape = RoundedCornerShape(8.dp)
135+
),
63136

64-
Spacer(modifier = Modifier.height(16.dp))
137+
shape = RoundedCornerShape(8.dp), label = {
138+
Text(
139+
"Changed Text",
140+
style = MaterialTheme.typography.titleSmall
141+
)
142+
}, colors = TextFieldDefaults.colors(
143+
focusedIndicatorColor = primary,
144+
unfocusedIndicatorColor = Color.Transparent,
145+
focusedContainerColor = Color.Transparent,
146+
unfocusedContainerColor = Color.Transparent,
147+
focusedLabelColor = primary,
148+
unfocusedLabelColor = Color.Gray,
149+
focusedTextColor = Color.Black,
150+
unfocusedTextColor = Color.Black
151+
),
65152

66-
CharDiffText(diffResult)
153+
maxLines = Int.MAX_VALUE, singleLine = false
154+
)
155+
156+
Spacer(modifier = Modifier.height(16.dp))
157+
158+
if (!realTimeDiff) Button(
159+
onClick = { viewModel.calculateDiff(oldText, newText) },
160+
modifier = Modifier
161+
.align(Alignment.CenterHorizontally)
162+
.padding(vertical = 16.dp)
163+
.fillMaxWidth(0.6f),
164+
shape = RoundedCornerShape(8.dp),
165+
colors = ButtonDefaults.buttonColors(
166+
containerColor = primary, contentColor = Color.White
167+
),
168+
elevation = ButtonDefaults.buttonElevation(
169+
defaultElevation = 0.dp,
170+
pressedElevation = 0.dp,
171+
focusedElevation = 0.dp,
172+
hoveredElevation = 0.dp
173+
)
174+
) {
175+
Text("Find Difference")
176+
}
177+
178+
Spacer(modifier = Modifier.height(16.dp))
179+
180+
CharDiffText(diffResult)
181+
}
67182
}
68183
}

0 commit comments

Comments
 (0)