diff --git a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/app/TopBarAppDropdown.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/app/TopBarAppDropdown.kt index aaaeab461..77679713b 100644 --- a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/app/TopBarAppDropdown.kt +++ b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/app/TopBarAppDropdown.kt @@ -3,6 +3,7 @@ package io.github.openflocon.flocondesktop.app.ui.view.topbar.app import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MenuAnchorType import androidx.compose.material3.Text @@ -67,7 +68,7 @@ internal fun TopBarAppDropdown( FloconExposedDropdownMenu( expanded = expanded, onDismissRequest = { expanded = false }, - modifier = Modifier.exposedDropdownSize() + modifier = Modifier.exposedDropdownSize(matchAnchorWidth = false) ) { appsState.apps .fastForEach { app -> @@ -79,10 +80,12 @@ internal fun TopBarAppDropdown( deleteApp(app) expanded = false }, - modifier = Modifier.clickable { - onAppSelected(app) - expanded = false - } + modifier = Modifier + .fillMaxWidth() + .clickable { + onAppSelected(app) + expanded = false + } ) } } diff --git a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/app/TopBarAppView.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/app/TopBarAppView.kt index 0afbd96a0..6c9f5eb22 100644 --- a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/app/TopBarAppView.kt +++ b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/app/TopBarAppView.kt @@ -46,7 +46,7 @@ internal fun TopBarAppView( deleteClick: (() -> Unit)? = null, ) { Row( - modifier = modifier.padding(horizontal = 8.dp, 4.dp), + modifier = modifier.padding(horizontal = 8.dp, vertical = 4.dp), horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically, ) { diff --git a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/device/TopBarDeviceDropdown.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/device/TopBarDeviceDropdown.kt index 240c0c19d..06d1f5cb3 100644 --- a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/device/TopBarDeviceDropdown.kt +++ b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/device/TopBarDeviceDropdown.kt @@ -2,10 +2,10 @@ package io.github.openflocon.flocondesktop.app.ui.view.topbar.device +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.ExposedDropdownMenuBox import androidx.compose.material3.MenuAnchorType import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -22,6 +22,8 @@ import io.github.openflocon.flocondesktop.app.ui.model.DevicesStateUiModel import io.github.openflocon.flocondesktop.app.ui.view.topbar.TopBarSelector import io.github.openflocon.library.designsystem.FloconTheme import io.github.openflocon.library.designsystem.components.FloconCircularProgressIndicator +import io.github.openflocon.library.designsystem.components.FloconExposedDropdownMenu +import io.github.openflocon.library.designsystem.components.FloconExposedDropdownMenuBox import org.jetbrains.compose.resources.stringResource @Composable @@ -33,7 +35,7 @@ internal fun TopBarDeviceDropdown( ) { var expanded by remember { mutableStateOf(false) } - ExposedDropdownMenuBox( + FloconExposedDropdownMenuBox( expanded = expanded, onExpandedChange = { expanded = it @@ -55,24 +57,23 @@ internal fun TopBarDeviceDropdown( ) } } - ExposedDropdownMenu( + FloconExposedDropdownMenu( expanded = expanded, onDismissRequest = { expanded = false }, - containerColor = FloconTheme.colorPalette.primary, - shadowElevation = 0.dp, - shape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp), - modifier = Modifier.exposedDropdownSize(), + modifier = Modifier.exposedDropdownSize(matchAnchorWidth = false), ) { if (state is DevicesStateUiModel.WithDevices) { state.devices.forEach { device -> TopBarDeviceView( + modifier = Modifier + .fillMaxWidth() + .clickable { + onDeviceSelected(device) + expanded = false + }, device = device, selected = state.deviceSelected.id == device.id, - onClick = { - onDeviceSelected(device) - expanded = false - }, - onDelete = { + deleteClick = { deleteDevice(device) expanded = false }, diff --git a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/device/TopBarDeviceView.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/device/TopBarDeviceView.kt index 652af6ee0..0af13fe71 100644 --- a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/device/TopBarDeviceView.kt +++ b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/device/TopBarDeviceView.kt @@ -25,11 +25,13 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.alpha import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import flocondesktop.composeapp.generated.resources.Res @@ -45,25 +47,16 @@ import org.jetbrains.compose.resources.stringResource internal fun TopBarDeviceView( device: DeviceItemUiModel, modifier: Modifier = Modifier, - onClick: (() -> Unit)? = null, selected: Boolean = false, - onDelete: (() -> Unit)? = null, + deleteClick: (() -> Unit)? = null, ) { Row( - modifier = modifier - .then( - if (onClick != null) - Modifier.clickable(onClick = onClick) - else - Modifier - ) - .padding(horizontal = 8.dp, 4.dp), + modifier = modifier.padding(horizontal = 8.dp, vertical = 4.dp), + horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(4.dp), ) { Box( modifier = Modifier - .padding(horizontal = 4.dp) .graphicsLayer { alpha = if (device.isActive) 1f else 0.4f } @@ -100,49 +93,48 @@ internal fun TopBarDeviceView( ) } - Row( - verticalAlignment = Alignment.CenterVertically, + Column( + modifier = Modifier + .graphicsLayer { + alpha = if (device.isActive) 1f else 0.4f + } ) { - Column( - modifier = Modifier, - verticalArrangement = Arrangement.Center - ) { - Text( - text = device.deviceName, - color = FloconTheme.colorPalette.onPrimary, - style = FloconTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold), - ) + Text( + text = device.deviceName, + style = FloconTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold), + maxLines = 1, + overflow = TextOverflow.Ellipsis, + color = FloconTheme.colorPalette.onPrimary, + ) - Text( - text = if (device.isActive.not()) { - stringResource(Res.string.devices_disconnected) - } else { - stringResource(Res.string.devices_connected) - }, - color = FloconTheme.colorPalette.onPrimary, - style = FloconTheme.typography.bodySmall.copy( - fontSize = 10.sp, - ), + Text( + text = if (device.isActive.not()) { + stringResource(Res.string.devices_disconnected) + } else { + stringResource(Res.string.devices_connected) + }, + color = FloconTheme.colorPalette.onPrimary, + style = FloconTheme.typography.bodySmall.copy( + fontSize = 10.sp, + ), + ) + } + if (!selected && deleteClick != null) { + Spacer(modifier = Modifier.weight(1f)) + Box( + Modifier + .clip(RoundedCornerShape(4.dp)) + .background(Color.White.copy(alpha = 0.8f)) + .padding(2.dp) + .clickable(onClick = deleteClick), + contentAlignment = Alignment.Center, + ) { + FloconIcon( + imageVector = Icons.Outlined.Close, + tint = FloconTheme.colorPalette.primary, + modifier = Modifier.size(14.dp) ) } - if (!selected && onDelete != null) { - Spacer(modifier = Modifier.weight(1f)) - Box( - Modifier.clip(RoundedCornerShape(4.dp)) - .background( - Color.White.copy(alpha = 0.8f) - ).padding(2.dp).clickable { - onDelete() - }, - contentAlignment = Alignment.Center, - ) { - FloconIcon( - imageVector = Icons.Outlined.Close, - tint = FloconTheme.colorPalette.primary, - modifier = Modifier.size(14.dp) - ) - } - } } } } @@ -162,8 +154,7 @@ private fun TopBarDeviceViewPreview_desktop_enabled() { canRestart = true, ), selected = false, - onDelete = {}, - onClick = {} + deleteClick = {}, ) } } @@ -183,8 +174,7 @@ private fun TopBarDeviceViewPreview_desktop_disabled() { canRestart = true, ), selected = false, - onDelete = {}, - onClick = {} + deleteClick = {}, ) } } @@ -205,8 +195,7 @@ private fun TopBarDeviceViewPreview_iphone() { canRestart = true, ), selected = false, - onDelete = {}, - onClick = {} + deleteClick = {}, ) } } @@ -228,8 +217,7 @@ private fun TopBarDeviceViewPreview_iphone_disabled() { canRestart = true, ), selected = false, - onDelete = {}, - onClick = {} + deleteClick = {}, ) } } diff --git a/FloconDesktop/library/designsystem/src/commonMain/kotlin/io/github/openflocon/library/designsystem/components/FloconExposedDropdown.kt b/FloconDesktop/library/designsystem/src/commonMain/kotlin/io/github/openflocon/library/designsystem/components/FloconExposedDropdown.kt index 416683c20..12becc370 100644 --- a/FloconDesktop/library/designsystem/src/commonMain/kotlin/io/github/openflocon/library/designsystem/components/FloconExposedDropdown.kt +++ b/FloconDesktop/library/designsystem/src/commonMain/kotlin/io/github/openflocon/library/designsystem/components/FloconExposedDropdown.kt @@ -37,6 +37,7 @@ fun ExposedDropdownMenuBoxScope.FloconExposedDropdownMenu( onDismissRequest = onDismissRequest, modifier = modifier, containerColor = FloconTheme.colorPalette.primary, + matchAnchorWidth = false, content = content ) }