Skip to content

Commit 79fc9b8

Browse files
yogeshpaliyalyogeshpaliyal
authored
Merge pull request #1192 from yogeshpaliyal/material3Expressive
Improve UI and UX for App
2 parents 99866f1 + 7ae95ac commit 79fc9b8

28 files changed

+325
-290
lines changed

‎app/build.gradle.kts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,9 @@ dependencies {
130130
implementation(Deps.Lifecycle.runtimeCompose)
131131
implementation("androidx.navigation:navigation-compose:2.9.0")
132132

133-
implementation("androidx.compose.material3:material3:1.2.1")
133+
implementation("androidx.compose.material3:material3:1.4.0-alpha14")
134+
implementation("androidx.compose.material3:material3-android:1.4.0-alpha14")
135+
134136
implementation("com.google.accompanist:accompanist-themeadapter-material3:0.36.0")
135137

136138
implementation("androidx.appcompat:appcompat:1.7.0")

‎app/src/main/java/com/yogeshpaliyal/keypass/MyApplication.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ class MyApplication : CommonMyApplication() {
1717

1818
private var timeToLaunchActivity : Long? = null
1919

20-
fun activityLaunchTriggered() {
20+
fun knownActivityLaunchTriggered() {
2121
timeToLaunchActivity = SystemClock.uptimeMillis()
2222
}
2323

24-
fun isActivityLaunchTriggered() : Boolean {
24+
fun isKnownActivityLaunchTriggered() : Boolean {
2525
val mTimeToLaunchActivity = timeToLaunchActivity ?: return false
2626
timeToLaunchActivity = null
2727
return SystemClock.uptimeMillis() - mTimeToLaunchActivity < 1000

‎app/src/main/java/com/yogeshpaliyal/keypass/ui/about/AboutScreen.kt‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,13 @@ import androidx.compose.material3.MaterialTheme
3030
import androidx.compose.material3.Scaffold
3131
import androidx.compose.material3.Surface
3232
import androidx.compose.material3.Text
33+
import androidx.compose.material3.TopAppBarDefaults
3334
import androidx.compose.runtime.Composable
3435
import androidx.compose.ui.Alignment
3536
import androidx.compose.ui.Modifier
3637
import androidx.compose.ui.draw.clip
3738
import androidx.compose.ui.graphics.vector.rememberVectorPainter
39+
import androidx.compose.ui.input.nestedscroll.nestedScroll
3840
import androidx.compose.ui.platform.LocalContext
3941
import androidx.compose.ui.res.painterResource
4042
import androidx.compose.ui.res.stringResource
@@ -47,22 +49,20 @@ import com.yogeshpaliyal.common.utils.openLink
4749
import com.yogeshpaliyal.keypass.BuildConfig
4850
import com.yogeshpaliyal.keypass.R
4951
import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultBottomAppBar
52+
import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultTopAppBar
5053
import com.yogeshpaliyal.keypass.ui.commonComponents.PreferenceItem
5154
import com.yogeshpaliyal.keypass.ui.redux.actions.Action
5255
import com.yogeshpaliyal.keypass.ui.redux.actions.GoBackAction
5356
import org.reduxkotlin.compose.rememberTypedDispatcher
5457

5558
@Composable
5659
fun AboutScreen() {
57-
val dispatchAction = rememberTypedDispatcher<Action>()
58-
60+
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
5961
Scaffold(
60-
bottomBar = {
61-
// Add back button to bottom bar
62-
DefaultBottomAppBar(
63-
showBackButton = true
64-
)
65-
}
62+
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
63+
topBar = {
64+
DefaultTopAppBar(title = R.string.app_name, scrollBehavior = scrollBehavior)
65+
},
6666
) { contentPadding ->
6767
Surface(
6868
modifier = Modifier
@@ -98,9 +98,11 @@ private fun MainContent() {
9898
horizontalAlignment = Alignment.CenterHorizontally
9999
) {
100100
// App Info Card
101-
ElevatedCard(
101+
Card(
102102
modifier = Modifier.fillMaxWidth(),
103-
elevation = CardDefaults.elevatedCardElevation(defaultElevation = 2.dp),
103+
colors = CardDefaults.cardColors(
104+
containerColor = MaterialTheme.colorScheme.surfaceContainerLow
105+
),
104106
shape = RoundedCornerShape(16.dp)
105107
) {
106108
Column(
@@ -124,13 +126,13 @@ private fun MainContent() {
124126

125127
Spacer(modifier = Modifier.height(16.dp))
126128

127-
// App Name
128-
Text(
129-
text = stringResource(id = R.string.app_name),
130-
style = MaterialTheme.typography.headlineMedium,
131-
fontWeight = FontWeight.Bold,
132-
color = MaterialTheme.colorScheme.primary
133-
)
129+
// // App Name
130+
// Text(
131+
// text = stringResource(id = R.string.app_name),
132+
// style = MaterialTheme.typography.headlineMedium,
133+
// fontWeight = FontWeight.Bold,
134+
// color = MaterialTheme.colorScheme.primary
135+
// )
134136

135137
Spacer(modifier = Modifier.height(4.dp))
136138

@@ -203,9 +205,11 @@ private fun MainContent() {
203205
textAlign = TextAlign.Start
204206
)
205207

206-
ElevatedCard(
208+
Card(
207209
modifier = Modifier.fillMaxWidth(),
208-
elevation = CardDefaults.elevatedCardElevation(defaultElevation = 2.dp),
210+
colors = CardDefaults.cardColors(
211+
containerColor = MaterialTheme.colorScheme.surfaceContainerLow
212+
),
209213
shape = RoundedCornerShape(16.dp)
210214
) {
211215
Column(modifier = Modifier.fillMaxWidth()) {

‎app/src/main/java/com/yogeshpaliyal/keypass/ui/backup/BackupScreen.kt‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import com.yogeshpaliyal.keypass.R
4040
import com.yogeshpaliyal.keypass.ui.backup.components.BackSettingOptions
4141
import com.yogeshpaliyal.keypass.ui.backup.components.BackupDialogs
4242
import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultBottomAppBar
43+
import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultTopAppBar
4344
import com.yogeshpaliyal.keypass.ui.nav.LocalUserSettings
4445
import com.yogeshpaliyal.keypass.ui.redux.actions.Action
4546
import com.yogeshpaliyal.keypass.ui.redux.actions.GoBackAction
@@ -131,10 +132,8 @@ fun BackupScreen(state: BackupScreenState) {
131132
)
132133
})
133134

134-
Scaffold(bottomBar = {
135-
DefaultBottomAppBar(
136-
showBackButton = true,
137-
)
135+
Scaffold(topBar = {
136+
DefaultTopAppBar(showBackButton = true, title = R.string.credentials_backups, subtitle = R.string.backup_screen_desc)
138137
}) { contentPadding ->
139138
Surface(modifier = Modifier.padding(contentPadding).fillMaxSize()) {
140139
Column(
@@ -143,25 +142,6 @@ fun BackupScreen(state: BackupScreenState) {
143142
.verticalScroll(rememberScrollState())
144143
.padding(16.dp),
145144
) {
146-
// Header Section
147-
148-
Text(
149-
text = stringResource(id = R.string.credentials_backups),
150-
style = MaterialTheme.typography.headlineMedium,
151-
fontWeight = FontWeight.Bold,
152-
textAlign = TextAlign.Start
153-
)
154-
155-
Spacer(modifier = Modifier.height(8.dp))
156-
157-
Text(
158-
text = stringResource(id = R.string.backup_screen_desc), // New string for description
159-
style = MaterialTheme.typography.bodyLarge,
160-
textAlign = TextAlign.Start,
161-
color = MaterialTheme.colorScheme.onSurfaceVariant
162-
)
163-
164-
Spacer(modifier = Modifier.height(24.dp))
165145

166146
// Backup Settings Options
167147
BackSettingOptions(state, updatedState = {

‎app/src/main/java/com/yogeshpaliyal/keypass/ui/backup/KeyPassBackupDirectoryPick.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ class KeyPassBackupDirectoryPick : ActivityResultContracts.OpenDocument() {
1515
Intent.FLAG_GRANT_WRITE_URI_PERMISSION or
1616
Intent.FLAG_GRANT_READ_URI_PERMISSION
1717
)
18-
(context.applicationContext as? MyApplication)?.activityLaunchTriggered()
18+
(context.applicationContext as? MyApplication)?.knownActivityLaunchTriggered()
1919
return intent
2020
}
2121

‎app/src/main/java/com/yogeshpaliyal/keypass/ui/backupsImport/BackupImporter.kt‎

Lines changed: 21 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ package com.yogeshpaliyal.keypass.ui.backupsImport
22

33
import android.net.Uri
44
import androidx.activity.compose.rememberLauncherForActivityResult
5-
import androidx.compose.foundation.Image
65
import androidx.compose.foundation.background
76
import androidx.compose.foundation.layout.Box
87
import androidx.compose.foundation.layout.Column
@@ -39,7 +38,6 @@ import androidx.compose.ui.Alignment
3938
import androidx.compose.ui.Modifier
4039
import androidx.compose.ui.draw.clip
4140
import androidx.compose.ui.graphics.vector.ImageVector
42-
import androidx.compose.ui.res.painterResource
4341
import androidx.compose.ui.res.stringResource
4442
import androidx.compose.ui.text.font.FontWeight
4543
import androidx.compose.ui.text.style.TextAlign
@@ -52,6 +50,7 @@ import com.yogeshpaliyal.keypass.importer.ChromeAccountImporter
5250
import com.yogeshpaliyal.keypass.importer.KeePassAccountImporter
5351
import com.yogeshpaliyal.keypass.importer.KeyPassAccountImporter
5452
import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultBottomAppBar
53+
import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultTopAppBar
5554
import com.yogeshpaliyal.keypass.ui.home.DashboardViewModel
5655
import com.yogeshpaliyal.keypass.ui.redux.actions.Action
5756
import com.yogeshpaliyal.keypass.ui.redux.actions.StateUpdateAction
@@ -129,20 +128,24 @@ fun BackupImporter(state: BackupImporterState, mViewModel: DashboardViewModel =
129128
})
130129

131130
result?.let {
132-
state.selectedImported?.readFileGetAction(result)?.let { it1 ->
131+
state.selectedImported?.readFileGetAction(result)?.let { it1 ->
133132
isLoading = false
134-
dispatchAction(it1)
133+
dispatchAction(it1)
135134
}
136135
}
137136

138137
Scaffold(
139-
bottomBar = {
140-
DefaultBottomAppBar(
141-
showBackButton = true
138+
topBar = {
139+
DefaultTopAppBar(
140+
showBackButton = true,
141+
title = R.string.restore_credentials,
142+
subtitle = R.string.restore_credentials_desc
142143
)
143144
}
144145
) { paddingValues ->
145-
Box(modifier = Modifier.padding(paddingValues).fillMaxSize()) {
146+
Box(modifier = Modifier
147+
.padding(paddingValues)
148+
.fillMaxSize()) {
146149
if (isLoading) {
147150
CircularProgressIndicator(
148151
modifier = Modifier.align(Alignment.Center)
@@ -157,25 +160,7 @@ fun BackupImporter(state: BackupImporterState, mViewModel: DashboardViewModel =
157160
Column(
158161
modifier = Modifier.fillMaxWidth(),
159162
) {
160-
161-
Text(
162-
text = stringResource(id = R.string.restore_credentials),
163-
style = MaterialTheme.typography.headlineMedium,
164-
fontWeight = FontWeight.Bold,
165-
textAlign = TextAlign.Start
166-
)
167-
168-
Spacer(modifier = Modifier.height(8.dp))
169-
170-
Text(
171-
text = stringResource(id = R.string.restore_credentials_desc),
172-
style = MaterialTheme.typography.bodyLarge,
173-
textAlign = TextAlign.Start,
174-
color = MaterialTheme.colorScheme.onSurfaceVariant
175-
)
176-
177-
Spacer(modifier = Modifier.height(24.dp))
178-
163+
179164
// Info card
180165
Card(
181166
modifier = Modifier.fillMaxWidth(),
@@ -190,11 +175,11 @@ fun BackupImporter(state: BackupImporterState, mViewModel: DashboardViewModel =
190175
color = MaterialTheme.colorScheme.onSecondaryContainer
191176
)
192177
}
193-
178+
194179
Spacer(modifier = Modifier.height(16.dp))
195180
}
196181
}
197-
182+
198183
items(importOptions) { option ->
199184
ImportOptionCard(
200185
option = option,
@@ -212,11 +197,13 @@ fun BackupImporter(state: BackupImporterState, mViewModel: DashboardViewModel =
212197
@Composable
213198
private fun ImportOptionCard(option: ImportOption, onClick: () -> Unit) {
214199
val desc = option.importer.getImporterDesc()
215-
ElevatedCard(
200+
Card(
216201
modifier = Modifier
217202
.fillMaxWidth()
218203
.padding(vertical = 8.dp),
219-
elevation = CardDefaults.elevatedCardElevation(defaultElevation = 1.dp),
204+
colors = CardDefaults.cardColors(
205+
containerColor = MaterialTheme.colorScheme.surfaceContainerLow
206+
),
220207
onClick = onClick,
221208
shape = RoundedCornerShape(12.dp)
222209
) {
@@ -241,7 +228,7 @@ private fun ImportOptionCard(option: ImportOption, onClick: () -> Unit) {
241228
modifier = Modifier.size(28.dp)
242229
)
243230
}
244-
231+
245232
Column(
246233
modifier = Modifier
247234
.padding(start = 16.dp)
@@ -252,14 +239,14 @@ private fun ImportOptionCard(option: ImportOption, onClick: () -> Unit) {
252239
style = MaterialTheme.typography.titleMedium,
253240
fontWeight = FontWeight.SemiBold
254241
)
255-
242+
256243
Text(
257244
text = if (desc == null) "" else stringResource(id = desc),
258245
style = MaterialTheme.typography.bodyMedium,
259246
color = MaterialTheme.colorScheme.onSurfaceVariant
260247
)
261248
}
262-
249+
263250
Icon(
264251
imageVector = Icons.Filled.FileUpload,
265252
contentDescription = "Import",

0 commit comments

Comments
 (0)