refactor: remove rememberRipple, unify calling icon buttons

wireapp · May 10, 2024 · 1cf3b25 · 1cf3b25
1 parent 1a4a439
commit 1cf3b25
Show file tree

Hide file tree

Showing 19 changed files with 301 additions and 374 deletions.
diff --git a/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/AcceptButton.kt b/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/AcceptButton.kt
@@ -18,35 +18,40 @@
 
 package com.wire.android.ui.calling.controlbuttons
 
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpSize
 import com.wire.android.R
-import com.wire.android.ui.common.button.WirePrimaryButton
-import com.wire.android.ui.common.button.wirePrimaryButtonColors
-import com.wire.android.ui.common.colorsScheme
+import com.wire.android.ui.common.button.WireButtonState
+import com.wire.android.ui.common.button.WirePrimaryIconButton
 import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.theme.WireTheme
+import com.wire.android.util.ui.PreviewMultipleThemes
 
 @Composable
 fun AcceptButton(
-    modifier: Modifier = Modifier.size(dimensions().outgoingCallHangUpButtonSize),
-    buttonClicked: () -> Unit
+    buttonClicked: () -> Unit,
+    modifier: Modifier = Modifier,
+    size: Dp = dimensions().bigCallingControlsSize,
+    iconSize: Dp = dimensions().bigCallingAcceptButtonIconSize,
 ) {
-    WirePrimaryButton(
+    WirePrimaryIconButton(
+        iconResource = R.drawable.ic_call_accept,
+        contentDescription = R.string.content_description_calling_accept_call,
+        state = WireButtonState.Positive,
         shape = CircleShape,
+        minSize = DpSize(size, size),
+        minClickableSize = DpSize(size, size),
+        iconSize = iconSize,
+        onButtonClicked = buttonClicked,
         modifier = modifier,
-        colors = wirePrimaryButtonColors().copy(enabled = colorsScheme().callingAnswerButtonColor),
-        onClick = buttonClicked,
-        leadingIcon = {
-            Icon(
-                painter = painterResource(id = R.drawable.ic_call_accept),
-                contentDescription = stringResource(id = R.string.content_description_calling_accept_call),
-                tint = colorsScheme().onCallingAnswerButtonColor
-            )
-        }
     )
 }
+
+@PreviewMultipleThemes
+@Composable
+fun PreviewAcceptButton() = WireTheme {
+    AcceptButton(buttonClicked = { })
+}
diff --git a/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/CameraButton.kt b/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/CameraButton.kt
@@ -18,31 +18,24 @@
 
 package com.wire.android.ui.calling.controlbuttons
 
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.material.ripple.rememberRipple
-import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.Role
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import com.wire.android.R
 import com.wire.android.appLogger
 import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.theme.WireTheme
 import com.wire.android.util.permission.PermissionDenialType
 import com.wire.android.util.permission.rememberCallingCameraRequestFlow
+import com.wire.android.util.ui.PreviewMultipleThemes
 
 @Composable
 fun CameraButton(
-    modifier: Modifier = Modifier.size(dimensions().defaultCallingControlsSize),
     isCameraOn: Boolean = false,
     onCameraButtonClicked: () -> Unit,
-    onPermissionPermanentlyDenied: (type: PermissionDenialType) -> Unit
+    onPermissionPermanentlyDenied: (type: PermissionDenialType) -> Unit,
+    size: Dp = dimensions().defaultCallingControlsSize,
+    modifier: Modifier = Modifier,
 ) {
     val cameraPermissionCheck = CameraPermissionCheckFlow(
         onPermissionGranted = onCameraButtonClicked,
@@ -55,34 +48,18 @@ fun CameraButton(
 
     WireCallControlButton(
         isSelected = isCameraOn,
-        modifier = modifier
-    ) { iconColor ->
-        Icon(
-            modifier = Modifier
-                .wrapContentSize()
-                .clickable(
-                    interactionSource = remember { MutableInteractionSource() },
-                    indication = rememberRipple(
-                        bounded = false,
-                        radius = dimensions().defaultCallingControlsSize / 2
-                    ),
-                    role = Role.Button,
-                    onClick = cameraPermissionCheck::launch,
-                ),
-            painter = painterResource(
-                id = if (isCameraOn) {
-                    R.drawable.ic_camera_on
-                } else {
-                    R.drawable.ic_camera_off
-                }
-            ),
-            contentDescription = stringResource(
-                id = if (isCameraOn) R.string.content_description_calling_turn_camera_off
-                else R.string.content_description_calling_turn_camera_on
-            ),
-            tint = iconColor
-        )
-    }
+        iconResId = when (isCameraOn) {
+            true -> R.drawable.ic_camera_on
+            false -> R.drawable.ic_camera_off
+        },
+        contentDescription = when (isCameraOn) {
+            true -> R.string.content_description_calling_turn_camera_off
+            false -> R.string.content_description_calling_turn_camera_on
+        },
+        onClick = cameraPermissionCheck::launch,
+        size = size,
+        modifier = modifier,
+    )
 }
 
 @Composable
@@ -98,8 +75,14 @@ private fun CameraPermissionCheckFlow(
     onPermissionPermanentlyDenied = onPermanentPermissionDecline
 )
 
-@Preview
+@PreviewMultipleThemes
+@Composable
+fun PreviewComposableCameraButtonOn() = WireTheme {
+    CameraButton(isCameraOn = true, onCameraButtonClicked = { }, onPermissionPermanentlyDenied = { })
+}
+
+@PreviewMultipleThemes
 @Composable
-fun PreviewComposableCameraButton() {
-    CameraButton(onCameraButtonClicked = { }, onPermissionPermanentlyDenied = { })
+fun PreviewComposableCameraButtonOff() = WireTheme {
+    CameraButton(isCameraOn = false, onCameraButtonClicked = { }, onPermissionPermanentlyDenied = { })
 }
diff --git a/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/CameraFlipButton.kt b/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/CameraFlipButton.kt
@@ -18,57 +18,45 @@
 
 package com.wire.android.ui.calling.controlbuttons
 
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.material.ripple.rememberRipple
-import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.Role
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import com.wire.android.R
 import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.theme.WireTheme
+import com.wire.android.util.ui.PreviewMultipleThemes
 
 @Composable
 fun CameraFlipButton(
     isOnFrontCamera: Boolean = false,
-    onCameraFlipButtonClicked: () -> Unit
+    onCameraFlipButtonClicked: () -> Unit,
+    size: Dp = dimensions().defaultCallingControlsSize,
+    modifier: Modifier = Modifier,
 ) {
     WireCallControlButton(
-        isSelected = !isOnFrontCamera
-    ) { iconColor ->
-        Icon(
-            modifier = Modifier
-                .wrapContentSize()
-                .clickable(
-                    interactionSource = remember { MutableInteractionSource() },
-                    indication = rememberRipple(bounded = false, radius = dimensions().defaultCallingControlsSize / 2),
-                    role = Role.Button,
-                    onClick = onCameraFlipButtonClicked
+        isSelected = !isOnFrontCamera,
+        iconResId = when (isOnFrontCamera) {
+            true -> R.drawable.ic_camera_flipped
+            false -> R.drawable.ic_camera_flip
+        },
+        contentDescription = when (isOnFrontCamera) {
+            true -> R.string.content_description_calling_flip_camera_on
+            false -> R.string.content_description_calling_flip_camera_off
+        },
+        onClick = onCameraFlipButtonClicked,
+        size = size,
+        modifier = modifier,
+    )
+}
 
-                ),
-            painter = painterResource(
-                id = if (isOnFrontCamera) {
-                    R.drawable.ic_camera_flipped
-                } else {
-                    R.drawable.ic_camera_flip
-                }
-            ),
-            tint = iconColor,
-            contentDescription = stringResource(
-                id = if (isOnFrontCamera) R.string.content_description_calling_flip_camera_on
-                else R.string.content_description_calling_flip_camera_off
-            )
-        )
-    }
+@PreviewMultipleThemes
+@Composable
+fun PreviewCameraFlipButtonOn() = WireTheme {
+    CameraFlipButton(isOnFrontCamera = true, onCameraFlipButtonClicked = { })
 }
 
-@Preview
+@PreviewMultipleThemes
 @Composable
-fun PreviewCameraFlipButton() {
-    CameraFlipButton(onCameraFlipButtonClicked = { })
+fun PreviewCameraFlipButtonOff() = WireTheme {
+    CameraFlipButton(isOnFrontCamera = false, onCameraFlipButtonClicked = { })
 }
diff --git a/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/DeclineButton.kt b/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/DeclineButton.kt
diff --git a/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/HangUpButton.kt b/app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/HangUpButton.kt
@@ -19,50 +19,48 @@
 package com.wire.android.ui.calling.controlbuttons
 
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpSize
 import com.wire.android.R
-import com.wire.android.ui.common.button.WirePrimaryButton
-import com.wire.android.ui.common.button.wirePrimaryButtonColors
-import com.wire.android.ui.common.colorsScheme
+import com.wire.android.ui.common.button.WireButtonState
+import com.wire.android.ui.common.button.WirePrimaryIconButton
 import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireDimensions
+import com.wire.android.util.ui.PreviewMultipleThemes
 
 @Composable
 fun HangUpButton(
-    modifier: Modifier = Modifier.size(dimensions().defaultCallingHangUpButtonSize),
-    onHangUpButtonClicked: () -> Unit
+    onHangUpButtonClicked: () -> Unit,
+    modifier: Modifier = Modifier,
+    size: Dp = dimensions().bigCallingControlsSize,
+    iconSize: Dp = dimensions().bigCallingHangUpButtonIconSize,
 ) {
-    WirePrimaryButton(
+    WirePrimaryIconButton(
+        iconResource = R.drawable.ic_call_reject,
+        contentDescription = R.string.content_description_calling_hang_up_call,
+        state = WireButtonState.Error,
         shape = CircleShape,
+        minSize = DpSize(size, size),
+        minClickableSize = DpSize(size, size),
+        iconSize = iconSize,
+        onButtonClicked = onHangUpButtonClicked,
         modifier = modifier,
-        colors = wirePrimaryButtonColors().copy(enabled = colorsScheme().callingHangupButtonColor),
-        onClick = onHangUpButtonClicked,
-        leadingIcon = {
-            Icon(
-                painter = painterResource(id = R.drawable.ic_call_reject),
-                contentDescription = stringResource(id = R.string.content_description_calling_hang_up_call),
-                tint = colorsScheme().onCallingHangupButtonColor
-            )
-        }
     )
 }
 
-@Preview
+@PreviewMultipleThemes
 @Composable
-fun PreviewComposableHangUpButton() {
+fun PreviewComposableHangUpButton() = WireTheme {
     HangUpButton(
         modifier = Modifier
-            .width(MaterialTheme.wireDimensions.outgoingCallHangUpButtonSize)
-            .height(MaterialTheme.wireDimensions.outgoingCallHangUpButtonSize),
+            .width(MaterialTheme.wireDimensions.bigCallingControlsSize)
+            .height(MaterialTheme.wireDimensions.bigCallingControlsSize),
         onHangUpButtonClicked = { }
     )
 }