From c5ddcf9f6eba99ea0752172ada72bdf213e5cc22 Mon Sep 17 00:00:00 2001 From: fscarponi Date: Tue, 26 Sep 2023 16:39:50 +0200 Subject: [PATCH] Add a customizable circular progress to the UI This commit adds a flexible circular progress option to the UI that supports both small and large size variants. The base theme has been updated to provide styling to both variants, and new SVG files have been added to provide dynamic views of the circular progress. The circular progress can be incorporated in the UI using the CircularProgress and CircularProgressBig components. This addition provides a more visually engaging way to show progress in the UI. --- .../jetbrains/jewel/CircularProgressBar.kt | 21 ++-- .../jewel/IntelliJComponentStyling.kt | 5 +- .../org/jetbrains/jewel/IntelliJTheme.kt | 5 + .../jewel/styling/CircularProgressStyle.kt | 17 +--- .../org/jetbrains/jewel/bridge/IntUiBridge.kt | 45 ++++++++- .../jewel/intui/core/BaseIntUiTheme.kt | 2 + .../jewel/intui/standalone/IntUiTheme.kt | 49 ++++++---- .../styling/IntUiCircularProgressStyle.kt | 97 +++++++++++++++++++ .../intui/animated/bigSpinner/spinner1.svg | 15 +++ .../animated/bigSpinner/spinner1_dark.svg | 15 +++ .../intui/animated/bigSpinner/spinner2.svg | 15 +++ .../animated/bigSpinner/spinner2_dark.svg | 15 +++ .../intui/animated/bigSpinner/spinner3.svg | 15 +++ .../animated/bigSpinner/spinner3_dark.svg | 15 +++ .../intui/animated/bigSpinner/spinner4.svg | 15 +++ .../animated/bigSpinner/spinner4_dark.svg | 15 +++ .../intui/animated/bigSpinner/spinner5.svg | 15 +++ .../animated/bigSpinner/spinner5_dark.svg | 15 +++ .../intui/animated/bigSpinner/spinner6.svg | 15 +++ .../animated/bigSpinner/spinner6_dark.svg | 15 +++ .../intui/animated/bigSpinner/spinner7.svg | 15 +++ .../animated/bigSpinner/spinner7_dark.svg | 15 +++ .../intui/animated/bigSpinner/spinner8.svg | 15 +++ .../animated/bigSpinner/spinner8_dark.svg | 15 +++ .../intui/animated/smallSpinner/spinner1.svg | 14 +++ .../animated/smallSpinner/spinner1_dark.svg | 14 +++ .../intui/animated/smallSpinner/spinner2.svg | 14 +++ .../animated/smallSpinner/spinner2_dark.svg | 14 +++ .../intui/animated/smallSpinner/spinner3.svg | 14 +++ .../animated/smallSpinner/spinner3_dark.svg | 14 +++ .../intui/animated/smallSpinner/spinner4.svg | 14 +++ .../animated/smallSpinner/spinner4_dark.svg | 14 +++ .../intui/animated/smallSpinner/spinner5.svg | 14 +++ .../animated/smallSpinner/spinner5_dark.svg | 14 +++ .../intui/animated/smallSpinner/spinner6.svg | 14 +++ .../animated/smallSpinner/spinner6_dark.svg | 14 +++ .../intui/animated/smallSpinner/spinner7.svg | 14 +++ .../animated/smallSpinner/spinner7_dark.svg | 14 +++ .../intui/animated/smallSpinner/spinner8.svg | 14 +++ .../animated/smallSpinner/spinner8_dark.svg | 14 +++ .../samples/ideplugin/JewelDemoToolWindow.kt | 11 +++ .../standalone/components/ProgressBar.kt | 45 ++++++++- 42 files changed, 714 insertions(+), 47 deletions(-) create mode 100644 int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiCircularProgressStyle.kt create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner1.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner1_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner2.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner2_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner3.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner3_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner4.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner4_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner5.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner5_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner6.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner6_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner7.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner7_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner8.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner8_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner1.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner1_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner2.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner2_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner3.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner3_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner4.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner4_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner5.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner5_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner6.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner6_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner7.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner7_dark.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner8.svg create mode 100644 int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner8_dark.svg diff --git a/core/src/main/kotlin/org/jetbrains/jewel/CircularProgressBar.kt b/core/src/main/kotlin/org/jetbrains/jewel/CircularProgressBar.kt index c20d321114..8f1cd18833 100644 --- a/core/src/main/kotlin/org/jetbrains/jewel/CircularProgressBar.kt +++ b/core/src/main/kotlin/org/jetbrains/jewel/CircularProgressBar.kt @@ -8,29 +8,34 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp import kotlinx.coroutines.delay import org.jetbrains.jewel.styling.CircularProgressStyle @Composable fun CircularProgress( - modifier: Modifier, + modifier: Modifier = Modifier, style: CircularProgressStyle = IntelliJTheme.circularProgressStyle, ) { - var currentFrame by remember { mutableStateOf(0) } + var currentFrame by remember { mutableStateOf(style.frameIcons.frames.first()) } Icon( - painter = style.frameIcons.frames.value[currentFrame], + modifier = modifier, + painter = currentFrame.getPainter(LocalResourceLoader.current).value, contentDescription = null, - modifier = modifier.size(style.metrics.size) ) LaunchedEffect(Unit) { - delay(style.metrics.animationDelay.toMillis()) while (true) { - for (i in 0 until style.frameIcons.frames.value.size) { - currentFrame = i - delay(style.metrics.frameTime.toMillis()) + for (i in 0 until style.frameIcons.frames.size) { + currentFrame = style.frameIcons.frames[i] + delay(style.frameTime.inWholeMilliseconds) } } } } + +@Composable +fun CircularProgressBig() { + CircularProgress(modifier = Modifier.size(32.dp), style = IntelliJTheme.circularProgressBigStyle) +} diff --git a/core/src/main/kotlin/org/jetbrains/jewel/IntelliJComponentStyling.kt b/core/src/main/kotlin/org/jetbrains/jewel/IntelliJComponentStyling.kt index 08a232f8fc..94addf77f0 100644 --- a/core/src/main/kotlin/org/jetbrains/jewel/IntelliJComponentStyling.kt +++ b/core/src/main/kotlin/org/jetbrains/jewel/IntelliJComponentStyling.kt @@ -38,6 +38,7 @@ class IntelliJComponentStyling( val textAreaStyle: TextAreaStyle, val textFieldStyle: TextFieldStyle, val circularProgressStyle: CircularProgressStyle, + val circularProgressBigStyle: CircularProgressStyle, ) { override fun equals(other: Any?): Boolean { @@ -64,6 +65,7 @@ class IntelliJComponentStyling( if (defaultTabStyle != other.defaultTabStyle) return false if (editorTabStyle != other.editorTabStyle) return false if (circularProgressStyle != other.circularProgressStyle) return false + if (circularProgressBigStyle != other.circularProgressBigStyle) return false return true } @@ -87,6 +89,7 @@ class IntelliJComponentStyling( result = 31 * result + defaultTabStyle.hashCode() result = 31 * result + editorTabStyle.hashCode() result = 31 * result + circularProgressStyle.hashCode() + result = 31 * result + circularProgressBigStyle.hashCode() return result } @@ -98,5 +101,5 @@ class IntelliJComponentStyling( "lazyTreeStyle=$lazyTreeStyle, linkStyle=$linkStyle, menuStyle=$menuStyle, " + "outlinedButtonStyle=$outlinedButtonStyle, radioButtonStyle=$radioButtonStyle, " + "scrollbarStyle=$scrollbarStyle, textAreaStyle=$textAreaStyle, textFieldStyle=$textFieldStyle" + - "circularProgressStyle=$circularProgressStyle)" + "circularProgressStyle=$circularProgressStyle), circularProgressBigStyle=$circularProgressBigStyle)" } diff --git a/core/src/main/kotlin/org/jetbrains/jewel/IntelliJTheme.kt b/core/src/main/kotlin/org/jetbrains/jewel/IntelliJTheme.kt index e036ab87e8..74bd5ba911 100644 --- a/core/src/main/kotlin/org/jetbrains/jewel/IntelliJTheme.kt +++ b/core/src/main/kotlin/org/jetbrains/jewel/IntelliJTheme.kt @@ -182,6 +182,11 @@ interface IntelliJTheme { @Composable @ReadOnlyComposable get() = LocalCircularProgressStyle.current + + val circularProgressBigStyle: CircularProgressStyle + @Composable + @ReadOnlyComposable + get() = LocalCircularProgressStyle.current } } diff --git a/core/src/main/kotlin/org/jetbrains/jewel/styling/CircularProgressStyle.kt b/core/src/main/kotlin/org/jetbrains/jewel/styling/CircularProgressStyle.kt index 21630cc198..92ce21c9e6 100644 --- a/core/src/main/kotlin/org/jetbrains/jewel/styling/CircularProgressStyle.kt +++ b/core/src/main/kotlin/org/jetbrains/jewel/styling/CircularProgressStyle.kt @@ -1,32 +1,25 @@ package org.jetbrains.jewel.styling import androidx.compose.runtime.Immutable -import androidx.compose.runtime.State import androidx.compose.runtime.staticCompositionLocalOf -import androidx.compose.ui.graphics.painter.Painter -import androidx.compose.ui.unit.DpSize import kotlin.time.Duration interface CircularProgressStyle { val frameIcons: CircularProgressIcons - val metrics: CircularProgressMetrics + val frameTime: Duration } @Immutable interface CircularProgressIcons { - val frames: State> + val frames: List> } -@Immutable -interface CircularProgressMetrics { - - val animationDelay: Duration - val frameTime: Duration - val size: DpSize +val LocalCircularProgressStyle = staticCompositionLocalOf { + error("No CircularProgressStyle provided") } -val LocalCircularProgressStyle = staticCompositionLocalOf { +val LocalCircularProgressBigStyle = staticCompositionLocalOf { error("No CircularProgressStyle 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 90f393ae41..94e421b74c 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 @@ -36,6 +36,8 @@ import org.jetbrains.jewel.intui.standalone.styling.IntUiCheckboxStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiChipColors import org.jetbrains.jewel.intui.standalone.styling.IntUiChipMetrics import org.jetbrains.jewel.intui.standalone.styling.IntUiChipStyle +import org.jetbrains.jewel.intui.standalone.styling.IntUiCircularProgressIcons +import org.jetbrains.jewel.intui.standalone.styling.IntUiCircularProgressStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiDropdownColors import org.jetbrains.jewel.intui.standalone.styling.IntUiDropdownIcons import org.jetbrains.jewel.intui.standalone.styling.IntUiDropdownMetrics @@ -160,7 +162,8 @@ internal fun createSwingIntUiComponentStyling( radioButtonStyle = readRadioButtonStyle(theme.iconData, svgLoader), scrollbarStyle = readScrollbarStyle(theme.isDark), textAreaStyle = readTextAreaStyle(textAreaTextStyle, textFieldStyle.metrics), - circularProgressStyle = readCircularProgressStyle(theme.isDark, svgLoader), + circularProgressStyle = readCircularProgressStyle(svgLoader, theme.iconData), + circularProgressBigStyle = readCircularProgressBigStyle(svgLoader, theme.iconData), textFieldStyle = textFieldStyle, ) } @@ -883,4 +886,42 @@ private fun readEditorTabStyle(iconData: IntelliJThemeIconData, svgLoader: SvgLo ) } -private fun readCircularProgressStyle(iconData: IntelliJThemeIconData, svgLoader: SvgLoader): IntUiCircula +private fun readCircularProgressStyle( + svgLoader: SvgLoader, + iconData: IntelliJThemeIconData, +): IntUiCircularProgressStyle = + IntUiCircularProgressStyle( + frameTime = 125.milliseconds, + frameIcons = IntUiCircularProgressIcons( + listOf( + retrieveStatelessIcon("process/step_1.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/step_2.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/step_3.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/step_4.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/step_5.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/step_6.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/step_7.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/step_8.svg", svgLoader = svgLoader, iconData = iconData), + ), + ), + ) + +private fun readCircularProgressBigStyle( + svgLoader: SvgLoader, + iconData: IntelliJThemeIconData, +): IntUiCircularProgressStyle = + IntUiCircularProgressStyle( + frameTime = 125.milliseconds, + frameIcons = IntUiCircularProgressIcons( + listOf( + retrieveStatelessIcon("process/big/step_1.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/big/step_2.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/big/step_3.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/big/step_4.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/big/step_5.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/big/step_6.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/big/step_7.svg", svgLoader = svgLoader, iconData = iconData), + retrieveStatelessIcon("process/big/step_8.svg", svgLoader = svgLoader, iconData = iconData), + ), + ), + ) 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 6e5c37dc82..4e72493d18 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 @@ -31,6 +31,7 @@ import org.jetbrains.jewel.styling.LazyTreeStyle import org.jetbrains.jewel.styling.LinkStyle import org.jetbrains.jewel.styling.LocalCheckboxStyle import org.jetbrains.jewel.styling.LocalChipStyle +import org.jetbrains.jewel.styling.LocalCircularProgressBigStyle import org.jetbrains.jewel.styling.LocalCircularProgressStyle import org.jetbrains.jewel.styling.LocalDefaultButtonStyle import org.jetbrains.jewel.styling.LocalDefaultTabStyle @@ -229,6 +230,7 @@ fun BaseIntUiTheme( LocalEditorTabStyle provides componentStyling.editorTabStyle, LocalIndication provides NoIndication, LocalCircularProgressStyle provides componentStyling.circularProgressStyle, + LocalCircularProgressBigStyle provides componentStyling.circularProgressBigStyle, ) { 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 0b5fb934b1..cce95e336a 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 @@ -34,6 +34,7 @@ import org.jetbrains.jewel.intui.standalone.IntUiTheme.defaultComponentStyling import org.jetbrains.jewel.intui.standalone.styling.IntUiButtonStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiCheckboxStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiChipStyle +import org.jetbrains.jewel.intui.standalone.styling.IntUiCircularProgressStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiDropdownStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiGroupHeaderStyle import org.jetbrains.jewel.intui.standalone.styling.IntUiHorizontalProgressBarStyle @@ -49,6 +50,7 @@ import org.jetbrains.jewel.intui.standalone.styling.IntUiTextFieldStyle import org.jetbrains.jewel.styling.ButtonStyle import org.jetbrains.jewel.styling.CheckboxStyle import org.jetbrains.jewel.styling.ChipStyle +import org.jetbrains.jewel.styling.CircularProgressStyle import org.jetbrains.jewel.styling.DropdownStyle import org.jetbrains.jewel.styling.GroupHeaderStyle import org.jetbrains.jewel.styling.HorizontalProgressBarStyle @@ -128,6 +130,8 @@ object IntUiTheme : BaseIntUiTheme { lazyTreeStyle: LazyTreeStyle = IntUiLazyTreeStyle.dark(svgLoader), defaultTabStyle: TabStyle = IntUiTabStyle.Default.dark(svgLoader), editorTabStyle: TabStyle = IntUiTabStyle.Editor.dark(svgLoader), + circularProgressStyle: CircularProgressStyle = IntUiCircularProgressStyle.Small.dark(svgLoader), + circularProgressBigStyle: CircularProgressStyle = IntUiCircularProgressStyle.Big.dark(svgLoader), ) = IntelliJComponentStyling( checkboxStyle = checkboxStyle, @@ -147,6 +151,8 @@ object IntUiTheme : BaseIntUiTheme { scrollbarStyle = scrollbarStyle, textAreaStyle = textAreaStyle, textFieldStyle = textFieldStyle, + circularProgressStyle = circularProgressStyle, + circularProgressBigStyle = circularProgressBigStyle, ) @Composable @@ -169,26 +175,29 @@ object IntUiTheme : BaseIntUiTheme { lazyTreeStyle: LazyTreeStyle = IntUiLazyTreeStyle.light(svgLoader), defaultTabStyle: TabStyle = IntUiTabStyle.Default.light(svgLoader), editorTabStyle: TabStyle = IntUiTabStyle.Editor.light(svgLoader), - ) = - IntelliJComponentStyling( - checkboxStyle = checkboxStyle, - chipStyle = chipStyle, - defaultButtonStyle = defaultButtonStyle, - defaultTabStyle = defaultTabStyle, - dropdownStyle = dropdownStyle, - editorTabStyle = editorTabStyle, - groupHeaderStyle = groupHeaderStyle, - horizontalProgressBarStyle = horizontalProgressBarStyle, - labelledTextFieldStyle = labelledTextFieldStyle, - lazyTreeStyle = lazyTreeStyle, - linkStyle = linkStyle, - menuStyle = menuStyle, - outlinedButtonStyle = outlinedButtonStyle, - radioButtonStyle = radioButtonStyle, - scrollbarStyle = scrollbarStyle, - textAreaStyle = textAreaStyle, - textFieldStyle = textFieldStyle, - ) + circularProgressStyle: CircularProgressStyle = IntUiCircularProgressStyle.Small.light(svgLoader), + circularProgressBigStyle: CircularProgressStyle = IntUiCircularProgressStyle.Big.light(svgLoader), + ) = IntelliJComponentStyling( + checkboxStyle = checkboxStyle, + chipStyle = chipStyle, + defaultButtonStyle = defaultButtonStyle, + defaultTabStyle = defaultTabStyle, + dropdownStyle = dropdownStyle, + editorTabStyle = editorTabStyle, + groupHeaderStyle = groupHeaderStyle, + horizontalProgressBarStyle = horizontalProgressBarStyle, + labelledTextFieldStyle = labelledTextFieldStyle, + lazyTreeStyle = lazyTreeStyle, + linkStyle = linkStyle, + menuStyle = menuStyle, + outlinedButtonStyle = outlinedButtonStyle, + radioButtonStyle = radioButtonStyle, + scrollbarStyle = scrollbarStyle, + textAreaStyle = textAreaStyle, + textFieldStyle = textFieldStyle, + circularProgressStyle = circularProgressStyle, + circularProgressBigStyle = circularProgressBigStyle, + ) } @Composable diff --git a/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiCircularProgressStyle.kt b/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiCircularProgressStyle.kt new file mode 100644 index 0000000000..64e86a143c --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiCircularProgressStyle.kt @@ -0,0 +1,97 @@ +package org.jetbrains.jewel.intui.standalone.styling + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Stable +import org.jetbrains.jewel.SvgLoader +import org.jetbrains.jewel.styling.CircularProgressIcons +import org.jetbrains.jewel.styling.CircularProgressStyle +import org.jetbrains.jewel.styling.PainterProvider +import org.jetbrains.jewel.styling.ResourcePainterProvider +import kotlin.time.Duration +import kotlin.time.Duration.Companion.milliseconds + +@Stable +data class IntUiCircularProgressStyle( + override val frameIcons: IntUiCircularProgressIcons, + override val frameTime: Duration, +) : CircularProgressStyle { + + object Small { + + @Composable + fun dark( + svgLoader: SvgLoader, + frameTime: Duration = 125.milliseconds, + frameIcons: IntUiCircularProgressIcons = intUiCircularProgressIcons(svgLoader), + ) = + IntUiCircularProgressStyle(frameIcons, frameTime) + + @Composable + fun light( + svgLoader: SvgLoader, + frameTime: Duration = 125.milliseconds, + frameIcons: IntUiCircularProgressIcons = intUiCircularProgressIcons(svgLoader), + ) = + IntUiCircularProgressStyle(frameIcons, frameTime) + } + + object Big { + + @Composable + fun dark( + svgLoader: SvgLoader, + frameTime: Duration = 125.milliseconds, + frameIcons: IntUiCircularProgressIcons = intUiCircularProgressBigIcons(svgLoader), + ) = + IntUiCircularProgressStyle(frameIcons, frameTime) + + @Composable + fun light( + svgLoader: SvgLoader, + frameTime: Duration = 125.milliseconds, + frameIcons: IntUiCircularProgressIcons = intUiCircularProgressBigIcons(svgLoader), + ) = + IntUiCircularProgressStyle(frameIcons, frameTime) + } +} + +data class IntUiCircularProgressIcons( + override val frames: List>, +) : CircularProgressIcons { + + companion object { + + @Composable + fun getFrames( + svgLoader: SvgLoader, + iconsPaths: List, + ): List> = iconsPaths.map { + ResourcePainterProvider.stateless(basePath = it, svgLoader = svgLoader) + } + } +} + +@Composable +fun intUiCircularProgressIcons( + svgLoader: SvgLoader, + iconPrefix: String = "icons/intui/animated/smallSpinner/", + iconsNames: List = listOf( + "spinner1.svg", + "spinner2.svg", + "spinner3.svg", + "spinner4.svg", + "spinner5.svg", + "spinner6.svg", + "spinner7.svg", + "spinner8.svg", + ), +) = IntUiCircularProgressIcons( + IntUiCircularProgressIcons.getFrames( + svgLoader, + iconsNames.map { iconPrefix + it }, + ), +) + +@Composable +fun intUiCircularProgressBigIcons(svgLoader: SvgLoader) = + intUiCircularProgressIcons(svgLoader = svgLoader, iconPrefix = "icons/intui/animated/bigSpinner/") diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner1.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner1.svg new file mode 100644 index 0000000000..f6b21c518f --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner1.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner1_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner1_dark.svg new file mode 100644 index 0000000000..cafe3975c4 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner1_dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner2.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner2.svg new file mode 100644 index 0000000000..aca2c137f9 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner2.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner2_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner2_dark.svg new file mode 100644 index 0000000000..85fc3d8b85 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner2_dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner3.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner3.svg new file mode 100644 index 0000000000..1a1f452bc0 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner3.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner3_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner3_dark.svg new file mode 100644 index 0000000000..c665f3d3c9 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner3_dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner4.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner4.svg new file mode 100644 index 0000000000..a6c00d1df6 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner4.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner4_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner4_dark.svg new file mode 100644 index 0000000000..5a033b71f8 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner4_dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner5.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner5.svg new file mode 100644 index 0000000000..e4c2b4501f --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner5.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner5_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner5_dark.svg new file mode 100644 index 0000000000..e34213a105 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner5_dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner6.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner6.svg new file mode 100644 index 0000000000..da4d407cfb --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner6.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner6_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner6_dark.svg new file mode 100644 index 0000000000..b9af56ba22 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner6_dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner7.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner7.svg new file mode 100644 index 0000000000..108c97ac2c --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner7.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner7_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner7_dark.svg new file mode 100644 index 0000000000..0a18eb2d3d --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner7_dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner8.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner8.svg new file mode 100644 index 0000000000..0c579f3776 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner8.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner8_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner8_dark.svg new file mode 100644 index 0000000000..3c1ec39ff9 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/bigSpinner/spinner8_dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner1.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner1.svg new file mode 100644 index 0000000000..32255c07c5 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner1.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner1_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner1_dark.svg new file mode 100644 index 0000000000..57e05a6e53 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner1_dark.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner2.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner2.svg new file mode 100644 index 0000000000..3cf6ac3a51 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner2.svg @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner2_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner2_dark.svg new file mode 100644 index 0000000000..25b4b64fdb --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner2_dark.svg @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner3.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner3.svg new file mode 100644 index 0000000000..5cf09a8749 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner3.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner3_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner3_dark.svg new file mode 100644 index 0000000000..8686f242ab --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner3_dark.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner4.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner4.svg new file mode 100644 index 0000000000..c65ed47197 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner4.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner4_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner4_dark.svg new file mode 100644 index 0000000000..1f897c80b1 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner4_dark.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner5.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner5.svg new file mode 100644 index 0000000000..20bb2ee8a9 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner5.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner5_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner5_dark.svg new file mode 100644 index 0000000000..c829a98a05 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner5_dark.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner6.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner6.svg new file mode 100644 index 0000000000..1e8b1bd4f3 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner6.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner6_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner6_dark.svg new file mode 100644 index 0000000000..5cf2f25721 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner6_dark.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner7.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner7.svg new file mode 100644 index 0000000000..a39a3c8bc5 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner7.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner7_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner7_dark.svg new file mode 100644 index 0000000000..07e85ef411 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner7_dark.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner8.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner8.svg new file mode 100644 index 0000000000..3825ac8359 --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner8.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner8_dark.svg b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner8_dark.svg new file mode 100644 index 0000000000..d9af1f8edc --- /dev/null +++ b/int-ui/int-ui-standalone/src/main/resources/icons/intui/animated/smallSpinner/spinner8_dark.svg @@ -0,0 +1,14 @@ + + + + + + + + + + \ No newline at end of file diff --git a/samples/ide-plugin/src/main/kotlin/org/jetbrains/jewel/samples/ideplugin/JewelDemoToolWindow.kt b/samples/ide-plugin/src/main/kotlin/org/jetbrains/jewel/samples/ideplugin/JewelDemoToolWindow.kt index f4535ce8b5..7186e1205b 100644 --- a/samples/ide-plugin/src/main/kotlin/org/jetbrains/jewel/samples/ideplugin/JewelDemoToolWindow.kt +++ b/samples/ide-plugin/src/main/kotlin/org/jetbrains/jewel/samples/ideplugin/JewelDemoToolWindow.kt @@ -32,6 +32,8 @@ import com.intellij.openapi.wm.ToolWindowFactory import com.intellij.ui.JBColor import kotlinx.coroutines.ExperimentalCoroutinesApi import org.jetbrains.jewel.CheckboxRow +import org.jetbrains.jewel.CircularProgress +import org.jetbrains.jewel.CircularProgressBig import org.jetbrains.jewel.DefaultButton import org.jetbrains.jewel.ExperimentalJewelApi import org.jetbrains.jewel.Icon @@ -137,6 +139,15 @@ internal class JewelDemoToolWindow : ToolWindowFactory, DumbAware { val painter by painterProvider.getPainter(resourceLoader) Icon(painter = painter, modifier = Modifier.border(1.dp, Color.Magenta), contentDescription = "An icon") } + + Row { + Text("Circular progress small: ") + CircularProgress() + } + Row(verticalAlignment = Alignment.CenterVertically) { + Text("Circular progress big: ") + CircularProgressBig() + } } } diff --git a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/components/ProgressBar.kt b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/components/ProgressBar.kt index ae8d6d7787..cdb79a8ae3 100644 --- a/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/components/ProgressBar.kt +++ b/samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/components/ProgressBar.kt @@ -14,9 +14,12 @@ 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.unit.dp import kotlinx.coroutines.delay +import org.jetbrains.jewel.CircularProgress +import org.jetbrains.jewel.CircularProgressBig import org.jetbrains.jewel.GroupHeader import org.jetbrains.jewel.HorizontalProgressBar import org.jetbrains.jewel.IndeterminateHorizontalProgressBar @@ -50,21 +53,33 @@ fun ProgressBar() { } Column { Text("HorizontalProgressBar - linear progress") - Row(Modifier.width(600.dp), horizontalArrangement = Arrangement.SpaceBetween) { + Row( + Modifier.width(600.dp), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically, + ) { HorizontalProgressBar(modifier = Modifier.width(500.dp), progress = currentOffset) Text("${(currentOffset * 100).toInt()} %") } } Column { Text("HorizontalProgressBar - non linear progress") - Row(Modifier.width(600.dp), horizontalArrangement = Arrangement.SpaceBetween) { + Row( + Modifier.width(600.dp), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically, + ) { HorizontalProgressBar(modifier = Modifier.width(500.dp), progress = intermittentProgress) Text("${(intermittentProgress * 100).toInt()} %") } } Column { Text("HorizontalProgressBar - smoothed non linear progress") - Row(Modifier.width(600.dp), horizontalArrangement = Arrangement.SpaceBetween) { + Row( + Modifier.width(600.dp), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically, + ) { val smoothedProgress by androidx.compose.animation.core.animateFloatAsState(intermittentProgress) HorizontalProgressBar(modifier = Modifier.width(500.dp), progress = smoothedProgress) Text("${(intermittentProgress * 100).toInt()} %") @@ -72,9 +87,31 @@ fun ProgressBar() { } Column { Text("IndeterminateHorizontalProgressBar") - Row(Modifier.width(600.dp), horizontalArrangement = Arrangement.SpaceBetween) { + Row( + Modifier.width(600.dp), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically, + ) { IndeterminateHorizontalProgressBar(modifier = Modifier.width(500.dp)) Text("----") } } + Column { + Row( + Modifier.width(600.dp), + horizontalArrangement = Arrangement.spacedBy(8.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + Text("CircularProgress (16x16)") + CircularProgress() + } + Row( + Modifier.width(600.dp), + horizontalArrangement = Arrangement.spacedBy(8.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + Text("CircularProgressBig (32x32) - Big") + CircularProgressBig() + } + } }