Update icon.
This commit is contained in:
parent
3cf90ee701
commit
19cdcc6588
21 changed files with 87 additions and 31 deletions
|
|
@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.size
|
|||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.material.*
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Close
|
||||
import androidx.compose.material.icons.filled.Person
|
||||
import androidx.compose.material.icons.filled.Search
|
||||
import androidx.compose.runtime.*
|
||||
|
|
@ -24,6 +25,7 @@ import androidx.compose.ui.tooling.preview.Preview
|
|||
import androidx.compose.ui.unit.dp
|
||||
import com.pixelized.biblib.R
|
||||
import com.pixelized.biblib.ui.scaffold.SearchScaffoldState
|
||||
import com.pixelized.biblib.ui.scaffold.SearchScaffoldState.ContentState
|
||||
import com.pixelized.biblib.ui.scaffold.rememberSearchScaffoldState
|
||||
import com.pixelized.biblib.ui.theme.BibLibTheme
|
||||
import com.pixelized.biblib.utils.extention.bibLib
|
||||
|
|
@ -37,13 +39,14 @@ fun Search(
|
|||
state: SearchScaffoldState = rememberSearchScaffoldState(),
|
||||
focusRequester: FocusRequester = remember { FocusRequester() },
|
||||
avatar: String?,
|
||||
onClose: () -> Unit = default(),
|
||||
onAvatar: () -> Unit = default(),
|
||||
onSearch: () -> Unit = default(),
|
||||
) {
|
||||
val horizontalPadding by animateDpAsState(
|
||||
targetValue = when (state.isCollapsed()) {
|
||||
true -> MaterialTheme.bibLib.dimen.dp8
|
||||
else -> MaterialTheme.bibLib.dimen.dp16
|
||||
true -> MaterialTheme.bibLib.dimen.default
|
||||
else -> MaterialTheme.bibLib.dimen.dp4
|
||||
}
|
||||
)
|
||||
var search by remember { mutableStateOf("") }
|
||||
|
|
@ -54,14 +57,19 @@ fun Search(
|
|||
.then(modifier),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Icon(
|
||||
modifier = Modifier
|
||||
.padding(start = horizontalPadding)
|
||||
.size(24.dp),
|
||||
imageVector = Icons.Default.Search,
|
||||
tint = MaterialTheme.colors.onSurface,
|
||||
contentDescription = null
|
||||
)
|
||||
IconButton(
|
||||
modifier = Modifier.padding(start = horizontalPadding),
|
||||
onClick = if (state.content != ContentState.INITIAL) onClose else onSearch,
|
||||
) {
|
||||
Icon(
|
||||
imageVector = when (state.content) {
|
||||
ContentState.INITIAL -> Icons.Default.Search
|
||||
else -> Icons.Default.Close
|
||||
},
|
||||
tint = MaterialTheme.colors.onSurface,
|
||||
contentDescription = null
|
||||
)
|
||||
}
|
||||
TextField(
|
||||
modifier = Modifier
|
||||
.focusRequester(focusRequester = focusRequester)
|
||||
|
|
@ -69,13 +77,17 @@ fun Search(
|
|||
label = {
|
||||
Text(
|
||||
color = MaterialTheme.colors.onSurface,
|
||||
text = "Rechercher sur BibLib"
|
||||
text = if (state.content != ContentState.PROFILE) {
|
||||
"Rechercher sur BibLib"
|
||||
} else {
|
||||
"Profile"
|
||||
}
|
||||
)
|
||||
},
|
||||
value = if (state.content == SearchScaffoldState.ContentState.SEARCH) search else "",
|
||||
value = if (state.content == ContentState.SEARCH) search else "",
|
||||
singleLine = true,
|
||||
enabled = state.content == SearchScaffoldState.ContentState.SEARCH,
|
||||
readOnly = state.content != SearchScaffoldState.ContentState.SEARCH,
|
||||
enabled = state.content == ContentState.SEARCH,
|
||||
readOnly = state.content != ContentState.SEARCH,
|
||||
colors = TextFieldDefaults.outlinedTextFieldColors(
|
||||
focusedBorderColor = Color.Transparent,
|
||||
unfocusedBorderColor = Color.Transparent,
|
||||
|
|
@ -88,20 +100,19 @@ fun Search(
|
|||
modifier = Modifier.padding(end = horizontalPadding),
|
||||
onClick = onAvatar,
|
||||
) {
|
||||
val imageModifier = Modifier
|
||||
.clip(CircleShape)
|
||||
.size(MaterialTheme.bibLib.dimen.dp32)
|
||||
if (avatar != null) {
|
||||
GlideImage(
|
||||
modifier = Modifier
|
||||
.clip(CircleShape)
|
||||
.size(32.dp),
|
||||
modifier = imageModifier,
|
||||
previewPlaceholder = R.drawable.ic_google,
|
||||
contentScale = ContentScale.Fit,
|
||||
imageModel = avatar,
|
||||
)
|
||||
} else {
|
||||
Icon(
|
||||
modifier = Modifier
|
||||
.clip(CircleShape)
|
||||
.size(32.dp),
|
||||
modifier = imageModifier,
|
||||
tint = MaterialTheme.colors.onSurface,
|
||||
imageVector = Icons.Default.Person,
|
||||
contentDescription = null,
|
||||
|
|
@ -120,11 +131,18 @@ private fun SearchContentEmptyPreview() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@Composable
|
||||
@Preview(showBackground = true, uiMode = UI_MODE_NIGHT_NO)
|
||||
@Preview(showBackground = true, uiMode = UI_MODE_NIGHT_YES)
|
||||
private fun SearchContentPreview() {
|
||||
private fun SearchContentEmptyDeployPreview() {
|
||||
BibLibTheme {
|
||||
Search(avatar = "")
|
||||
Search(
|
||||
avatar = "",
|
||||
state = rememberSearchScaffoldState(
|
||||
expended = true,
|
||||
content = ContentState.SEARCH,
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -86,10 +86,14 @@ fun SearchScaffold(
|
|||
|
||||
@Composable
|
||||
fun rememberSearchScaffoldState(
|
||||
expended: Boolean = false
|
||||
expended: Boolean = false,
|
||||
content: SearchScaffoldState.ContentState = SearchScaffoldState.ContentState.INITIAL,
|
||||
): SearchScaffoldState {
|
||||
return rememberSaveable(saver = SearchScaffoldState.Saver) {
|
||||
SearchScaffoldState(expended = expended)
|
||||
SearchScaffoldState(
|
||||
expended = expended,
|
||||
state = content,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -62,11 +62,16 @@ fun HomeScreen(
|
|||
state = state,
|
||||
avatar = accountViewModel.avatar,
|
||||
focusRequester = focusRequester,
|
||||
onClose = {
|
||||
focusManager.clearFocus(force = true)
|
||||
keyboard?.hide()
|
||||
state.collapse()
|
||||
},
|
||||
onSearch = {
|
||||
if (state.content != ContentState.SEARCH || state.isCollapsed()) {
|
||||
state.expand(ContentState.SEARCH)
|
||||
scope.launch {
|
||||
delay(100)
|
||||
delay(100) // let the animation play before requesting the focus
|
||||
focusRequester.requestFocus()
|
||||
}
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue