pre-concept design idea

src/main/kotlin/eu/mjdev/desktop/components/appbar/AppBar.kt

@@ -11,7 +11,7 @@ package eu.mjdev.desktop.components.appbar
 import androidx.compose.desktop.ui.tooling.preview.Preview
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -20,7 +20,13 @@ import androidx.compose.ui.unit.dp
 @Composable
 fun AppBar(
     modifier: Modifier = Modifier,
-    contentPadding :PaddingValues = PaddingValues(4.dp),
+    contentPadding: PaddingValues = PaddingValues(4.dp),
+    iconVerticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
+    titleVerticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
+    actionsVerticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
+    iconPadding: PaddingValues = PaddingValues(),
+    titlePadding: PaddingValues = PaddingValues(),
+    actionsPadding: PaddingValues = PaddingValues(),
     icon: @Composable RowScope.() -> Unit = {},
     title: @Composable RowScope.() -> Unit = {},
     actions: @Composable RowScope.() -> Unit = {},
@@ -29,19 +35,24 @@ fun AppBar(
         modifier = modifier
             .height(IntrinsicSize.Min)
             .padding(contentPadding),
-        verticalAlignment = Alignment.CenterVertically,
+        verticalAlignment = Alignment.Bottom,
     ) {
         Row(
-            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.wrapContentHeight()
+                .padding(iconPadding),
+            verticalAlignment = iconVerticalAlignment,
             content = icon
         )
         Row(
-            modifier = Modifier.weight(1f),
-            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.weight(1f).wrapContentHeight()
+                .padding(titlePadding),
+            verticalAlignment = titleVerticalAlignment,
             content = title
         )
         Row(
-            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.wrapContentHeight()
+                .padding(actionsPadding),
+            verticalAlignment = actionsVerticalAlignment,
             content = actions
         )
     }

src/main/kotlin/eu/mjdev/desktop/components/appsmenu/AppsMenu.kt

@@ -13,6 +13,7 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.layout.onPlaced
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.WindowPosition
@@ -35,7 +36,6 @@ import eu.mjdev.desktop.extensions.Custom.trimIsNotEmpty
 import eu.mjdev.desktop.extensions.Modifier.dropShadow
 import eu.mjdev.desktop.helpers.animation.Animations.AppsMenuEnterAnimation
 import eu.mjdev.desktop.helpers.animation.Animations.AppsMenuExitAnimation
-import eu.mjdev.desktop.helpers.compose.Orientation
 import eu.mjdev.desktop.helpers.compose.rememberForeverLazyListState
 import eu.mjdev.desktop.helpers.internal.KeyEventHandler.Companion.globalKeyEventHandler
 import eu.mjdev.desktop.provider.DesktopScope
@@ -147,19 +147,39 @@ fun AppsMenu(
                 modifier = Modifier
                     .fillMaxSize()
                     .padding(menuPadding)
-                    .background(backgroundColor.copy(alpha = 0.7f), RoundedCornerShape(24.dp))
+                    .background(backgroundColor.copy(alpha = 0.2f), RoundedCornerShape(24.dp))
                     .border(2.dp, borderColor, RoundedCornerShape(24.dp))
                     .clip(RoundedCornerShape(24.dp))
             ) {
                 Column(
                     modifier = Modifier.fillMaxSize()
                 ) {
-                    UserAvatar(
-                        modifier = Modifier.background(backgroundColor),
-                        avatarSize = 64.dp,
-                        orientation = Orientation.Horizontal,
-                        onUserAvatarClick = onUserAvatarClick
-                    )
+                    BoxWithConstraints(
+                        contentAlignment = Alignment.BottomStart
+                    ) {
+                        Box(
+                            modifier = Modifier.fillMaxWidth()
+                                .height(64.dp)
+                                .background(
+                                    Brush.horizontalGradient(
+                                        listOf(
+                                            backgroundColor.alpha(0.3f),
+                                            backgroundColor,
+                                            backgroundColor.alpha(0.3f)
+                                        ),
+                                        startX = 0f,
+                                        endX = 0f
+                                    )
+                                )
+                        )
+                        UserAvatar(
+                            titleVerticalAlignment = Alignment.Bottom,
+                            iconPadding = PaddingValues(bottom = 16.dp),
+                            titlePadding = PaddingValues(bottom = 4.dp),
+                            avatarSize = 64.dp,
+                            onUserAvatarClick = onUserAvatarClick
+                        )
+                    }
                     Divider(
                         modifier = Modifier
                             .fillMaxWidth()

src/main/kotlin/eu/mjdev/desktop/components/background/BackgroundImage.kt

@@ -5,9 +5,11 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import eu.mjdev.desktop.components.image.ImageAny
+import eu.mjdev.desktop.extensions.ColorUtils.alpha
 import eu.mjdev.desktop.extensions.Compose.Crossfade
 import eu.mjdev.desktop.extensions.Compose.SuperDarkGray
 import eu.mjdev.desktop.extensions.Compose.launchedEffect
@@ -46,6 +48,16 @@ fun BackgroundImage(
                 src = value,
                 onFail = onError
             )
+            Box(
+                modifier = modifier.background(
+                    Brush.radialGradient(
+                        listOf(
+                            Color.Transparent,
+                            backgroundColor.alpha(0.6f)
+                        )
+                    )
+                )
+            )
         }
         launchedEffect(currentBackground) {
             if (switchDelay > 0) {

src/main/kotlin/eu/mjdev/desktop/components/blur/BlurPanel.kt

@@ -8,6 +8,8 @@
 
 package eu.mjdev.desktop.components.blur
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.fillMaxSize
@@ -16,11 +18,14 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.blur
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import eu.mjdev.desktop.components.image.ImageAny
+import eu.mjdev.desktop.extensions.ColorUtils.alpha
 import eu.mjdev.desktop.provider.DesktopScope.Companion.withDesktopScope
 
 // todo real blur
@@ -31,7 +36,7 @@ fun BlurPanel(
     contentAlignment: Alignment = Alignment.TopStart,
     propagateMinConstraints: Boolean = false,
     blurRadius: Dp = 20.dp,
-    alpha: Float = 0.5f,
+    alpha: Float = 0.1f,
     content: @Composable BoxScope.() -> Unit = {}
 ) = withDesktopScope {
     BoxWithConstraints(
@@ -44,6 +49,16 @@ fun BlurPanel(
             src = painterResource("images/$resourceId"),
             contentScale = if (maxHeight > maxWidth) ContentScale.FillHeight else ContentScale.FillWidth
         )
+        Box(
+            modifier = Modifier.fillMaxSize().background(
+                Brush.radialGradient(
+                    listOf(
+                        Color.Transparent,
+                        backgroundColor.alpha(0.5f)
+                    )
+                )
+            )
+        )
         content()
     }
 }

src/main/kotlin/eu/mjdev/desktop/components/controlcenter/pages/MainSettingsPage.kt

@@ -18,7 +18,6 @@ import eu.mjdev.desktop.components.user.UserAvatar
 import eu.mjdev.desktop.extensions.ColorUtils.alpha
 import eu.mjdev.desktop.extensions.Compose.runAsync
 import eu.mjdev.desktop.extensions.Modifier.rectShadow
-import eu.mjdev.desktop.helpers.compose.Orientation
 
 @Suppress("FunctionName")
 fun MainSettingsPage() = ControlCenterPage(
@@ -38,7 +37,6 @@ fun MainSettingsPage() = ControlCenterPage(
             UserAvatar(
                 modifier = Modifier.background(backgroundColor),
                 avatarSize = 96.dp,
-                orientation = Orientation.Vertical,
                 titleTextSize = 20.sp,
                 detailTextSize = 16.sp,
                 onUserAvatarClick = {

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

@@ -9,12 +9,14 @@ 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.shape.RoundedCornerShape
 import androidx.compose.material.Divider
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onPlaced
@@ -75,10 +77,10 @@ fun DesktopPanel(
 ) = withDesktopScope {
     val panelDividerWidth by rememberState(theme.panelDividerWidth)
     val panelHeight: (visible: Boolean) -> Dp = { visible ->
-        if (visible)
-            iconSize.height + iconOuterPadding.height + tooltipState.tooltipHeight + theme.panelContentPadding.times(2)
-        else
-            panelDividerWidth
+        if (visible) {
+            iconSize.height + iconOuterPadding.height + tooltipState.tooltipHeight +
+                    theme.panelContentPadding.times(2) + 8.dp
+        } else panelDividerWidth
     }
     val panelSize = remember(panelState.isVisible, panelState.enabled) {
         DpSize(containerSize.width, panelHeight(panelState.isVisible))
@@ -146,6 +148,7 @@ fun DesktopPanel(
                         BlurPanel(
                             modifier = Modifier.fillMaxWidth()
                                 .wrapContentHeight()
+                                .clip(RoundedCornerShape(panelSize.height.div(2)))
                         ) {
                             Column(
                                 modifier = Modifier.fillMaxWidth()
@@ -153,14 +156,20 @@ fun DesktopPanel(
                                     .background(
                                         brush = Brush.verticalGradient(
                                             colors = listOf(
-                                                backgroundColor.alpha(0.3f),
-                                                backgroundColor.alpha(0.7f),
-                                                backgroundColor.alpha(0.8f),
+                                                backgroundColor.alpha(0.2f),
+                                                backgroundColor.alpha(0.4f),
+                                                backgroundColor.alpha(0.5f),
                                             )
                                         )
-                                    ).topShadow(
+                                    )
+                                    .clip(RoundedCornerShape(panelSize.height.div(2)))
+                                    .topShadow(
                                         color = borderColor.alpha(0.3f),
                                         blur = 4.dp
+                                    ).padding(
+                                        start = 4.dp,
+                                        end = 4.dp,
+                                        bottom = 4.dp
                                     ).onPlaced(panelState::onPlaced),
                             ) {
                                 Divider(

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

@@ -1,9 +1,7 @@
 package eu.mjdev.desktop.components.desktoppanel.applets
 
 import androidx.compose.desktop.ui.tooling.preview.Preview
-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
@@ -39,13 +37,6 @@ fun DesktopMenuIcon(
         onClick = onClick,
         onContextMenuClick = onContextMenuClick
     )
-    Divider(
-        modifier = Modifier
-            .padding(2.dp)
-            .height(iconSize.height - 8.dp)
-            .width(2.dp)
-            .background(Color.White.copy(alpha = 0.4f))
-    )
 }
 
 @Preview

src/main/kotlin/eu/mjdev/desktop/components/greeter/Greeter.kt

@@ -20,7 +20,6 @@ import eu.mjdev.desktop.data.User
 import eu.mjdev.desktop.extensions.ColorUtils.alpha
 import eu.mjdev.desktop.extensions.Compose.rememberState
 import eu.mjdev.desktop.extensions.Compose.runAsync
-import eu.mjdev.desktop.helpers.compose.Orientation
 import eu.mjdev.desktop.provider.DesktopScope.Companion.withDesktopScope
 import eu.mjdev.desktop.windows.ChromeWindow
 import kotlinx.coroutines.flow.collectLatest
@@ -59,7 +58,6 @@ fun Greeter() = withDesktopScope {
                 UserAvatar(
                     modifier = Modifier,
                     avatarSize = 128.dp,
-                    orientation = Orientation.Vertical,
                     onUserAvatarClick = {
                         passwordVisible = true
                     }

src/main/kotlin/eu/mjdev/desktop/components/user/UserAvatar.kt

@@ -30,7 +30,6 @@ import eu.mjdev.desktop.components.text.TextAny
 import eu.mjdev.desktop.extensions.Compose.SuperDarkGray
 import eu.mjdev.desktop.extensions.Modifier.circleBorder
 import eu.mjdev.desktop.extensions.Modifier.clipCircle
-import eu.mjdev.desktop.helpers.compose.Orientation
 import eu.mjdev.desktop.provider.DesktopScope.Companion.withDesktopScope
 
 @Suppress("FunctionName")
@@ -38,14 +37,25 @@ import eu.mjdev.desktop.provider.DesktopScope.Companion.withDesktopScope
 fun UserAvatar(
     modifier: Modifier = Modifier,
     avatarSize: Dp = 64.dp,
-    orientation: Orientation = Orientation.Vertical,
     titleTextSize: TextUnit = 16.sp,
     detailTextSize: TextUnit = 14.sp,
+    iconVerticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
+    titleVerticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
+    actionsVerticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
+    iconPadding : PaddingValues = PaddingValues(),
+    titlePadding : PaddingValues = PaddingValues(),
+    actionsPadding : PaddingValues = PaddingValues(),
     onUserAvatarClick: () -> Unit = {},
     actions: @Composable RowScope.() -> Unit = {},
 ) = withDesktopScope {
-    val content: @Composable (orientation: Orientation) -> Unit = {
+    val content: @Composable () -> Unit = {
         AppBar(
+            iconVerticalAlignment = iconVerticalAlignment,
+            titleVerticalAlignment = titleVerticalAlignment,
+            actionsVerticalAlignment = actionsVerticalAlignment,
+            iconPadding = iconPadding,
+            titlePadding = titlePadding,
+            actionsPadding = actionsPadding,
             icon = {
                 TransparentButton(
                     modifier = Modifier
@@ -70,8 +80,7 @@ fun UserAvatar(
                         .fillMaxWidth()
                         .padding(top = 8.dp),
                     verticalArrangement = Arrangement.Center,
-                    horizontalAlignment = if (orientation == Orientation.Vertical) Alignment.CenterHorizontally
-                    else Alignment.Start
+                    horizontalAlignment = Alignment.Start
                 ) {
                     TextAny(
                         text = api.currentUser.userName,
@@ -97,25 +106,26 @@ fun UserAvatar(
             .wrapContentWidth()
             .padding(16.dp)
     ) {
-        when (orientation) {
-            Orientation.Vertical -> Column(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .align(Alignment.Center),
-                horizontalAlignment = Alignment.CenterHorizontally,
-                content = { content(orientation) }
-            )
+//        when (orientation) {
+//            Orientation.Vertical -> Column(
+//                modifier = Modifier
+//                    .fillMaxWidth()
+//                    .align(Alignment.Center),
+//                horizontalAlignment = Alignment.CenterHorizontally,
+//                content = { content(orientation) }
+//            )
 
-            Orientation.Horizontal -> Row(
+//            Orientation.Horizontal ->
+        Row(
                 modifier = Modifier
                     .fillMaxWidth()
                     .align(Alignment.TopCenter),
                 horizontalArrangement = Arrangement.Start,
-                content = { content(orientation) }
+                content = { content() }
             )
         }
     }
-}
+//}
 
 @Preview
 @Composable
@@ -124,12 +134,6 @@ fun UserAvatarPreview() {
         UserAvatar(
             modifier = Modifier.fillMaxWidth()
                 .background(Color.SuperDarkGray),
-            orientation = Orientation.Vertical
-        )
-        UserAvatar(
-            modifier = Modifier.fillMaxWidth()
-                .background(Color.SuperDarkGray),
-            orientation = Orientation.Horizontal
         )
     }
 }

src/main/kotlin/eu/mjdev/desktop/data/DesktopConfig.kt

@@ -51,8 +51,8 @@ class DesktopConfig(
         val configCache = mutableMapOf<String, DesktopConfig>()
 
         private val DEFAULT = DesktopConfig {
-            addBackground(ProviderSmug())
-            addBackground(ProviderErzvo())
+//            addBackground(ProviderSmug())
+//            addBackground(ProviderErzvo())
         }
 
         // todo load from user settings

src/main/kotlin/eu/mjdev/desktop/managers/theme/linux/ThemeManagerLinux.kt

@@ -15,7 +15,7 @@ import eu.mjdev.desktop.extensions.ColorUtils.darker
 import eu.mjdev.desktop.extensions.ColorUtils.isLightColor
 import eu.mjdev.desktop.extensions.Compose.SuperDarkGray
 import eu.mjdev.desktop.extensions.Compose.hexRgb
-import eu.mjdev.desktop.helpers.internal.Palette
+import eu.mjdev.desktop.extensions.Custom.get
 import eu.mjdev.desktop.helpers.system.Shell
 import eu.mjdev.desktop.managers.theme.base.ThemeManagerStub
 import eu.mjdev.desktop.provider.DesktopProvider
@@ -25,21 +25,27 @@ import java.io.File
 class ThemeManagerLinux(
     api: DesktopProvider,
 ) : ThemeManagerStub(api) {
-    private val palette: Palette = api.palette
-    private val themeName: String = THEME_MJDEV
-    private val themesDir: File = File(api.homeDir, ".themes")
-    private val themeDir: File = File(themesDir, themeName)
-    private val themeDesktopFile: File = File(themeDir, "index.theme")
-    private val gtk2ThemeDir: File = File(themeDir, "gtk-2.0")
-    private val gtk3ThemeDir: File = File(themeDir, "gtk-3.0")
-    private val gtk4ThemeDir: File = File(themeDir, "gtk-4.0")
-    private val gtk3CssFile: File = File(gtk3ThemeDir, "gtk.css")
-    private val gtk4CssFile: File = File(gtk4ThemeDir, "gtk.css")
+    private val palette = api.palette
+    private val themeName = THEME_MJDEV
+    private val homeDir = api.homeDir
+    private val themesDir = homeDir[".themes"]
+    private val systemThemeDir = homeDir[".config"]
+    private val themeDir = themesDir[themeName]
+    private val themeDesktopFile = themeDir["index.theme"]
+    private val gtk2ThemeDir = themeDir["gtk-2.0"]
+    private val gtk3ThemeDir = themeDir["gtk-3.0"]
+    private val gtk4ThemeDir = themeDir["gtk-4.0"]
+    private val gtk3CssFile = gtk3ThemeDir["gtk.css"]
+    private val gtk4CssFile = gtk4ThemeDir["gtk.css"]
+    private val systemGtk3CssFile = gtk3ThemeDir["gtk.css"]
+    private val systemGtk4CssFile = gtk4ThemeDir["gtk.css"]
 
     override fun createFromPalette() {
         createDesktopFile()
         createCssFile(gtk3CssFile)
         createCssFile(gtk4CssFile)
+        createCssFile(systemGtk3CssFile)
+        createCssFile(systemGtk4CssFile)
     }
 
     private fun createDesktopFile() {