design fixes - basic idea

design fixes - basic idea

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

@@ -14,8 +14,11 @@ import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
 import eu.mjdev.desktop.components.icon.ShapedIcon
+import eu.mjdev.desktop.extensions.ColorUtils.alpha
 import eu.mjdev.desktop.extensions.Compose.runAsync
+import eu.mjdev.desktop.extensions.Modifier.circleBorder
 import eu.mjdev.desktop.icons.Icons
 import eu.mjdev.desktop.provider.DesktopScope.Companion.withDesktopScope
 import kotlinx.coroutines.Dispatchers
@@ -35,6 +38,7 @@ fun AppActions(
         modifier = modifier.wrapContentWidth()
     ) {
         ShapedIcon(
+            modifier = Modifier.circleBorder(2.dp, textColor.alpha(0.5f)),
             imageVector = iconRestart,
             iconColor = borderColor,
             iconBackgroundColor = iconsTintColor,
@@ -48,6 +52,7 @@ fun AppActions(
             }
         )
         ShapedIcon(
+            modifier = Modifier.circleBorder(2.dp, textColor.alpha(0.5f)),
             imageVector = iconPowerOff,
             iconColor = borderColor,
             iconBackgroundColor = iconsTintColor,
@@ -61,6 +66,7 @@ fun AppActions(
             }
         )
         ShapedIcon(
+            modifier = Modifier.circleBorder(2.dp, textColor.alpha(0.5f)),
             imageVector = iconLogout,
             iconColor = borderColor,
             iconBackgroundColor = iconsTintColor,

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

@@ -19,8 +19,6 @@ import androidx.compose.ui.layout.onPlaced
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.WindowPosition
 import eu.mjdev.desktop.components.blur.BlurPanel
-import eu.mjdev.desktop.components.sliding.base.VisibilityState
-import eu.mjdev.desktop.components.sliding.base.VisibilityState.Companion.rememberVisibilityState
 import eu.mjdev.desktop.components.user.UserAvatar
 import eu.mjdev.desktop.data.App
 import eu.mjdev.desktop.data.Category
@@ -50,8 +48,8 @@ import eu.mjdev.desktop.windows.ChromeWindowState.Companion.rememberChromeWindow
 @Suppress("FunctionName")
 @Composable
 fun AppsMenu(
-    panelState: VisibilityState = rememberVisibilityState(),
-    menuState: VisibilityState = rememberVisibilityState(),
+    panelState: ChromeWindowState = rememberChromeWindowState(),
+    menuState: ChromeWindowState = rememberChromeWindowState(),
     enterAnimation: EnterTransition = AppsMenuEnterAnimation,
     exitAnimation: ExitTransition = AppsMenuExitAnimation,
     searchTextState: MutableState<String> = rememberState(""),

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

@@ -48,7 +48,7 @@ fun AppsMenuApp(
             verticalAlignment = Alignment.CenterVertically,
         ) {
             FontIcon(
-                modifier = Modifier.circleBorder(1.dp, iconsTintColor),
+                modifier = Modifier.circleBorder(1.dp, textColor),
                 iconId = materialIcon,
                 iconSize = iconSize,
                 iconColor = textColor,

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

@@ -46,7 +46,7 @@ fun AppsMenuCategory(
             verticalAlignment = Alignment.CenterVertically
         ) {
             FontIcon(
-                modifier = Modifier.circleBorder(1.dp, iconsTintColor),
+                modifier = Modifier.circleBorder(1.dp, textColor),
                 iconId = materialIcon,
                 iconSize = iconSize,
                 iconColor = textColor,

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

@@ -36,7 +36,7 @@ fun BlurPanel(
     contentAlignment: Alignment = Alignment.TopStart,
     propagateMinConstraints: Boolean = false,
     blurRadius: Dp = 20.dp,
-    alpha: Float = 0.1f,
+    alpha: Float = 0.3f,
     content: @Composable BoxScope.() -> Unit = {}
 ) = withDesktopScope {
     BoxWithConstraints(
@@ -54,7 +54,7 @@ fun BlurPanel(
                 Brush.radialGradient(
                     listOf(
                         Color.Transparent,
-                        backgroundColor.alpha(0.5f)
+                        backgroundColor.alpha(alpha + 0.2f)
                     )
                 )
             )

src/main/kotlin/eu/mjdev/desktop/components/controlcenter/ControlCenter.kt

@@ -27,8 +27,6 @@ import androidx.compose.ui.window.WindowPosition
 import eu.mjdev.desktop.components.blur.BlurPanel
 import eu.mjdev.desktop.components.controlcenter.base.PageHeader
 import eu.mjdev.desktop.components.sliding.SlidingMenu
-import eu.mjdev.desktop.components.sliding.base.VisibilityState
-import eu.mjdev.desktop.components.sliding.base.VisibilityState.Companion.rememberVisibilityState
 import eu.mjdev.desktop.extensions.Compose.onLeftClick
 import eu.mjdev.desktop.extensions.Compose.onMousePress
 import eu.mjdev.desktop.extensions.Compose.onRightClick
@@ -48,7 +46,7 @@ import eu.mjdev.desktop.windows.ChromeWindowState.Companion.rememberChromeWindow
 @Composable
 fun ControlCenter(
     pagerState: MutableState<Int> = rememberState(0),
-    controlCenterState: VisibilityState = rememberVisibilityState(),
+    controlCenterState: ChromeWindowState = rememberChromeWindowState(),
     enterAnimation: EnterTransition = ControlCenterEnterAnimation,
     exitAnimation: ExitTransition = ControlCenterExitAnimation,
     onFocusChange: ChromeWindowState.(Boolean) -> Unit = {},

src/main/kotlin/eu/mjdev/desktop/components/controlcenter/base/PageHeader.kt

@@ -22,6 +22,7 @@ import eu.mjdev.desktop.components.controlcenter.pages.MainSettingsPage
 import eu.mjdev.desktop.components.image.ImageAny
 import eu.mjdev.desktop.components.text.TextAny
 import eu.mjdev.desktop.extensions.Modifier.circleBorder
+import eu.mjdev.desktop.extensions.Modifier.clipCircle
 import eu.mjdev.desktop.provider.DesktopScope.Companion.withDesktopScope
 
 @Composable
@@ -41,13 +42,13 @@ fun PageHeader(
             icon = {
                 Box(
                     modifier = Modifier.size(iconSize + 4.dp)
-                        .circleBorder(2.dp, iconsTintColor)
+                        .circleBorder(2.dp, textColor)
                         .padding(4.dp)
                 ) {
                     ImageAny(
-                        modifier = Modifier.size(iconSize),
+                        modifier = Modifier.size(iconSize).background(backgroundColor).clipCircle(),
                         src = page.icon,
-                        colorFilter = ColorFilter.tint(iconsTintColor),
+                        colorFilter = ColorFilter.tint(textColor),
                         contentDescription = ""
                     )
                 }
@@ -56,7 +57,7 @@ fun PageHeader(
                 TextAny(
                     modifier = Modifier.fillMaxWidth().padding(start = 16.dp),
                     text = page.name,
-                    color = iconsTintColor,
+                    color = textColor,
                     fontSize = 20.sp
                 )
             },

src/main/kotlin/eu/mjdev/desktop/components/custom/PowerBlock.kt

@@ -16,6 +16,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import eu.mjdev.desktop.extensions.ColorUtils.alpha
 import eu.mjdev.desktop.extensions.Compose.noElevation
 import eu.mjdev.desktop.extensions.Compose.transparent
 import eu.mjdev.desktop.extensions.Modifier.circleBorder
@@ -62,7 +63,7 @@ fun PowerBlock(
                     .padding(bottom = 36.dp)
                     .size(64.dp)
                     .clipCircle()
-                    .circleBorder(4.dp, backgroundColor)
+                    .circleBorder(2.dp, textColor.alpha(0.5f))
                     .circleShadow(4.dp, shadowColor),
                 contentPadding = PaddingValues(1.dp),
                 onClick = onPowerButtonClick,
@@ -72,12 +73,12 @@ fun PowerBlock(
                 Image(
                     modifier = Modifier
                         .size(64.dp)
-                        .background(iconTintColor, CircleShape)
+                        .background(backgroundColor, CircleShape)
                         .clipCircle()
                         .padding(8.dp),
                     imageVector = Icons.Filled.SettingsPower,
                     contentDescription = "",
-                    colorFilter = ColorFilter.tint(backgroundColor)
+                    colorFilter = ColorFilter.tint(textColor)
                 )
             }
         }

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

@@ -31,8 +31,6 @@ import eu.mjdev.desktop.components.desktoppanel.applets.DesktopPanelDateTime
 import eu.mjdev.desktop.components.desktoppanel.applets.DesktopPanelFavoriteApps
 import eu.mjdev.desktop.components.desktoppanel.applets.DesktopPanelLanguage
 import eu.mjdev.desktop.components.sliding.SlidingMenu
-import eu.mjdev.desktop.components.sliding.base.VisibilityState
-import eu.mjdev.desktop.components.sliding.base.VisibilityState.Companion.rememberVisibilityState
 import eu.mjdev.desktop.components.tooltip.Tooltip
 import eu.mjdev.desktop.components.tooltip.TooltipState
 import eu.mjdev.desktop.components.tooltip.rememberTooltipState
@@ -59,8 +57,8 @@ fun DesktopPanel(
     iconPadding: PaddingValues = PaddingValues(4.dp),
     iconOuterPadding: PaddingValues = PaddingValues(2.dp),
     showMenuIcon: Boolean = true,
-    panelState: VisibilityState = rememberVisibilityState(),
-    menuState: VisibilityState = rememberVisibilityState(),
+    panelState: ChromeWindowState = rememberChromeWindowState(),
+    menuState: ChromeWindowState = rememberChromeWindowState(),
     tooltipState: TooltipState = rememberTooltipState(),
     enterAnimation: EnterTransition = DesktopPanelEnterAnimation,
     exitAnimation: ExitTransition = DesktopPanelExitAnimation,

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

@@ -5,7 +5,10 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.material.Button
 import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.CircularProgressIndicator
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.DpSize
@@ -13,6 +16,7 @@ import androidx.compose.ui.unit.dp
 import eu.mjdev.desktop.components.fonticon.FontIcon
 import eu.mjdev.desktop.data.App
 import eu.mjdev.desktop.data.App.Companion.rememberRunningIndicator
+import eu.mjdev.desktop.extensions.ColorUtils.alpha
 import eu.mjdev.desktop.extensions.Compose.color
 import eu.mjdev.desktop.extensions.Compose.noElevation
 import eu.mjdev.desktop.extensions.Compose.onLeftClick
@@ -22,6 +26,7 @@ import eu.mjdev.desktop.extensions.Compose.onMousePress
 import eu.mjdev.desktop.extensions.Compose.onRightClick
 import eu.mjdev.desktop.extensions.Compose.rememberCalculated
 import eu.mjdev.desktop.extensions.Compose.rememberState
+import eu.mjdev.desktop.extensions.Modifier.circleBorder
 import eu.mjdev.desktop.extensions.Modifier.clipRect
 import eu.mjdev.desktop.provider.DesktopScope.Companion.withDesktopScope
 
@@ -70,7 +75,7 @@ fun DesktopPanelIcon(
             }
     ) {
         Button(
-            modifier = Modifier.fillMaxSize(),
+            modifier = Modifier.fillMaxSize().circleBorder(2.dp, textColor.alpha(0.5f)),
             contentPadding = PaddingValues(0.dp),
             colors = ButtonDefaults.color(background),
             elevation = ButtonDefaults.noElevation(),

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

@@ -19,41 +19,43 @@ import eu.mjdev.desktop.extensions.Compose.noElevation
 import eu.mjdev.desktop.extensions.Compose.onMouseEnter
 import eu.mjdev.desktop.extensions.Compose.onMouseLeave
 import eu.mjdev.desktop.extensions.Compose.rememberState
+import eu.mjdev.desktop.provider.DesktopScope.Companion.withDesktopScope
 
 @Preview
 @Composable
 fun DesktopPanelText(
     modifier: Modifier = Modifier,
     text: String = "text",
-    textColor: Color = Color.White,
     backgroundHover: Color = Color.White.copy(alpha = 0.4f),
     textPadding: PaddingValues = PaddingValues(4.dp),
     buttonState: MutableState<Boolean> = rememberState(false),
     onTooltip: (item: Any?) -> Unit = {},
     onClick: () -> Unit = {},
-) = Box(
-    modifier = modifier
-        .wrapContentSize()
-        .onMouseEnter {
-            buttonState.value = true
-            onTooltip(text)
-        }
-        .onMouseLeave {
-            buttonState.value = false
-        }
-) {
-    Button(
-        modifier = Modifier.padding(textPadding),
-        contentPadding = PaddingValues(0.dp),
-        onClick = onClick,
-        colors = ButtonDefaults.color(if (buttonState.value) backgroundHover else Color.Transparent),
-        elevation = ButtonDefaults.noElevation()
+) = withDesktopScope {
+    Box(
+        modifier = modifier
+            .wrapContentSize()
+            .onMouseEnter {
+                buttonState.value = true
+                onTooltip(text)
+            }
+            .onMouseLeave {
+                buttonState.value = false
+            }
     ) {
-        Text(
-            textAlign = TextAlign.Center,
-            text = text,
-            color = textColor,
-        )
+        Button(
+            modifier = Modifier.padding(textPadding),
+            contentPadding = PaddingValues(0.dp),
+            onClick = onClick,
+            colors = ButtonDefaults.color(if (buttonState.value) backgroundHover else Color.Transparent),
+            elevation = ButtonDefaults.noElevation()
+        ) {
+            Text(
+                textAlign = TextAlign.Center,
+                text = text,
+                color = textColor,
+            )
+        }
     }
 }
 

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

@@ -57,8 +57,8 @@ fun DesktopPanelDateTime(
                 padding = 1.dp,
                 dateTextSize = dateTextSize,
                 timeTextSize = timeTextSize,
-                timeTextColor = iconsTintColor,
-                dateTextColor = iconsTintColor,
+                timeTextColor = textColor,
+                dateTextColor = textColor,
             )
         }
     }

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

@@ -19,7 +19,6 @@ fun DesktopPanelLanguage(
         text = currentLocale.country,
         onTooltip = onTooltip,
         onClick = onClick,
-        textColor = iconsTintColor
     )
 }
 

src/main/kotlin/eu/mjdev/desktop/components/main/MainWindow.kt

@@ -14,13 +14,15 @@ import eu.mjdev.desktop.components.info.InfoWindow
 import eu.mjdev.desktop.components.installer.Installer
 import eu.mjdev.desktop.components.sliding.base.VisibilityState.Companion.rememberVisibilityState
 import eu.mjdev.desktop.provider.DesktopScope.Companion.withDesktopScope
+import eu.mjdev.desktop.windows.ChromeWindowState.Companion.rememberChromeWindowState
 import eu.mjdev.desktop.windows.DesktopWindow
 
+// todo focus manager
 @Composable
 fun MainWindow() = withDesktopScope {
-    val controlCenterState = rememberVisibilityState()
-    val panelState = rememberVisibilityState(true, panelAutoHideEnabled)
-    val menuState = rememberVisibilityState()
+    val controlCenterState = rememberChromeWindowState()
+    val panelState = rememberChromeWindowState(visible = true, enabled = panelAutoHideEnabled)
+    val menuState = rememberChromeWindowState()
     val installWindowSate = rememberVisibilityState()
     val infoWindowSate = rememberVisibilityState(false) //(api.isFirstStart || api.isDebug) // todo
     DesktopWindow(
@@ -44,7 +46,9 @@ fun MainWindow() = withDesktopScope {
             menuState = menuState,
             panelState = panelState,
             onFocusChange = { focus ->
-                if (!focus) menuState.hide()
+                if (!focus) {
+                    menuState.hide()
+                }
             }
         )
         ControlCenter(

src/main/kotlin/eu/mjdev/desktop/components/sliding/base/VisibilityState.kt

@@ -10,7 +10,7 @@ import eu.mjdev.desktop.helpers.internal.DpBounds
 import eu.mjdev.desktop.helpers.internal.DpBounds.Companion.toDpBounds
 
 @Suppress("unused", "MemberVisibilityCanBePrivate")
-class VisibilityState(
+open class VisibilityState(
     private val startState: Boolean = false,
     var enabled: Boolean = true
 ) {

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

@@ -27,6 +27,7 @@ import eu.mjdev.desktop.components.appbar.AppBar
 import eu.mjdev.desktop.components.button.TransparentButton
 import eu.mjdev.desktop.components.image.ImageAny
 import eu.mjdev.desktop.components.text.TextAny
+import eu.mjdev.desktop.extensions.ColorUtils.alpha
 import eu.mjdev.desktop.extensions.Compose.SuperDarkGray
 import eu.mjdev.desktop.extensions.Modifier.circleBorder
 import eu.mjdev.desktop.extensions.Modifier.clipCircle
@@ -68,7 +69,7 @@ fun UserAvatar(
                     ImageAny(
                         modifier = Modifier
                             .size(avatarSize)
-                            .circleBorder(2.dp, iconsTintColor),
+                            .circleBorder(2.dp, textColor.alpha(0.5f)),
                         src = api.currentUser.picture,
                         colorFilter = if (api.currentUser.picture is ImageVector) ColorFilter.tint(iconsTintColor)
                         else null,

src/main/kotlin/eu/mjdev/desktop/windows/ChromeWindowState.kt

@@ -8,6 +8,7 @@ import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.window.WindowPlacement
 import androidx.compose.ui.window.WindowPosition
 import androidx.compose.ui.window.WindowState
+import eu.mjdev.desktop.components.sliding.base.VisibilityState
 import eu.mjdev.desktop.extensions.Compose.launchedEffect
 import eu.mjdev.desktop.extensions.Compose.rememberCalculated
 import eu.mjdev.desktop.extensions.Compose.rememberState
@@ -18,7 +19,12 @@ class ChromeWindowState(
     size: DpSize = DpSize(Dp.Unspecified, Dp.Unspecified),
     placement: WindowPlacement = WindowPlacement.Floating,
     closeAction: WindowCloseAction,
-) : WindowState {
+    visible: Boolean = false,
+    enabled: Boolean = true,
+) : VisibilityState(
+    startState = visible,
+    enabled = enabled
+), WindowState {
 
     var onFocusChange: MutableList<ChromeWindowState.(focus: Boolean) -> Unit> = mutableStateListOf()
     var onOpened: MutableList<ChromeWindowState.() -> Unit> = mutableStateListOf()
@@ -91,8 +97,10 @@ class ChromeWindowState(
             size: DpSize = DpSize(Dp.Unspecified, Dp.Unspecified),
             placement: WindowPlacement = WindowPlacement.Floating,
             closeAction: WindowCloseAction = WindowCloseAction.CLOSE,
-        ) = remember(position, size, placement, closeAction) {
-            ChromeWindowState(position, size, placement, closeAction)
+            visible: Boolean = false,
+            enabled: Boolean = true,
+        ) = remember(position, size, placement, closeAction, visible) {
+            ChromeWindowState(position, size, placement, closeAction, visible, enabled)
         }
 
         @Composable