From afaa7cda33ad9f71b6447e303f9376144ba94002 Mon Sep 17 00:00:00 2001 From: fscarponi Date: Tue, 10 Oct 2023 18:11:29 +0200 Subject: [PATCH] Replace IconButtonMetrics with IconButtonStyle for effective theming The existing metric defining approach, IconButtonMetrics, was restricting the theming of the IconButton component effectively. Thus, the 'IconButtonMetrics' was replaced by 'IconButtonStyle' and the necessary changes for the field change were implemented. This would assist in providing the same theme across different platforms. The 'IconButton' has been made theme-aware by allowing access to theme and style via properties. Changes were made in implementations concerning IntelliJTheme, BaseIntUiTheme, and ComponentShowcaseTab. File names were also appropriately renamed. --- .../main/kotlin/org/jetbrains/jewel/Button.kt | 56 ------------- .../kotlin/org/jetbrains/jewel/IconButton.kt | 79 ++++++++++++++++++ .../jewel/IntelliJComponentStyling.kt | 10 +-- .../org/jetbrains/jewel/IntelliJTheme.kt | 8 +- .../jewel/styling/IconButtonMetrics.kt | 39 ++++++++- .../org/jetbrains/jewel/bridge/IntUiBridge.kt | 21 ++++- .../jewel/intui/core/BaseIntUiTheme.kt | 4 +- .../jewel/intui/standalone/IntUiTheme.kt | 12 +-- .../styling/IntUiIconButtonMetrics.kt | 15 ---- .../styling/IntUiIconButtonStyling.kt | 82 +++++++++++++++++++ .../samples/ideplugin/ComponentShowcaseTab.kt | 11 ++- .../samples/standalone/components/Buttons.kt | 8 -- 12 files changed, 242 insertions(+), 103 deletions(-) create mode 100644 core/src/main/kotlin/org/jetbrains/jewel/IconButton.kt delete mode 100644 int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiIconButtonMetrics.kt create mode 100644 int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiIconButtonStyling.kt diff --git a/core/src/main/kotlin/org/jetbrains/jewel/Button.kt b/core/src/main/kotlin/org/jetbrains/jewel/Button.kt index 8d0f6691fd..7521dda449 100644 --- a/core/src/main/kotlin/org/jetbrains/jewel/Button.kt +++ b/core/src/main/kotlin/org/jetbrains/jewel/Button.kt @@ -8,7 +8,6 @@ import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.PressInteraction import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.BoxScope import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.defaultMinSize @@ -25,7 +24,6 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.takeOrElse import androidx.compose.ui.semantics.Role import androidx.compose.ui.text.TextStyle @@ -37,7 +35,6 @@ import org.jetbrains.jewel.CommonStateBitMask.Pressed import org.jetbrains.jewel.foundation.Stroke import org.jetbrains.jewel.foundation.border import org.jetbrains.jewel.styling.ButtonStyle -import org.jetbrains.jewel.styling.IconButtonMetrics @Composable fun DefaultButton( @@ -81,59 +78,6 @@ fun OutlinedButton( ) } -@Composable -fun IconButton( - onClick: () -> Unit, - modifier: Modifier = Modifier, - enabled: Boolean = true, - metrics: IconButtonMetrics = IntelliJTheme.iconButtonMetrics, - interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, - content: @Composable (BoxScope.(ButtonState) -> Unit), -) { - var buttonState by remember(interactionSource) { - mutableStateOf(ButtonState.of(enabled = enabled)) - } - - remember(enabled) { - buttonState = buttonState.copy(enabled = enabled) - } - - LaunchedEffect(interactionSource) { - interactionSource.interactions.collect { interaction -> - when (interaction) { - is PressInteraction.Press -> buttonState = buttonState.copy(pressed = true) - is PressInteraction.Cancel, is PressInteraction.Release -> - buttonState = - buttonState.copy(pressed = false) - - is HoverInteraction.Enter -> buttonState = buttonState.copy(hovered = true) - is HoverInteraction.Exit -> buttonState = buttonState.copy(hovered = false) - is FocusInteraction.Focus -> buttonState = buttonState.copy(focused = true) - is FocusInteraction.Unfocus -> buttonState = buttonState.copy(focused = false) - } - } - } - val shape = RoundedCornerShape(metrics.cornerSize) - Box( - modifier = modifier - .defaultMinSize(metrics.minSize.width, metrics.minSize.height) - .clickable( - onClick = onClick, - enabled = enabled, - role = Role.Button, - interactionSource = interactionSource, - indication = NoIndication, - ) - .clip(shape) - .padding(metrics.padding), - propagateMinConstraints = true, - contentAlignment = Alignment.Center, - content = { - content(buttonState) - }, - ) -} - @Composable private fun ButtonImpl( onClick: () -> Unit, diff --git a/core/src/main/kotlin/org/jetbrains/jewel/IconButton.kt b/core/src/main/kotlin/org/jetbrains/jewel/IconButton.kt new file mode 100644 index 0000000000..b682cde80d --- /dev/null +++ b/core/src/main/kotlin/org/jetbrains/jewel/IconButton.kt @@ -0,0 +1,79 @@ +package org.jetbrains.jewel + +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.FocusInteraction +import androidx.compose.foundation.interaction.HoverInteraction +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.interaction.PressInteraction +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.BoxScope +import androidx.compose.foundation.layout.defaultMinSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.semantics.Role +import org.jetbrains.jewel.styling.IconButtonStyle + +@Composable +fun IconButton( + onClick: () -> Unit, + modifier: Modifier = Modifier, + enabled: Boolean = true, + style: IconButtonStyle = IntelliJTheme.iconButtonStyle, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + content: @Composable (BoxScope.(ButtonState) -> Unit), +) { + var buttonState by remember(interactionSource) { + mutableStateOf(ButtonState.of(enabled = enabled)) + } + + remember(enabled) { + buttonState = buttonState.copy(enabled = enabled) + } + + LaunchedEffect(interactionSource) { + interactionSource.interactions.collect { interaction -> + when (interaction) { + is PressInteraction.Press -> buttonState = buttonState.copy(pressed = true) + is PressInteraction.Cancel, is PressInteraction.Release -> + buttonState = + buttonState.copy(pressed = false) + + is HoverInteraction.Enter -> buttonState = buttonState.copy(hovered = true) + is HoverInteraction.Exit -> buttonState = buttonState.copy(hovered = false) + is FocusInteraction.Focus -> buttonState = buttonState.copy(focused = true) + is FocusInteraction.Unfocus -> buttonState = buttonState.copy(focused = false) + } + } + } + val shape = RoundedCornerShape(style.metrics.cornerSize) + val background by style.colors.backgroundFor(buttonState) + Box( + modifier = modifier + .defaultMinSize(style.metrics.minSize.width, style.metrics.minSize.height) + .clickable( + onClick = onClick, + enabled = enabled, + role = Role.Button, + interactionSource = interactionSource, + indication = NoIndication, + ) + .clip(shape) + .padding(style.metrics.padding) + .background(background), + propagateMinConstraints = true, + contentAlignment = Alignment.Center, + content = { + content(buttonState) + }, + ) +} diff --git a/core/src/main/kotlin/org/jetbrains/jewel/IntelliJComponentStyling.kt b/core/src/main/kotlin/org/jetbrains/jewel/IntelliJComponentStyling.kt index 6c34fed642..53b478cc74 100644 --- a/core/src/main/kotlin/org/jetbrains/jewel/IntelliJComponentStyling.kt +++ b/core/src/main/kotlin/org/jetbrains/jewel/IntelliJComponentStyling.kt @@ -9,7 +9,7 @@ import org.jetbrains.jewel.styling.DividerStyle import org.jetbrains.jewel.styling.DropdownStyle import org.jetbrains.jewel.styling.GroupHeaderStyle import org.jetbrains.jewel.styling.HorizontalProgressBarStyle -import org.jetbrains.jewel.styling.IconButtonMetrics +import org.jetbrains.jewel.styling.IconButtonStyle import org.jetbrains.jewel.styling.LabelledTextFieldStyle import org.jetbrains.jewel.styling.LazyTreeStyle import org.jetbrains.jewel.styling.LinkStyle @@ -43,7 +43,7 @@ class IntelliJComponentStyling( val textFieldStyle: TextFieldStyle, val circularProgressStyle: CircularProgressStyle, val tooltipStyle: TooltipStyle, - val iconButtonMetrics: IconButtonMetrics, + val iconButtonStyle: IconButtonStyle, ) { override fun equals(other: Any?): Boolean { @@ -72,7 +72,7 @@ class IntelliJComponentStyling( if (textFieldStyle != other.textFieldStyle) return false if (circularProgressStyle != other.circularProgressStyle) return false if (tooltipStyle != other.tooltipStyle) return false - if (iconButtonMetrics != other.iconButtonMetrics) return false + if (iconButtonStyle != other.iconButtonStyle) return false return true } @@ -98,7 +98,7 @@ class IntelliJComponentStyling( result = 31 * result + textFieldStyle.hashCode() result = 31 * result + circularProgressStyle.hashCode() result = 31 * result + tooltipStyle.hashCode() - result = 31 * result + iconButtonMetrics.hashCode() + result = 31 * result + iconButtonStyle.hashCode() return result } @@ -110,5 +110,5 @@ class IntelliJComponentStyling( "labelledTextFieldStyle=$labelledTextFieldStyle, lazyTreeStyle=$lazyTreeStyle, linkStyle=$linkStyle, " + "menuStyle=$menuStyle, outlinedButtonStyle=$outlinedButtonStyle, radioButtonStyle=$radioButtonStyle, " + "scrollbarStyle=$scrollbarStyle, textAreaStyle=$textAreaStyle, textFieldStyle=$textFieldStyle, " + - "circularProgressStyle=$circularProgressStyle, tooltipStyle=$tooltipStyle)" + "circularProgressStyle=$circularProgressStyle, tooltipStyle=$tooltipStyle, iconButtonStyle=$iconButtonStyle)" } diff --git a/core/src/main/kotlin/org/jetbrains/jewel/IntelliJTheme.kt b/core/src/main/kotlin/org/jetbrains/jewel/IntelliJTheme.kt index 0bd5231817..9b5472886d 100644 --- a/core/src/main/kotlin/org/jetbrains/jewel/IntelliJTheme.kt +++ b/core/src/main/kotlin/org/jetbrains/jewel/IntelliJTheme.kt @@ -14,7 +14,7 @@ import org.jetbrains.jewel.styling.DividerStyle import org.jetbrains.jewel.styling.DropdownStyle import org.jetbrains.jewel.styling.GroupHeaderStyle import org.jetbrains.jewel.styling.HorizontalProgressBarStyle -import org.jetbrains.jewel.styling.IconButtonMetrics +import org.jetbrains.jewel.styling.IconButtonStyle import org.jetbrains.jewel.styling.LabelledTextFieldStyle import org.jetbrains.jewel.styling.LazyTreeStyle import org.jetbrains.jewel.styling.LinkStyle @@ -28,7 +28,7 @@ import org.jetbrains.jewel.styling.LocalDropdownStyle import org.jetbrains.jewel.styling.LocalEditorTabStyle import org.jetbrains.jewel.styling.LocalGroupHeaderStyle import org.jetbrains.jewel.styling.LocalHorizontalProgressBarStyle -import org.jetbrains.jewel.styling.LocalIconButtonMetrics +import org.jetbrains.jewel.styling.LocalIconButtonStyle import org.jetbrains.jewel.styling.LocalLabelledTextFieldStyle import org.jetbrains.jewel.styling.LocalLazyTreeStyle import org.jetbrains.jewel.styling.LocalLinkStyle @@ -198,10 +198,10 @@ interface IntelliJTheme { @Composable @ReadOnlyComposable get() = LocalTooltipStyle.current - val iconButtonMetrics: IconButtonMetrics + val iconButtonStyle: IconButtonStyle @Composable @ReadOnlyComposable - get() = LocalIconButtonMetrics.current + get() = LocalIconButtonStyle.current } } diff --git a/core/src/main/kotlin/org/jetbrains/jewel/styling/IconButtonMetrics.kt b/core/src/main/kotlin/org/jetbrains/jewel/styling/IconButtonMetrics.kt index 3f6419f469..c09b674ca8 100644 --- a/core/src/main/kotlin/org/jetbrains/jewel/styling/IconButtonMetrics.kt +++ b/core/src/main/kotlin/org/jetbrains/jewel/styling/IconButtonMetrics.kt @@ -2,8 +2,43 @@ package org.jetbrains.jewel.styling import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.shape.CornerSize +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Immutable +import androidx.compose.runtime.Stable +import androidx.compose.runtime.rememberUpdatedState import androidx.compose.runtime.staticCompositionLocalOf +import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.DpSize +import org.jetbrains.jewel.ButtonState + +@Stable +interface IconButtonStyle { + + val colors: IconButtonColors + val metrics: IconButtonMetrics +} + +@Immutable +interface IconButtonColors { + + val background: Color + val backgroundDisabled: Color + val backgroundFocused: Color + val backgroundPressed: Color + val backgroundHovered: Color + + @Composable + fun backgroundFor(state: ButtonState) = rememberUpdatedState( + state.chooseValue( + normal = background, + disabled = backgroundDisabled, + focused = backgroundFocused, + pressed = backgroundPressed, + hovered = backgroundHovered, + active = background, + ) + ) +} interface IconButtonMetrics { @@ -12,6 +47,6 @@ interface IconButtonMetrics { val minSize: DpSize } -val LocalIconButtonMetrics = staticCompositionLocalOf { - error("No outlined ButtonStyle provided") +val LocalIconButtonStyle = staticCompositionLocalOf { + error("No IconButtonStyle provided") } diff --git a/ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/IntUiBridge.kt b/ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/IntUiBridge.kt index 33634e3019..4192ed3798 100644 --- a/ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/IntUiBridge.kt +++ b/ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/IntUiBridge.kt @@ -50,7 +50,9 @@ import org.jetbrains.jewel.intui.standalone.styling.IntUiGroupHeaderStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiHorizontalProgressBarColors import org.jetbrains.jewel.intui.standalone.styling.IntUiHorizontalProgressBarMetrics import org.jetbrains.jewel.intui.standalone.styling.IntUiHorizontalProgressBarStyle +import org.jetbrains.jewel.intui.standalone.styling.IntUiIconButtonColors import org.jetbrains.jewel.intui.standalone.styling.IntUiIconButtonMetrics +import org.jetbrains.jewel.intui.standalone.styling.IntUiIconButtonStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiLabelledTextFieldColors import org.jetbrains.jewel.intui.standalone.styling.IntUiLabelledTextFieldMetrics import org.jetbrains.jewel.intui.standalone.styling.IntUiLabelledTextFieldStyle @@ -173,7 +175,7 @@ internal fun createSwingIntUiComponentStyling( circularProgressStyle = readCircularProgressStyle(theme.isDark), tooltipStyle = readTooltipStyle(), textFieldStyle = textFieldStyle, - iconButtonMetrics = IntUiIconButtonMetrics(), + iconButtonStyle = readIconButtonStyle(), ) } @@ -910,8 +912,8 @@ private fun readCircularProgressStyle( ?: if (isDark) Color(0xFF6F737A) else Color(0xFFA8ADBD), ) -private fun readTooltipStyle(): IntUiTooltipStyle { - return IntUiTooltipStyle( +private fun readTooltipStyle(): IntUiTooltipStyle = + IntUiTooltipStyle( metrics = IntUiTooltipMetrics(), colors = IntUiTooltipColors( content = retrieveColorOrUnspecified("ToolTip.foreground"), @@ -920,4 +922,15 @@ private fun readTooltipStyle(): IntUiTooltipStyle { shadow = Color.Black.copy(alpha = .6f), ), ) -} + +private fun readIconButtonStyle(): IntUiIconButtonStyle = + IntUiIconButtonStyle( + metrics = IntUiIconButtonMetrics(), + colors = IntUiIconButtonColors( + Color.Unspecified, + Color.Unspecified, + Color.Unspecified, + retrieveColorOrUnspecified("ActionButton.pressedBackground"), + retrieveColorOrUnspecified("ActionButton.hoverBackground"), + ) + ) diff --git a/int-ui/int-ui-core/src/main/kotlin/org/jetbrains/jewel/intui/core/BaseIntUiTheme.kt b/int-ui/int-ui-core/src/main/kotlin/org/jetbrains/jewel/intui/core/BaseIntUiTheme.kt index 3d10993fc0..01464dec50 100644 --- a/int-ui/int-ui-core/src/main/kotlin/org/jetbrains/jewel/intui/core/BaseIntUiTheme.kt +++ b/int-ui/int-ui-core/src/main/kotlin/org/jetbrains/jewel/intui/core/BaseIntUiTheme.kt @@ -37,7 +37,7 @@ import org.jetbrains.jewel.styling.LocalDropdownStyle import org.jetbrains.jewel.styling.LocalEditorTabStyle import org.jetbrains.jewel.styling.LocalGroupHeaderStyle import org.jetbrains.jewel.styling.LocalHorizontalProgressBarStyle -import org.jetbrains.jewel.styling.LocalIconButtonMetrics +import org.jetbrains.jewel.styling.LocalIconButtonStyle import org.jetbrains.jewel.styling.LocalLabelledTextFieldStyle import org.jetbrains.jewel.styling.LocalLazyTreeStyle import org.jetbrains.jewel.styling.LocalLinkStyle @@ -234,7 +234,7 @@ fun BaseIntUiTheme( LocalIndication provides NoIndication, LocalCircularProgressStyle provides componentStyling.circularProgressStyle, LocalTooltipStyle provides componentStyling.tooltipStyle, - LocalIconButtonMetrics provides componentStyling.iconButtonMetrics, + LocalIconButtonStyle provides componentStyling.iconButtonStyle, ) { IntelliJTheme(theme, swingCompatMode, content) } diff --git a/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/IntUiTheme.kt b/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/IntUiTheme.kt index 86514c6272..b73e871503 100644 --- a/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/IntUiTheme.kt +++ b/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/IntUiTheme.kt @@ -40,7 +40,7 @@ import org.jetbrains.jewel.intui.standalone.styling.IntUiDividerStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiDropdownStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiGroupHeaderStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiHorizontalProgressBarStyle -import org.jetbrains.jewel.intui.standalone.styling.IntUiIconButtonMetrics +import org.jetbrains.jewel.intui.standalone.styling.IntUiIconButtonStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiLabelledTextFieldStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiLazyTreeStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiLinkStyle @@ -59,7 +59,7 @@ import org.jetbrains.jewel.styling.DividerStyle import org.jetbrains.jewel.styling.DropdownStyle import org.jetbrains.jewel.styling.GroupHeaderStyle import org.jetbrains.jewel.styling.HorizontalProgressBarStyle -import org.jetbrains.jewel.styling.IconButtonMetrics +import org.jetbrains.jewel.styling.IconButtonStyle import org.jetbrains.jewel.styling.LabelledTextFieldStyle import org.jetbrains.jewel.styling.LazyTreeStyle import org.jetbrains.jewel.styling.LinkStyle @@ -138,7 +138,7 @@ object IntUiTheme : BaseIntUiTheme { editorTabStyle: TabStyle = IntUiTabStyle.Editor.dark(svgLoader), circularProgressStyle: CircularProgressStyle = IntUiCircularProgressStyle.dark(), tooltipStyle: IntUiTooltipStyle = IntUiTooltipStyle.dark(), - iconButtonMetrics: IconButtonMetrics = IntUiIconButtonMetrics(), + iconButtonStyle: IconButtonStyle = IntUiIconButtonStyle.dark(), ) = IntelliJComponentStyling( checkboxStyle = checkboxStyle, @@ -161,7 +161,7 @@ object IntUiTheme : BaseIntUiTheme { textFieldStyle = textFieldStyle, circularProgressStyle = circularProgressStyle, tooltipStyle = tooltipStyle, - iconButtonMetrics + iconButtonStyle = iconButtonStyle ) @Composable @@ -187,7 +187,7 @@ object IntUiTheme : BaseIntUiTheme { editorTabStyle: TabStyle = IntUiTabStyle.Editor.light(svgLoader), circularProgressStyle: CircularProgressStyle = IntUiCircularProgressStyle.light(), tooltipStyle: IntUiTooltipStyle = IntUiTooltipStyle.light(), - iconButtonMetrics: IconButtonMetrics = IntUiIconButtonMetrics(), + iconButtonStyle: IconButtonStyle = IntUiIconButtonStyle.light(), ) = IntelliJComponentStyling( checkboxStyle = checkboxStyle, chipStyle = chipStyle, @@ -209,7 +209,7 @@ object IntUiTheme : BaseIntUiTheme { textFieldStyle = textFieldStyle, circularProgressStyle = circularProgressStyle, tooltipStyle = tooltipStyle, - iconButtonMetrics = iconButtonMetrics + iconButtonStyle = iconButtonStyle ) } diff --git a/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiIconButtonMetrics.kt b/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiIconButtonMetrics.kt deleted file mode 100644 index 9bd43f0ca2..0000000000 --- a/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiIconButtonMetrics.kt +++ /dev/null @@ -1,15 +0,0 @@ -package org.jetbrains.jewel.intui.standalone.styling - -import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.shape.CornerSize -import androidx.compose.runtime.Stable -import androidx.compose.ui.unit.DpSize -import androidx.compose.ui.unit.dp -import org.jetbrains.jewel.styling.IconButtonMetrics - -@Stable -data class IntUiIconButtonMetrics( - override val cornerSize: CornerSize = CornerSize(4.dp), - override val padding: PaddingValues = PaddingValues(horizontal = 0.dp, vertical = 0.dp), - override val minSize: DpSize = DpSize(16.dp, 16.dp), -) : IconButtonMetrics diff --git a/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiIconButtonStyling.kt b/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiIconButtonStyling.kt new file mode 100644 index 0000000000..ea2bf83d9d --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiIconButtonStyling.kt @@ -0,0 +1,82 @@ +package org.jetbrains.jewel.intui.standalone.styling + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.shape.CornerSize +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Immutable +import androidx.compose.runtime.Stable +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.DpSize +import androidx.compose.ui.unit.dp +import org.jetbrains.jewel.intui.core.theme.IntUiLightTheme +import org.jetbrains.jewel.styling.IconButtonColors +import org.jetbrains.jewel.styling.IconButtonMetrics +import org.jetbrains.jewel.styling.IconButtonStyle + +@Stable +data class IntUiIconButtonStyle( + override val colors: IntUiIconButtonColors, + override val metrics: IntUiIconButtonMetrics, +) : IconButtonStyle { + + companion object { + + @Composable + fun light() = IntUiIconButtonStyle(IntUiIconButtonColors.light(), IntUiIconButtonMetrics()) + + @Composable + fun dark() = IntUiIconButtonStyle(IntUiIconButtonColors.dark(), IntUiIconButtonMetrics()) + } +} + +@Immutable +data class IntUiIconButtonColors( + override val background: Color, + override val backgroundDisabled: Color, + override val backgroundFocused: Color, + override val backgroundPressed: Color, + override val backgroundHovered: Color, +) : IconButtonColors { + + companion object { + + @Composable + fun light( + background: Color = Color.Unspecified, + backgroundDisabled: Color = Color.Unspecified, + backgroundFocused: Color = background, + backgroundPressed: Color = IntUiLightTheme.colors.grey(11), + backgroundHovered: Color = IntUiLightTheme.colors.grey(12), + ) = + IntUiIconButtonColors( + background, + backgroundDisabled, + backgroundFocused, + backgroundPressed, + backgroundHovered, + ) + + @Composable + fun dark( + background: Color = Color.Unspecified, + backgroundDisabled: Color = Color.Unspecified, + backgroundFocused: Color = background, + backgroundPressed: Color = IntUiLightTheme.colors.grey(12), + backgroundHovered: Color = IntUiLightTheme.colors.grey(11), + ) = + IntUiIconButtonColors( + background, + backgroundDisabled, + backgroundFocused, + backgroundPressed, + backgroundHovered, + ) + } +} + +@Stable +data class IntUiIconButtonMetrics( + override val cornerSize: CornerSize = CornerSize(4.dp), + override val padding: PaddingValues = PaddingValues(horizontal = 0.dp, vertical = 0.dp), + override val minSize: DpSize = DpSize(16.dp, 16.dp), +) : IconButtonMetrics 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 823e23b71e..88ca64e644 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 @@ -31,6 +31,7 @@ import org.jetbrains.jewel.CircularProgressIndicator import org.jetbrains.jewel.CircularProgressIndicatorBig import org.jetbrains.jewel.DefaultButton import org.jetbrains.jewel.Icon +import org.jetbrains.jewel.IconButton import org.jetbrains.jewel.LazyTree import org.jetbrains.jewel.LocalResourceLoader import org.jetbrains.jewel.OutlinedButton @@ -124,11 +125,19 @@ private fun RowScope.ColumnOne(resourceLoader: ResourceLoader) { val svgLoader = service().svgLoader Row { - val painterProvider = retrieveStatelessIcon("actions/close.svg", svgLoader, IntUiTheme.iconData) + val painterProvider = retrieveStatelessIcon("actions/more.svg", svgLoader, IntUiTheme.iconData) val painter by painterProvider.getPainter(resourceLoader) Icon(painter = painter, modifier = Modifier.border(1.dp, Color.Magenta), contentDescription = "An icon") } + Row { + IconButton(onClick = { }) { + val painterProvider = retrieveStatelessIcon("actions/close.svg", svgLoader, IntUiTheme.iconData) + val painter by painterProvider.getPainter(resourceLoader) + Icon(painter = painter, contentDescription = "An icon") + } + } + Row { Text("Circular progress small: ") CircularProgressIndicator(svgLoader) diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/components/Buttons.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/components/Buttons.kt index ac61f69780..3185083ca4 100644 --- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/components/Buttons.kt +++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/components/Buttons.kt @@ -1,6 +1,5 @@ package org.jetbrains.jewel.samples.standalone.components -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth @@ -10,19 +9,16 @@ import androidx.compose.runtime.getValue import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.res.ResourceLoader import androidx.compose.ui.unit.dp import org.jetbrains.jewel.DefaultButton import org.jetbrains.jewel.GroupHeader import org.jetbrains.jewel.Icon import org.jetbrains.jewel.IconButton -import org.jetbrains.jewel.IntelliJTheme import org.jetbrains.jewel.JewelSvgLoader import org.jetbrains.jewel.OutlinedButton import org.jetbrains.jewel.Text import org.jetbrains.jewel.styling.ResourcePainterProvider -import org.jetbrains.jewel.util.appendIf @Composable fun Buttons(svgLoader: JewelSvgLoader, resourceLoader: ResourceLoader) { @@ -54,10 +50,6 @@ fun Buttons(svgLoader: JewelSvgLoader, resourceLoader: ResourceLoader) { Icon( painter = iconPainter, "icon", - modifier = Modifier.appendIf(it.isPressed || it.isHovered) { - background(SolidColor(IntelliJTheme.contentColor.copy(alpha = 0.1f))) - } - ) } }