Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 1 | /* |
| 2 | * Copyright 2019 The Android Open Source Project |
| 3 | * |
| 4 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | * you may not use this file except in compliance with the License. |
| 6 | * You may obtain a copy of the License at |
| 7 | * |
| 8 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | * |
| 10 | * Unless required by applicable law or agreed to in writing, software |
| 11 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | * See the License for the specific language governing permissions and |
| 14 | * limitations under the License. |
| 15 | */ |
| 16 | |
| 17 | package androidx.ui.material |
| 18 | |
| 19 | import androidx.compose.Composable |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 20 | import androidx.ui.core.CurrentTextStyleProvider |
| 21 | import androidx.ui.core.FirstBaseline |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 22 | import androidx.ui.core.LastBaseline |
| 23 | import androidx.ui.core.Layout |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 24 | import androidx.ui.core.LayoutTag |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 25 | import androidx.ui.core.Modifier |
Mihai Popa | 8c474e9 | 2019-12-10 17:43:20 +0000 | [diff] [blame] | 26 | import androidx.ui.core.tag |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 27 | import androidx.ui.foundation.Box |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 28 | import androidx.ui.foundation.shape.corner.RoundedCornerShape |
| 29 | import androidx.ui.graphics.Color |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 30 | import androidx.ui.graphics.compositeOver |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 31 | import androidx.ui.layout.AlignmentLineOffset |
| 32 | import androidx.ui.layout.Column |
Adam Powell | 712dc99 | 2019-12-04 12:48:30 -0800 | [diff] [blame] | 33 | import androidx.ui.layout.LayoutGravity |
| 34 | import androidx.ui.layout.LayoutPadding |
Adam Powell | 31c1ebd | 2020-01-09 09:48:24 -0800 | [diff] [blame] | 35 | import androidx.ui.layout.LayoutWidth |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 36 | import androidx.ui.material.surface.Surface |
George Mount | 842c8c1 | 2020-01-08 16:03:42 -0800 | [diff] [blame] | 37 | import androidx.ui.unit.IntPx |
| 38 | import androidx.ui.unit.dp |
| 39 | import androidx.ui.unit.ipx |
| 40 | import androidx.ui.unit.max |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 41 | |
| 42 | /** |
| 43 | * Snackbars provide brief messages about app processes at the bottom of the screen. |
| 44 | * |
| 45 | * Snackbars inform users of a process that an app has performed or will perform. They appear |
| 46 | * temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, |
| 47 | * and they don’t require user input to disappear. |
| 48 | * |
Louis Pullen-Freilich | 644c22e | 2020-03-02 16:05:01 +0000 | [diff] [blame^] | 49 | * A Snackbar can contain a single action. Because they disappear automatically, the action |
| 50 | * shouldn't be "Dismiss" or "Cancel". |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 51 | * |
| 52 | * @sample androidx.ui.material.samples.SimpleSnackbar |
| 53 | * |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 54 | * @param text text component to show information about a process that an app has performed or |
| 55 | * will perform |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 56 | * @param action action / button component to add as an action to the snackbar. Consider using |
| 57 | * [snackbarPrimaryColorFor] as the color for the action, if you do not have a predefined color |
| 58 | * you wish to use instead. |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 59 | * @param modifier modifiers for the the Snackbar layout |
| 60 | * @param actionOnNewLine whether or not action should be put on the separate line. Recommended |
| 61 | * for action with long action text |
| 62 | */ |
| 63 | @Composable |
| 64 | fun Snackbar( |
| 65 | text: @Composable() () -> Unit, |
| 66 | action: @Composable() (() -> Unit)? = null, |
| 67 | modifier: Modifier = Modifier.None, |
| 68 | actionOnNewLine: Boolean = false |
| 69 | ) { |
Leland Richardson | 7f848ab | 2019-12-12 13:43:41 -0800 | [diff] [blame] | 70 | val colors = MaterialTheme.colors() |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 71 | // Snackbar has a background color of onSurface with an alpha applied blended on top of surface |
| 72 | val snackbarOverlayColor = colors.onSurface.copy(alpha = SnackbarOverlayAlpha) |
| 73 | val snackbarColor = snackbarOverlayColor.compositeOver(colors.surface) |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 74 | Surface( |
| 75 | modifier = modifier, |
| 76 | shape = SnackbarShape, |
| 77 | elevation = SnackbarElevation, |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 78 | color = snackbarColor, |
| 79 | contentColor = colors.surface |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 80 | ) { |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 81 | val textStyle = MaterialTheme.typography().body2 |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 82 | CurrentTextStyleProvider(value = textStyle) { |
| 83 | when { |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 84 | action == null -> TextOnlySnackbar(text) |
| 85 | actionOnNewLine -> NewLineButtonSnackbar(text, action) |
| 86 | else -> OneRowSnackbar(text, action) |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 87 | } |
| 88 | } |
| 89 | } |
| 90 | } |
| 91 | |
| 92 | @Composable |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 93 | private fun TextOnlySnackbar(text: @Composable() () -> Unit) { |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 94 | Layout( |
Matvei Malkov | 59bac36 | 2020-02-13 20:23:13 +0000 | [diff] [blame] | 95 | text, |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 96 | modifier = LayoutPadding(start = HorizontalSpacing, end = HorizontalSpacing) |
Anastasia Soboleva | 9474ff8 | 2020-02-19 19:02:15 +0000 | [diff] [blame] | 97 | ) { measurables, constraints, _ -> |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 98 | require(measurables.size == 1) { |
| 99 | "text for Snackbar expected to have exactly only one child" |
| 100 | } |
| 101 | val textPlaceable = measurables.first().measure(constraints) |
| 102 | val firstBaseline = requireNotNull(textPlaceable[FirstBaseline]) { "No baselines for text" } |
| 103 | val lastBaseline = requireNotNull(textPlaceable[LastBaseline]) { "No baselines for text" } |
| 104 | |
| 105 | val minHeight = if (firstBaseline == lastBaseline) MinHeightOneLine else MinHeightTwoLines |
| 106 | layout(constraints.maxWidth, max(minHeight.toIntPx(), textPlaceable.height)) { |
| 107 | val textPlaceY = HeightToFirstLine.toIntPx() - firstBaseline |
| 108 | textPlaceable.place(0.ipx, textPlaceY) |
| 109 | } |
| 110 | } |
| 111 | } |
| 112 | |
| 113 | @Composable |
| 114 | private fun NewLineButtonSnackbar( |
| 115 | text: @Composable() () -> Unit, |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 116 | action: @Composable() () -> Unit |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 117 | ) { |
| 118 | Column( |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 119 | modifier = LayoutWidth.Fill + LayoutPadding( |
Anastasia Soboleva | 24bacea | 2020-02-06 19:10:26 +0000 | [diff] [blame] | 120 | start = HorizontalSpacing, |
| 121 | end = HorizontalSpacingButtonSide, |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 122 | bottom = SeparateButtonExtraY |
| 123 | ) |
| 124 | ) { |
| 125 | AlignmentLineOffset(alignmentLine = LastBaseline, after = LongButtonVerticalOffset) { |
| 126 | AlignmentLineOffset(alignmentLine = FirstBaseline, before = HeightToFirstLine) { |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 127 | Box(LayoutPadding(end = HorizontalSpacingButtonSide), children = text) |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 128 | } |
| 129 | } |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 130 | Box(modifier = LayoutGravity.End, children = action) |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 131 | } |
| 132 | } |
| 133 | |
| 134 | @Composable |
| 135 | private fun OneRowSnackbar( |
| 136 | text: @Composable() () -> Unit, |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 137 | action: @Composable() () -> Unit |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 138 | ) { |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 139 | val textTag = "text" |
| 140 | val actionTag = "action" |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 141 | Layout( |
Mihai Popa | 8c474e9 | 2019-12-10 17:43:20 +0000 | [diff] [blame] | 142 | { |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 143 | Box(LayoutTag(textTag), children = text) |
| 144 | Box(LayoutTag(actionTag), children = action) |
Mihai Popa | 8c474e9 | 2019-12-10 17:43:20 +0000 | [diff] [blame] | 145 | }, |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 146 | modifier = LayoutPadding(start = HorizontalSpacing, end = HorizontalSpacingButtonSide) |
Anastasia Soboleva | 9474ff8 | 2020-02-19 19:02:15 +0000 | [diff] [blame] | 147 | ) { measurables, constraints, _ -> |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 148 | val buttonPlaceable = measurables.first { it.tag == actionTag }.measure(constraints) |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 149 | val textMaxWidth = |
| 150 | (constraints.maxWidth - buttonPlaceable.width - TextEndExtraSpacing.toIntPx()) |
| 151 | .coerceAtLeast(constraints.minWidth) |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 152 | val textPlaceable = measurables.first { it.tag == textTag }.measure( |
Mihai Popa | 8c474e9 | 2019-12-10 17:43:20 +0000 | [diff] [blame] | 153 | constraints.copy(minHeight = IntPx.Zero, maxWidth = textMaxWidth) |
| 154 | ) |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 155 | |
| 156 | val firstTextBaseline = |
| 157 | requireNotNull(textPlaceable[FirstBaseline]) { "No baselines for text" } |
| 158 | val lastTextBaseline = |
| 159 | requireNotNull(textPlaceable[LastBaseline]) { "No baselines for text" } |
| 160 | val baselineOffset = HeightToFirstLine.toIntPx() |
| 161 | val isOneLine = firstTextBaseline == lastTextBaseline |
| 162 | val textPlaceY = baselineOffset - firstTextBaseline |
| 163 | val buttonPlaceX = constraints.maxWidth - buttonPlaceable.width |
| 164 | |
| 165 | val containerHeight: IntPx |
| 166 | val buttonPlaceY: IntPx |
| 167 | if (isOneLine) { |
| 168 | val minContainerHeight = MinHeightOneLine.toIntPx() |
| 169 | val contentHeight = buttonPlaceable.height + SingleTextYPadding.toIntPx() * 2 |
| 170 | containerHeight = max(minContainerHeight, contentHeight) |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 171 | val buttonBaseline = buttonPlaceable[FirstBaseline] |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 172 | buttonPlaceY = |
| 173 | buttonBaseline?.let { baselineOffset - it } ?: SingleTextYPadding.toIntPx() |
| 174 | } else { |
| 175 | val minContainerHeight = MinHeightTwoLines.toIntPx() |
| 176 | val contentHeight = textPlaceY + textPlaceable.height |
| 177 | containerHeight = max(minContainerHeight, contentHeight) |
| 178 | buttonPlaceY = (containerHeight - buttonPlaceable.height) / 2 |
| 179 | } |
| 180 | |
| 181 | layout(constraints.maxWidth, containerHeight) { |
| 182 | textPlaceable.place(0.ipx, textPlaceY) |
| 183 | buttonPlaceable.place(buttonPlaceX, buttonPlaceY) |
| 184 | } |
| 185 | } |
| 186 | } |
| 187 | |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 188 | /** |
| 189 | * Provides a best-effort 'primary' color to be used as the primary color inside a [Snackbar]. |
| 190 | * Given that [Snackbar]s have an 'inverted' theme, i.e in a light theme they appear dark, and |
| 191 | * in a dark theme they appear light, just using [ColorPalette.primary] will not work, and has |
| 192 | * incorrect contrast. |
| 193 | * |
Louis Pullen-Freilich | 644c22e | 2020-03-02 16:05:01 +0000 | [diff] [blame^] | 194 | * If your light theme has a corresponding dark theme, you should instead directly use |
| 195 | * [ColorPalette.primary] from the dark theme when in a light theme, and use |
| 196 | * [ColorPalette.primaryVariant] from the dark theme when in a dark theme. |
| 197 | * |
| 198 | * When in a light theme, this function applies a color overlay to [ColorPalette.primary] from |
| 199 | * [colors] to attempt to reduce the contrast, and when in a dark theme this function uses |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 200 | * [ColorPalette.primaryVariant]. |
| 201 | * |
| 202 | * @param colors the [ColorPalette] to calculate the Snackbar primary color for |
| 203 | */ |
| 204 | fun snackbarPrimaryColorFor(colors: ColorPalette): Color { |
| 205 | return if (colors.isLight) { |
| 206 | val primary = colors.primary |
| 207 | val overlayColor = colors.surface.copy(alpha = 0.6f) |
| 208 | |
| 209 | overlayColor.compositeOver(primary) |
| 210 | } else { |
| 211 | colors.primaryVariant |
| 212 | } |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 213 | } |
| 214 | |
Louis Pullen-Freilich | 68565b0 | 2020-02-26 16:40:01 +0000 | [diff] [blame] | 215 | private const val SnackbarOverlayAlpha = 0.8f |
Matvei Malkov | b814df0 | 2019-11-21 15:58:03 +0000 | [diff] [blame] | 216 | private val SnackbarShape = RoundedCornerShape(4.dp) |
| 217 | private val SnackbarElevation = 6.dp |
| 218 | |
| 219 | private val MinHeightOneLine = 48.dp |
| 220 | private val MinHeightTwoLines = 68.dp |
| 221 | private val HeightToFirstLine = 30.dp |
| 222 | private val HorizontalSpacing = 16.dp |
| 223 | private val HorizontalSpacingButtonSide = 8.dp |
| 224 | private val SeparateButtonExtraY = 8.dp |
| 225 | private val SingleTextYPadding = 6.dp |
| 226 | private val TextEndExtraSpacing = 8.dp |
| 227 | private val LongButtonVerticalOffset = 18.dp |