diff options
3 files changed, 462 insertions, 48 deletions
diff --git a/packages/SystemUI/res/values/strings.xml b/packages/SystemUI/res/values/strings.xml index cac2df5b45d9..951ffedceed9 100644 --- a/packages/SystemUI/res/values/strings.xml +++ b/packages/SystemUI/res/values/strings.xml @@ -3525,6 +3525,14 @@ use. The helper shows shortcuts in categories, which can be collapsed or expanded. [CHAR LIMIT=NONE] --> <string name="shortcut_helper_content_description_expand_icon">Expand icon</string> + <!-- Word that separates different possible key combinations of a shortcut. For example the + "Go to home screen" shortcut could be triggered using "home button" OR "ctrl + h". + This is that "or" separator. + The keyboard shortcut helper is a component that shows the user which keyboard shortcuts + they can use. + [CHAR LIMIT=NONE] + --> + <string name="shortcut_helper_key_combinations_or_separator">or</string> <!-- Content description for keyboard backlight brightness dialog [CHAR LIMIT=NONE] --> <string name="keyboard_backlight_dialog_title">Keyboard backlight</string> diff --git a/packages/SystemUI/src/com/android/systemui/keyboard/shortcut/ui/composable/ShortcutHelper.kt b/packages/SystemUI/src/com/android/systemui/keyboard/shortcut/ui/composable/ShortcutHelper.kt index 52ccc219353e..271e79b8d060 100644 --- a/packages/SystemUI/src/com/android/systemui/keyboard/shortcut/ui/composable/ShortcutHelper.kt +++ b/packages/SystemUI/src/com/android/systemui/keyboard/shortcut/ui/composable/ShortcutHelper.kt @@ -16,13 +16,16 @@ package com.android.systemui.keyboard.shortcut.ui.composable -import androidx.annotation.StringRes import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.core.animateFloatAsState import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.BoxScope import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.ExperimentalLayoutApi +import androidx.compose.foundation.layout.FlowRow +import androidx.compose.foundation.layout.FlowRowScope import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize @@ -32,21 +35,19 @@ import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.OpenInNew -import androidx.compose.material.icons.filled.Accessibility -import androidx.compose.material.icons.filled.Apps import androidx.compose.material.icons.filled.ExpandMore -import androidx.compose.material.icons.filled.Keyboard import androidx.compose.material.icons.filled.Search -import androidx.compose.material.icons.filled.Tv -import androidx.compose.material.icons.filled.VerticalSplit import androidx.compose.material3.CenterAlignedTopAppBar import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.NavigationDrawerItemColors @@ -56,6 +57,7 @@ import androidx.compose.material3.SearchBarDefaults import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.material3.TopAppBarDefaults +import androidx.compose.material3.windowsizeclass.WindowHeightSizeClass import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -69,10 +71,13 @@ import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.input.nestedscroll.nestedScroll +import androidx.compose.ui.platform.rememberNestedScrollInteropConnection import androidx.compose.ui.res.stringResource import androidx.compose.ui.semantics.Role import androidx.compose.ui.semantics.role import androidx.compose.ui.semantics.semantics +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.compose.ui.util.fastForEach @@ -81,8 +86,13 @@ import com.android.compose.windowsizeclass.LocalWindowSizeClass import com.android.systemui.res.R @Composable -fun ShortcutHelper(modifier: Modifier = Modifier, onKeyboardSettingsClicked: () -> Unit) { - if (shouldUseSinglePane()) { +fun ShortcutHelper( + onKeyboardSettingsClicked: () -> Unit, + modifier: Modifier = Modifier, + categories: List<ShortcutHelperCategory> = ShortcutHelperTemporaryData.categories, + useSinglePane: @Composable () -> Boolean = { shouldUseSinglePane() }, +) { + if (useSinglePane()) { ShortcutHelperSinglePane(modifier, categories, onKeyboardSettingsClicked) } else { ShortcutHelperTwoPane(modifier, categories, onKeyboardSettingsClicked) @@ -91,7 +101,8 @@ fun ShortcutHelper(modifier: Modifier = Modifier, onKeyboardSettingsClicked: () @Composable private fun shouldUseSinglePane() = - LocalWindowSizeClass.current.widthSizeClass == WindowWidthSizeClass.Compact + LocalWindowSizeClass.current.widthSizeClass == WindowWidthSizeClass.Compact || + LocalWindowSizeClass.current.heightSizeClass == WindowHeightSizeClass.Compact @Composable private fun ShortcutHelperSinglePane( @@ -209,11 +220,31 @@ private fun RotatingExpandCollapseIcon(isExpanded: Boolean) { @Composable private fun ShortcutCategoryDetailsSinglePane(category: ShortcutHelperCategory) { - Box(modifier = Modifier.fillMaxWidth().heightIn(min = 300.dp)) { - Text( - modifier = Modifier.align(Alignment.Center), - text = stringResource(category.labelResId), - ) + Column(Modifier.padding(horizontal = 16.dp)) { + category.subCategories.fastForEach { subCategory -> + ShortcutSubCategorySinglePane(subCategory) + } + } +} + +@Composable +private fun ShortcutSubCategorySinglePane(subCategory: SubCategory) { + // This @Composable is expected to be in a Column. + SubCategoryTitle(subCategory.label) + subCategory.shortcuts.fastForEachIndexed { index, shortcut -> + if (index > 0) { + HorizontalDivider() + } + ShortcutSinglePane(shortcut) + } +} + +@Composable +private fun ShortcutSinglePane(shortcut: Shortcut) { + Column(Modifier.padding(vertical = 24.dp)) { + ShortcutDescriptionText(shortcut = shortcut) + Spacer(modifier = Modifier.height(12.dp)) + ShortcutKeyCombinations(shortcut = shortcut) } } @@ -223,6 +254,7 @@ private fun ShortcutHelperTwoPane( categories: List<ShortcutHelperCategory>, onKeyboardSettingsClicked: () -> Unit, ) { + var selectedCategory by remember { mutableStateOf(categories.first()) } Column(modifier = modifier.fillMaxSize().padding(start = 24.dp, end = 24.dp, top = 26.dp)) { TitleBar() Spacer(modifier = Modifier.height(12.dp)) @@ -230,39 +262,189 @@ private fun ShortcutHelperTwoPane( StartSidePanel( modifier = Modifier.fillMaxWidth(fraction = 0.32f), categories = categories, + selectedCategory = selectedCategory, + onCategoryClicked = { selectedCategory = it }, onKeyboardSettingsClicked = onKeyboardSettingsClicked, ) Spacer(modifier = Modifier.width(24.dp)) - EndSidePanel(Modifier.fillMaxSize()) + EndSidePanel(Modifier.fillMaxSize(), selectedCategory) + } + } +} + +@Composable +private fun EndSidePanel(modifier: Modifier, category: ShortcutHelperCategory) { + LazyColumn(modifier.nestedScroll(rememberNestedScrollInteropConnection())) { + items(items = category.subCategories, key = { item -> item.label }) { + SubCategoryContainerDualPane(it) + Spacer(modifier = Modifier.height(8.dp)) } } } @Composable +private fun SubCategoryContainerDualPane(subCategory: SubCategory) { + Surface( + modifier = Modifier.fillMaxWidth(), + shape = RoundedCornerShape(28.dp), + color = MaterialTheme.colorScheme.surfaceBright + ) { + Column(Modifier.padding(horizontal = 32.dp, vertical = 24.dp)) { + SubCategoryTitle(subCategory.label) + Spacer(Modifier.height(24.dp)) + subCategory.shortcuts.fastForEachIndexed { index, shortcut -> + if (index > 0) { + HorizontalDivider() + } + ShortcutViewDualPane(shortcut) + } + } + } +} + +@Composable +private fun SubCategoryTitle(title: String) { + Text( + title, + style = MaterialTheme.typography.titleSmall, + color = MaterialTheme.colorScheme.primary, + ) +} + +@Composable +private fun ShortcutViewDualPane(shortcut: Shortcut) { + Row(Modifier.padding(vertical = 16.dp)) { + ShortcutDescriptionText( + modifier = Modifier.weight(0.25f).align(Alignment.CenterVertically), + shortcut = shortcut, + ) + ShortcutKeyCombinations( + modifier = Modifier.weight(0.75f), + shortcut = shortcut, + ) + } +} + +@OptIn(ExperimentalLayoutApi::class) +@Composable +private fun ShortcutKeyCombinations( + modifier: Modifier = Modifier, + shortcut: Shortcut, +) { + FlowRow(modifier = modifier, verticalArrangement = Arrangement.spacedBy(8.dp)) { + shortcut.commands.forEachIndexed { index, command -> + if (index > 0) { + ShortcutOrSeparator(spacing = 16.dp) + } + ShortcutCommand(command) + } + } +} + +@Composable +private fun ShortcutCommand(command: ShortcutCommand) { + // This @Composable is expected to be in a Row or FlowRow. + command.keys.forEachIndexed { keyIndex, key -> + if (keyIndex > 0) { + Spacer(Modifier.width(4.dp)) + } + ShortcutKeyContainer { + if (key is ShortcutKey.Text) { + ShortcutTextKey(key) + } else if (key is ShortcutKey.Icon) { + ShortcutIconKey(key) + } + } + } +} + +@Composable +private fun ShortcutKeyContainer(shortcutKeyContent: @Composable BoxScope.() -> Unit) { + Box( + modifier = + Modifier.height(36.dp) + .background( + color = MaterialTheme.colorScheme.surfaceContainer, + shape = RoundedCornerShape(12.dp) + ), + ) { + shortcutKeyContent() + } +} + +@Composable +private fun BoxScope.ShortcutTextKey(key: ShortcutKey.Text) { + Text( + text = key.value, + modifier = Modifier.align(Alignment.Center).padding(horizontal = 12.dp), + style = MaterialTheme.typography.titleSmall, + ) +} + +@Composable +private fun BoxScope.ShortcutIconKey(key: ShortcutKey.Icon) { + Icon( + imageVector = key.value, + contentDescription = null, + modifier = Modifier.align(Alignment.Center).padding(6.dp) + ) +} + +@OptIn(ExperimentalLayoutApi::class) +@Composable +private fun FlowRowScope.ShortcutOrSeparator(spacing: Dp) { + Spacer(Modifier.width(spacing)) + Text( + text = stringResource(R.string.shortcut_helper_key_combinations_or_separator), + modifier = Modifier.align(Alignment.CenterVertically), + style = MaterialTheme.typography.titleSmall, + ) + Spacer(Modifier.width(spacing)) +} + +@Composable +private fun ShortcutDescriptionText( + shortcut: Shortcut, + modifier: Modifier = Modifier, +) { + Text( + modifier = modifier, + text = shortcut.label, + style = MaterialTheme.typography.bodyMedium, + color = MaterialTheme.colorScheme.onSurface, + ) +} + +@Composable private fun StartSidePanel( modifier: Modifier, categories: List<ShortcutHelperCategory>, onKeyboardSettingsClicked: () -> Unit, + selectedCategory: ShortcutHelperCategory, + onCategoryClicked: (ShortcutHelperCategory) -> Unit, ) { Column(modifier) { ShortcutsSearchBar() Spacer(modifier = Modifier.heightIn(16.dp)) - CategoriesPanelTwoPane(categories) + CategoriesPanelTwoPane(categories, selectedCategory, onCategoryClicked) Spacer(modifier = Modifier.weight(1f)) KeyboardSettings(onKeyboardSettingsClicked) } } @Composable -private fun CategoriesPanelTwoPane(categories: List<ShortcutHelperCategory>) { - var selected by remember { mutableStateOf(categories.first()) } +private fun CategoriesPanelTwoPane( + categories: List<ShortcutHelperCategory>, + selectedCategory: ShortcutHelperCategory, + onCategoryClicked: (ShortcutHelperCategory) -> Unit +) { Column { categories.fastForEach { CategoryItemTwoPane( label = stringResource(it.labelResId), icon = it.icon, - selected = selected == it, - onClick = { selected = it } + selected = selectedCategory == it, + onClick = { onCategoryClicked(it) } ) } } @@ -305,15 +487,6 @@ private fun CategoryItemTwoPane( } @Composable -fun EndSidePanel(modifier: Modifier) { - Surface( - modifier = modifier, - shape = RoundedCornerShape(28.dp), - color = MaterialTheme.colorScheme.surfaceBright - ) {} -} - -@Composable @OptIn(ExperimentalMaterial3Api::class) private fun TitleBar() { CenterAlignedTopAppBar( @@ -333,6 +506,7 @@ private fun TitleBar() { private fun ShortcutsSearchBar() { var query by remember { mutableStateOf("") } SearchBar( + modifier = Modifier.fillMaxWidth(), colors = SearchBarDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceBright), query = query, active = false, @@ -372,25 +546,6 @@ private fun KeyboardSettings(onClick: () -> Unit) { } } -/** Temporary data class just to populate the UI. */ -private data class ShortcutHelperCategory( - @StringRes val labelResId: Int, - val icon: ImageVector, -) - -// Temporarily populating the categories directly in the UI. -private val categories = - listOf( - ShortcutHelperCategory(R.string.shortcut_helper_category_system, Icons.Default.Tv), - ShortcutHelperCategory( - R.string.shortcut_helper_category_multitasking, - Icons.Default.VerticalSplit - ), - ShortcutHelperCategory(R.string.shortcut_helper_category_input, Icons.Default.Keyboard), - ShortcutHelperCategory(R.string.shortcut_helper_category_app_shortcuts, Icons.Default.Apps), - ShortcutHelperCategory(R.string.shortcut_helper_category_a11y, Icons.Default.Accessibility), - ) - object ShortcutHelper { object Shapes { diff --git a/packages/SystemUI/src/com/android/systemui/keyboard/shortcut/ui/composable/ShortcutHelperTemporaryData.kt b/packages/SystemUI/src/com/android/systemui/keyboard/shortcut/ui/composable/ShortcutHelperTemporaryData.kt new file mode 100644 index 000000000000..fa2388f6287d --- /dev/null +++ b/packages/SystemUI/src/com/android/systemui/keyboard/shortcut/ui/composable/ShortcutHelperTemporaryData.kt @@ -0,0 +1,251 @@ +/* + * Copyright (C) 2024 The Android Open Source Project + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package com.android.systemui.keyboard.shortcut.ui.composable + +import androidx.annotation.StringRes +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Accessibility +import androidx.compose.material.icons.filled.Apps +import androidx.compose.material.icons.filled.ArrowBackIosNew +import androidx.compose.material.icons.filled.Keyboard +import androidx.compose.material.icons.filled.KeyboardCommandKey +import androidx.compose.material.icons.filled.RadioButtonUnchecked +import androidx.compose.material.icons.filled.Tv +import androidx.compose.material.icons.filled.VerticalSplit +import androidx.compose.ui.graphics.vector.ImageVector +import com.android.systemui.res.R + +/** Temporary data classes and data below just to populate the UI. */ +data class ShortcutHelperCategory( + @StringRes val labelResId: Int, + val icon: ImageVector, + val subCategories: List<SubCategory>, +) + +data class SubCategory( + val label: String, + val shortcuts: List<Shortcut>, +) + +data class Shortcut(val label: String, val commands: List<ShortcutCommand>) + +data class ShortcutCommand(val keys: List<ShortcutKey>) + +sealed interface ShortcutKey { + data class Text(val value: String) : ShortcutKey + + data class Icon(val value: ImageVector) : ShortcutKey +} + +// DSL Builder Functions +private fun shortcutHelperCategory( + labelResId: Int, + icon: ImageVector, + block: ShortcutHelperCategoryBuilder.() -> Unit +): ShortcutHelperCategory = ShortcutHelperCategoryBuilder(labelResId, icon).apply(block).build() + +private fun ShortcutHelperCategoryBuilder.subCategory( + label: String, + block: SubCategoryBuilder.() -> Unit +) { + subCategories.add(SubCategoryBuilder(label).apply(block).build()) +} + +private fun SubCategoryBuilder.shortcut(label: String, block: ShortcutBuilder.() -> Unit) { + shortcuts.add(ShortcutBuilder(label).apply(block).build()) +} + +private fun ShortcutBuilder.command(block: ShortcutCommandBuilder.() -> Unit) { + commands.add(ShortcutCommandBuilder().apply(block).build()) +} + +private fun ShortcutCommandBuilder.key(value: String) { + keys.add(ShortcutKey.Text(value)) +} + +private fun ShortcutCommandBuilder.key(value: ImageVector) { + keys.add(ShortcutKey.Icon(value)) +} + +private class ShortcutHelperCategoryBuilder( + private val labelResId: Int, + private val icon: ImageVector +) { + val subCategories = mutableListOf<SubCategory>() + + fun build() = ShortcutHelperCategory(labelResId, icon, subCategories) +} + +private class SubCategoryBuilder(private val label: String) { + val shortcuts = mutableListOf<Shortcut>() + + fun build() = SubCategory(label, shortcuts) +} + +private class ShortcutBuilder(private val label: String) { + val commands = mutableListOf<ShortcutCommand>() + + fun build() = Shortcut(label, commands) +} + +private class ShortcutCommandBuilder { + val keys = mutableListOf<ShortcutKey>() + + fun build() = ShortcutCommand(keys) +} + +object ShortcutHelperTemporaryData { + + // Some shortcuts and their strings below are made up just to populate the UI for now. + // For this reason they are not in translatable resources yet. + val categories = + listOf( + shortcutHelperCategory(R.string.shortcut_helper_category_system, Icons.Default.Tv) { + subCategory("System controls") { + shortcut("Go to home screen") { + command { key(Icons.Default.RadioButtonUnchecked) } + command { + key(Icons.Default.KeyboardCommandKey) + key("H") + } + command { + key(Icons.Default.KeyboardCommandKey) + key("Return") + } + } + shortcut("View recent apps") { + command { + key(Icons.Default.KeyboardCommandKey) + key("Tab") + } + } + shortcut("All apps search") { + command { key(Icons.Default.KeyboardCommandKey) } + } + } + subCategory("System apps") { + shortcut("Go back") { + command { key(Icons.Default.ArrowBackIosNew) } + command { + key(Icons.Default.KeyboardCommandKey) + key("Left arrow") + } + command { + key(Icons.Default.KeyboardCommandKey) + key("ESC") + } + command { + key(Icons.Default.KeyboardCommandKey) + key("Backspace") + } + } + shortcut("View notifications") { + command { + key(Icons.Default.KeyboardCommandKey) + key("N") + } + } + shortcut("Take a screenshot") { + command { key(Icons.Default.KeyboardCommandKey) } + command { key("CTRL") } + command { key("S") } + } + shortcut("Open Settings") { + command { + key(Icons.Default.KeyboardCommandKey) + key("I") + } + } + } + }, + shortcutHelperCategory( + R.string.shortcut_helper_category_multitasking, + Icons.Default.VerticalSplit + ) { + subCategory("Multitasking & windows") { + shortcut("Take a screenshot") { + command { key(Icons.Default.KeyboardCommandKey) } + command { key("CTRL") } + command { key("S") } + } + } + }, + shortcutHelperCategory( + R.string.shortcut_helper_category_input, + Icons.Default.Keyboard + ) { + subCategory("Input") { + shortcut("Open Settings") { + command { + key(Icons.Default.KeyboardCommandKey) + key("I") + } + } + shortcut("View notifications") { + command { + key(Icons.Default.KeyboardCommandKey) + key("N") + } + } + } + }, + shortcutHelperCategory( + R.string.shortcut_helper_category_app_shortcuts, + Icons.Default.Apps + ) { + subCategory("App shortcuts") { + shortcut("Open Settings") { + command { + key(Icons.Default.KeyboardCommandKey) + key("I") + } + } + shortcut("Go back") { + command { key(Icons.Default.ArrowBackIosNew) } + command { + key(Icons.Default.KeyboardCommandKey) + key("Left arrow") + } + command { + key(Icons.Default.KeyboardCommandKey) + key("ESC") + } + command { + key(Icons.Default.KeyboardCommandKey) + key("Backspace") + } + } + } + }, + shortcutHelperCategory( + R.string.shortcut_helper_category_a11y, + Icons.Default.Accessibility + ) { + subCategory("Accessibility shortcuts") { + shortcut("View recent apps") { + command { + key(Icons.Default.KeyboardCommandKey) + key("Tab") + } + } + shortcut("All apps search") { + command { key(Icons.Default.KeyboardCommandKey) } + } + } + } + ) +} |