Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GS attempt at Bumble Challenge #1

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

GS attempt at Bumble Challenge #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a9199e2
fixed todos
Oct 30, 2022
eca64d0
initial commit
Oct 31, 2022
f1cff62
changed PeekInsideBackStack.kt padding to make legibility on Pixel3a …
Oct 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Challenge1/app/src/main/java/com/bumble/challenge1/ExplodingTransitionHandler.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class ExplodingTransitionHandler<NavTarget>(
private val created = Props(alpha = 0f)
private val active = created.copy(alpha = 1f)
private val stashed = created.copy(alpha = 0f)
private val destroyed = stashed // TODO: "(3) scale should be 2f"
private val destroyed = stashed.copy(scale = 2f) // TODO: "(3) scale should be 2f"

private fun BackStack.State.toProps(): Props =
when (this) {
Expand Down
10 changes: 8 additions & 2 deletions Challenge1/app/src/main/java/com/bumble/challenge1/RootNode.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import com.bumble.appyx.core.modality.BuildContext
import com.bumble.appyx.core.node.Node
import com.bumble.appyx.core.node.ParentNode
import com.bumble.appyx.navmodel.backstack.BackStack
import com.bumble.appyx.navmodel.backstack.operation.pop
import com.bumble.appyx.navmodel.backstack.operation.push
import com.bumble.challenge1.composable.CustomButton
import com.bumble.challenge1.composable.LogoHeader
import com.bumble.challenge1.composable.PeekInsideBackStack
Expand Down Expand Up @@ -85,11 +87,15 @@ class RootNode(
.fillMaxWidth()
.padding(2.dp)
) {
CustomButton(onClick = { TODO("(1) perform push operation") }) {
CustomButton(onClick = { backStack.pop() }) {
Text("Pop")
TODO("(1) perform push operation")
}
CustomButton(onClick = { TODO("(2) perform pop operation") }) {
CustomButton(onClick = { backStack.push(NavTarget.Child(getBackstackIndex())) }) {
//check that BackStack has a push method
//maybe use backStack??
Text("Push")
TODO("(2) perform pop operation")
}
}
}
Expand Down
12 changes: 9 additions & 3 deletions ...pp/src/main/java/com/bumble/challenge2/navmodel/custombackstack/operation/ToggleFreeze.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,20 @@ import kotlinx.parcelize.Parcelize
class ToggleFreeze<T : Any> : CustomBackStackOperation<T> {

override fun isApplicable(elements: NavElements<T, CustomBackStack.State>): Boolean =
elements.any { TODO("(1) Define applicability logic") }
elements.any {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case we'd like to be able to apply the ToggleFreeze operation when an element is Active or Frozen.
elements.any { it.targetState is Active || it.targetState is Frozen }

when(it.targetState) {
is CustomBackStack.State.Destroyed -> false
else -> true
//is CustomBackStack.State.Created -> true

} //TODO("(1) Define applicability logic") }
}

override fun invoke(elements: NavElements<T, CustomBackStack.State>): NavElements<T, CustomBackStack.State> =
elements.transitionTo {
when (it.targetState) {
is Active -> TODO("(2) change the target state")
is Frozen -> TODO("(3) change the target state")
is Active -> Frozen //TODO("(2) change the target state")
is Frozen -> Active //TODO("(3) change the target state")
else -> it.targetState
}
}
Expand Down
11 changes: 9 additions & 2 deletions ...ava/com/bumble/challenge2/navmodel/custombackstack/transition/RecentsTransitionHandler.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ class RecentsTransitionHandler<NavTarget>(
val alpha: Float = 1f,
val scale: Float = 1f,
val zIndex: Float = Z_INDEX

)

private val created = Props()
Expand All @@ -48,7 +49,10 @@ class RecentsTransitionHandler<NavTarget>(
when (this) {
is State.Created -> created.copy(offset = Offset(0f, 2f * height))
is State.Active -> active.copy(offset = activeOffset())
is State.Frozen -> TODO("(4) Frozen state should have blur of 15.dp. Note that blur only works Android 12+")
is State.Frozen -> active.copy() //I honestly have no idea how this should be implemented, as createModifier already seems to cover this..
//is State.Frozen -> createModifier(Modifier.blur(15.dp))
//is State.Frozen -> active.copy(specDp(15.dp))
//is State.Frozen -> TODO("(4) Frozen state should have blur of 15.dp. Note that blur only works Android 12+")
Copy link
Collaborator

@vladcipariu91 vladcipariu91 Nov 1, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In order to fix this you'd need to add a new property to Props called val blur: Dp = 0.dp.

Then define a field frozen, similar to created, active etc
private val frozen = active.copy(blur = 15.dp)

You'll return the frozen value from the toProps function when the State is Frozen

Then similarly to how we animate the other props, you'd add something like this inside createModifier

val blur by transition.animateDp(
            transitionSpec = specDp,
            targetValueByState = { it.toProps(height).blur },
            label = ""
        )

then apply this to your modifier:

this
            .offset {
                IntOffset(
                    x = (offset.x * density).roundToInt(),
                    y = (offset.y * density).roundToInt()
                )
            }
            .scale(scale)
            .graphicsLayer { rotationX = rotation }
            .drawBehind {
                drawRoundRect(
                    color = Color.Black,
                    cornerRadius = CornerRadius(x = 10f * density, y = 10f * density)
                )
            }
            .alpha(alpha)
            .blur(
                blur, edgeTreatment = BlurredEdgeTreatment(
                    // TODO this is in %, above it's defined in pixels
                    RoundedCornerShape(2)
                )
            )
            .zIndex(zIndex)

is State.Stashed -> stashed.copy(
offset = stashedOffset(height),
alpha = stashedAlpha(),
Expand Down Expand Up @@ -112,7 +116,10 @@ class RecentsTransitionHandler<NavTarget>(
}
.alpha(alpha)
.blur(
radius = 0.dp, // TODO("(5) Frozen elements should have 15.dp blur, all other elements - 0.dp")
when(transition.currentState){
is State.Frozen -> 15.dp
else -> 0.dp
}, // TODO("(5) Frozen elements should have 15.dp blur, all other elements - 0.dp")
edgeTreatment = BlurredEdgeTreatment(
RoundedCornerShape(2)
)
Expand Down
9 changes: 7 additions & 2 deletions Challenge2/app/src/main/java/com/bumble/challenge2/node/root/RootNode.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,13 @@ class RootNode(
Text("Push")
}
CustomButton(onClick = { backStack.toggleFreeze() }) {
Text("Freeze")
// TODO "(6) Text should change when button is toggled. Use CustomBackStack's elements property, apply some logic and transform to compose state using androidx.compose.runtime.collectAsState"
// TODO "(6) Text should change when button is toggled. Use CustomBackStack's elements property,
// apply some logic and transform to compose state using androidx.compose.runtime.collectAsState"
val elements = backStack.elements.collectAsState()
when(elements.value.last().targetState){
CustomBackStack.State.Frozen -> Text("Unfreeze")
else -> Text("Freeze")
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion ...enge2/app/src/main/java/com/bumble/challenge2/node/root/composable/PeekInsideBackStack.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ fun <T : Any> PeekInsideBackStack(
modifier = modifier
.fillMaxWidth()
.background(if (isSystemInDarkTheme()) Color.DarkGray else Color.LightGray)
.padding(12.dp),
.padding(10.dp),
verticalAlignment = Alignment.CenterVertically,
) {
elements.value.forEach { element ->
Expand Down