From 2836b0b6974c8b323731e214995848548a236a96 Mon Sep 17 00:00:00 2001 From: howie Date: Fri, 18 Oct 2024 15:39:18 +0800 Subject: [PATCH 1/8] Modify the position of the popup --- .../top/yukonga/miuix/kmp/extra/SuperDropdown.kt | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt index 1dd411c4..daf3cdf8 100644 --- a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt +++ b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt @@ -190,6 +190,7 @@ fun SuperDropdown( val captionBarPx by rememberUpdatedState( with(density) { WindowInsets.captionBar.asPaddingValues().calculateBottomPadding().toPx() }.roundToInt() ) + val insideWidthPx by rememberUpdatedState(with(density){ insideMargin.width.toPx() }.roundToInt()) val insideHeightPx by rememberUpdatedState(with(density) { insideMargin.height.toPx() }.roundToInt()) val displayCutoutLeftSize = rememberUpdatedState(with(density) { WindowInsets.displayCutout.asPaddingValues(density).calculateLeftPadding(LayoutDirection.Ltr).toPx() @@ -221,9 +222,9 @@ fun SuperDropdown( modifier = Modifier .onGloballyPositioned { layoutCoordinates -> offsetXPx = if (alwaysRight || !alignLeft) { - dropdownOffsetXPx + componentWidthPx - layoutCoordinates.size.width - paddingPx - if (defaultWindowInsetsPadding) displayCutoutLeftSize.value else 0 + dropdownOffsetXPx + componentWidthPx - insideWidthPx - layoutCoordinates.size.width - paddingPx - if (defaultWindowInsetsPadding) displayCutoutLeftSize.value else 0 } else { - dropdownOffsetXPx + paddingPx - if (defaultWindowInsetsPadding) displayCutoutLeftSize.value else 0 + dropdownOffsetXPx + paddingPx + insideWidthPx - if (defaultWindowInsetsPadding) displayCutoutLeftSize.value else 0 } offsetYPx = calculateOffsetYPx( windowHeightPx, @@ -353,7 +354,16 @@ fun calculateOffsetYPx( navigationBarPx: Int, captionBarPx: Int ): Int { - return if (windowHeightPx - dropdownOffsetPx < dropdownHeightPx / 2 + captionBarPx + navigationBarPx + insideHeightPx + componentHeightPx / 2) { + return if (windowHeightPx - captionBarPx - navigationBarPx - dropdownOffsetPx - componentHeightPx > dropdownHeightPx) { + // Show below + dropdownOffsetPx + componentHeightPx - insideHeightPx / 2 + } else if (dropdownOffsetPx - statusBarPx > dropdownHeightPx) { + // Show above + dropdownOffsetPx - dropdownHeightPx + insideHeightPx / 2 + } else if (windowHeightPx - statusBarPx - captionBarPx - navigationBarPx <= dropdownHeightPx) { + // Special handling when the height of the popup is maxsize (== windowHeightPx) + 0 + } else if (windowHeightPx - dropdownOffsetPx < dropdownHeightPx / 2 + captionBarPx + navigationBarPx + insideHeightPx + componentHeightPx / 2) { windowHeightPx - dropdownHeightPx - insideHeightPx - captionBarPx - navigationBarPx } else { val offset = dropdownOffsetPx - dropdownHeightPx / 2 + componentHeightPx / 2 From 2495c0bd54a60e5d21bc8eeffb99eaa60aebce9e Mon Sep 17 00:00:00 2001 From: howie Date: Fri, 18 Oct 2024 17:09:35 +0800 Subject: [PATCH 2/8] Add: SuperDropdown will be "selected" when the popup is expanded. --- .../yukonga/miuix/kmp/extra/SuperDropdown.kt | 30 +++++++++++++++---- 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt index daf3cdf8..10bf4a96 100644 --- a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt +++ b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt @@ -4,6 +4,8 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.gestures.detectTapGestures +import androidx.compose.foundation.interaction.FocusInteraction +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.WindowInsets @@ -21,6 +23,7 @@ import androidx.compose.foundation.layout.statusBars import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.material.ripple import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.MutableState @@ -112,6 +115,18 @@ fun SuperDropdown( var dropdownOffsetYPx by remember { mutableStateOf(0) } var componentHeightPx by remember { mutableStateOf(0) } var componentWidthPx by remember { mutableStateOf(0) } + val interactionSource = remember { MutableInteractionSource() } + val focus = remember { mutableStateOf(null) } + + LaunchedEffect(isDropdownExpanded.value) { + if (isDropdownExpanded.value) { + focus.value = FocusInteraction.Focus().also { + interactionSource.emit(it) + } + } else { + focus.value?.let { interactionSource.emit(FocusInteraction.Unfocus(it)) } + } + } BasicComponent( modifier = modifier @@ -134,6 +149,15 @@ fun SuperDropdown( componentHeightPx = coordinates.size.height componentWidthPx = coordinates.size.width } + } + .clickable( + interactionSource = interactionSource, + indication = ripple() + ) { + if (enabled) { + isDropdownExpanded.value = enabled + hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress) + } }, insideMargin = insideMargin, title = title, @@ -157,12 +181,6 @@ fun SuperDropdown( contentDescription = null ) }, - onClick = { - if (enabled) { - isDropdownExpanded.value = enabled - hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress) - } - }, enabled = enabled ) if (isDropdownExpanded.value) { From 3d14b3075d2f79d2d58bcfcd367479bff380a2c2 Mon Sep 17 00:00:00 2001 From: howie Date: Fri, 18 Oct 2024 23:40:13 +0800 Subject: [PATCH 3/8] update: [SuperDropdown] Change background instead of focus state when "selected". --- .../yukonga/miuix/kmp/extra/SuperDropdown.kt | 32 ++++++------------- 1 file changed, 10 insertions(+), 22 deletions(-) diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt index 10bf4a96..751e51dc 100644 --- a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt +++ b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt @@ -4,8 +4,6 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.gestures.detectTapGestures -import androidx.compose.foundation.interaction.FocusInteraction -import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.WindowInsets @@ -23,7 +21,6 @@ import androidx.compose.foundation.layout.statusBars import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.lazy.LazyColumn -import androidx.compose.material.ripple import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.MutableState @@ -115,17 +112,10 @@ fun SuperDropdown( var dropdownOffsetYPx by remember { mutableStateOf(0) } var componentHeightPx by remember { mutableStateOf(0) } var componentWidthPx by remember { mutableStateOf(0) } - val interactionSource = remember { MutableInteractionSource() } - val focus = remember { mutableStateOf(null) } + val touchTint = remember { mutableStateOf(Color.Transparent) } - LaunchedEffect(isDropdownExpanded.value) { - if (isDropdownExpanded.value) { - focus.value = FocusInteraction.Focus().also { - interactionSource.emit(it) - } - } else { - focus.value?.let { interactionSource.emit(FocusInteraction.Unfocus(it)) } - } + isDropdownExpanded.value.let { + touchTint.value = if (it) MiuixTheme.colorScheme.touchTint else Color.Transparent } BasicComponent( @@ -150,15 +140,7 @@ fun SuperDropdown( componentWidthPx = coordinates.size.width } } - .clickable( - interactionSource = interactionSource, - indication = ripple() - ) { - if (enabled) { - isDropdownExpanded.value = enabled - hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress) - } - }, + .background(touchTint.value), insideMargin = insideMargin, title = title, titleColor = titleColor, @@ -181,6 +163,12 @@ fun SuperDropdown( contentDescription = null ) }, + onClick = { + if (enabled) { + isDropdownExpanded.value = enabled + hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress) + } + }, enabled = enabled ) if (isDropdownExpanded.value) { From 491a5906f1fc96d39b34a79b67de4546f156534a Mon Sep 17 00:00:00 2001 From: howie Date: Sat, 19 Oct 2024 13:55:23 +0800 Subject: [PATCH 4/8] add: [SuperDropdown] Close popup automatically. fix: [SuperDropdown] Limit popup size and margins. update: [SuperDropdown] Popup content padding, rounded corners, font size --- .../yukonga/miuix/kmp/extra/SuperDropdown.kt | 48 ++++++++++++++----- .../top/yukonga/miuix/kmp/theme/MiuixColor.kt | 10 ++-- 2 files changed, 42 insertions(+), 16 deletions(-) diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt index 751e51dc..0207aaeb 100644 --- a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt +++ b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt @@ -1,5 +1,7 @@ package top.yukonga.miuix.kmp.extra +import androidx.compose.animation.animateColorAsState +import androidx.compose.animation.core.spring import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable @@ -12,6 +14,7 @@ import androidx.compose.foundation.layout.asPaddingValues import androidx.compose.foundation.layout.captionBar import androidx.compose.foundation.layout.displayCutout import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.navigationBars import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.only @@ -19,9 +22,11 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.statusBars import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.runtime.Composable +import androidx.compose.runtime.DisposableEffect import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.MutableState import androidx.compose.runtime.getValue @@ -107,15 +112,18 @@ fun SuperDropdown( val isDropdownExpanded = remember { mutableStateOf(false) } val hapticFeedback = LocalHapticFeedback.current val actionColor = if (enabled) MiuixTheme.colorScheme.onSurfaceVariantActions else MiuixTheme.colorScheme.disabledOnSecondaryVariant + val targetColor = if (isDropdownExpanded.value) MiuixTheme.colorScheme.selectedTint else Color.Transparent + val selectedTint by animateColorAsState(targetValue = targetColor, animationSpec = spring(stiffness = 2000f)) var alignLeft by rememberSaveable { mutableStateOf(true) } var dropdownOffsetXPx by remember { mutableStateOf(0) } var dropdownOffsetYPx by remember { mutableStateOf(0) } var componentHeightPx by remember { mutableStateOf(0) } var componentWidthPx by remember { mutableStateOf(0) } - val touchTint = remember { mutableStateOf(Color.Transparent) } - isDropdownExpanded.value.let { - touchTint.value = if (it) MiuixTheme.colorScheme.touchTint else Color.Transparent + DisposableEffect(Unit) { + onDispose { + dismissPopup(isDropdownExpanded) + } } BasicComponent( @@ -140,7 +148,7 @@ fun SuperDropdown( componentWidthPx = coordinates.size.width } } - .background(touchTint.value), + .background(selectedTint), insideMargin = insideMargin, title = title, titleColor = titleColor, @@ -196,6 +204,9 @@ fun SuperDropdown( val captionBarPx by rememberUpdatedState( with(density) { WindowInsets.captionBar.asPaddingValues().calculateBottomPadding().toPx() }.roundToInt() ) + val dropdownMaxHeight by rememberUpdatedState(with(density) { + (windowHeightPx - statusBarPx - navigationBarPx - captionBarPx ).toDp() + }) val insideWidthPx by rememberUpdatedState(with(density){ insideMargin.width.toPx() }.roundToInt()) val insideHeightPx by rememberUpdatedState(with(density) { insideMargin.height.toPx() }.roundToInt()) val displayCutoutLeftSize = rememberUpdatedState(with(density) { @@ -243,12 +254,15 @@ fun SuperDropdown( captionBarPx ) } + .heightIn(50.dp, dropdownMaxHeight) .align(AbsoluteAlignment.TopLeft) .graphicsLayer( - shadowElevation = 18f, - shape = SmoothRoundedCornerShape(18.dp) + shadowElevation = 40f, + shape = SmoothRoundedCornerShape(16.dp), + ambientShadowColor = MiuixTheme.colorScheme.onBackground.copy(alpha = 0.2f), + spotShadowColor = MiuixTheme.colorScheme.onBackground.copy(alpha = 0.6f) ) - .clip(SmoothRoundedCornerShape(18.dp)) + .clip(SmoothRoundedCornerShape(16.dp)) .background(MiuixTheme.colorScheme.surface) ) { item { @@ -293,8 +307,15 @@ fun DropdownImpl( onSelectedIndexChange: (Int) -> Unit, textWidthDp: Dp? ) { - val additionalTopPadding = if (index == 0) 24.dp else 14.dp - val additionalBottomPadding = if (index == optionSize - 1) 24.dp else 14.dp + val additionalTopPadding: Dp + val additionalBottomPadding: Dp + if (optionSize == 1) { + additionalTopPadding = 16.dp + additionalBottomPadding = 16.dp + } else { + additionalTopPadding = if (index == 0) 22.5f.dp else 14.5f.dp + additionalBottomPadding = if (index == optionSize - 1) 22.5f.dp else 14.5f.dp + } val textColor = if (isSelected) { MiuixTheme.colorScheme.onTertiaryContainer } else { @@ -318,18 +339,19 @@ fun DropdownImpl( onSelectedIndexChange(index) } .background(backgroundColor) - .padding(horizontal = 24.dp) + .widthIn(200.dp, 288.dp) + .padding(horizontal = 20.dp) .padding(top = additionalTopPadding, bottom = additionalBottomPadding) ) { Text( modifier = Modifier.width(textWidthDp ?: 50.dp), text = text, - fontSize = 15.sp, + fontSize = 16.sp, fontWeight = FontWeight.Medium, color = textColor, ) Image( - modifier = Modifier.padding(start = 50.dp).size(20.dp), + modifier = Modifier.padding(start = 12.dp).size(20.dp), imageVector = MiuixIcons.Check, colorFilter = BlendModeColorFilter(selectColor, BlendMode.SrcIn), contentDescription = null, @@ -368,7 +390,7 @@ fun calculateOffsetYPx( dropdownOffsetPx - dropdownHeightPx + insideHeightPx / 2 } else if (windowHeightPx - statusBarPx - captionBarPx - navigationBarPx <= dropdownHeightPx) { // Special handling when the height of the popup is maxsize (== windowHeightPx) - 0 + statusBarPx } else if (windowHeightPx - dropdownOffsetPx < dropdownHeightPx / 2 + captionBarPx + navigationBarPx + insideHeightPx + componentHeightPx / 2) { windowHeightPx - dropdownHeightPx - insideHeightPx - captionBarPx - navigationBarPx } else { diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/MiuixColor.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/MiuixColor.kt index fbb77f7e..c820faa1 100644 --- a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/MiuixColor.kt +++ b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/MiuixColor.kt @@ -103,7 +103,8 @@ class MiuixColor( onSurfaceContainerHigh: Color, surfaceContainerHighest: Color, onSurfaceContainerHighest: Color, - windowDimming: Color + windowDimming: Color, + selectedTint: Color, ) { val primary by mutableStateOf(primary, structuralEqualityPolicy()) val onPrimary by mutableStateOf(onPrimary, structuralEqualityPolicy()) @@ -151,6 +152,7 @@ class MiuixColor( val surfaceContainerHighest by mutableStateOf(surfaceContainerHighest, structuralEqualityPolicy()) val onSurfaceContainerHighest by mutableStateOf(onSurfaceContainerHighest, structuralEqualityPolicy()) val windowDimming by mutableStateOf(windowDimming, structuralEqualityPolicy()) + val selectedTint by mutableStateOf(selectedTint, structuralEqualityPolicy()) } fun lightColorScheme() = MiuixColor( @@ -199,7 +201,8 @@ fun lightColorScheme() = MiuixColor( onSurfaceContainerHigh = Color(0xFFA5A5A5), surfaceContainerHighest = Color(0xFFE8E8E8), onSurfaceContainerHighest = Color.Black, - windowDimming = Color.Black.copy(alpha = 0.3f) + windowDimming = Color.Black.copy(alpha = 0.3f), + selectedTint = Color(0x14000000) ) fun darkColorScheme() = MiuixColor( @@ -248,5 +251,6 @@ fun darkColorScheme() = MiuixColor( onSurfaceContainerHigh = Color(0xFF6C6C6C), surfaceContainerHighest = Color(0xFF2D2D2D), onSurfaceContainerHighest = Color(0xFFE9E9E9), - windowDimming = Color.Black.copy(alpha = 0.6f) + windowDimming = Color.Black.copy(alpha = 0.3f), + selectedTint = Color(0xCC393939) ) \ No newline at end of file From 59fbbf5c7e35c94c336ba7a05b56b5fb148f51e4 Mon Sep 17 00:00:00 2001 From: howie Date: Sat, 19 Oct 2024 13:59:58 +0800 Subject: [PATCH 5/8] update: [SuperDropdown] Format Code. --- .../kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt index 0207aaeb..73e0ca10 100644 --- a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt +++ b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt @@ -207,7 +207,7 @@ fun SuperDropdown( val dropdownMaxHeight by rememberUpdatedState(with(density) { (windowHeightPx - statusBarPx - navigationBarPx - captionBarPx ).toDp() }) - val insideWidthPx by rememberUpdatedState(with(density){ insideMargin.width.toPx() }.roundToInt()) + val insideWidthPx by rememberUpdatedState(with(density) { insideMargin.width.toPx() }.roundToInt()) val insideHeightPx by rememberUpdatedState(with(density) { insideMargin.height.toPx() }.roundToInt()) val displayCutoutLeftSize = rememberUpdatedState(with(density) { WindowInsets.displayCutout.asPaddingValues(density).calculateLeftPadding(LayoutDirection.Ltr).toPx() @@ -388,7 +388,7 @@ fun calculateOffsetYPx( } else if (dropdownOffsetPx - statusBarPx > dropdownHeightPx) { // Show above dropdownOffsetPx - dropdownHeightPx + insideHeightPx / 2 - } else if (windowHeightPx - statusBarPx - captionBarPx - navigationBarPx <= dropdownHeightPx) { + } else if (windowHeightPx - statusBarPx - captionBarPx - navigationBarPx <= dropdownHeightPx) { // Special handling when the height of the popup is maxsize (== windowHeightPx) statusBarPx } else if (windowHeightPx - dropdownOffsetPx < dropdownHeightPx / 2 + captionBarPx + navigationBarPx + insideHeightPx + componentHeightPx / 2) { From 7a52f0a2c732b78432ad7370b76b6fdbe38adb86 Mon Sep 17 00:00:00 2001 From: howie Date: Sat, 19 Oct 2024 14:09:52 +0800 Subject: [PATCH 6/8] update: [SuperDropdown] Format Code x2. --- .../kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt index 73e0ca10..7983dd4f 100644 --- a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt +++ b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt @@ -387,7 +387,7 @@ fun calculateOffsetYPx( dropdownOffsetPx + componentHeightPx - insideHeightPx / 2 } else if (dropdownOffsetPx - statusBarPx > dropdownHeightPx) { // Show above - dropdownOffsetPx - dropdownHeightPx + insideHeightPx / 2 + dropdownOffsetPx - dropdownHeightPx + insideHeightPx / 2 } else if (windowHeightPx - statusBarPx - captionBarPx - navigationBarPx <= dropdownHeightPx) { // Special handling when the height of the popup is maxsize (== windowHeightPx) statusBarPx From 411999f6e1d74b1fe74aa50431918e7feac56c65 Mon Sep 17 00:00:00 2001 From: howie Date: Sat, 19 Oct 2024 14:30:15 +0800 Subject: [PATCH 7/8] fix: [SuperDropdown] Shadow color --- .../kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt index 7983dd4f..db2a7906 100644 --- a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt +++ b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt @@ -259,8 +259,8 @@ fun SuperDropdown( .graphicsLayer( shadowElevation = 40f, shape = SmoothRoundedCornerShape(16.dp), - ambientShadowColor = MiuixTheme.colorScheme.onBackground.copy(alpha = 0.2f), - spotShadowColor = MiuixTheme.colorScheme.onBackground.copy(alpha = 0.6f) + ambientShadowColor = Color.Black.copy(alpha = 0.2f), + spotShadowColor = Color.Black.copy(alpha = 0.6f) ) .clip(SmoothRoundedCornerShape(16.dp)) .background(MiuixTheme.colorScheme.surface) From ff15ff0bb15e2369c00dcafd36398b6a4f51d999 Mon Sep 17 00:00:00 2001 From: howie Date: Sat, 19 Oct 2024 19:31:52 +0800 Subject: [PATCH 8/8] update: [SuperDropdown] Update popup shadow and content padding. --- .../yukonga/miuix/kmp/extra/SuperDropdown.kt | 22 ++++++++----------- .../top/yukonga/miuix/kmp/theme/MiuixColor.kt | 2 +- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt index db2a7906..4bd00895 100644 --- a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt +++ b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt @@ -191,7 +191,7 @@ fun SuperDropdown( var offsetXPx by remember { mutableStateOf(0) } var offsetYPx by remember { mutableStateOf(0) } val textMeasurer = rememberTextMeasurer() - val textStyle = remember { TextStyle(fontWeight = FontWeight.Medium, fontSize = 17.sp) } + val textStyle = remember { TextStyle(fontWeight = FontWeight.Medium, fontSize = 16.sp) } val textWidthDp = remember(items) { items.maxOfOrNull { with(density) { textMeasurer.measure(text = it, style = textStyle).size.width.toDp() } } } val getWindowSize = rememberUpdatedState(getWindowSize()) val windowHeightPx by rememberUpdatedState(getWindowSize.value.height) @@ -207,6 +207,9 @@ fun SuperDropdown( val dropdownMaxHeight by rememberUpdatedState(with(density) { (windowHeightPx - statusBarPx - navigationBarPx - captionBarPx ).toDp() }) + val dropdownElevation by rememberUpdatedState(with(density) { + 11.dp.toPx() + }) val insideWidthPx by rememberUpdatedState(with(density) { insideMargin.width.toPx() }.roundToInt()) val insideHeightPx by rememberUpdatedState(with(density) { insideMargin.height.toPx() }.roundToInt()) val displayCutoutLeftSize = rememberUpdatedState(with(density) { @@ -257,10 +260,10 @@ fun SuperDropdown( .heightIn(50.dp, dropdownMaxHeight) .align(AbsoluteAlignment.TopLeft) .graphicsLayer( - shadowElevation = 40f, + shadowElevation = dropdownElevation, shape = SmoothRoundedCornerShape(16.dp), - ambientShadowColor = Color.Black.copy(alpha = 0.2f), - spotShadowColor = Color.Black.copy(alpha = 0.6f) + ambientShadowColor = Color.Black.copy(alpha = 0.3f), + spotShadowColor = Color.Black.copy(alpha = 0.3f) ) .clip(SmoothRoundedCornerShape(16.dp)) .background(MiuixTheme.colorScheme.surface) @@ -307,15 +310,8 @@ fun DropdownImpl( onSelectedIndexChange: (Int) -> Unit, textWidthDp: Dp? ) { - val additionalTopPadding: Dp - val additionalBottomPadding: Dp - if (optionSize == 1) { - additionalTopPadding = 16.dp - additionalBottomPadding = 16.dp - } else { - additionalTopPadding = if (index == 0) 22.5f.dp else 14.5f.dp - additionalBottomPadding = if (index == optionSize - 1) 22.5f.dp else 14.5f.dp - } + val additionalTopPadding = if (index == 0) 20f.dp else 12f.dp + val additionalBottomPadding = if (index == optionSize - 1) 20f.dp else 12f.dp val textColor = if (isSelected) { MiuixTheme.colorScheme.onTertiaryContainer } else { diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/MiuixColor.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/MiuixColor.kt index c820faa1..7a6758f9 100644 --- a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/MiuixColor.kt +++ b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/MiuixColor.kt @@ -251,6 +251,6 @@ fun darkColorScheme() = MiuixColor( onSurfaceContainerHigh = Color(0xFF6C6C6C), surfaceContainerHighest = Color(0xFF2D2D2D), onSurfaceContainerHighest = Color(0xFFE9E9E9), - windowDimming = Color.Black.copy(alpha = 0.3f), + windowDimming = Color.Black.copy(alpha = 0.6f), selectedTint = Color(0xCC393939) ) \ No newline at end of file