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.

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

Navigation sample app #625

Merged
merged 119 commits into from
Oct 27, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
119 commits
Select commit Hold shift + click to select a range
8d6add8
Rename :demos:appyx-navigation -> :demos:sandbox-appyx-navigation
zsoltk Oct 5, 2023
6c260fd
Add new dummy :demos:appyx-navigation module
zsoltk Oct 5, 2023
2a171ee
Update settings.gradle
zsoltk Oct 5, 2023
cd52c79
Created NavTargets
aashay-gaikwad Oct 5, 2023
59789e4
Parent nodes for Profile, Main & CakeCategory
Oct 5, 2023
3bf8ac8
Using Spotlight in Main + placeholder for CakeUi
Oct 5, 2023
605d0b6
Merge branch '2.x' into navigation-sample-app
zsoltk Oct 6, 2023
a702986
Merge branch 'material-nav' into navigation-sample-app
zsoltk Oct 6, 2023
5d2f73b
Post-merge: apply changes to renamed module
zsoltk Oct 6, 2023
26b7f0c
Post-merge: apply renaming of motionController -> visualisation
zsoltk Oct 6, 2023
e93e160
Post-merge: fix gradle
zsoltk Oct 6, 2023
dedf224
Merge branch 'material-nav' into navigation-sample-app
zsoltk Oct 6, 2023
82ab0c8
Apply material nav
zsoltk Oct 6, 2023
831b89d
Set home as default nav target
zsoltk Oct 6, 2023
575dfbb
Reorganise main nodes
zsoltk Oct 6, 2023
d7801d0
Use passed in modifier rather than new one
zsoltk Oct 6, 2023
c1e9fa3
Tweak ui
zsoltk Oct 6, 2023
1b1a9e6
Rename mentions of InteractionTarget -> NavTarget
zsoltk Oct 6, 2023
c3d432b
Merge branch 'unify-position-alignment' into navigation-sample-app
zsoltk Oct 8, 2023
7dd1261
Add SpotlightHero
zsoltk Oct 8, 2023
cf11ef6
Implement hero mode
zsoltk Oct 8, 2023
38abf8e
Add cake model
zsoltk Oct 8, 2023
14f99f6
Add oval shape transformation to hero transition
zsoltk Oct 8, 2023
abac1d1
Add cmp image loader module
KovalevAndrey Oct 9, 2023
e8024b2
Allow dragging multiple Draggables
zsoltk Oct 9, 2023
0402fad
Add cake images
zsoltk Oct 9, 2023
0194e4b
Implement split carousel with cakes
zsoltk Oct 9, 2023
36cd058
Tweak visualisations
zsoltk Oct 9, 2023
b36ad24
Use Dispatchers.Default
zsoltk Oct 10, 2023
3ef38ae
Set contentDescription
zsoltk Oct 10, 2023
0fcb33d
Set AspectRatio visibilityThreshold to 0.001f
zsoltk Oct 10, 2023
f172191
Snap to initial viewPoint value after recreation to avoid unnecessary…
zsoltk Oct 10, 2023
da9546b
Reset theme
zsoltk Oct 10, 2023
07994d1
Add cake details panel
zsoltk Oct 10, 2023
099c8d6
Merge branch 'navigation-sample-app' of github.com:bumble-tech/appyx …
mmartosdev Oct 10, 2023
f62b194
Make Node.executeAction take a suspend function
zsoltk Oct 10, 2023
b6fa622
Add Navigator demo
zsoltk Oct 10, 2023
1185de3
Update web main.kt
zsoltk Oct 10, 2023
a84999d
Update main.ios.kt
zsoltk Oct 10, 2023
0abe19a
Fix image content scaling to maintain proportions
zsoltk Oct 11, 2023
79be526
Update image
zsoltk Oct 11, 2023
89a9a6e
Coerce rounded corners % in 0, 100 to avoid crash
zsoltk Oct 11, 2023
043df00
Merge branch 'navigation-sample-app' of github.com:bumble-tech/appyx …
mmartosdev Oct 11, 2023
3a8a603
Fix appyx-navigation:web module
mmartosdev Oct 11, 2023
63076a5
Update image
zsoltk Oct 12, 2023
c93b745
Add back handling strategy to SpotlightHero
zsoltk Oct 12, 2023
056f4ef
Add deep link handling
zsoltk Oct 13, 2023
714473b
Created Cart, supported adding items
Oct 13, 2023
d54792a
Having cart as a NavItem
Oct 13, 2023
2e2ce2d
Added CartItemsNode and supporting cart empty case
Oct 13, 2023
161556f
Add simple copy task to bundle images for the web build.
Oct 13, 2023
33b51c2
Merge remote-tracking branch 'upstream/navigation-sample-app' into na…
Oct 13, 2023
f887c92
Added CartContent UI
Oct 13, 2023
491aca0
Merge branch 'navigation-sample-app' of https://github.com/bumble-tec…
Oct 13, 2023
329ef51
Removed semantics for badge text
Oct 13, 2023
d9cfa70
Support clearing cart
Oct 13, 2023
23764bc
Navigating from Cakes in cart to Cake hero
Oct 13, 2023
b2a2844
Use container size instead of screen size to decide nav rail vs nav bar
zsoltk Oct 13, 2023
0518e2c
Fix produce distribution for web target.
Oct 13, 2023
7951d2a
Merge remote-tracking branch 'upstream/navigation-sample-app' into na…
Oct 13, 2023
e722ed9
Use update
zsoltk Oct 15, 2023
978ac4e
Make backdrop text disappear in hero mode
zsoltk Oct 15, 2023
b26359d
Increase default window height
zsoltk Oct 15, 2023
b9ac9b6
Fixed iOS target navigation issue + copying resources during build
Oct 16, 2023
bfefffe
Fix JS compiler bug for wasm.
Oct 16, 2023
0f9420d
Fix cart not updating
zsoltk Oct 16, 2023
027b687
Ensure the chosen random cake is farther than the next one
zsoltk Oct 16, 2023
b4ac010
Add gesture control for hero mode
zsoltk Oct 16, 2023
410d8a2
Merge remote-tracking branch 'bumble-tech/navigation-sample-app' into…
zsoltk Oct 16, 2023
a1bb860
Make viewPoint animatables available to all children in motionProperties
zsoltk Oct 16, 2023
8910679
Simplify by removing all non-standard element states
zsoltk Oct 16, 2023
6e8e59e
Unify two spotlights into one
zsoltk Oct 16, 2023
2e7b865
Tweak window size
zsoltk Oct 16, 2023
8d2fc7a
Add RootNode & LoggedOutNode
zsoltk Oct 16, 2023
858af9e
Add logout button
zsoltk Oct 16, 2023
fedbab0
Add placeholder screens for splash and login
zsoltk Oct 17, 2023
ef06180
Reorganise packages
zsoltk Oct 17, 2023
7ee59f4
Add simple User model
zsoltk Oct 17, 2023
aa13292
Demonstrate wait-for-auth deep link use-case
zsoltk Oct 17, 2023
844208c
Tweak layout
zsoltk Oct 17, 2023
b3984aa
Modify image loader to work locally and embedded for web targets.
Oct 19, 2023
4c0f174
Merge branch '2.x' into navigation-sample-app
zsoltk Oct 19, 2023
fd3eb7d
Merge remote-tracking branch 'bumble-tech/navigation-sample-app' into…
zsoltk Oct 19, 2023
e4473ef
Pass initial state to visualisation to avoid some flickering
zsoltk Oct 20, 2023
3adb667
Fix HorizontalPager api call
zsoltk Oct 20, 2023
a86ba96
Remove hack
zsoltk Oct 20, 2023
ba3d8fa
Move cart buttons to below items
zsoltk Oct 20, 2023
060c7a3
Nodes for ShippingDetails, Payment and OrderConfirmed
Oct 22, 2023
2a06d3e
Add some placeholder screens to checkout flow
zsoltk Oct 22, 2023
c711caf
Reorganise packages
zsoltk Oct 22, 2023
5ee222a
Retain cart
zsoltk Oct 23, 2023
138c9ae
Merge remote-tracking branch 'bumble-tech/navigation-sample-app' into…
zsoltk Oct 23, 2023
fac5213
Use Surface in new nodes
zsoltk Oct 23, 2023
35ab340
Use new screens
zsoltk Oct 23, 2023
00baecc
Add tint to success icon
zsoltk Oct 23, 2023
2422a21
Updated checkout nodes
Oct 24, 2023
da7d953
Resize fix
Oct 24, 2023
2bc0171
Merge remote-tracking branch 'upstream/navigation-sample-app' into na…
Oct 24, 2023
99e955e
Add animations into Cart tab
mapm14 Oct 24, 2023
5b33430
Merge remote-tracking branch 'origin/navigation-sample-app' into navi…
mapm14 Oct 24, 2023
960e6ab
Resolve conflicts
mapm14 Oct 24, 2023
2701de2
BackStackParallax on Checkout when on iOS
Oct 25, 2023
5676908
Updated changelog
Oct 25, 2023
de12adc
Revert "Updated changelog"
Oct 25, 2023
0e1070f
Fix animation in LazyColumn
mapm14 Oct 25, 2023
64c9092
Merge remote-tracking branch 'origin/navigation-sample-app' into navi…
mapm14 Oct 25, 2023
03a279d
Suppressed warning
Oct 25, 2023
09bd5c5
Fixed dark mode on Logged out + BackStackParallax for iOS
Oct 25, 2023
8267e8d
Renamed platform name files
Oct 25, 2023
9d076f6
Removed unnecessary deps
Oct 25, 2023
aaf6476
Removed unnecessary deps
Oct 25, 2023
bad845d
Supporting ImmutableMap
Oct 25, 2023
0c13453
Fix detekt
Oct 25, 2023
abd3efa
Handled params and warnings
Oct 25, 2023
89ee3e4
Fix detekt
Oct 26, 2023
bb1ceb6
Add heads up for running on debug mode
manuelvicnt Oct 26, 2023
9158555
Renaming + updated compose-bom
Oct 26, 2023
a40cc70
Renamed sandbox-app for web
Oct 26, 2023
e6b2511
Moved warning suppression
Oct 26, 2023
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
Prev Previous commit
Next Next commit
Nodes for ShippingDetails, Payment and OrderConfirmed
  • Loading branch information
Aashay Gaikwad committed Oct 22, 2023
commit 060c7a355c83e3b15d4693485cdf542dba0ef143
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ fun CartContent(
cartItems: Map<Cake, Int>,
clearCartAction: () -> Unit,
goToCakeAction: (Cake) -> Unit,
checkoutAction: () -> Unit,
modifier: Modifier = Modifier,
) {
Column(
Expand Down Expand Up @@ -61,7 +62,7 @@ fun CartContent(
}
}

CartActions(clearCartAction)
CartActions(clearCartAction, checkoutAction)
}
}

Expand Down Expand Up @@ -110,7 +111,7 @@ private fun CartListItem(
}

@Composable
private fun CartActions(clearCartAction: () -> Unit) {
private fun CartActions(clearCartAction: () -> Unit, checkoutAction: () -> Unit) {
Row(
modifier = Modifier
.fillMaxWidth()
Expand All @@ -125,7 +126,7 @@ private fun CartActions(clearCartAction: () -> Unit) {
}
Spacer(modifier = Modifier.requiredWidth(4.dp))
Button(
onClick = {},
onClick = checkoutAction,
modifier = Modifier.weight(1f)
) {
Text("Checkout")
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import com.bumble.appyx.navigation.node.cakes.Cake
class CartItemsNode(
buildContext: BuildContext,
private val cart: Cart,
private val checkoutAction: () -> Unit,
) : Node(
buildContext = buildContext,
) {
Expand All @@ -38,7 +39,12 @@ class CartItemsNode(
if (cartItems.value.isEmpty()) {
CartEmptyContent(navigator)
} else {
CartContent(cartItems.value, clearCartAction, goToCakeAction)
CartContent(
cartItems = cartItems.value,
clearCartAction = clearCartAction,
goToCakeAction = goToCakeAction,
checkoutAction = checkoutAction,
)
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.bumble.appyx.components.backstack.BackStack
import com.bumble.appyx.components.backstack.BackStackModel
import com.bumble.appyx.components.backstack.operation.newRoot
import com.bumble.appyx.components.backstack.operation.push
import com.bumble.appyx.components.backstack.ui.slider.BackStackSlider
import com.bumble.appyx.navigation.composable.AppyxComponent
import com.bumble.appyx.navigation.modality.BuildContext
Expand All @@ -12,6 +14,9 @@ import com.bumble.appyx.navigation.node.ParentNode
import com.bumble.appyx.navigation.node.cart.Cart
import com.bumble.appyx.navigation.node.cart.CartItemsNode
import com.bumble.appyx.navigation.node.checkout.CheckoutNode.NavTarget
import com.bumble.appyx.navigation.node.orderconfirmed.OrderConfirmedNode
import com.bumble.appyx.navigation.node.payment.PaymentNode
import com.bumble.appyx.navigation.node.shippingdetails.ShippingDetailsNode
import com.bumble.appyx.utils.multiplatform.Parcelable
import com.bumble.appyx.utils.multiplatform.Parcelize

Expand All @@ -32,11 +37,50 @@ class CheckoutNode(
sealed class NavTarget : Parcelable {
@Parcelize
object CartItems : NavTarget()

@Parcelize
object ShippingDetails : NavTarget()

@Parcelize
object PaymentDetails : NavTarget()

@Parcelize
object OrderConfirmed : NavTarget()
}

override fun resolve(navTarget: NavTarget, buildContext: BuildContext): Node =
when (navTarget) {
is NavTarget.CartItems -> CartItemsNode(buildContext = buildContext, cart = cart)
is NavTarget.CartItems -> CartItemsNode(
buildContext = buildContext,
cart = cart,
checkoutAction = {
backStack.push(
NavTarget.ShippingDetails
)
}
)

is NavTarget.PaymentDetails -> PaymentNode(
buildContext = buildContext,
confirmAction = {
backStack.push(NavTarget.OrderConfirmed)
}
)

is NavTarget.OrderConfirmed -> OrderConfirmedNode(
buildContext = buildContext,
postViewAction = {
cart.clear()
backStack.newRoot(NavTarget.CartItems)
}
)

is NavTarget.ShippingDetails -> ShippingDetailsNode(
buildContext = buildContext,
confirmAction = {
backStack.push(NavTarget.PaymentDetails)
}
)
}

@Composable
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
package com.bumble.appyx.navigation.node.orderconfirmed

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.CheckCircle
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.bumble.appyx.navigation.modality.BuildContext
import com.bumble.appyx.navigation.node.Node
import kotlinx.coroutines.delay
import kotlin.time.Duration.Companion.seconds

class OrderConfirmedNode(
buildContext: BuildContext,
private val postViewAction: () -> Unit,
) : Node(
buildContext = buildContext,
) {

@Composable
override fun View(modifier: Modifier) {
PaymentDetails(modifier)
}

@Composable
private fun PaymentDetails(modifier: Modifier) {
Column(
modifier = modifier.fillMaxSize().padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Icon(
imageVector = Icons.Outlined.CheckCircle,
contentDescription = "Order confirmed icon",
modifier = Modifier.size(72.dp)
)
Text(text = "Order confirmed!", style = MaterialTheme.typography.titleMedium)
LaunchedEffect(Unit) {
delay(3.seconds)
postViewAction.invoke()
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
package com.bumble.appyx.navigation.node.payment

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.bumble.appyx.navigation.modality.BuildContext
import com.bumble.appyx.navigation.node.Node

class PaymentNode(
buildContext: BuildContext,
private val confirmAction: () -> Unit,
) : Node(
buildContext = buildContext,
) {

@Composable
override fun View(modifier: Modifier) {
PaymentDetails(modifier)
}

@Composable
private fun PaymentDetails(modifier: Modifier) {
Column(
modifier = modifier.fillMaxSize().padding(16.dp)
) {
LazyColumn(
modifier = Modifier
.fillMaxSize()
.weight(1f),
) {
item("Header") {
Text(
text = "Payment Details",
style = MaterialTheme.typography.headlineLarge,
textAlign = TextAlign.Center
)
}
item("Spacer" ) { Spacer(modifier = Modifier.requiredHeight(8.dp)) }

item("Card no") {
PaymentText(header = "Card number:", value = "4555 2212 3323 1213")
}
item("Expiry") {
PaymentText(header = "Expiry:", value = "12/25")
}
item("Name") {
PaymentText(header = "Card holder name:", value = "One who desires cake")
}
item("CVV") {
PaymentText(header = "CVV:", value = "***")
}
}

ConfirmAction(confirmAction)
}
}

@Composable
private fun PaymentText(
header: String,
value: String,
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier
.fillMaxWidth()
.padding(top = 12.dp)
) {
Text(text = header, style = MaterialTheme.typography.titleMedium)
Text(text = value, style = MaterialTheme.typography.bodyLarge)
}
}

@Composable
private fun ConfirmAction(
confirmAction: () -> Unit,
modifier: Modifier = Modifier
) {
Button(
onClick = confirmAction,
modifier = modifier
.fillMaxWidth()
) {
Text("Process Payment")
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
package com.bumble.appyx.navigation.node.shippingdetails

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.bumble.appyx.navigation.modality.BuildContext
import com.bumble.appyx.navigation.node.Node

class ShippingDetailsNode(
buildContext: BuildContext,
private val confirmAction: () -> Unit,
) : Node(
buildContext = buildContext,
) {

@Composable
override fun View(modifier: Modifier) {
ShippingDetails(modifier)
}

@Composable
private fun ShippingDetails(modifier: Modifier) {
Column(
modifier = modifier.fillMaxSize().padding(16.dp)
) {
LazyColumn(
modifier = Modifier
.fillMaxSize()
.weight(1f),
) {
item("Header") {
Text(
text = "Shipping Details",
style = MaterialTheme.typography.headlineLarge,
textAlign = TextAlign.Center
)
}
item("Spacer" ) { Spacer(modifier = Modifier.requiredHeight(8.dp)) }

item("Name") {
ShippingText(header = "Name:", value = "Cake wisher")
}
item("Address") {
ShippingText(header = "Address:", value = "London")
}
item("Postcode") {
ShippingText(header = "Postcode:", value = "SW1")
}
item("Country") {
ShippingText(header = "Country:", value = "United Kingdom")
}
}

ConfirmAction(confirmAction)
}
}

@Composable
private fun ShippingText(
header: String,
value: String,
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier
.fillMaxWidth()
.padding(top = 12.dp)
) {
Text(text = header, style = MaterialTheme.typography.titleMedium)
Text(text = value, style = MaterialTheme.typography.bodyLarge)
}
}

@Composable
private fun ConfirmAction(action: () -> Unit, modifier: Modifier = Modifier) {
Button(
onClick = action,
modifier = modifier
.fillMaxWidth()
) {
Text("Confirm Order")
}
}
}