Update icon.

This commit is contained in:
Thomas Andres Gomez 2022-07-06 10:19:30 +02:00
parent 3cf90ee701
commit 19cdcc6588
21 changed files with 87 additions and 31 deletions

View file

@ -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,
),
)
}
}

View file

@ -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,
)
}
}

View file

@ -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 {