From 00fd665444bce21d4c4532f5e76b7a89fb09374a Mon Sep 17 00:00:00 2001 From: Sebastian Neubauer Date: Sat, 17 Jan 2026 18:13:13 +0100 Subject: [PATCH 1/3] Fix dropdown width --- .../ui/view/topbar/app/TopBarAppDropdown.kt | 13 ++-- .../topbar/device/TopBarDeviceDropdown.kt | 15 ++-- .../ui/view/topbar/device/TopBarDeviceView.kt | 75 +++++++++---------- .../components/FloconExposedDropdown.kt | 1 + 4 files changed, 50 insertions(+), 54 deletions(-) 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/device/TopBarDeviceDropdown.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/device/TopBarDeviceDropdown.kt index 240c0c19d..8b7a4cce2 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,9 @@ package io.github.openflocon.flocondesktop.app.ui.view.topbar.device +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 +21,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 +34,7 @@ internal fun TopBarDeviceDropdown( ) { var expanded by remember { mutableStateOf(false) } - ExposedDropdownMenuBox( + FloconExposedDropdownMenuBox( expanded = expanded, onExpandedChange = { expanded = it @@ -55,17 +56,15 @@ 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(), device = device, selected = state.deviceSelected.id == device.id, onClick = { 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..7ce6a9d2c 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 @@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width @@ -59,11 +60,10 @@ internal fun TopBarDeviceView( ) .padding(horizontal = 8.dp, 4.dp), verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(4.dp), + horizontalArrangement = Arrangement.spacedBy(8.dp), ) { Box( modifier = Modifier - .padding(horizontal = 4.dp) .graphicsLayer { alpha = if (device.isActive) 1f else 0.4f } @@ -100,49 +100,42 @@ internal fun TopBarDeviceView( ) } - Row( - verticalAlignment = Alignment.CenterVertically, - ) { - Column( - modifier = Modifier, - verticalArrangement = Arrangement.Center - ) { - Text( - text = device.deviceName, - color = FloconTheme.colorPalette.onPrimary, - style = FloconTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold), - ) + Column { + Text( + text = device.deviceName, + color = FloconTheme.colorPalette.onPrimary, + style = FloconTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold), + ) - Text( - text = if (device.isActive.not()) { - stringResource(Res.string.devices_disconnected) - } else { - stringResource(Res.string.devices_connected) + 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 && 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() }, - color = FloconTheme.colorPalette.onPrimary, - style = FloconTheme.typography.bodySmall.copy( - fontSize = 10.sp, - ), + 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) - ) - } - } } } } 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 ) } From 94d4c3b37a12492b10f410901ada92f83ab93c91 Mon Sep 17 00:00:00 2001 From: Sebastian Neubauer Date: Sun, 18 Jan 2026 11:29:24 +0100 Subject: [PATCH 2/3] Align implementations and set alpha on disconnected devices --- .../topbar/device/TopBarDeviceDropdown.kt | 14 ++--- .../ui/view/topbar/device/TopBarDeviceView.kt | 53 +++++++++---------- 2 files changed, 32 insertions(+), 35 deletions(-) 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 8b7a4cce2..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,6 +2,7 @@ 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.material3.ExperimentalMaterial3Api @@ -64,14 +65,15 @@ internal fun TopBarDeviceDropdown( if (state is DevicesStateUiModel.WithDevices) { state.devices.forEach { device -> TopBarDeviceView( - modifier = Modifier.fillMaxWidth(), + 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 7ce6a9d2c..cbbfd6663 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 @@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width @@ -26,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 @@ -46,21 +47,13 @@ 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), - verticalAlignment = Alignment.CenterVertically, + modifier = modifier.padding(horizontal = 8.dp, 4.dp), horizontalArrangement = Arrangement.spacedBy(8.dp), + verticalAlignment = Alignment.CenterVertically, ) { Box( modifier = Modifier @@ -100,11 +93,18 @@ internal fun TopBarDeviceView( ) } - Column { + Column( + modifier = Modifier + .graphicsLayer { + alpha = if (device.isActive) 1f else 0.4f + } + ) { Text( text = device.deviceName, - color = FloconTheme.colorPalette.onPrimary, style = FloconTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold), + maxLines = 1, + overflow = TextOverflow.Ellipsis, + color = FloconTheme.colorPalette.onPrimary, ) Text( @@ -119,15 +119,14 @@ internal fun TopBarDeviceView( ), ) } - if (!selected && onDelete != null) { + 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 { - onDelete() - }, + Modifier + .clip(RoundedCornerShape(4.dp)) + .background(Color.White.copy(alpha = 0.8f)) + .padding(2.dp) + .clickable(onClick = deleteClick), contentAlignment = Alignment.Center, ) { FloconIcon( @@ -155,8 +154,7 @@ private fun TopBarDeviceViewPreview_desktop_enabled() { canRestart = true, ), selected = false, - onDelete = {}, - onClick = {} + deleteClick = {}, ) } } @@ -176,8 +174,7 @@ private fun TopBarDeviceViewPreview_desktop_disabled() { canRestart = true, ), selected = false, - onDelete = {}, - onClick = {} + deleteClick = {}, ) } } @@ -198,8 +195,7 @@ private fun TopBarDeviceViewPreview_iphone() { canRestart = true, ), selected = false, - onDelete = {}, - onClick = {} + deleteClick = {}, ) } } @@ -221,8 +217,7 @@ private fun TopBarDeviceViewPreview_iphone_disabled() { canRestart = true, ), selected = false, - onDelete = {}, - onClick = {} + deleteClick = {}, ) } } From d4be45fafa9c6f77328c3c57b0ce0b0a14bf9435 Mon Sep 17 00:00:00 2001 From: Sebastian Neubauer Date: Fri, 23 Jan 2026 08:39:30 +0100 Subject: [PATCH 3/3] Add named parameter --- .../flocondesktop/app/ui/view/topbar/app/TopBarAppView.kt | 2 +- .../flocondesktop/app/ui/view/topbar/device/TopBarDeviceView.kt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/TopBarDeviceView.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/device/TopBarDeviceView.kt index cbbfd6663..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 @@ -51,7 +51,7 @@ internal fun TopBarDeviceView( 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, ) {