Skip to content

Commit a918b29

Browse files
yogeshpaliyalyogeshpaliyal
committed
feat: changes to top app bar
1 parent d8c15c1 commit a918b29

File tree

6 files changed

+96
-73
lines changed

6 files changed

+96
-73
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.3.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/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/backupsImport/BackupImporter.kt

Lines changed: 17 additions & 32 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,
@@ -241,7 +226,7 @@ private fun ImportOptionCard(option: ImportOption, onClick: () -> Unit) {
241226
modifier = Modifier.size(28.dp)
242227
)
243228
}
244-
229+
245230
Column(
246231
modifier = Modifier
247232
.padding(start = 16.dp)
@@ -252,14 +237,14 @@ private fun ImportOptionCard(option: ImportOption, onClick: () -> Unit) {
252237
style = MaterialTheme.typography.titleMedium,
253238
fontWeight = FontWeight.SemiBold
254239
)
255-
240+
256241
Text(
257242
text = if (desc == null) "" else stringResource(id = desc),
258243
style = MaterialTheme.typography.bodyMedium,
259244
color = MaterialTheme.colorScheme.onSurfaceVariant
260245
)
261246
}
262-
247+
263248
Icon(
264249
imageVector = Icons.Filled.FileUpload,
265250
contentDescription = "Import",

‎app/src/main/java/com/yogeshpaliyal/keypass/ui/changePassword/ChangePassword.kt

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import androidx.compose.material3.OutlinedButton
3333
import androidx.compose.material3.Scaffold
3434
import androidx.compose.material3.Surface
3535
import androidx.compose.material3.Text
36+
import androidx.compose.material3.TopAppBarDefaults
3637
import androidx.compose.runtime.Composable
3738
import androidx.compose.runtime.derivedStateOf
3839
import androidx.compose.runtime.getValue
@@ -42,6 +43,7 @@ import androidx.compose.runtime.rememberCoroutineScope
4243
import androidx.compose.runtime.setValue
4344
import androidx.compose.ui.Alignment
4445
import androidx.compose.ui.Modifier
46+
import androidx.compose.ui.input.nestedscroll.nestedScroll
4547
import androidx.compose.ui.platform.LocalContext
4648
import androidx.compose.ui.res.painterResource
4749
import androidx.compose.ui.res.stringResource
@@ -54,6 +56,7 @@ import com.yogeshpaliyal.common.utils.setKeyPassPassword
5456
import com.yogeshpaliyal.keypass.R
5557
import com.yogeshpaliyal.keypass.ui.auth.components.PasswordInputField
5658
import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultBottomAppBar
59+
import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultTopAppBar
5760
import com.yogeshpaliyal.keypass.ui.nav.LocalUserSettings
5861
import com.yogeshpaliyal.keypass.ui.redux.actions.Action
5962
import com.yogeshpaliyal.keypass.ui.redux.actions.GoBackAction
@@ -98,11 +101,15 @@ fun ChangePassword(state: ChangeAppPasswordState) {
98101
}
99102

100103
var showInfoCard by remember { mutableStateOf(false) }
104+
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
101105

102106
Scaffold(
103-
bottomBar = {
104-
DefaultBottomAppBar(
107+
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
108+
topBar = {
109+
DefaultTopAppBar(
105110
showBackButton = true,
111+
title = R.string.change_app_password,
112+
scrollBehavior = scrollBehavior
106113
)
107114
}
108115
) { contentPadding ->
@@ -115,14 +122,6 @@ fun ChangePassword(state: ChangeAppPasswordState) {
115122
horizontalAlignment = Alignment.CenterHorizontally,
116123
verticalArrangement = Arrangement.spacedBy(16.dp)
117124
) {
118-
// Header section
119-
Text(
120-
text = stringResource(id = R.string.change_app_password),
121-
style = MaterialTheme.typography.headlineMedium,
122-
fontWeight = FontWeight.Bold,
123-
textAlign = TextAlign.Center
124-
)
125-
126125
Image(
127126
painter = painterResource(R.drawable.ic_undraw_unlock_24mb),
128127
contentDescription = "Change Password Illustration",
@@ -151,8 +150,7 @@ fun ChangePassword(state: ChangeAppPasswordState) {
151150
modifier = Modifier.fillMaxWidth(),
152151
colors = CardDefaults.cardColors(
153152
containerColor = MaterialTheme.colorScheme.secondaryContainer
154-
),
155-
shape = RoundedCornerShape(12.dp)
153+
)
156154
) {
157155
Column(
158156
modifier = Modifier.padding(16.dp)
@@ -177,10 +175,8 @@ fun ChangePassword(state: ChangeAppPasswordState) {
177175
}
178176

179177
// Password input fields in a card
180-
ElevatedCard(
181-
modifier = Modifier.fillMaxWidth(),
182-
elevation = CardDefaults.elevatedCardElevation(defaultElevation = 2.dp),
183-
shape = RoundedCornerShape(16.dp)
178+
Card(
179+
modifier = Modifier.fillMaxWidth()
184180
) {
185181
Column(
186182
modifier = Modifier

‎app/src/main/java/com/yogeshpaliyal/keypass/ui/commonComponents/DefaultTopAppBar.kt

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
package com.yogeshpaliyal.keypass.ui.commonComponents
2+
3+
import androidx.compose.foundation.layout.RowScope
4+
import androidx.compose.material.icons.Icons
5+
import androidx.compose.material.icons.rounded.ArrowBackIosNew
6+
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
7+
import androidx.compose.material3.Icon
8+
import androidx.compose.material3.IconButton
9+
import androidx.compose.material3.LargeFlexibleTopAppBar
10+
import androidx.compose.material3.MaterialTheme
11+
import androidx.compose.material3.Text
12+
import androidx.compose.material3.TopAppBarScrollBehavior
13+
import androidx.compose.runtime.Composable
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.graphics.vector.rememberVectorPainter
16+
import androidx.compose.ui.res.stringResource
17+
import com.yogeshpaliyal.keypass.ui.redux.actions.Action
18+
import com.yogeshpaliyal.keypass.ui.redux.actions.GoBackAction
19+
import org.reduxkotlin.compose.rememberTypedDispatcher
20+
21+
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
22+
@Composable
23+
fun DefaultTopAppBar(
24+
modifier: Modifier = Modifier,
25+
showBackButton: Boolean = true,
26+
extraAction: (@Composable RowScope.() -> Unit)? = null,
27+
title: Int,
28+
subtitle: Int? = null,
29+
scrollBehavior: TopAppBarScrollBehavior? = null,
30+
) {
31+
val dispatchAction = rememberTypedDispatcher<Action>()
32+
33+
LargeFlexibleTopAppBar(modifier = modifier, scrollBehavior = scrollBehavior, subtitle = {
34+
if (subtitle != null) {
35+
Text(
36+
text = stringResource(id = subtitle),
37+
)
38+
}
39+
}, title = {
40+
Text(
41+
text = stringResource(id = title),
42+
)
43+
44+
45+
}, actions = {
46+
extraAction?.invoke(this)
47+
}, navigationIcon = {
48+
if (showBackButton) {
49+
IconButton(onClick = {
50+
dispatchAction(GoBackAction)
51+
}) {
52+
Icon(
53+
painter = rememberVectorPainter(image = Icons.Rounded.ArrowBackIosNew),
54+
contentDescription = "Go Back",
55+
tint = MaterialTheme.colorScheme.onSurface
56+
)
57+
}
58+
}
59+
})
60+
}

‎app/src/main/java/com/yogeshpaliyal/keypass/ui/home/components/AccountsList.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ fun AccountsList(accounts: List<AccountModel>? = null) {
7171
) {
7272
items(it) { account ->
7373
Account(
74-
modifier = Modifier.animateItemPlacement(),
74+
modifier = Modifier,
7575
account,
7676
onClick = {
7777
dispatch(NavigationAction(AccountDetailState(it.id)))

0 commit comments

Comments
 (0)