Fix SearchBar colors. Also fix tertiary color in dark mode. (#516)
* Fix SearchBar colors. Also fix tertiary color in dark mode.
This commit is contained in:
Jorge Martin Espinosa
GitHub
parent
5b1b02613b
commit
4d2caf8172
102 changed files with 264 additions and 204 deletions
|
|
@ -80,5 +80,8 @@ val Compound_Gray_300_Dark = Color(0xFF1D1F24)
|
|||
val Compound_Gray_400_Light = Color(0xFFE1E6EC)
|
||||
val Compound_Gray_400_Dark = Color(0xFF26282D)
|
||||
|
||||
val Gray_1400_Light = Color(0xFF1B1D22)
|
||||
val Gray_1400_Dark = Color(0xFFEBEEF2)
|
||||
val Compound_Gray_800_Light = Color(0xFF818A95)
|
||||
val Compound_Gray_800_Dark = Color(0xFF656C76)
|
||||
|
||||
val Compound_Gray_1400_Light = Color(0xFF1B1D22)
|
||||
val Compound_Gray_1400_Dark = Color(0xFFEBEEF2)
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ fun BackButton(
|
|||
modifier: Modifier = Modifier,
|
||||
imageVector: ImageVector = Icons.Default.ArrowBack,
|
||||
contentDescription: String = stringResource(StringR.string.action_back),
|
||||
enabled: Boolean = true
|
||||
enabled: Boolean = true,
|
||||
) {
|
||||
IconButton(
|
||||
modifier = modifier,
|
||||
|
|
|
|||
|
|
@ -25,10 +25,11 @@ import io.element.android.libraries.designsystem.Black_800
|
|||
import io.element.android.libraries.designsystem.Black_950
|
||||
import io.element.android.libraries.designsystem.Compound_Gray_300_Dark
|
||||
import io.element.android.libraries.designsystem.DarkGrey
|
||||
import io.element.android.libraries.designsystem.Gray_1400_Dark
|
||||
import io.element.android.libraries.designsystem.Compound_Gray_1400_Dark
|
||||
import io.element.android.libraries.designsystem.Gray_300
|
||||
import io.element.android.libraries.designsystem.Gray_400
|
||||
import io.element.android.libraries.designsystem.Compound_Gray_400_Dark
|
||||
import io.element.android.libraries.designsystem.Compound_Gray_800_Dark
|
||||
import io.element.android.libraries.designsystem.Gray_450
|
||||
import io.element.android.libraries.designsystem.SystemGrey5Dark
|
||||
import io.element.android.libraries.designsystem.SystemGrey6Dark
|
||||
|
|
@ -43,8 +44,9 @@ fun elementColorsDark() = ElementColors(
|
|||
quinary = Gray_450,
|
||||
gray300 = Compound_Gray_300_Dark,
|
||||
gray400 = Compound_Gray_400_Dark,
|
||||
gray1400 = Gray_1400_Dark,
|
||||
gray1400 = Compound_Gray_1400_Dark,
|
||||
textActionCritical = TextColorCriticalDark,
|
||||
placeholder = Compound_Gray_800_Dark,
|
||||
isLight = false,
|
||||
)
|
||||
|
||||
|
|
@ -59,7 +61,7 @@ val materialColorSchemeDark = darkColorScheme(
|
|||
// TODO onSecondary = ColorDarkTokens.OnSecondary,
|
||||
// TODO secondaryContainer = ColorDarkTokens.SecondaryContainer,
|
||||
// TODO onSecondaryContainer = ColorDarkTokens.OnSecondaryContainer,
|
||||
tertiary = Color.White,
|
||||
tertiary = Gray_300,
|
||||
// TODO onTertiary = ColorDarkTokens.OnTertiary,
|
||||
// TODO tertiaryContainer = ColorDarkTokens.TertiaryContainer,
|
||||
// TODO onTertiaryContainer = ColorDarkTokens.OnTertiaryContainer,
|
||||
|
|
|
|||
|
|
@ -24,8 +24,9 @@ import io.element.android.libraries.designsystem.Azure
|
|||
import io.element.android.libraries.designsystem.Black_900
|
||||
import io.element.android.libraries.designsystem.Compound_Gray_300_Light
|
||||
import io.element.android.libraries.designsystem.Compound_Gray_400_Light
|
||||
import io.element.android.libraries.designsystem.Compound_Gray_800_Light
|
||||
import io.element.android.libraries.designsystem.Gray_100
|
||||
import io.element.android.libraries.designsystem.Gray_1400_Light
|
||||
import io.element.android.libraries.designsystem.Compound_Gray_1400_Light
|
||||
import io.element.android.libraries.designsystem.Gray_150
|
||||
import io.element.android.libraries.designsystem.Gray_200
|
||||
import io.element.android.libraries.designsystem.Gray_25
|
||||
|
|
@ -43,8 +44,9 @@ fun elementColorsLight() = ElementColors(
|
|||
quinary = Gray_50,
|
||||
gray300 = Compound_Gray_300_Light,
|
||||
gray400 = Compound_Gray_400_Light,
|
||||
gray1400 = Gray_1400_Light,
|
||||
gray1400 = Compound_Gray_1400_Light,
|
||||
textActionCritical = TextColorCriticalLight,
|
||||
placeholder = Compound_Gray_800_Light,
|
||||
isLight = true,
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ class ElementColors(
|
|||
gray400: Color,
|
||||
gray1400: Color,
|
||||
textActionCritical: Color,
|
||||
placeholder: Color,
|
||||
isLight: Boolean
|
||||
) {
|
||||
var messageFromMeBackground by mutableStateOf(messageFromMeBackground)
|
||||
|
|
@ -60,6 +61,9 @@ class ElementColors(
|
|||
var textActionCritical by mutableStateOf(textActionCritical)
|
||||
private set
|
||||
|
||||
var placeholder by mutableStateOf(placeholder)
|
||||
private set
|
||||
|
||||
var isLight by mutableStateOf(isLight)
|
||||
private set
|
||||
|
||||
|
|
@ -73,6 +77,7 @@ class ElementColors(
|
|||
gray400: Color = this.gray400,
|
||||
gray1400: Color = this.gray1400,
|
||||
textActionCritical: Color = this.textActionCritical,
|
||||
placeholder: Color = this.placeholder,
|
||||
isLight: Boolean = this.isLight,
|
||||
) = ElementColors(
|
||||
messageFromMeBackground = messageFromMeBackground,
|
||||
|
|
@ -84,6 +89,7 @@ class ElementColors(
|
|||
gray400 = gray400,
|
||||
gray1400 = gray1400,
|
||||
textActionCritical = textActionCritical,
|
||||
placeholder = placeholder,
|
||||
isLight = isLight,
|
||||
)
|
||||
|
||||
|
|
@ -97,6 +103,7 @@ class ElementColors(
|
|||
gray400 = other.gray400
|
||||
gray1400 = other.gray1400
|
||||
textActionCritical = other.textActionCritical
|
||||
placeholder = other.placeholder
|
||||
isLight = other.isLight
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,11 +29,12 @@ import androidx.compose.material.icons.filled.Close
|
|||
import androidx.compose.material.icons.filled.Search
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.SearchBarColors
|
||||
import androidx.compose.material3.SearchBarDefaults
|
||||
import androidx.compose.material3.TextFieldDefaults
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.alpha
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.platform.LocalFocusManager
|
||||
|
|
@ -45,6 +46,7 @@ import androidx.compose.ui.unit.dp
|
|||
import io.element.android.libraries.designsystem.components.button.BackButton
|
||||
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
|
||||
import io.element.android.libraries.designsystem.preview.PreviewGroup
|
||||
import io.element.android.libraries.designsystem.theme.LocalColors
|
||||
import io.element.android.libraries.ui.strings.R
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
|
|
@ -63,6 +65,8 @@ fun <T> SearchBar(
|
|||
tonalElevation: Dp = SearchBarDefaults.Elevation,
|
||||
windowInsets: WindowInsets = SearchBarDefaults.windowInsets,
|
||||
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
|
||||
inactiveColors: SearchBarColors = ElementSearchBarDefaults.inactiveColors(),
|
||||
activeColors: SearchBarColors = ElementSearchBarDefaults.activeColors(),
|
||||
contentPrefix: @Composable ColumnScope.() -> Unit = {},
|
||||
contentSuffix: @Composable ColumnScope.() -> Unit = {},
|
||||
resultHandler: @Composable ColumnScope.(T) -> Unit = {},
|
||||
|
|
@ -83,10 +87,7 @@ fun <T> SearchBar(
|
|||
modifier = modifier.padding(horizontal = if (!active) 16.dp else 0.dp),
|
||||
enabled = enabled,
|
||||
placeholder = {
|
||||
Text(
|
||||
text = placeHolderTitle,
|
||||
modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
|
||||
)
|
||||
Text(text = placeHolderTitle)
|
||||
},
|
||||
leadingIcon = if (showBackButton && active) {
|
||||
{ BackButton(onClick = { onActiveChange(false) }) }
|
||||
|
|
@ -97,7 +98,10 @@ fun <T> SearchBar(
|
|||
active && query.isNotEmpty() -> {
|
||||
{
|
||||
IconButton(onClick = { onQueryChange("") }) {
|
||||
Icon(Icons.Default.Close, stringResource(R.string.action_clear))
|
||||
Icon(
|
||||
imageVector = Icons.Default.Close,
|
||||
contentDescription = stringResource(R.string.action_clear),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -107,7 +111,7 @@ fun <T> SearchBar(
|
|||
Icon(
|
||||
imageVector = Icons.Default.Search,
|
||||
contentDescription = stringResource(R.string.action_search),
|
||||
modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
|
||||
tint = MaterialTheme.colorScheme.tertiary,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -115,7 +119,7 @@ fun <T> SearchBar(
|
|||
else -> null
|
||||
},
|
||||
shape = shape,
|
||||
colors = if (!active) SearchBarDefaults.colors() else SearchBarDefaults.colors(containerColor = Color.Transparent),
|
||||
colors = if (active) activeColors else inactiveColors,
|
||||
tonalElevation = tonalElevation,
|
||||
windowInsets = windowInsets,
|
||||
interactionSource = interactionSource,
|
||||
|
|
@ -147,6 +151,37 @@ fun <T> SearchBar(
|
|||
)
|
||||
}
|
||||
|
||||
object ElementSearchBarDefaults {
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun inactiveColors() = SearchBarDefaults.colors(
|
||||
containerColor = LocalColors.current.gray300,
|
||||
inputFieldColors = TextFieldDefaults.colors(
|
||||
unfocusedPlaceholderColor = LocalColors.current.placeholder,
|
||||
focusedPlaceholderColor = LocalColors.current.placeholder,
|
||||
unfocusedLeadingIconColor = MaterialTheme.colorScheme.primary,
|
||||
focusedLeadingIconColor = MaterialTheme.colorScheme.primary,
|
||||
unfocusedTrailingIconColor = MaterialTheme.colorScheme.primary,
|
||||
focusedTrailingIconColor = MaterialTheme.colorScheme.primary,
|
||||
)
|
||||
)
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun activeColors() = SearchBarDefaults.colors(
|
||||
containerColor = Color.Transparent,
|
||||
inputFieldColors = TextFieldDefaults.colors(
|
||||
unfocusedPlaceholderColor = LocalColors.current.placeholder,
|
||||
focusedPlaceholderColor = LocalColors.current.placeholder,
|
||||
unfocusedLeadingIconColor = MaterialTheme.colorScheme.primary,
|
||||
focusedLeadingIconColor = MaterialTheme.colorScheme.primary,
|
||||
unfocusedTrailingIconColor = MaterialTheme.colorScheme.primary,
|
||||
focusedTrailingIconColor = MaterialTheme.colorScheme.primary,
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
sealed interface SearchBarResultState<in T> {
|
||||
/** No search results are available yet (e.g. because the user hasn't entered a search term). */
|
||||
class NotSearching<T> : SearchBarResultState<T>
|
||||
|
|
@ -208,17 +243,24 @@ internal fun SearchBarPreviewActiveWithContent() = ElementThemedPreview {
|
|||
active = true,
|
||||
resultState = SearchBarResultState.Results("result!"),
|
||||
contentPrefix = {
|
||||
Text(text = "Content that goes before the search results", modifier = Modifier.background(color = Color.Red).fillMaxWidth())
|
||||
Text(text = "Content that goes before the search results", modifier = Modifier
|
||||
.background(color = Color.Red)
|
||||
.fillMaxWidth())
|
||||
},
|
||||
contentSuffix = {
|
||||
Text(text = "Content that goes after the search results", modifier = Modifier.background(color = Color.Blue).fillMaxWidth())
|
||||
Text(text = "Content that goes after the search results", modifier = Modifier
|
||||
.background(color = Color.Blue)
|
||||
.fillMaxWidth())
|
||||
},
|
||||
resultHandler = {
|
||||
Text(text = "Results go here", modifier = Modifier.background(color = Color.Green).fillMaxWidth())
|
||||
Text(text = "Results go here", modifier = Modifier
|
||||
.background(color = Color.Green)
|
||||
.fillMaxWidth())
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
private fun ContentToPreview(
|
||||
query: String = "",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue