[Simple mode] Redesign actions

ComposeGears · Nov 6, 2024 · 50e1592 · 50e1592
1 parent 8d4aa0d
commit 50e1592
Show file tree

Hide file tree

Showing 16 changed files with 535 additions and 311 deletions.
diff --git a/...plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/HorizontalDivider.kt b/...plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/HorizontalDivider.kt
@@ -0,0 +1,16 @@
+package io.github.composegears.valkyrie.ui.foundation
+
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+
+@Composable
+fun HorizontalDivider(modifier: Modifier = Modifier) {
+    HorizontalDivider(
+        modifier = modifier,
+        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.1f),
+        thickness = Dp.Hairline,
+    )
+}
diff --git a/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/TooltipButton.kt b/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/TooltipButton.kt
@@ -26,84 +26,82 @@ import io.github.composegears.valkyrie.ui.foundation.icons.ValkyrieIcons
 import io.github.composegears.valkyrie.ui.foundation.icons.WhiteCircle
 import io.github.composegears.valkyrie.ui.foundation.theme.PreviewTheme
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun TooltipIconButton(
-    tooltipText: String,
+    hint: String,
     onClick: () -> Unit,
     icon: ImageVector,
     modifier: Modifier = Modifier,
 ) {
-    TooltipArea(
+    TooltipButton(
         modifier = modifier,
-        tooltip = {
-            Box(
-                modifier = Modifier
-                    .clip(RoundedCornerShape(4.dp))
-                    .background(MaterialTheme.colorScheme.inverseSurface)
-                    .padding(8.dp),
-            ) {
-                Text(
-                    text = tooltipText,
-                    color = MaterialTheme.colorScheme.inverseOnSurface,
-                    style = MaterialTheme.typography.bodySmall,
-                )
-            }
-        },
-        content = {
-            Box(
-                modifier = Modifier.size(24.dp)
-                    .clip(RoundedCornerShape(4.dp))
-                    .clickable(onClick = onClick),
-                contentAlignment = Alignment.Center,
-            ) {
-                Icon(
-                    tint = MaterialTheme.colorScheme.onSurface,
-                    imageVector = icon,
-                    contentDescription = null,
-                )
-            }
-        },
-    )
+        hint = hint,
+    ) {
+        Box(
+            modifier = Modifier.size(24.dp)
+                .clip(RoundedCornerShape(4.dp))
+                .clickable(onClick = onClick),
+            contentAlignment = Alignment.Center,
+        ) {
+            Icon(
+                tint = MaterialTheme.colorScheme.onSurface,
+                imageVector = icon,
+                contentDescription = null,
+            )
+        }
+    }
 }
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun TooltipImageButton(
-    tooltipText: String,
-    icon: ImageVector,
+    hint: String,
+    image: ImageVector,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
+) {
+    TooltipButton(
+        modifier = modifier,
+        hint = hint,
+    ) {
+        Box(
+            modifier = Modifier.size(24.dp)
+                .clip(RoundedCornerShape(4.dp))
+                .clickable(onClick = onClick),
+            contentAlignment = Alignment.Center,
+        ) {
+            Image(
+                imageVector = image,
+                contentDescription = null,
+            )
+        }
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun TooltipButton(
+    hint: String,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
 ) {
     TooltipArea(
         modifier = modifier,
+        delayMillis = 1_000,
         tooltip = {
             Box(
                 modifier = Modifier
                     .clip(RoundedCornerShape(4.dp))
                     .background(MaterialTheme.colorScheme.inverseSurface)
-                    .padding(8.dp),
+                    .padding(horizontal = 16.dp, vertical = 8.dp),
             ) {
                 Text(
-                    text = tooltipText,
+                    text = hint,
                     color = MaterialTheme.colorScheme.inverseOnSurface,
                     style = MaterialTheme.typography.bodySmall,
                 )
             }
         },
-        content = {
-            Box(
-                modifier = Modifier.size(24.dp)
-                    .clip(RoundedCornerShape(4.dp))
-                    .clickable(onClick = onClick),
-                contentAlignment = Alignment.Center,
-            ) {
-                Image(
-                    imageVector = icon,
-                    contentDescription = null,
-                )
-            }
-        },
+        content = content,
     )
 }
 
@@ -112,19 +110,22 @@ fun TooltipImageButton(
 private fun TooltipButtonPreview() = PreviewTheme {
     Row {
         TooltipIconButton(
-            tooltipText = "Show pixel grid",
+            hint = "Show pixel grid",
             onClick = {},
             icon = ValkyrieIcons.Chessboard,
         )
         TooltipImageButton(
-            tooltipText = "Show white background",
-            icon = ValkyrieIcons.WhiteCircle,
+            hint = "Show white background",
+            image = ValkyrieIcons.WhiteCircle,
             onClick = {},
         )
         TooltipImageButton(
-            tooltipText = "Show black background",
-            icon = ValkyrieIcons.BlackCircle,
+            hint = "Show black background",
+            image = ValkyrieIcons.BlackCircle,
             onClick = {},
         )
+        TooltipButton(hint = "Test") {
+            Text(text = "Generic content")
+        }
     }
 }
diff --git a/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/TopAppBar.kt b/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/foundation/TopAppBar.kt
@@ -1,23 +1,30 @@
 package io.github.composegears.valkyrie.ui.foundation
 
 import androidx.compose.desktop.ui.tooling.preview.Preview
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import io.github.composegears.valkyrie.ui.foundation.icons.Back
 import io.github.composegears.valkyrie.ui.foundation.icons.Close
 import io.github.composegears.valkyrie.ui.foundation.icons.Copy
+import io.github.composegears.valkyrie.ui.foundation.icons.Edit
 import io.github.composegears.valkyrie.ui.foundation.icons.Settings
 import io.github.composegears.valkyrie.ui.foundation.icons.ValkyrieIcons
+import io.github.composegears.valkyrie.ui.foundation.icons.Watch
 import io.github.composegears.valkyrie.ui.foundation.theme.PreviewTheme
 
 @Composable
@@ -31,6 +38,7 @@ fun TopAppBar(
             .height(40.dp)
             .padding(horizontal = 8.dp),
         verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
     ) {
         content()
     }
@@ -54,23 +62,27 @@ fun BackAction(
     modifier: Modifier = Modifier,
     onBack: () -> Unit,
 ) {
-    IconButton(
+    SelectableAction(
         modifier = modifier.size(32.dp),
-        onClick = onBack,
-        iconSize = 18.dp,
         imageVector = ValkyrieIcons.Back,
+        iconSize = 18.dp,
+        hint = "Back",
+        onClick = onBack,
+        selected = false,
     )
 }
 
 @Composable
-fun ClearAction(
+fun CloseAction(
     modifier: Modifier = Modifier,
-    onClear: () -> Unit,
+    onClose: () -> Unit,
 ) {
-    IconButton(
+    SelectableAction(
         modifier = modifier.size(32.dp),
         imageVector = ValkyrieIcons.Close,
-        onClick = onClear,
+        hint = "Close",
+        onClick = onClose,
+        selected = false,
     )
 }
 
@@ -79,11 +91,13 @@ fun CopyAction(
     modifier: Modifier = Modifier,
     onCopy: () -> Unit,
 ) {
-    IconButton(
+    SelectableAction(
         modifier = modifier.size(32.dp),
         imageVector = ValkyrieIcons.Copy,
+        hint = "Copy",
         iconSize = 18.dp,
         onClick = onCopy,
+        selected = false,
     )
 }
 
@@ -92,23 +106,101 @@ fun SettingsAction(
     modifier: Modifier = Modifier,
     openSettings: () -> Unit,
 ) {
-    IconButton(
+    SelectableAction(
         modifier = modifier.size(32.dp),
         imageVector = ValkyrieIcons.Settings,
+        hint = "Settings",
         iconSize = 18.dp,
         onClick = openSettings,
+        selected = false,
+    )
+}
+
+@Composable
+fun PreviewAction(
+    selected: Boolean,
+    modifier: Modifier = Modifier,
+    onPreview: () -> Unit,
+) {
+    SelectableAction(
+        modifier = modifier.size(32.dp),
+        imageVector = ValkyrieIcons.Watch,
+        hint = "Preview",
+        iconSize = 18.dp,
+        onClick = onPreview,
+        selected = selected,
     )
 }
 
+@Composable
+fun EditAction(
+    selected: Boolean,
+    modifier: Modifier = Modifier,
+    onEdit: () -> Unit,
+) {
+    SelectableAction(
+        modifier = modifier.size(32.dp),
+        imageVector = ValkyrieIcons.Edit,
+        hint = "Edit",
+        iconSize = 18.dp,
+        onClick = onEdit,
+        selected = selected,
+    )
+}
+
+@Composable
+private fun SelectableAction(
+    imageVector: ImageVector,
+    hint: String,
+    selected: Boolean,
+    modifier: Modifier = Modifier,
+    iconSize: Dp = Dp.Unspecified,
+    onClick: () -> Unit,
+) {
+    TooltipButton(
+        hint = hint,
+        modifier = modifier,
+    ) {
+        IconButton(
+            imageVector = imageVector,
+            iconSize = iconSize,
+            onClick = onClick,
+            colors = if (selected) {
+                IconButtonDefaults.iconButtonColors().copy(
+                    containerColor = MaterialTheme.colorScheme.primary,
+                    contentColor = MaterialTheme.colorScheme.onPrimary,
+                )
+            } else {
+                IconButtonDefaults.iconButtonColors()
+            },
+        )
+    }
+}
+
 @Preview
 @Composable
 private fun TopAppBarPreview() = PreviewTheme(alignment = Alignment.TopCenter) {
-    TopAppBar {
-        BackAction {}
-        AppBarTitle(title = "Title")
-        WeightSpacer()
-        ClearAction {}
-        CopyAction {}
-        SettingsAction {}
+    Column {
+        TopAppBar {
+            BackAction {}
+            AppBarTitle(title = "Title")
+            WeightSpacer()
+            CloseAction {}
+            CopyAction {}
+            PreviewAction(selected = false) { }
+            EditAction(selected = false) {}
+            SettingsAction {}
+        }
+        HorizontalDivider()
+        TopAppBar {
+            BackAction {}
+            AppBarTitle(title = "Title")
+            WeightSpacer()
+            CloseAction {}
+            CopyAction {}
+            EditAction(selected = true) {}
+            PreviewAction(selected = true) { }
+            SettingsAction {}
+        }
     }
 }