From 0b5c26d7d2fe1437be51d8eba494fd637eeda1e3 Mon Sep 17 00:00:00 2001 From: Sebastiano Poggi Date: Mon, 25 Nov 2024 15:40:29 +0100 Subject: [PATCH] Fixup after dividers (#700) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix Dividers after #699 was merged * Fix thematic breaks rendering in Markdown * Fix dropdown in Markdown sample It was very™ broken * Cleanup --- .../rendering/DefaultMarkdownBlockRenderer.kt | 17 +++-- .../samples/ideplugin/ComponentShowcaseTab.kt | 2 +- .../samples/standalone/view/ComponentsView.kt | 2 +- .../standalone/view/component/Scrollbars.kt | 1 + .../view/markdown/MarkdownEditor.kt | 66 +++++++++---------- .../jetbrains/jewel/ui/component/Divider.kt | 15 ++--- .../jewel/ui/component/GroupHeader.kt | 2 + 7 files changed, 58 insertions(+), 47 deletions(-) diff --git a/markdown/core/src/main/kotlin/org/jetbrains/jewel/markdown/rendering/DefaultMarkdownBlockRenderer.kt b/markdown/core/src/main/kotlin/org/jetbrains/jewel/markdown/rendering/DefaultMarkdownBlockRenderer.kt index ecb8f107b4..b9481c9edc 100644 --- a/markdown/core/src/main/kotlin/org/jetbrains/jewel/markdown/rendering/DefaultMarkdownBlockRenderer.kt +++ b/markdown/core/src/main/kotlin/org/jetbrains/jewel/markdown/rendering/DefaultMarkdownBlockRenderer.kt @@ -5,7 +5,6 @@ import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row @@ -56,7 +55,7 @@ import org.jetbrains.jewel.markdown.MarkdownBlock.Paragraph import org.jetbrains.jewel.markdown.MarkdownBlock.ThematicBreak import org.jetbrains.jewel.markdown.WithInlineMarkdown import org.jetbrains.jewel.markdown.extensions.MarkdownRendererExtension -import org.jetbrains.jewel.ui.Orientation.Horizontal +import org.jetbrains.jewel.ui.Orientation import org.jetbrains.jewel.ui.component.Divider import org.jetbrains.jewel.ui.component.HorizontallyScrollableContainer import org.jetbrains.jewel.ui.component.Text @@ -182,7 +181,12 @@ public open class DefaultMarkdownBlockRenderer( if (underlineWidth > 0.dp && underlineColor.isSpecified) { Spacer(Modifier.height(underlineGap)) - Divider(Horizontal, color = underlineColor, thickness = underlineWidth) + Divider( + orientation = Orientation.Horizontal, + modifier = Modifier.fillMaxWidth(), + color = underlineColor, + thickness = underlineWidth, + ) } } } @@ -415,7 +419,12 @@ public open class DefaultMarkdownBlockRenderer( @Composable override fun renderThematicBreak(styling: MarkdownStyling.ThematicBreak) { - Box(Modifier.padding(styling.padding).height(styling.lineWidth).background(styling.lineColor)) + Divider( + orientation = Orientation.Horizontal, + modifier = Modifier.padding(styling.padding).fillMaxWidth(), + color = styling.lineColor, + thickness = styling.lineWidth, + ) } @Composable diff --git a/samples/ide-plugin/src/main/kotlin/org/jetbrains/jewel/samples/ideplugin/ComponentShowcaseTab.kt b/samples/ide-plugin/src/main/kotlin/org/jetbrains/jewel/samples/ideplugin/ComponentShowcaseTab.kt index 62f0193114..1b272975a6 100644 --- a/samples/ide-plugin/src/main/kotlin/org/jetbrains/jewel/samples/ideplugin/ComponentShowcaseTab.kt +++ b/samples/ide-plugin/src/main/kotlin/org/jetbrains/jewel/samples/ideplugin/ComponentShowcaseTab.kt @@ -294,7 +294,7 @@ private fun RowScope.ColumnTwo(project: Project) { Column(Modifier.trackActivation().weight(1f), verticalArrangement = Arrangement.spacedBy(16.dp)) { MarkdownExample(project) - Divider(Orientation.Horizontal) + Divider(Orientation.Horizontal, Modifier.fillMaxWidth()) var activated by remember { mutableStateOf(false) } Text("activated: $activated", Modifier.onActivated { activated = it }) diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/ComponentsView.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/ComponentsView.kt index 797065605a..1845fee4a3 100644 --- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/ComponentsView.kt +++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/ComponentsView.kt @@ -35,7 +35,7 @@ import org.jetbrains.jewel.ui.theme.tooltipStyle fun ComponentsView() { Row(Modifier.trackActivation().fillMaxSize().background(JewelTheme.globalColors.panelBackground)) { ComponentsToolBar() - Divider(Orientation.Vertical) + Divider(Orientation.Vertical, Modifier.fillMaxHeight()) ComponentView(ComponentsViewModel.currentView) } } diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Scrollbars.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Scrollbars.kt index a85e31d75e..53d016648c 100644 --- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Scrollbars.kt +++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Scrollbars.kt @@ -158,6 +158,7 @@ private fun LazyColumnWithScrollbar(style: ScrollbarStyle, modifier: Modifier) { if (index != LIST_ITEMS.lastIndex) { Divider( orientation = Orientation.Horizontal, + modifier = Modifier.fillMaxWidth(), color = JewelTheme.globalColors.borders.normal, ) } diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/markdown/MarkdownEditor.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/markdown/MarkdownEditor.kt index fd00e54efc..73252dad60 100644 --- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/markdown/MarkdownEditor.kt +++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/markdown/MarkdownEditor.kt @@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width @@ -23,12 +24,14 @@ import com.darkrockstudios.libraries.mpfilepicker.FilePicker import com.darkrockstudios.libraries.mpfilepicker.JvmFile import org.jetbrains.jewel.foundation.theme.JewelTheme import org.jetbrains.jewel.ui.Orientation -import org.jetbrains.jewel.ui.component.ComboBox import org.jetbrains.jewel.ui.component.Divider +import org.jetbrains.jewel.ui.component.ListComboBox +import org.jetbrains.jewel.ui.component.ListItemState import org.jetbrains.jewel.ui.component.OutlinedButton -import org.jetbrains.jewel.ui.component.PopupMenu +import org.jetbrains.jewel.ui.component.SimpleListItem import org.jetbrains.jewel.ui.component.Text import org.jetbrains.jewel.ui.component.TextArea +import org.jetbrains.jewel.ui.theme.simpleListItemStyle @Composable internal fun MarkdownEditor(state: TextFieldState, modifier: Modifier = Modifier) { @@ -37,14 +40,18 @@ internal fun MarkdownEditor(state: TextFieldState, modifier: Modifier = Modifier modifier = Modifier.fillMaxWidth().background(JewelTheme.globalColors.panelBackground).padding(8.dp), onLoadMarkdown = { state.edit { replace(0, length, it) } }, ) - Divider(orientation = Orientation.Horizontal) + Divider(orientation = Orientation.Horizontal, Modifier.fillMaxWidth()) Editor(state = state, modifier = Modifier.fillMaxWidth().weight(1f)) } } @Composable private fun ControlsRow(modifier: Modifier = Modifier, onLoadMarkdown: (String) -> Unit) { - Row(modifier.horizontalScroll(rememberScrollState()), horizontalArrangement = Arrangement.spacedBy(16.dp)) { + Row( + modifier.horizontalScroll(rememberScrollState()), + horizontalArrangement = Arrangement.spacedBy(16.dp), + verticalAlignment = Alignment.CenterVertically, + ) { var showFilePicker by remember { mutableStateOf(false) } OutlinedButton(onClick = { showFilePicker = true }, modifier = Modifier.padding(start = 2.dp)) { Text("Load file...") @@ -63,36 +70,29 @@ private fun ControlsRow(modifier: Modifier = Modifier, onLoadMarkdown: (String) OutlinedButton(onClick = { onLoadMarkdown("") }) { Text("Clear") } - Box { - var selected by remember { mutableStateOf("Jewel readme") } - ComboBox( - modifier = Modifier.width(140.dp), - labelText = selected, - popupContent = { - PopupMenu(horizontalAlignment = Alignment.Start, onDismissRequest = { true }) { - selectableItem( - selected = selected == "Jewel readme", - onClick = { - selected = "Jewel readme" - onLoadMarkdown(JewelReadme) - }, - ) { - Text("Jewel readme") - } + Spacer(Modifier.weight(1f)) - selectableItem( - selected = selected == "Markdown catalog", - onClick = { - selected = "Markdown catalog" - onLoadMarkdown(MarkdownCatalog) - }, - ) { - Text("Markdown catalog") - } - } - }, - ) - } + val comboBoxItems = remember { listOf("Jewel readme", "Markdown catalog") } + var selected by remember { mutableStateOf("Jewel readme") } + ListComboBox( + items = comboBoxItems, + modifier = Modifier.width(170.dp).padding(end = 2.dp), + isEditable = false, + maxPopupHeight = 150.dp, + onSelectedItemChange = { + selected = it + onLoadMarkdown(if (selected == "Jewel readme") JewelReadme else MarkdownCatalog) + }, + listItemContent = { item, isSelected, _, isItemHovered, isPreviewSelection -> + SimpleListItem( + text = item, + state = ListItemState(isSelected, isItemHovered, isPreviewSelection), + modifier = Modifier, + style = JewelTheme.simpleListItemStyle, + contentDescription = item, + ) + }, + ) } } diff --git a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Divider.kt b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Divider.kt index 255586bf29..2f288629df 100644 --- a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Divider.kt +++ b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Divider.kt @@ -15,6 +15,7 @@ import org.jetbrains.jewel.foundation.theme.JewelTheme import org.jetbrains.jewel.ui.Orientation import org.jetbrains.jewel.ui.component.styling.DividerStyle import org.jetbrains.jewel.ui.theme.dividerStyle +import org.jetbrains.jewel.ui.util.thenIf @Composable public fun Divider( @@ -25,13 +26,6 @@ public fun Divider( startIndent: Dp = Dp.Unspecified, style: DividerStyle = JewelTheme.dividerStyle, ) { - val indentModifier = - if (startIndent.value != 0f) { - Modifier.padding(start = startIndent.takeOrElse { style.metrics.startIndent }) - } else { - Modifier - } - val actualThickness = thickness.takeOrElse { style.metrics.thickness } val orientationModifier = when (orientation) { @@ -40,5 +34,10 @@ public fun Divider( } val lineColor = color.takeOrElse { style.color } - Box(modifier.then(indentModifier).then(orientationModifier).background(color = lineColor)) + Box( + modifier + .thenIf(startIndent.value != 0f) { padding(start = startIndent.takeOrElse { style.metrics.startIndent }) } + .then(orientationModifier) + .background(color = lineColor) + ) } diff --git a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/GroupHeader.kt b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/GroupHeader.kt index 175d8d147a..ed30325a18 100644 --- a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/GroupHeader.kt +++ b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/GroupHeader.kt @@ -1,6 +1,7 @@ package org.jetbrains.jewel.ui.component import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -21,6 +22,7 @@ public fun GroupHeader( Divider( orientation = Orientation.Horizontal, + modifier = Modifier.fillMaxWidth(), color = style.colors.divider, thickness = style.metrics.dividerThickness, startIndent = style.metrics.indent,