Browse Source

tooltip improvement

milan jurkulák 2 years ago
parent
commit
b502d46e6e

+ 1 - 0
src/main/kotlin/eu/mjdev/desktop/components/background/BackgroundImage.kt

@@ -20,6 +20,7 @@ import eu.mjdev.desktop.provider.DesktopProvider.Companion.LocalDesktop
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
+@Suppress("FunctionName")
 @Preview
 @Composable
 fun BackgroundImage(

+ 9 - 16
src/main/kotlin/eu/mjdev/desktop/components/desktoppanel/DesktopPanel.kt

@@ -26,12 +26,12 @@ import eu.mjdev.desktop.components.desktoppanel.applets.DesktopPanelLanguage
 import eu.mjdev.desktop.components.sliding.SlidingMenu
 import eu.mjdev.desktop.components.sliding.VisibilityState
 import eu.mjdev.desktop.components.sliding.VisibilityState.Companion.rememberVisibilityState
+import eu.mjdev.desktop.components.tooltip.Tooltip
+import eu.mjdev.desktop.components.tooltip.TooltipData
 import eu.mjdev.desktop.data.App
 import eu.mjdev.desktop.extensions.ColorUtils.alpha
 import eu.mjdev.desktop.extensions.ColorUtils.lighter
 import eu.mjdev.desktop.extensions.Compose.height
-import eu.mjdev.desktop.extensions.Compose.launchedEffect
-import eu.mjdev.desktop.extensions.Compose.rememberState
 import eu.mjdev.desktop.extensions.Modifier.topShadow
 import eu.mjdev.desktop.helpers.animation.Animations.DesktopPanelEnterAnimation
 import eu.mjdev.desktop.helpers.animation.Animations.DesktopPanelExitAnimation
@@ -42,7 +42,6 @@ import eu.mjdev.desktop.helpers.internal.Palette.Companion.rememberTextColor
 import eu.mjdev.desktop.provider.DesktopProvider
 import eu.mjdev.desktop.provider.DesktopProvider.Companion.LocalDesktop
 import eu.mjdev.desktop.windows.ChromeWindow
-import kotlinx.coroutines.delay
 
 @OptIn(ExperimentalFoundationApi::class)
 @Suppress("FunctionName")
@@ -66,7 +65,6 @@ fun DesktopPanel(
             else -> TooltipData(title = item.toString())
         }
     },
-    tooltipDelay: Long = 1000L,
     onMenuIconClicked: () -> Unit = {
         // todo
     },
@@ -86,8 +84,7 @@ fun DesktopPanel(
     val textColor by rememberTextColor(api)
     val borderColor by rememberBorderColor(api)
     val iconsTintColor by rememberIconTintColor(api)
-    var tooltipData: Any? by rememberState(null)
-    val onTooltip: (item: Any?) -> Unit = { item -> tooltipData = item }
+    var tooltipState = remember{ mutableStateOf<Any?>(null) }
     val panelHeight: (visible: Boolean) -> Dp = { visible ->
         if (visible)
             iconSize.height + iconOuterPadding.height + tooltipHeight + panelContentPadding.height
@@ -117,7 +114,7 @@ fun DesktopPanel(
                 // todo focus
             },
             onPointerLeave = {
-                if(!menuState.isVisible) {
+                if (!menuState.isVisible) {
                     panelState.hide()
                 }
             }
@@ -133,10 +130,10 @@ fun DesktopPanel(
                 TooltipArea(
                     modifier = Modifier.fillMaxWidth().wrapContentHeight(),
                     tooltip = {
-                        DesktopPanelTooltip(
+                        Tooltip(
                             textColor = textColor,
                             borderColor = borderColor,
-                            item = tooltipData,
+                            state = tooltipState,
                             converter = tooltipConverter,
                             backgroundColor = backgroundColor
                         )
@@ -191,7 +188,7 @@ fun DesktopPanel(
                                         iconSize = iconSize,
                                         iconPadding = iconPadding,
                                         iconOuterPadding = iconOuterPadding,
-                                        onTooltip = onTooltip,
+                                        onTooltip = { item -> tooltipState.value = item },
                                         onClick = { onMenuIconClicked() },
                                         onContextMenuClick = onMenuIconContextMenuClicked
                                     )
@@ -204,13 +201,13 @@ fun DesktopPanel(
                                     iconSize = iconSize,
                                     iconPadding = iconPadding,
                                     iconOuterPadding = iconOuterPadding,
-                                    onTooltip = onTooltip,
+                                    onTooltip = { item -> tooltipState.value = item },
                                     onAppClick = onAppClick,
                                     onContextMenuClick = onAppContextMenuClick
                                 )
                                 DesktopPanelLanguage(
                                     modifier = Modifier.align(Alignment.CenterEnd),
-                                    onTooltip = onTooltip,
+                                    onTooltip = { item -> tooltipState.value = item },
                                     onClick = onLanguageClick
                                 )
                             }
@@ -220,8 +217,4 @@ fun DesktopPanel(
             }
         }
     }
-    launchedEffect(tooltipData) {
-        delay(tooltipDelay)
-        tooltipData = null
-    }
 }

+ 16 - 6
src/main/kotlin/eu/mjdev/desktop/components/desktoppanel/DesktopPanelTooltip.kt → src/main/kotlin/eu/mjdev/desktop/components/tooltip/Tooltip.kt

@@ -1,4 +1,4 @@
-package eu.mjdev.desktop.components.desktoppanel
+package eu.mjdev.desktop.components.tooltip
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
@@ -8,20 +8,27 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import eu.mjdev.desktop.components.text.TextAny
+import eu.mjdev.desktop.extensions.Compose.launchedEffect
+import kotlinx.coroutines.delay
 
+@Suppress("FunctionName")
 @Composable
-fun DesktopPanelTooltip(
-    item: Any? = null,
+fun Tooltip(
     textColor: Color = Color.White,
     borderColor: Color = Color.White,
     backgroundColor: Color = Color.Transparent,
+    hideDelay: Long = 2000,
+    state: MutableState<Any?> = remember { mutableStateOf(null) },
     converter: (Any?) -> TooltipData = { TooltipData(description = it.toString()) }
-) = if (item != null) {
+) = if (state.value != null) {
     Box(
         modifier = Modifier
             .wrapContentSize()
@@ -29,8 +36,7 @@ fun DesktopPanelTooltip(
             .border(2.dp, borderColor, RoundedCornerShape(8.dp))
             .padding(8.dp)
     ) {
-
-        with(converter(item)) {
+        with(converter(state.value)) {
             Column {
                 if (title.isNotEmpty()) {
                     TextAny(
@@ -49,6 +55,10 @@ fun DesktopPanelTooltip(
             }
         }
     }
+    launchedEffect(state) {
+        delay(hideDelay)
+        state.value = null
+    }
 } else Unit
 
 data class TooltipData(