@@ -25,6 +25,7 @@ import androidx.compose.foundation.layout.height
2525import androidx.compose.foundation.layout.offset
2626import androidx.compose.foundation.layout.padding
2727import androidx.compose.foundation.layout.size
28+ import androidx.compose.foundation.layout.statusBarsPadding
2829import androidx.compose.foundation.layout.width
2930import androidx.compose.foundation.shape.CircleShape
3031import androidx.compose.foundation.shape.RoundedCornerShape
@@ -91,14 +92,14 @@ data class ConversationListTopBarState(
9192
9293@Suppress(" LongParameterList" )
9394data class ConversationListTopBarActions (
94- val onSearchQueryChange : (String ) -> Unit ,
95- val onSearchActivate : () -> Unit ,
96- val onSearchClose : () -> Unit ,
97- val onFilterClick : () -> Unit ,
98- val onThreadsClick : () -> Unit ,
99- val onAvatarClick : () -> Unit ,
100- val onNavigateBack : () -> Unit ,
101- val onAccountChooserClick : () -> Unit
95+ val onSearchQueryChange : (String ) -> Unit = {} ,
96+ val onSearchActivate : () -> Unit = {} ,
97+ val onSearchClose : () -> Unit = {} ,
98+ val onFilterClick : () -> Unit = {} ,
99+ val onThreadsClick : () -> Unit = {} ,
100+ val onAvatarClick : () -> Unit = {} ,
101+ val onNavigateBack : () -> Unit = {} ,
102+ val onAccountChooserClick : () -> Unit = {}
102103)
103104
104105@OptIn(ExperimentalMaterial3Api ::class )
@@ -117,18 +118,11 @@ fun ConversationListTopBar(
117118 }
118119 }
119120
120- Column (modifier = modifier.fillMaxWidth()) {
121+ Column (modifier = modifier.fillMaxWidth().statusBarsPadding() ) {
121122 when (val mode = state.mode) {
122123 is TopBarMode .SearchBarIdle -> TopBarIdleContent (
123- onSearchActivate = actions.onSearchActivate,
124- onFilterClick = actions.onFilterClick,
125- onThreadsClick = actions.onThreadsClick,
126- onAvatarClick = actions.onAvatarClick,
127- showAvatarBadge = state.showAvatarBadge,
128- avatarUrl = state.avatarUrl,
129- credentials = state.credentials,
130- showFilterActive = state.showFilterActive,
131- showThreadsButton = state.showThreadsButton
124+ state = state,
125+ actions = actions
132126 )
133127 is TopBarMode .SearchActive -> TopBarSearchActiveContent (
134128 query = mode.query,
@@ -148,91 +142,106 @@ fun ConversationListTopBar(
148142 }
149143}
150144
151- @Suppress(" LongParameterList" )
152145@Composable
153- private fun TopBarIdleContent (
154- onSearchActivate : () -> Unit ,
155- onFilterClick : () -> Unit ,
156- onThreadsClick : () -> Unit ,
157- onAvatarClick : () -> Unit ,
158- showAvatarBadge : Boolean ,
159- avatarUrl : String? ,
160- credentials : String ,
161- showFilterActive : Boolean ,
162- showThreadsButton : Boolean
163- ) {
146+ private fun TopBarIdleContent (state : ConversationListTopBarState , actions : ConversationListTopBarActions ) {
164147 Row (
165148 modifier = Modifier
166149 .fillMaxWidth()
167150 .padding(start = 16 .dp, end = 4 .dp, top = 4 .dp, bottom = 4 .dp),
168151 verticalAlignment = Alignment .CenterVertically
169152 ) {
170- Card (
153+ IdleSearchBarCard (
154+ state = state,
155+ actions = actions,
171156 modifier = Modifier
172157 .weight(1f )
173- .height(50 .dp),
174- shape = RoundedCornerShape (25 .dp),
175- elevation = CardDefaults .cardElevation(defaultElevation = 2 .dp)
158+ .height(50 .dp)
159+ )
160+ Spacer (modifier = Modifier .width(8 .dp))
161+ AvatarButton (
162+ avatarUrl = state.avatarUrl,
163+ credentials = state.credentials,
164+ showBadge = state.showAvatarBadge,
165+ onClick = actions.onAvatarClick
166+ )
167+ }
168+ }
169+
170+ @Composable
171+ private fun IdleSearchBarCard (
172+ state : ConversationListTopBarState ,
173+ actions : ConversationListTopBarActions ,
174+ modifier : Modifier = Modifier
175+ ) {
176+ Card (
177+ modifier = modifier,
178+ shape = RoundedCornerShape (25 .dp),
179+ elevation = CardDefaults .cardElevation(defaultElevation = 2 .dp)
180+ ) {
181+ Box (modifier = Modifier .fillMaxSize()) {
182+ Text (
183+ text = stringResource(R .string.appbar_search_in, stringResource(R .string.nc_app_product_name)),
184+ modifier = Modifier
185+ .fillMaxWidth()
186+ .align(Alignment .CenterStart )
187+ .padding(start = 16 .dp, end = if (state.showThreadsButton) 80 .dp else 48 .dp)
188+ .clickable { actions.onSearchActivate() },
189+ style = MaterialTheme .typography.bodyLarge,
190+ color = MaterialTheme .colorScheme.onSurfaceVariant,
191+ maxLines = 1 ,
192+ overflow = TextOverflow .Ellipsis
193+ )
194+ IdleSearchBarActions (
195+ state = state,
196+ actions = actions,
197+ modifier = Modifier .align(Alignment .CenterEnd )
198+ )
199+ }
200+ }
201+ }
202+
203+ @Composable
204+ private fun IdleSearchBarActions (
205+ state : ConversationListTopBarState ,
206+ actions : ConversationListTopBarActions ,
207+ modifier : Modifier = Modifier
208+ ) {
209+ Row (
210+ modifier = modifier,
211+ horizontalArrangement = Arrangement .End ,
212+ verticalAlignment = Alignment .CenterVertically
213+ ) {
214+ IconButton (
215+ onClick = actions.onFilterClick,
216+ modifier = Modifier .size(48 .dp)
176217 ) {
177- Box (modifier = Modifier .fillMaxSize()) {
178- Text (
179- text = stringResource(R .string.appbar_search_in, stringResource(R .string.nc_app_product_name)),
180- modifier = Modifier
181- .fillMaxWidth()
182- .align(Alignment .CenterStart )
183- .padding(start = 16 .dp, end = if (showThreadsButton) 80 .dp else 48 .dp)
184- .clickable { onSearchActivate() },
185- style = MaterialTheme .typography.bodyLarge,
186- color = MaterialTheme .colorScheme.onSurfaceVariant,
187- maxLines = 1 ,
188- overflow = TextOverflow .Ellipsis
189- )
190- Row (
191- modifier = Modifier .align(Alignment .CenterEnd ),
192- horizontalArrangement = Arrangement .End ,
193- verticalAlignment = Alignment .CenterVertically
194- ) {
195- IconButton (
196- onClick = onFilterClick,
197- modifier = Modifier .size(48 .dp)
198- ) {
199- Box (
200- Modifier .fillMaxSize(),
201- contentAlignment = if (showThreadsButton) Alignment .CenterEnd else Alignment .Center
202- ) {
203- Icon (
204- painter = painterResource(R .drawable.ic_baseline_filter_list_24),
205- contentDescription = stringResource(R .string.nc_filter),
206- tint = if (showFilterActive) {
207- MaterialTheme .colorScheme.primary
208- } else {
209- MaterialTheme .colorScheme.onSurfaceVariant
210- }
211- )
212- }
213- }
214- if (showThreadsButton) {
215- IconButton (
216- onClick = onThreadsClick,
217- modifier = Modifier .size(48 .dp)
218- ) {
219- Icon (
220- painter = painterResource(R .drawable.outline_forum_24),
221- contentDescription = stringResource(R .string.threads),
222- tint = MaterialTheme .colorScheme.onSurfaceVariant
223- )
224- }
218+ Box (
219+ Modifier .fillMaxSize(),
220+ contentAlignment = if (state.showThreadsButton) Alignment .CenterEnd else Alignment .Center
221+ ) {
222+ Icon (
223+ painter = painterResource(R .drawable.ic_baseline_filter_list_24),
224+ contentDescription = stringResource(R .string.nc_filter),
225+ tint = if (state.showFilterActive) {
226+ MaterialTheme .colorScheme.primary
227+ } else {
228+ MaterialTheme .colorScheme.onSurfaceVariant
225229 }
226- }
230+ )
231+ }
232+ }
233+ if (state.showThreadsButton) {
234+ IconButton (
235+ onClick = actions.onThreadsClick,
236+ modifier = Modifier .size(48 .dp)
237+ ) {
238+ Icon (
239+ painter = painterResource(R .drawable.outline_forum_24),
240+ contentDescription = stringResource(R .string.threads),
241+ tint = MaterialTheme .colorScheme.onSurfaceVariant
242+ )
227243 }
228244 }
229- Spacer (modifier = Modifier .width(8 .dp))
230- AvatarButton (
231- avatarUrl = avatarUrl,
232- credentials = credentials,
233- showBadge = showAvatarBadge,
234- onClick = onAvatarClick
235- )
236245 }
237246}
238247
@@ -366,7 +375,8 @@ private fun TopBarTitleContent(
366375 },
367376 colors = TopAppBarDefaults .topAppBarColors(
368377 containerColor = MaterialTheme .colorScheme.surface
369- )
378+ ),
379+ windowInsets = WindowInsets (0 )
370380 )
371381}
372382
0 commit comments