Skip to content

Commit

Permalink
Merge pull request #85 from Konyaco/navigation_improve
Browse files Browse the repository at this point in the history 
Navigation improve
  • Loading branch information
@Sanlorng
Sanlorng authored Dec 2, 2024
2 parents 5a56a23 + d9b9f0c commit 8b5601d
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 31 deletions.
115 changes: 95 additions & 20 deletions fluent/src/commonMain/kotlin/com/konyaco/fluent/component/NavigationView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -507,7 +507,7 @@ private fun LeftCompactLayout(
state: NavigationState,
contentPadding: PaddingValues,
pane: @Composable () -> Unit,
autoSuggestBox: @Composable() (NavigationAutoSuggestBoxScope.() -> Unit)?,
autoSuggestBox: @Composable (NavigationAutoSuggestBoxScope.() -> Unit)?,
title: @Composable () -> Unit,
backButton: @Composable () -> Unit,
expandedButton: @Composable () -> Unit,
Expand Down Expand Up @@ -659,16 +659,28 @@ interface NavigationMenuScope {
fun NavigationMenuScope.menuItem(
selected: Boolean,
onClick: (selected: Boolean) -> Unit,
key: Any? = null,
contentType: Any? = null,
text: @Composable () -> Unit,
icon: (@Composable () -> Unit)?,
key: Any? = null,
contentType: Any? = null,
expandItems: Boolean = false,
enabled: Boolean = true,
onExpandItemsChanged: (Boolean) -> Unit = {},
interactionSource: MutableInteractionSource? = null,
items: (@Composable MenuFlyoutContainerScope.() -> Unit)? = null
) {
item(key, contentType) {
MenuItem(selected, onClick, expandItems, onExpandItemsChanged, text, icon, items)
MenuItem(
selected = selected,
onClick = onClick,
text = text,
icon = icon,
expandItems = expandItems,
onExpandItemsChanged = onExpandItemsChanged,
interactionSource = interactionSource,
items = items,
enabled = enabled
)
}
}

Expand All @@ -677,10 +689,31 @@ fun NavigationMenuScope.menuItem(
fun NavigationMenuItemScope.MenuItem(
selected: Boolean,
onClick: (selected: Boolean) -> Unit,
expandItems: Boolean = false,
onExpandItemsChanged: (Boolean) -> Unit = {},
text: @Composable () -> Unit,
icon: (@Composable () -> Unit)?,
expandItems: Boolean = false,
enabled: Boolean = true,
indicatorState: IndicatorState? = LocalIndicatorState.current,
onExpandItemsChanged: (Boolean) -> Unit = {},
interactionSource: MutableInteractionSource? = null,
colors: NavigationItemColorScheme = if (displayMode == NavigationDisplayMode.Top) {
NavigationDefaults.defaultTopItemColors()
} else {
NavigationDefaults.defaultSideItemColors()
},
indicator: @Composable IndicatorScope.(color: Color) -> Unit = if (displayMode == NavigationDisplayMode.Top) {
{ color ->
NavigationDefaults.HorizontalIndicator(
color = color,
modifier = Modifier.indicatorOffset { selected })
}
} else {
{ color ->
NavigationDefaults.VerticalIndicator(
color = color,
modifier = Modifier.indicatorOffset { selected })
}
},
items: (@Composable MenuFlyoutContainerScope.() -> Unit)? = null
) {

Expand All @@ -695,8 +728,13 @@ fun NavigationMenuItemScope.MenuItem(
text = if (isFooter) null else text,
flyoutVisible = flyoutVisible,
onFlyoutVisibleChanged = { flyoutVisible = it },
indicatorState = indicatorState,
icon = icon,
items = items
items = items,
enabled = enabled,
interactionSource = interactionSource,
colors = colors,
indicator = indicator
)
} else {
val isExpanded = LocalNavigationExpand.current
Expand All @@ -711,13 +749,17 @@ fun NavigationMenuItemScope.MenuItem(
}
},
text = { text() },
indicatorState = LocalIndicatorState.current,
indicatorState = indicatorState,
flyoutVisible = flyoutVisible && !isExpanded,
onFlyoutVisibleChanged = { flyoutVisible = it },
icon = icon,
expandItems = expandItems,
onExpandItemsChanged = onExpandItemsChanged,
items = items
items = items,
enabled = enabled,
interactionSource = interactionSource,
colors = colors,
indicator = indicator
)
}
}
Expand All @@ -726,12 +768,33 @@ fun NavigationMenuItemScope.MenuItem(
fun NavigationMenuItemScope.MenuItem(
selected: Boolean,
onClick: (selected: Boolean) -> Unit,
expandItems: Boolean = false,
onExpandItemsChanged: (Boolean) -> Unit = {},
text: @Composable () -> Unit,
icon: (@Composable () -> Unit)?,
header: (@Composable () -> Unit)?,
expandItems: Boolean = false,
enabled: Boolean = true,
separatorVisible: Boolean = false,
indicatorState: IndicatorState? = LocalIndicatorState.current,
onExpandItemsChanged: (Boolean) -> Unit = {},
interactionSource: MutableInteractionSource? = null,
colors: NavigationItemColorScheme = if (displayMode == NavigationDisplayMode.Top) {
NavigationDefaults.defaultTopItemColors()
} else {
NavigationDefaults.defaultSideItemColors()
},
indicator: @Composable IndicatorScope.(color: Color) -> Unit = if (displayMode == NavigationDisplayMode.Top) {
{ color ->
NavigationDefaults.HorizontalIndicator(
color = color,
modifier = Modifier.indicatorOffset { selected })
}
} else {
{ color ->
NavigationDefaults.VerticalIndicator(
color = color,
modifier = Modifier.indicatorOffset { selected })
}
},
items: (@Composable MenuFlyoutContainerScope.() -> Unit)? = null
) {
if (displayMode == NavigationDisplayMode.Top) {
Expand All @@ -744,6 +807,12 @@ fun NavigationMenuItemScope.MenuItem(
onExpandItemsChanged = onExpandItemsChanged,
text = text,
icon = icon,
interactionSource = interactionSource,
enabled = enabled,
items = items,
indicatorState = indicatorState,
indicator = indicator,
colors = colors
)
if (separatorVisible) {
MenuItemSeparator()
Expand All @@ -758,8 +827,13 @@ fun NavigationMenuItemScope.MenuItem(
text = text,
icon = icon,
expandItems = expandItems,
enabled = enabled,
onExpandItemsChanged = onExpandItemsChanged,
items = items
items = items,
interactionSource = interactionSource,
indicatorState = indicatorState,
indicator = indicator,
colors = colors
)
if (separatorVisible) {
MenuItemSeparator()
Expand Down Expand Up @@ -1118,9 +1192,9 @@ internal fun Modifier.indicatorOffsetAnimation(
return layout { measurable, constraints ->
val stickSize = size.toPx()
val containerSize = if (isVertical) {
constraints.maxHeight
constraints.maxHeight.toFloat()
} else {
constraints.maxWidth
constraints.maxWidth.toFloat()
}
val goBackward = if (isVertical) {
selectedPosition.currentState.y > selectedPosition.targetState.y
Expand Down Expand Up @@ -1173,24 +1247,25 @@ internal fun Modifier.indicatorOffsetAnimation(
else -> 0f
}
}
val sizeInt = currentSize.roundToInt().coerceAtLeast(0)
val placeable = if (isVertical) {
measurable.measure(Constraints.fixedHeight(currentSize.roundToInt().coerceAtLeast(0)))
measurable.measure(Constraints.fixedHeight(sizeInt))
} else {
measurable.measure(Constraints.fixedWidth(currentSize.roundToInt().coerceAtLeast(0)))
measurable.measure(Constraints.fixedWidth(sizeInt))
}

layout(
width = if (isVertical) placeable.width else constraints.maxWidth,
height = if (isVertical) constraints.maxHeight else placeable.height
) {
val offset = when {
goBackward && !indicatorState.targetState && currentFraction <= 0.25f -> extendSize - currentSize
goBackward && !indicatorState.targetState && currentFraction <= 0.25f -> extendSize - sizeInt
goBackward && !indicatorState.targetState -> 0f
!goBackward && !indicatorState.targetState && currentFraction <= 0.25f -> contentPadding
!goBackward && !indicatorState.targetState -> containerSize - currentSize
!goBackward && !indicatorState.targetState -> containerSize - sizeInt
goBackward && currentFraction > 0.75f -> contentPadding
goBackward && currentFraction > 0.5f -> containerSize - currentSize
!goBackward && currentFraction > 0.75f -> extendSize - currentSize
goBackward && currentFraction > 0.5f -> containerSize - sizeInt
!goBackward && currentFraction > 0.75f -> extendSize - sizeInt
!goBackward && currentFraction > 0.5f -> 0f
else -> 0f
}
Expand Down
4 changes: 3 additions & 1 deletion fluent/src/commonMain/kotlin/com/konyaco/fluent/component/SideNav.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.InteractionSource
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
Expand Down Expand Up @@ -250,9 +251,10 @@ fun SideNavItem(
color = it
)
},
interactionSource: MutableInteractionSource? = null,
text: @Composable RowScope.() -> Unit
) {
val interaction = remember { MutableInteractionSource() }
val interaction = interactionSource ?: remember { MutableInteractionSource() }

val color = colors.schemeFor(interaction.collectVisualState(!enabled))

Expand Down
6 changes: 5 additions & 1 deletion gallery/src/androidMain/kotlin/com/konyaco/fluent/gallery/MainActivity.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ class MainActivity : ComponentActivity() {
componentNavigator.navigateUp()
}
GalleryTheme {
App(componentNavigator, WindowInsets.systemBars)
App(
navigator = componentNavigator,
windowInset = WindowInsets.systemBars,
collapseWindowInset = WindowInsets.systemBars
)
}
}
}
Expand Down
12 changes: 4 additions & 8 deletions gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/App.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.only
Expand Down Expand Up @@ -69,6 +68,7 @@ fun App(
navigator: ComponentNavigator = rememberComponentNavigator(components.first()),
windowInset: WindowInsets = WindowInsets(0),
contentInset: WindowInsets = WindowInsets(0),
collapseWindowInset: WindowInsets = WindowInsets(0),
icon: Painter? = null,
title: String = "",
) {
Expand Down Expand Up @@ -98,19 +98,15 @@ fun App(
val store = LocalStore.current
val isCollapsed = store.navigationDisplayMode == NavigationDisplayMode.LeftCollapsed
NavigationView(
modifier = Modifier.then(
if (!isCollapsed) {
Modifier.windowInsetsPadding(insets = windowInset)
} else {
Modifier
}
modifier = Modifier.windowInsetsPadding(
insets = if (isCollapsed) collapseWindowInset else windowInset
),
state = rememberNavigationState(),
displayMode = store.navigationDisplayMode,
contentPadding = if (!isCollapsed) {
PaddingValues()
} else {
windowInset.asPaddingValues()
PaddingValues(top = 48.dp)
},
menuItems = {
components.forEach { navItem ->
Expand Down
2 changes: 2 additions & 0 deletions gallery/src/desktopMain/kotlin/com/konyaco/fluent/gallery/Main.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import com.konyaco.fluent.gallery.window.WindowFrame
import fluentdesign.gallery.generated.resources.Res
import fluentdesign.gallery.generated.resources.icon
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.skiko.hostOs

fun main() = application {
val state = rememberWindowState(
Expand All @@ -34,6 +35,7 @@ fun main() = application {
state = state,
backButtonEnabled = navigator.canNavigateUp,
backButtonClick = { navigator.navigateUp() },
backButtonVisible = hostOs.isWindows
) { windowInset, contentInset ->
App(
windowInset = windowInset,
Expand Down
2 changes: 1 addition & 1 deletion gallery/src/iosMain/kotlin/main.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ import platform.UIKit.UIViewController

fun MainViewController(): UIViewController = ComposeUIViewController {
GalleryTheme {
App(windowInset = WindowInsets.safeContent)
App(windowInset = WindowInsets.safeContent, collapseWindowInset = WindowInsets.safeContent)
}
}

0 comments on commit 8b5601d

Please sign in to comment.