diff --git a/app/src/main/java/com/ganjoor/android/ui/GanjoorApp.kt b/app/src/main/java/com/ganjoor/android/ui/GanjoorApp.kt index 786ded0..ab2fc3f 100644 --- a/app/src/main/java/com/ganjoor/android/ui/GanjoorApp.kt +++ b/app/src/main/java/com/ganjoor/android/ui/GanjoorApp.kt @@ -110,7 +110,11 @@ fun GanjoorApp() { // Up to three list columns beside the poets; below this, only the newest one. val expanded by rememberUpdatedState(maxWidth >= 840.dp) // On a large screen reading settings open in a panel on the left, where the dictionary - // opens, so the page stays in view and shows each change as it is made. + // opens, so the page stays in view and shows each change as it is made — but only where + // the browser still has its own room beside the panel. Below that the panel would squeeze + // the columns and the poem into less than the layout is built for, so the sheet is used + // instead, exactly as on a phone. + val settingsPanel by rememberUpdatedState(maxWidth - SidePanelWidth >= 600.dp) Row(Modifier.fillMaxSize()) { Box(Modifier.weight(1f)) { NavHost( @@ -237,7 +241,7 @@ fun GanjoorApp() { } } } - if (wide) { + if (settingsPanel) { AnimatedVisibility( visible = settingsOpen, enter = expandHorizontally() + fadeIn(), @@ -249,7 +253,7 @@ fun GanjoorApp() { } // Inside the provider: the sheet reads LocalOpenAbout, so it has to be in scope. - if (settingsOpen && !wide) ReadingSettingsSheet(onDismiss = { settingsOpen = false }) + if (settingsOpen && !settingsPanel) ReadingSettingsSheet(onDismiss = { settingsOpen = false }) } } } diff --git a/app/src/main/java/com/ganjoor/android/ui/PoemScreen.kt b/app/src/main/java/com/ganjoor/android/ui/PoemScreen.kt index 11a3d47..32b1725 100644 --- a/app/src/main/java/com/ganjoor/android/ui/PoemScreen.kt +++ b/app/src/main/java/com/ganjoor/android/ui/PoemScreen.kt @@ -93,6 +93,14 @@ fun PoemScreen( // finds, so the couplet's own actions live at its foot rather than behind a tap between words. var tapped by remember { mutableStateOf(null) } + BoxWithConstraints(Modifier.fillMaxSize()) { + // Whether the dictionary gets a column of its own is not a question about the window but + // about what is left of this page once the columns have taken theirs. On a book-style + // foldable held open in portrait the page is already down to ~450dp, and a panel beside it + // left the verse about 75dp wide — one or two characters a line. Where it does not fit, the + // sheet is the better answer: it covers the foot of the poem but leaves the lines whole. + val roomForPanel = wide && maxWidth - SidePanelWidth >= MinPageMeasure + Load( key = fullUrl, block = { Ganjoor.poem(fullUrl) }, @@ -222,7 +230,7 @@ fun PoemScreen( } } } - if (wide) { + if (roomForPanel) { AnimatedVisibility( visible = tapped != null, enter = expandHorizontally() + fadeIn(), @@ -240,7 +248,7 @@ fun PoemScreen( } } - if (!wide) { + if (!roomForPanel) { tapped?.let { tap -> WordSheet( word = tap.word, @@ -249,6 +257,7 @@ fun PoemScreen( ) } } + } } /** A word someone tapped: what to look up, the couplet it came from, and where it sits in its verse. */ diff --git a/app/src/main/java/com/ganjoor/android/ui/ReadingSettings.kt b/app/src/main/java/com/ganjoor/android/ui/ReadingSettings.kt index 23bc60d..379c22d 100644 --- a/app/src/main/java/com/ganjoor/android/ui/ReadingSettings.kt +++ b/app/src/main/java/com/ganjoor/android/ui/ReadingSettings.kt @@ -81,7 +81,7 @@ fun ReadingSettingsPanel(onDismiss: () -> Unit) { BackHandler(onBack = onDismiss) Surface( color = MaterialTheme.colorScheme.surfaceContainerLow, - modifier = Modifier.width(360.dp).fillMaxHeight(), + modifier = Modifier.width(SidePanelWidth).fillMaxHeight(), ) { Column(Modifier.statusBarsPadding()) { Row( diff --git a/app/src/main/java/com/ganjoor/android/ui/WordSheet.kt b/app/src/main/java/com/ganjoor/android/ui/WordSheet.kt index db88f04..2a86d80 100644 --- a/app/src/main/java/com/ganjoor/android/ui/WordSheet.kt +++ b/app/src/main/java/com/ganjoor/android/ui/WordSheet.kt @@ -48,6 +48,16 @@ import com.ganjoor.android.data.LocalAssistant import com.ganjoor.android.data.Pronunciation import com.ganjoor.android.ui.theme.readingStyle +/** The width of a side panel — the dictionary and the reading settings share it. */ +val SidePanelWidth = 360.dp + +/** + * The narrowest the page may be left once a side panel opens beside it. Below this the panel is + * not worth its room: on a book-style foldable the columns had already taken theirs, and a 360dp + * panel left the verse about 75dp wide, breaking it to one or two characters a line. + */ +val MinPageMeasure = 400.dp + /** English prose inside an otherwise right-to-left sheet. */ @Composable private fun LeftToRight(content: @Composable () -> Unit) { @@ -102,7 +112,7 @@ fun WordPanel(word: String, onDismiss: () -> Unit, passage: Bookmark? = null) { BackHandler(onBack = onDismiss) Surface( color = MaterialTheme.colorScheme.surfaceContainerLow, - modifier = Modifier.width(360.dp).fillMaxHeight(), + modifier = Modifier.width(SidePanelWidth).fillMaxHeight(), ) { Column(Modifier.statusBarsPadding()) { Row( diff --git a/design/components/ColumnBrowser/README.md b/design/components/ColumnBrowser/README.md index b249451..cca9b1e 100644 --- a/design/components/ColumnBrowser/README.md +++ b/design/components/ColumnBrowser/README.md @@ -45,13 +45,18 @@ On large screens, tapping a word opens **WordPanel** on the left instead of the - The poem moves over to make room, so nothing being read is covered. - The tapped word stays highlighted in the verse (`secondary-container` / `on-secondary-container`), on phones too. - ✕ or Back closes the panel. +- A panel is only opened where the page keeps at least **400dp** beside it. On a book-style + foldable held open in portrait the columns have already taken their room, and a panel + there left the verse about 75dp wide — one or two characters a line. Below that the sheet + is used instead: it covers the foot of the poem but leaves the lines whole. ## Reading settings On large screens the gear opens **ReadingSettingsPanel** on the left, where the dictionary opens, instead of the bottom sheet: - It has the same width and surface as the dictionary panel, with a "Reading settings" header and a ✕ button. The settings and their order are the same as in the sheet. - The page stays in view beside the panel, so a change of theme, font, weight or size shows on the poem as it's made. -- ✕ or Back closes it. Phones keep the bottom sheet. +- ✕ or Back closes it. Phones keep the bottom sheet, and so does any window too narrow to + leave the browser its own 600dp beside the panel. ## Loading