Merge pull request #72 from spine-examples/improve-ux

Enhance the UX on the Mentions page
spine-examples · Dec 11, 2024 · f7d8ce3 · f7d8ce3
2 parents 99c919a + 0e311fc
commit f7d8ce3
Show file tree

Hide file tree

Showing 8 changed files with 235 additions and 143 deletions.
diff --git a/desktop/buildSrc/src/main/kotlin/io/spine/internal/dependency/Pingh.kt b/desktop/buildSrc/src/main/kotlin/io/spine/internal/dependency/Pingh.kt
@@ -28,7 +28,7 @@ package io.spine.internal.dependency
 
 // https://github.com/spine-examples/Pingh
 public object Pingh {
-    private const val version = "1.0.0-SNAPSHOT.31"
+    private const val version = "1.0.0-SNAPSHOT.32"
     private const val group = "io.spine.examples.pingh"
 
     public const val client: String = "$group:client:$version"

diff --git a/desktop/src/main/kotlin/io/spine/examples/pingh/desktop/IconButton.kt b/desktop/src/main/kotlin/io/spine/examples/pingh/desktop/IconButton.kt
@@ -35,7 +35,7 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.FilledIconButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButtonColors
-import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.IconButtonDefaults.filledIconButtonColors
 import androidx.compose.material3.Surface
 import androidx.compose.material3.TooltipBox
 import androidx.compose.material3.rememberTooltipState
@@ -45,7 +45,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.painter.Painter
-import androidx.compose.ui.input.pointer.PointerIcon
+import androidx.compose.ui.input.pointer.PointerIcon.Companion.Hand
 import androidx.compose.ui.input.pointer.pointerHoverIcon
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
@@ -55,14 +55,13 @@ import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.PopupPositionProvider
-import java.awt.Cursor
 
 /**
  * The proportion of the button's size that the icon occupies.
  * Since the button is circular, the icon should be scaled down
  * to avoid truncation at the edges.
  */
-private const val circularIconSizeMultiplier = 0.75f
+private const val circularIconSizeFraction = 0.75f
 
 /**
  * Displays a round button that contains icon.
@@ -75,7 +74,7 @@ private const val circularIconSizeMultiplier = 0.75f
  * @param colors The `IconButtonColors` that is used to resolve the colors used for this icon button
  *   in different states.
  * @param tooltip The text to be displayed in the tooltip. If `null`, no tooltip is shown.
- * @param sizeMultiplier The proportion of the button's size that the icon occupies.
+ * @param sizeFraction The proportion of the button's size that the icon occupies.
  */
 @Composable
 @Suppress("LongParameterList" /* For detailed customization. */)
@@ -85,25 +84,25 @@ internal fun IconButton(
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     shape: Shape = CircleShape,
-    colors: IconButtonColors = IconButtonDefaults.filledIconButtonColors(),
+    colors: IconButtonColors = filledIconButtonColors(),
     tooltip: String? = null,
-    sizeMultiplier: Float = circularIconSizeMultiplier
+    sizeFraction: Float = circularIconSizeFraction
 ) {
     val wrapper = if (tooltip != null) wrapInTooltipBox(tooltip) else noWrap()
     wrapper {
         FilledIconButton(
             onClick = onClick,
             modifier = modifier
                 .padding(0.dp)
-                .pointerHoverIcon(PointerIcon(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR))),
+                .pointerHoverIcon(Hand),
             enabled = enabled,
             shape = shape,
             colors = colors
         ) {
             Icon(
                 painter = icon,
                 contentDescription = null,
-                modifier = Modifier.fillMaxSize(sizeMultiplier),
+                modifier = Modifier.fillMaxSize(sizeFraction),
                 tint = colors.contentColor
             )
         }

diff --git a/desktop/src/main/kotlin/io/spine/examples/pingh/desktop/Login.kt b/desktop/src/main/kotlin/io/spine/examples/pingh/desktop/Login.kt
@@ -34,6 +34,7 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsFocusedAsState
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Arrangement.Center
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -48,9 +49,9 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ButtonDefaults.buttonColors
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.IconButtonDefaults.iconButtonColors
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -60,7 +61,9 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
+import androidx.compose.ui.Alignment.Companion.CenterHorizontally
+import androidx.compose.ui.Alignment.Companion.CenterStart
+import androidx.compose.ui.Alignment.Companion.CenterVertically
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.key.Key
@@ -74,7 +77,8 @@ import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.TextLinkStyles
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.style.TextDecoration.Companion.None
+import androidx.compose.ui.text.style.TextDecoration.Companion.Underline
 import androidx.compose.ui.text.withLink
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -150,8 +154,8 @@ private fun UsernameEnteringPage(
         modifier = Modifier
             .fillMaxSize()
             .background(MaterialTheme.colorScheme.secondary),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally
+        verticalArrangement = Center,
+        horizontalAlignment = CenterHorizontally
     ) {
         ApplicationInfo()
         Spacer(Modifier.height(35.dp))
@@ -184,12 +188,12 @@ private fun UsernameEnteringPage(
 private fun ApplicationInfo() {
     Column(
         modifier = Modifier.padding(horizontal = 30.dp),
-        horizontalAlignment = Alignment.CenterHorizontally
+        horizontalAlignment = CenterHorizontally
     ) {
         Row(
             modifier = Modifier.fillMaxWidth(),
-            horizontalArrangement = Arrangement.Center,
-            verticalAlignment = Alignment.CenterVertically
+            horizontalArrangement = Center,
+            verticalAlignment = CenterVertically
         ) {
             Icon(
                 painter = painterResource(Res.drawable.pingh),
@@ -302,13 +306,13 @@ private fun InputContainer(
                 shape = MaterialTheme.shapes.medium
             )
             .padding(horizontal = 10.dp, vertical = 3.dp),
-        verticalAlignment = Alignment.CenterVertically
+        verticalAlignment = CenterVertically
     ) {
         Box(
             modifier = Modifier
                 .weight(1f)
                 .fillMaxWidth(),
-            contentAlignment = Alignment.CenterStart,
+            contentAlignment = CenterStart,
         ) {
             Placeholder(value.isEmpty())
             textField()
@@ -397,7 +401,7 @@ private fun LoginButton(
             .testTag("login-button"),
         enabled = enabled,
         shape = MaterialTheme.shapes.medium,
-        colors = ButtonDefaults.buttonColors(
+        colors = buttonColors(
             containerColor = MaterialTheme.colorScheme.primary,
             contentColor = MaterialTheme.colorScheme.onPrimary
         )
@@ -438,8 +442,8 @@ private fun VerificationPage(
         modifier = Modifier
             .fillMaxSize()
             .background(MaterialTheme.colorScheme.secondary),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally
+        verticalArrangement = Center,
+        horizontalAlignment = CenterHorizontally
     ) {
         VerificationTitle()
         Spacer(Modifier.height(25.dp))
@@ -505,8 +509,8 @@ private fun UserCodeField(
             }
             .padding(horizontal = 15.dp)
             .testTag("user-code"),
-        horizontalArrangement = Arrangement.Center,
-        verticalAlignment = Alignment.CenterVertically
+        horizontalArrangement = Center,
+        verticalAlignment = CenterVertically
     ) {
         SelectionContainer {
             Text(
@@ -541,7 +545,7 @@ private fun CopyToClipboardIcon(
             clipboardManager.setText(AnnotatedString(userCode.value))
         },
         modifier = Modifier.size(30.dp),
-        colors = IconButtonDefaults.iconButtonColors(
+        colors = iconButtonColors(
             contentColor = MaterialTheme.colorScheme.onSecondaryContainer
         )
     )
@@ -575,7 +579,7 @@ private fun VerifyLoginSection(
 ) {
     Row(
         modifier = Modifier.width(280.dp).height(55.dp),
-        verticalAlignment = Alignment.CenterVertically,
+        verticalAlignment = CenterVertically,
         horizontalArrangement = Arrangement.spacedBy(10.dp)
     ) {
         CountdownTimer(
@@ -605,10 +609,10 @@ private fun VerificationText(url: Url) {
                 styles = TextLinkStyles(
                     style = SpanStyle(
                         color = MaterialTheme.colorScheme.primary,
-                        textDecoration = TextDecoration.None
+                        textDecoration = None
                     ),
                     hoveredStyle = SpanStyle(
-                        textDecoration = TextDecoration.Underline
+                        textDecoration = Underline
                     )
                 )
             )
@@ -654,10 +658,10 @@ private fun ClickableErrorMessage(
                 styles = TextLinkStyles(
                     style = SpanStyle(
                         color = MaterialTheme.colorScheme.primary,
-                        textDecoration = TextDecoration.None
+                        textDecoration = None
                     ),
                     hoveredStyle = SpanStyle(
-                        textDecoration = TextDecoration.Underline
+                        textDecoration = Underline
                     )
                 ),
                 linkInteractionListener = { onClick() }
@@ -690,8 +694,8 @@ private fun FailedPage(flow: LoginFailed) {
         modifier = Modifier
             .fillMaxSize()
             .background(MaterialTheme.colorScheme.secondary),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally
+        verticalArrangement = Center,
+        horizontalAlignment = CenterHorizontally
     ) {
         Text(
             text = flow.errorMessage.value,
@@ -717,7 +721,7 @@ private fun RestartButton(flow: LoginFailed) {
             .width(240.dp)
             .height(40.dp),
         shape = MaterialTheme.shapes.medium,
-        colors = ButtonDefaults.buttonColors(
+        colors = buttonColors(
             containerColor = MaterialTheme.colorScheme.primary,
             contentColor = MaterialTheme.colorScheme.onPrimary
         )