State-aware breadcrumb bar scroller arrows

For #8
kirill-grouchnikov · Jan 3, 2022 · e9e431f · e9e431f
1 parent 18951e1
commit e9e431f
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 45 deletions.
diff --git a/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/AuroraBreadcrumbBar.kt b/component/src/desktopMain/kotlin/org/pushingpixels/aurora/component/AuroraBreadcrumbBar.kt
@@ -22,9 +22,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Size
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.drawscope.translate
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.platform.LocalDensity
@@ -37,14 +35,16 @@ import kotlinx.coroutines.launch
 import org.pushingpixels.aurora.common.AuroraInternalApi
 import org.pushingpixels.aurora.component.model.*
 import org.pushingpixels.aurora.component.projection.CommandButtonProjection
+import org.pushingpixels.aurora.component.utils.TransitionAwarePainter
+import org.pushingpixels.aurora.component.utils.TransitionAwarePainterDelegate
 import org.pushingpixels.aurora.component.utils.drawArrow
-import org.pushingpixels.aurora.theming.BackgroundAppearanceStrategy
-import org.pushingpixels.aurora.theming.LocalTextStyle
-import org.pushingpixels.aurora.theming.PopupPlacementStrategy
+import org.pushingpixels.aurora.theming.*
 
 @OptIn(AuroraInternalApi::class)
 @Composable
 fun AuroraBreadcrumbBar(commands: List<Command>, modifier: Modifier) {
+    val colors = AuroraSkin.colors
+    val decorationAreaType = AuroraSkin.decorationAreaType
     val density = LocalDensity.current
     val layoutDirection = LocalLayoutDirection.current
     val textStyle = LocalTextStyle.current
@@ -54,7 +54,7 @@ fun AuroraBreadcrumbBar(commands: List<Command>, modifier: Modifier) {
 
     val scrollerPresentationModel = CommandButtonPresentationModel(
         presentationState = CommandButtonPresentationState.Small,
-        contentPadding = PaddingValues(2.dp),
+        contentPadding = PaddingValues(0.dp),
         actionFireTrigger = ActionFireTrigger.OnRollover,
         autoRepeatAction = true,
         autoRepeatInitialInterval = 250L,
@@ -83,18 +83,33 @@ fun AuroraBreadcrumbBar(commands: List<Command>, modifier: Modifier) {
     val scrollAmount = 12.dp.value * density.density
 
     val leftScrollerCommand = Command(text = "",
-        icon = object : Painter() {
-            override val intrinsicSize: Size = Size.Unspecified
-
-            override fun DrawScope.onDraw() {
-                drawArrow(
-                    drawScope = this,
-                    width = ComboBoxSizingConstants.DefaultComboBoxArrowHeight.toPx(),
-                    height = ComboBoxSizingConstants.DefaultComboBoxArrowWidth.toPx(),
-                    strokeWidth = 2.0.dp.toPx(),
-                    direction = PopupPlacementStrategy.Startward,
-                    layoutDirection = layoutDirection,
-                    color = Color.Red
+        icon = object : TransitionAwarePainterDelegate() {
+            override fun createNewIcon(modelStateInfoSnapshot: ModelStateInfoSnapshot): Painter {
+                return TransitionAwarePainter(
+                    iconSize = ComboBoxSizingConstants.DefaultComboBoxArrowWidth,
+                    decorationAreaType = decorationAreaType,
+                    skinColors = colors,
+                    modelStateInfoSnapshot = modelStateInfoSnapshot,
+                    paintDelegate = { drawScope, iconSize, colorScheme ->
+                        with(drawScope) {
+                            val arrowWidth = ComboBoxSizingConstants.DefaultComboBoxArrowHeight.toPx()
+                            val arrowHeight = ComboBoxSizingConstants.DefaultComboBoxArrowWidth.toPx()
+                            val dx = (iconSize.toPx() - arrowWidth) / 2
+                            val dy = (iconSize.toPx() - arrowHeight) / 2
+                            translate(left = dx, top = dy) {
+                                drawArrow(
+                                    drawScope = this,
+                                    width = arrowWidth,
+                                    height = arrowHeight,
+                                    strokeWidth = 2.0.dp.toPx(),
+                                    direction = PopupPlacementStrategy.Startward,
+                                    layoutDirection = layoutDirection,
+                                    color = colorScheme.markColor
+                                )
+                            }
+                        }
+                    },
+                    density = density
                 )
             }
         },
@@ -107,18 +122,33 @@ fun AuroraBreadcrumbBar(commands: List<Command>, modifier: Modifier) {
             }
         })
     val rightScrollerCommand = Command(text = "",
-        icon = object : Painter() {
-            override val intrinsicSize: Size = Size.Unspecified
-
-            override fun DrawScope.onDraw() {
-                drawArrow(
-                    drawScope = this,
-                    width = ComboBoxSizingConstants.DefaultComboBoxArrowHeight.toPx(),
-                    height = ComboBoxSizingConstants.DefaultComboBoxArrowWidth.toPx(),
-                    strokeWidth = 2.0.dp.toPx(),
-                    direction = PopupPlacementStrategy.Endward,
-                    layoutDirection = layoutDirection,
-                    color = Color.Red
+        icon = object : TransitionAwarePainterDelegate() {
+            override fun createNewIcon(modelStateInfoSnapshot: ModelStateInfoSnapshot): Painter {
+                return TransitionAwarePainter(
+                    iconSize = ComboBoxSizingConstants.DefaultComboBoxArrowWidth,
+                    decorationAreaType = decorationAreaType,
+                    skinColors = colors,
+                    modelStateInfoSnapshot = modelStateInfoSnapshot,
+                    paintDelegate = { drawScope, iconSize, colorScheme ->
+                        with(drawScope) {
+                            val arrowWidth = ComboBoxSizingConstants.DefaultComboBoxArrowHeight.toPx()
+                            val arrowHeight = ComboBoxSizingConstants.DefaultComboBoxArrowWidth.toPx()
+                            val dx = (iconSize.toPx() - arrowWidth) / 2
+                            val dy = (iconSize.toPx() - arrowHeight) / 2
+                            translate(left = dx, top = dy) {
+                                drawArrow(
+                                    drawScope = this,
+                                    width = arrowWidth,
+                                    height = arrowHeight,
+                                    strokeWidth = 2.0.dp.toPx(),
+                                    direction = PopupPlacementStrategy.Endward,
+                                    layoutDirection = layoutDirection,
+                                    color = colorScheme.markColor
+                                )
+                            }
+                        }
+                    },
+                    density = density
                 )
             }
         },

diff --git a/...src/desktopMain/kotlin/org/pushingpixels/aurora/component/utils/TransitionAwarePainter.kt b/...src/desktopMain/kotlin/org/pushingpixels/aurora/component/utils/TransitionAwarePainter.kt
@@ -56,7 +56,7 @@ class TransitionAwarePainter(
     )
 
     override val intrinsicSize: Size
-        get() = Size.Unspecified
+        get() = Size(iconSize.value * density.density, iconSize.value * density.density)
 
     override fun DrawScope.onDraw() {
         populateColorScheme(

diff --git a/demo/src/desktopMain/kotlin/org/pushingpixels/aurora/demo/AuroraBreadcrumbBarDemo.kt b/demo/src/desktopMain/kotlin/org/pushingpixels/aurora/demo/AuroraBreadcrumbBarDemo.kt
@@ -15,10 +15,9 @@
  */
 package org.pushingpixels.aurora.demo
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -27,14 +26,13 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.WindowPlacement
 import androidx.compose.ui.window.WindowPosition
 import androidx.compose.ui.window.rememberWindowState
-import org.pushingpixels.aurora.common.AuroraInternalApi
 import org.pushingpixels.aurora.component.AuroraBreadcrumbBar
 import org.pushingpixels.aurora.component.model.Command
 import org.pushingpixels.aurora.demo.svg.radiance_menu
 import org.pushingpixels.aurora.demo.svg.tango.*
-import org.pushingpixels.aurora.theming.IconFilterStrategy
-import org.pushingpixels.aurora.theming.marinerSkin
+import org.pushingpixels.aurora.theming.*
 import org.pushingpixels.aurora.window.AuroraApplicationScope
+import org.pushingpixels.aurora.window.AuroraDecorationArea
 import org.pushingpixels.aurora.window.AuroraWindow
 import org.pushingpixels.aurora.window.auroraApplication
 
@@ -55,12 +53,12 @@ fun main() = auroraApplication {
         undecorated = true,
         onCloseRequest = ::exitApplication,
     ) {
-        BreadcrumbContent()
+        BreadcrumbContent(skin)
     }
 }
 
 @Composable
-fun AuroraApplicationScope.BreadcrumbContent() {
+fun AuroraApplicationScope.BreadcrumbContent(auroraSkinDefinition: MutableState<AuroraSkinDefinition>) {
     val icons = arrayOf(
         accessories_text_editor(),
         computer(),
@@ -80,11 +78,25 @@ fun AuroraApplicationScope.BreadcrumbContent() {
         )
     }
 
-    Box(modifier = Modifier.fillMaxSize()) {
-        AuroraBreadcrumbBar(
-            commands = commands,
-            modifier = Modifier.fillMaxWidth()
-        )
+    Column(modifier = Modifier.fillMaxSize()) {
+        AuroraDecorationArea(decorationAreaType = DecorationAreaType.Toolbar) {
+            AuroraBreadcrumbBar(
+                commands = commands,
+                modifier = Modifier.fillMaxWidth().auroraBackground()
+                    .padding(horizontal = 2.dp, vertical = 4.dp)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1.0f, true))
+        AuroraDecorationArea(decorationAreaType = DecorationAreaType.Footer) {
+            Row(
+                modifier = Modifier.fillMaxWidth().wrapContentHeight()
+                    .auroraBackground()
+                    .padding(horizontal = 6.dp, vertical = 4.dp)
+            ) {
+                Spacer(modifier = Modifier.weight(1.0f, true))
+                AuroraSkinSwitcher(auroraSkinDefinition = auroraSkinDefinition)
+            }
+        }
     }
 }