pabel improvement #1

src/main/kotlin/eu/mjdev/desktop/components/desktoppanel/DesktopPanel.kt

@@ -7,10 +7,10 @@ import androidx.compose.foundation.TooltipPlacement
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.Orientation.Vertical
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.lazy.LazyRow
-import androidx.compose.foundation.lazy.items
 import androidx.compose.material.Divider
-import androidx.compose.runtime.*
+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
 import androidx.compose.ui.graphics.Brush
@@ -21,6 +21,9 @@ import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.WindowPosition
+import eu.mjdev.desktop.components.desktoppanel.applets.DesktopMenuIcon
+import eu.mjdev.desktop.components.desktoppanel.applets.DesktopPanelFavoriteApps
+import eu.mjdev.desktop.components.desktoppanel.applets.DesktopPanelLanguage
 import eu.mjdev.desktop.components.shadow.TopShadow
 import eu.mjdev.desktop.components.sliding.SlidingMenu
 import eu.mjdev.desktop.components.sliding.VisibilityState
@@ -50,9 +53,9 @@ fun DesktopPanel(
     panelState: VisibilityState = rememberVisibilityState(),
     enterAnimation: EnterTransition = fadeIn() + slideInVertically(initialOffsetY = { it }),
     exitAnimation: ExitTransition = slideOutVertically(targetOffsetY = { it }) + fadeOut(),
-    favoriteApps: State<List<App>> = api.appsProvider.favoriteApps.collectAsState(emptyList()),
+
     tooltipData: MutableState<Any?> = mutableStateOf(null),
-    onToolTip: (item: Any?) -> Unit = { item -> tooltipData.value = item },
+    onTooltip: (item: Any?) -> Unit = { item -> tooltipData.value = item },
     panelHeight: (visible: Boolean) -> Dp = { visible ->
         if (visible) iconSize.height + iconOuterPadding.height else dividerWidth
     },
@@ -102,7 +105,7 @@ fun DesktopPanel(
                     color = shadowColor,
                     contentBackgroundColor = backgroundColor.copy(alpha = panelAlpha)
                 ) {
-                    LazyRow(
+                    Box(
                         modifier = Modifier.fillMaxWidth().wrapContentHeight().background(
                             brush = Brush.verticalGradient(
                                 colors = listOf(
@@ -111,59 +114,36 @@ fun DesktopPanel(
                                     backgroundColor.copy(alpha = 0.3f),
                                 )
                             )
-                        ),
-                        horizontalArrangement = Arrangement.Start,
-                        verticalAlignment = Alignment.CenterVertically
+                        )
                     ) {
                         if (showMenuIcon) {
-                            item {
-                                DesktopPanelIcon(
-                                    icon = "menu",
-                                    iconColor = iconColor,
-                                    iconBackgroundColor = iconBackgroundColor,
-                                    iconBackgroundHover = Color.White.copy(alpha = 0.4f),
-                                    iconSize = iconSize,
-                                    iconPadding = iconPadding,
-                                    iconOuterPadding = iconOuterPadding,
-                                    onToolTip = onToolTip,
-                                    onClick = {
-                                        onMenuIconClicked()
-                                    }
-                                )
-                                Divider(
-                                    modifier = Modifier
-                                        .padding(2.dp)
-                                        .height(iconSize.height - 8.dp)
-                                        .width(2.dp)
-                                        .background(Color.White.copy(alpha = 0.4f))
-                                )
-                            }
-                        }
-                        items(favoriteApps.value) { app ->
-                            DesktopPanelIcon(
-                                app = app,
+                            DesktopMenuIcon(
+                                modifier = Modifier.align(Alignment.CenterStart),
                                 iconColor = iconColor,
                                 iconBackgroundColor = iconBackgroundColor,
-                                iconBackgroundHover = Color.White.copy(alpha = 0.4f),
                                 iconSize = iconSize,
                                 iconPadding = iconPadding,
                                 iconOuterPadding = iconOuterPadding,
-                                onToolTip = onToolTip,
-                                onClick = {
-                                    app.start()
-                                }
-                            )
-                        }
-                        item {
-                            DesktopPanelText(
-                                text = api.appsProvider.currentLocale.country,
-                                backgroundHover = Color.White.copy(alpha = 0.4f),
-                                onToolTip = onToolTip,
-                                onClick = {
-                                    // todo
-                                }
+                                onTooltip = onTooltip,
+                                onClick = onMenuIconClicked
                             )
                         }
+                        DesktopPanelFavoriteApps(
+                            modifier = Modifier.align(Alignment.Center),
+                            iconColor = iconColor,
+                            iconBackgroundColor = iconBackgroundColor,
+                            iconSize = iconSize,
+                            iconPadding = iconPadding,
+                            iconOuterPadding = iconOuterPadding,
+                            onTooltip = onTooltip
+                        )
+                        DesktopPanelLanguage(
+                            modifier = Modifier.align(Alignment.CenterEnd),
+                            onTooltip = onTooltip,
+                            onClick = {
+                                // todo
+                            }
+                        )
                     }
                 }
             }

src/main/kotlin/eu/mjdev/desktop/components/desktoppanel/DesktopPanelText.kt

@@ -26,6 +26,7 @@ import eu.mjdev.desktop.extensions.Compose.noElevation
 @Preview
 @Composable
 fun DesktopPanelText(
+    modifier: Modifier = Modifier,
     text: String = "button",
     textColor: Color = Color.White,
     backgroundHover: Color = Color.Red,
@@ -34,7 +35,7 @@ fun DesktopPanelText(
     onToolTip: (item: Any?) -> Unit = {},
     onClick: () -> Unit,
 ) = Box(
-    modifier = Modifier
+    modifier = modifier
         .wrapContentSize()
         .onPointerEvent(PointerEventType.Enter) {
             buttonState.value = true

src/main/kotlin/eu/mjdev/desktop/components/desktoppanel/applets/DesktopMenuIcon.kt

@@ -0,0 +1,44 @@
+package eu.mjdev.desktop.components.desktoppanel.applets
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.Divider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.dp
+import eu.mjdev.desktop.components.desktoppanel.DesktopPanelIcon
+
+@Composable
+fun DesktopMenuIcon(
+    modifier: Modifier = Modifier,
+    iconColor: Color = Color.Black,
+    iconBackgroundColor: Color = Color.White,
+    iconSize: DpSize = DpSize(56.dp, 56.dp),
+    iconPadding: PaddingValues = PaddingValues(4.dp),
+    iconOuterPadding: PaddingValues = PaddingValues(2.dp),
+    onTooltip: (item: Any?) -> Unit = {},
+    onClick: () -> Unit = {},
+) = Row(
+    modifier = modifier
+) {
+    DesktopPanelIcon(
+        icon = "menu",
+        iconColor = iconColor,
+        iconBackgroundColor = iconBackgroundColor,
+        iconBackgroundHover = Color.White.copy(alpha = 0.4f),
+        iconSize = iconSize,
+        iconPadding = iconPadding,
+        iconOuterPadding = iconOuterPadding,
+        onToolTip = onTooltip,
+        onClick = onClick
+    )
+    Divider(
+        modifier = Modifier
+            .padding(2.dp)
+            .height(iconSize.height - 8.dp)
+            .width(2.dp)
+            .background(Color.White.copy(alpha = 0.4f))
+    )
+}

src/main/kotlin/eu/mjdev/desktop/components/desktoppanel/applets/DesktopPanelFavoriteApps.kt

@@ -0,0 +1,56 @@
+package eu.mjdev.desktop.components.desktoppanel.applets
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.collectAsState
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.dp
+import eu.mjdev.desktop.components.desktoppanel.DesktopPanelIcon
+import eu.mjdev.desktop.provider.DesktopProvider
+import eu.mjdev.desktop.provider.DesktopProvider.Companion.LocalDesktop
+import eu.mjdev.desktop.provider.data.App
+
+@Composable
+fun DesktopPanelFavoriteApps(
+    modifier: Modifier = Modifier,
+    api: DesktopProvider = LocalDesktop.current,
+    favoriteApps: State<List<App>> = api.appsProvider.favoriteApps.collectAsState(emptyList()),
+    iconColor: Color = Color.Black,
+    iconBackgroundColor: Color = Color.White,
+    iconSize: DpSize = DpSize(56.dp, 56.dp),
+    iconPadding: PaddingValues = PaddingValues(4.dp),
+    iconOuterPadding: PaddingValues = PaddingValues(2.dp),
+    onTooltip: (item: Any?) -> Unit = {},
+    onClick: (app: App) -> Unit = { app -> app.start() },
+) = Box(
+    modifier = modifier
+) {
+    LazyRow(
+        modifier = Modifier.wrapContentHeight(),
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        items(favoriteApps.value) { app ->
+            DesktopPanelIcon(
+                app = app,
+                iconColor = iconColor,
+                iconBackgroundColor = iconBackgroundColor,
+                iconBackgroundHover = Color.White.copy(alpha = 0.4f),
+                iconSize = iconSize,
+                iconPadding = iconPadding,
+                iconOuterPadding = iconOuterPadding,
+                onToolTip = onTooltip,
+                onClick = { onClick(app) }
+            )
+        }
+    }
+}

src/main/kotlin/eu/mjdev/desktop/components/desktoppanel/applets/DesktopPanelLanguage.kt

@@ -0,0 +1,24 @@
+package eu.mjdev.desktop.components.desktoppanel.applets
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import eu.mjdev.desktop.components.desktoppanel.DesktopPanelText
+import eu.mjdev.desktop.provider.DesktopProvider
+import eu.mjdev.desktop.provider.DesktopProvider.Companion.LocalDesktop
+
+@Composable
+fun DesktopPanelLanguage(
+    modifier: Modifier = Modifier,
+    api: DesktopProvider = LocalDesktop.current,
+    onTooltip: (item: Any?) -> Unit = {},
+    onClick: () -> Unit = {},
+) {
+    DesktopPanelText(
+        modifier = modifier,
+        text = api.appsProvider.currentLocale.country,
+        backgroundHover = Color.White.copy(alpha = 0.4f),
+        onToolTip = onTooltip,
+        onClick = onClick
+    )
+}