Skip to content

Fix device and app dropdown width and click areas #481

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.

Sign up for GitHub

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

Merged
florent37 merged 5 commits into from
Jan 25, 2026
Merged

Fix device and app dropdown width and click areas #481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
00fd665
Fix dropdown width
snappdevelopment Jan 17, 2026
94d4c3b
Align implementations and set alpha on disconnected devices
snappdevelopment Jan 18, 2026
d4be45f
Add named parameter
snappdevelopment Jan 23, 2026
dccdb98
Merge branch 'main' into fix-dropdown-width
florent37 Jan 25, 2026
243af05
Merge branch 'main' into fix-dropdown-width
florent37 Jan 25, 2026
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
13 changes: 8 additions & 5 deletions ...ain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/app/TopBarAppDropdown.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 ->
Expand All @@ -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
}
)
}
}
Expand Down
2 changes: 1 addition & 1 deletion ...monMain/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/app/TopBarAppView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
) {
Expand Down
27 changes: 14 additions & 13 deletions ...tlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/device/TopBarDeviceDropdown.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -33,7 +35,7 @@ internal fun TopBarDeviceDropdown(
) {
var expanded by remember { mutableStateOf(false) }

ExposedDropdownMenuBox(
FloconExposedDropdownMenuBox(
expanded = expanded,
onExpandedChange = {
expanded = it
Expand All @@ -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),
) {
Comment on lines +60 to 64
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

When refactoring from ExposedDropdownMenu to FloconExposedDropdownMenu, the shadowElevation = 0.dp and custom shape properties were lost. This might result in an unintended visual change, such as a shadow appearing where there was none before. If the original appearance should be preserved, consider adding these properties to the FloconExposedDropdownMenu component or passing them through.

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
},
Expand Down
106 changes: 47 additions & 59 deletions ...n/kotlin/io/github/openflocon/flocondesktop/app/ui/view/topbar/device/TopBarDeviceView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
}
Expand Down Expand Up @@ -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)
)
}
}
}
}
}
Expand All @@ -162,8 +154,7 @@ private fun TopBarDeviceViewPreview_desktop_enabled() {
canRestart = true,
),
selected = false,
onDelete = {},
onClick = {}
deleteClick = {},
)
}
}
Expand All @@ -183,8 +174,7 @@ private fun TopBarDeviceViewPreview_desktop_disabled() {
canRestart = true,
),
selected = false,
onDelete = {},
onClick = {}
deleteClick = {},
)
}
}
Expand All @@ -205,8 +195,7 @@ private fun TopBarDeviceViewPreview_iphone() {
canRestart = true,
),
selected = false,
onDelete = {},
onClick = {}
deleteClick = {},
)
}
}
Expand All @@ -228,8 +217,7 @@ private fun TopBarDeviceViewPreview_iphone_disabled() {
canRestart = true,
),
selected = false,
onDelete = {},
onClick = {}
deleteClick = {},
)
}
}
Expand Down
1 change: 1 addition & 0 deletions ...Main/kotlin/io/github/openflocon/library/designsystem/components/FloconExposedDropdown.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ fun ExposedDropdownMenuBoxScope.FloconExposedDropdownMenu(
onDismissRequest = onDismissRequest,
modifier = modifier,
containerColor = FloconTheme.colorPalette.primary,
matchAnchorWidth = false,
content = content
)
}
Loading