From 75e38a97dd50dc01cd42971f0d43b57fee4e4b5f Mon Sep 17 00:00:00 2001 From: William Brawner Date: Mon, 6 May 2024 00:26:33 -0600 Subject: [PATCH] Implement collapsing toolbar on editor --- .../wbrawner/simplemarkdown/ui/MainScreen.kt | 33 ++++++++++++++----- .../simplemarkdown/ui/MarkdownInfoScreen.kt | 2 ++ .../simplemarkdown/ui/MarkdownText.kt | 12 ++++++- .../simplemarkdown/ui/MarkdownTextField.kt | 14 +++----- .../simplemarkdown/ui/MarkdownTopAppBar.kt | 10 +++++- .../simplemarkdown/ui/SettingsScreen.kt | 2 ++ .../simplemarkdown/ui/SupportScreen.kt | 2 ++ 7 files changed, 54 insertions(+), 21 deletions(-) diff --git a/app/src/main/java/com/wbrawner/simplemarkdown/ui/MainScreen.kt b/app/src/main/java/com/wbrawner/simplemarkdown/ui/MainScreen.kt index 79b6196..12a47b6 100644 --- a/app/src/main/java/com/wbrawner/simplemarkdown/ui/MainScreen.kt +++ b/app/src/main/java/com/wbrawner/simplemarkdown/ui/MainScreen.kt @@ -24,6 +24,7 @@ import androidx.compose.material3.AlertDialog import androidx.compose.material3.Checkbox import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenuItem +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme @@ -35,6 +36,8 @@ import androidx.compose.material3.Tab import androidx.compose.material3.TabRow import androidx.compose.material3.Text import androidx.compose.material3.TextButton +import androidx.compose.material3.TopAppBarDefaults +import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.State @@ -46,6 +49,7 @@ import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalSoftwareKeyboardController import androidx.compose.ui.unit.dp @@ -121,6 +125,7 @@ fun MainScreen( ) } +@OptIn(ExperimentalMaterial3Api::class) @Composable private fun MainScreen( fileName: String = "Untitled.md", @@ -189,7 +194,7 @@ private fun MainScreen( text = { Text(it.text) } ) } - + val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior() MarkdownNavigationDrawer(navigate) { drawerState -> Scaffold( topBar = { @@ -251,7 +256,8 @@ private fun MainScreen( } } } - } + }, + scrollBehavior = scrollBehavior ) }, snackbarHost = { @@ -276,7 +282,7 @@ private fun MainScreen( reload = reloadToggle, markdown = markdown, setMarkdown = setMarkdown, - enableReadability = enableReadability + enableReadability = enableReadability, ) Spacer( modifier = Modifier @@ -303,7 +309,8 @@ private fun MainScreen( setMarkdown = setMarkdown, lockSwiping = lockSwiping, enableReadability = enableReadability, - reloadToggle = reloadToggle + reloadToggle = reloadToggle, + scrollBehavior = scrollBehavior ) } } @@ -312,14 +319,15 @@ private fun MainScreen( } @Composable -@OptIn(ExperimentalFoundationApi::class) +@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class) private fun TabbedMarkdownEditor( initialMarkdown: String, markdown: String, setMarkdown: (String) -> Unit, lockSwiping: Boolean, enableReadability: Boolean, - reloadToggle: Int + reloadToggle: Int, + scrollBehavior: TopAppBarScrollBehavior ) { val coroutineScope = rememberCoroutineScope() val pagerState = rememberPagerState { 2 } @@ -345,14 +353,21 @@ private fun TabbedMarkdownEditor( } if (page == 0) { MarkdownTextField( - modifier = Modifier.fillMaxSize(), + modifier = Modifier + .fillMaxSize() + .nestedScroll(scrollBehavior.nestedScrollConnection), markdown = initialMarkdown, setMarkdown = setMarkdown, enableReadability = enableReadability, - reload = reloadToggle + reload = reloadToggle, ) } else { - MarkdownText(modifier = Modifier.fillMaxSize(), markdown) + MarkdownText( + modifier = Modifier + .fillMaxSize() + .nestedScroll(scrollBehavior.nestedScrollConnection), + markdown + ) } } } diff --git a/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownInfoScreen.kt b/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownInfoScreen.kt index 2eb5a7e..fc4afce 100644 --- a/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownInfoScreen.kt +++ b/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownInfoScreen.kt @@ -2,6 +2,7 @@ package com.wbrawner.simplemarkdown.ui import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -12,6 +13,7 @@ import androidx.compose.ui.platform.LocalContext import androidx.navigation.NavController import com.wbrawner.simplemarkdown.utility.readAssetToString +@OptIn(ExperimentalMaterial3Api::class) @Composable fun MarkdownInfoScreen( title: String, diff --git a/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownText.kt b/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownText.kt index 82e3bbf..c4f1e51 100644 --- a/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownText.kt +++ b/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownText.kt @@ -3,6 +3,10 @@ package com.wbrawner.simplemarkdown.ui import android.view.ViewGroup import android.webkit.WebView import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -54,7 +58,13 @@ fun MarkdownText(modifier: Modifier = Modifier, markdown: String) { setHtml(parsedHtml) } } - HtmlText(modifier = modifier, html = html) + Column( + modifier = modifier + .fillMaxSize() + .verticalScroll(rememberScrollState()), + ) { + HtmlText(modifier = modifier, html = html) + } } @OptIn(ExperimentalStdlibApi::class) diff --git a/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownTextField.kt b/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownTextField.kt index c6448fd..24defff 100644 --- a/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownTextField.kt +++ b/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownTextField.kt @@ -15,6 +15,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.material3.TextFieldDefaults +import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.mutableStateOf @@ -22,6 +23,7 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor +import androidx.compose.ui.input.nestedscroll.nestedScroll import androidx.compose.ui.text.AnnotatedString import androidx.compose.ui.text.SpanStyle import androidx.compose.ui.text.TextRange @@ -61,14 +63,6 @@ fun MarkdownTextField( focusedIndicatorColor = Color.Transparent, unfocusedIndicatorColor = Color.Transparent ) - Column( - modifier = modifier - .fillMaxSize() - .imePadding() - .verticalScroll( - rememberScrollState() - ) - ) { val interactionSource = remember { MutableInteractionSource() } val textStyle = TextStyle.Default.copy( fontFamily = FontFamily.Monospace, @@ -77,7 +71,8 @@ fun MarkdownTextField( CompositionLocalProvider(LocalTextSelectionColors provides colors.textSelectionColors) { BasicTextField( value = textFieldValue, - modifier = Modifier.fillMaxSize(), + modifier = modifier.fillMaxSize() + .imePadding(), onValueChange = setTextFieldAndViewModelValues, enabled = true, readOnly = false, @@ -107,7 +102,6 @@ fun MarkdownTextField( } ) } - } } private fun String.annotate(enableReadability: Boolean): AnnotatedString { diff --git a/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownTopAppBar.kt b/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownTopAppBar.kt index e90d10a..7e8d6d7 100644 --- a/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownTopAppBar.kt +++ b/app/src/main/java/com/wbrawner/simplemarkdown/ui/MarkdownTopAppBar.kt @@ -8,8 +8,13 @@ import androidx.compose.material3.DrawerState import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarColors +import androidx.compose.material3.TopAppBarDefaults +import androidx.compose.material3.TopAppBarDefaults.topAppBarColors +import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope @@ -23,13 +28,15 @@ fun MarkdownTopAppBar( goBack: () -> Unit, backAsUp: Boolean = true, drawerState: DrawerState? = null, - actions: (@Composable RowScope.() -> Unit)? = null + actions: (@Composable RowScope.() -> Unit)? = null, + scrollBehavior: TopAppBarScrollBehavior? = null, ) { val coroutineScope = rememberCoroutineScope() TopAppBar( title = { Text(text = title, maxLines = 1, overflow = TextOverflow.Ellipsis) }, + colors = topAppBarColors(scrolledContainerColor = MaterialTheme.colorScheme.surface), navigationIcon = { val (icon, contentDescription, onClick) = remember { if (backAsUp) { @@ -53,5 +60,6 @@ fun MarkdownTopAppBar( } }, actions = actions ?: {}, + scrollBehavior = scrollBehavior ) } \ No newline at end of file diff --git a/app/src/main/java/com/wbrawner/simplemarkdown/ui/SettingsScreen.kt b/app/src/main/java/com/wbrawner/simplemarkdown/ui/SettingsScreen.kt index f86c480..a519c9b 100644 --- a/app/src/main/java/com/wbrawner/simplemarkdown/ui/SettingsScreen.kt +++ b/app/src/main/java/com/wbrawner/simplemarkdown/ui/SettingsScreen.kt @@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material3.AlertDialog +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme import androidx.compose.material3.RadioButton import androidx.compose.material3.Scaffold @@ -32,6 +33,7 @@ import com.wbrawner.simplemarkdown.ui.theme.SimpleMarkdownTheme import com.wbrawner.simplemarkdown.utility.Preference import com.wbrawner.simplemarkdown.utility.PreferenceHelper +@OptIn(ExperimentalMaterial3Api::class) @Composable fun SettingsScreen(navController: NavController, preferenceHelper: PreferenceHelper) { Scaffold(topBar = { diff --git a/app/src/main/java/com/wbrawner/simplemarkdown/ui/SupportScreen.kt b/app/src/main/java/com/wbrawner/simplemarkdown/ui/SupportScreen.kt index fd70442..484d9f5 100644 --- a/app/src/main/java/com/wbrawner/simplemarkdown/ui/SupportScreen.kt +++ b/app/src/main/java/com/wbrawner/simplemarkdown/ui/SupportScreen.kt @@ -18,6 +18,7 @@ import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Favorite import androidx.compose.material3.Button import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold @@ -34,6 +35,7 @@ import androidx.navigation.NavController import com.wbrawner.simplemarkdown.R import com.wbrawner.simplemarkdown.utility.SupportLinks +@OptIn(ExperimentalMaterial3Api::class) @Composable fun SupportScreen(navController: NavController) { Scaffold(topBar = {