Welcome to Beta screen: Animations, Interaction

Author: Stefterv

app/src/processing/app/ui/WelcomeToBeta.kt

@@ -1,15 +1,22 @@
 package processing.app.ui
 
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.awt.ComposePanel
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.PointerEventType
+import androidx.compose.ui.input.pointer.PointerIcon
+import androidx.compose.ui.input.pointer.onPointerEvent
+import androidx.compose.ui.input.pointer.pointerHoverIcon
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.DpSize
@@ -19,8 +26,11 @@ import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.WindowPosition
 import androidx.compose.ui.window.application
 import androidx.compose.ui.window.rememberWindowState
+import com.formdev.flatlaf.util.SystemInfo
+import java.awt.Cursor
 import java.awt.Dimension
-
+import java.awt.event.KeyAdapter
+import java.awt.event.KeyEvent
 import javax.swing.JFrame
 import javax.swing.SwingUtilities
 
@@ -35,32 +45,47 @@ class WelcomeToBeta {
 Please report any bugs on the forums."""
         val buttonText = "Thank you"
 
-
         @JvmStatic
         fun showWelcomeToBeta() {
+            val mac = SystemInfo.isMacFullWindowContentSupported
             SwingUtilities.invokeLater {
                 JFrame(windowTitle).apply {
+                    val close = { dispose() }
+                    rootPane.putClientProperty("apple.awt.transparentTitleBar", mac)
+                    rootPane.putClientProperty("apple.awt.fullWindowContent", mac)
                     defaultCloseOperation = JFrame.DISPOSE_ON_CLOSE
                     contentPane.add(ComposePanel().apply {
+                        size = windowSize
                         setContent {
-                            welcomeToBeta()
+                            Box(modifier = Modifier.padding(top = if(mac) 22.dp else 0.dp)) {
+                                welcomeToBeta(close)
+                            }
                         }
-                        size = windowSize
                     })
+                    pack()
+                    background = java.awt.Color.white
                     setLocationRelativeTo(null)
+                    addKeyListener(object : KeyAdapter() {
+                        override fun keyPressed(e: KeyEvent) {
+                            if (e.keyCode == KeyEvent.VK_ESCAPE) close()
+                        }
+                    })
+                    isResizable = false
                     isVisible = true
+                    requestFocus()
                 }
             }
         }
 
         @Composable
-        fun welcomeToBeta() {
+        fun welcomeToBeta(close: () -> Unit = {}) {
             // TODO: Add fonts and colors
 
             Row(
                 modifier = Modifier
                     .padding(20.dp, 10.dp)
-                    .size(windowSize.width.dp, windowSize.height.dp),
+                    .size(windowSize.width.dp, windowSize.height.dp)
+                ,
                 horizontalArrangement = Arrangement.spacedBy(20.dp)
             ){
                 Image(
@@ -86,20 +111,55 @@ Please report any bugs on the forums."""
                     )
                     Row {
                         Spacer(modifier = Modifier.weight(1f))
-                        // TODO Add button shadow and make interactive
-                        Box(
-                            modifier = Modifier
-                                .background(Color.Blue)
-                                .padding(10.dp)
-                                .sizeIn(minWidth = 100.dp),
-                            contentAlignment = Alignment.Center
-                        ) {
+                        PDEButton(onClick = {
+                            close()
+                        }) {
                             Text(buttonText, color = Color.White)
                         }
                     }
                 }
             }
         }
+        @OptIn(ExperimentalComposeUiApi::class)
+        @Composable
+        fun PDEButton(onClick: () -> Unit, content: @Composable BoxScope.() -> Unit) {
+            var hover by remember { mutableStateOf(false) }
+            var clicked by remember { mutableStateOf(false) }
+            val offset by animateFloatAsState(if (hover) -5f else 5f)
+            val color by animateColorAsState(if(clicked) Color.Black else Color.Blue)
+
+            Box(modifier = Modifier.padding(end = 5.dp, top = 5.dp)) {
+                Box(
+                    modifier = Modifier
+                        .offset((-offset).dp, (offset).dp)
+                        .background(Color.Gray)
+                        .matchParentSize()
+                )
+                Box(
+                    modifier = Modifier
+                        .onPointerEvent(PointerEventType.Press) {
+                            clicked = true
+                        }
+                        .onPointerEvent(PointerEventType.Release) {
+                            clicked = false
+                            onClick()
+                        }
+                        .onPointerEvent(PointerEventType.Enter) {
+                            hover = true
+                        }
+                        .onPointerEvent(PointerEventType.Exit) {
+                            hover = false
+                        }
+                        .pointerHoverIcon(PointerIcon(Cursor(Cursor.HAND_CURSOR)))
+                        .background(color)
+                        .padding(10.dp)
+                        .sizeIn(minWidth = 100.dp),
+                    contentAlignment = Alignment.Center,
+                    content = content
+                )
+            }
+        }
+
 
         @JvmStatic
         fun main(args: Array<String>) {
@@ -108,9 +168,12 @@ Please report any bugs on the forums."""
                     size = DpSize.Unspecified,
                     position = WindowPosition(Alignment.Center)
                 )
+
                 Window(onCloseRequest = ::exitApplication, state = windowState, title = windowTitle) {
                     Surface(color = Color.White) {
-                        welcomeToBeta()
+                        welcomeToBeta{
+                            exitApplication()
+                        }
                     }
 
                 }