Skip to content

Commit 8400b24

Browse files
phodalphodal
committed
feat: Enhance FloatingRunButton with dark theme support and consistent styling
- Replace SmallFloatingActionButton with custom Surface for consistent sizing and shape - Add dark theme support for signal colors (info, error, success) with adjusted alpha values - Improve button accessibility with explicit Role.Button and clickable modifiers - Standardize icon sizing to 20.dp and button size to 40.dp across all states - Update dropdown menu items to use theme-aware colors for running and default configs
1 parent e48601b commit 8400b24

File tree

2 files changed

+84
-41
lines changed

2 files changed

+84
-41
lines changed

‎mpp-ui/src/commonMain/kotlin/cc/unitmesh/devins/ui/compose/runconfig/FloatingRunButton.kt‎

Lines changed: 83 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import androidx.compose.animation.core.infiniteRepeatable
66
import androidx.compose.animation.core.rememberInfiniteTransition
77
import androidx.compose.animation.core.tween
88
import androidx.compose.foundation.background
9+
import androidx.compose.foundation.clickable
10+
import androidx.compose.foundation.isSystemInDarkTheme
911
import androidx.compose.foundation.layout.Box
1012
import androidx.compose.foundation.layout.heightIn
1113
import androidx.compose.foundation.layout.padding
14+
import androidx.compose.foundation.layout.size
1215
import androidx.compose.foundation.layout.widthIn
1316
import androidx.compose.foundation.rememberScrollState
1417
import androidx.compose.foundation.shape.RoundedCornerShape
@@ -17,8 +20,9 @@ import androidx.compose.material3.DropdownMenu
1720
import androidx.compose.material3.DropdownMenuItem
1821
import androidx.compose.material3.Icon
1922
import androidx.compose.material3.MaterialTheme
20-
import androidx.compose.material3.SmallFloatingActionButton
23+
import androidx.compose.material3.Surface
2124
import androidx.compose.material3.Text
25+
import androidx.compose.ui.semantics.Role
2226
import androidx.compose.runtime.Composable
2327
import androidx.compose.runtime.getValue
2428
import androidx.compose.runtime.mutableStateOf
@@ -58,19 +62,26 @@ fun FloatingRunButton(
5862
modifier: Modifier = Modifier
5963
) {
6064
var menuExpanded by remember { mutableStateOf(false) }
65+
val isDarkTheme = isSystemInDarkTheme()
6166

6267
Box(modifier = modifier) {
6368
when (state) {
6469
RunConfigState.NOT_CONFIGURED -> {
65-
SmallFloatingActionButton(
66-
onClick = onConfigure,
67-
containerColor = MaterialTheme.colorScheme.primaryContainer
70+
Surface(
71+
modifier = Modifier
72+
.size(40.dp)
73+
.clickable(role = Role.Button, onClick = onConfigure),
74+
shape = RoundedCornerShape(12.dp),
75+
color = MaterialTheme.colorScheme.primaryContainer
6876
) {
69-
Icon(
70-
imageVector = AutoDevComposeIcons.Settings,
71-
contentDescription = "Configure Run",
72-
tint = MaterialTheme.colorScheme.onPrimaryContainer
73-
)
77+
Box(contentAlignment = Alignment.Center) {
78+
Icon(
79+
imageVector = AutoDevComposeIcons.Settings,
80+
contentDescription = "Configure Run",
81+
tint = MaterialTheme.colorScheme.onPrimaryContainer,
82+
modifier = Modifier.size(20.dp)
83+
)
84+
}
7485
}
7586
}
7687

@@ -85,7 +96,11 @@ fun FloatingRunButton(
8596
),
8697
label = "rotation"
8798
)
88-
99+
100+
// 根据主题选择合适的颜色
101+
val infoColor = if (isDarkTheme) AutoDevColors.Signal.info else AutoDevColors.Signal.infoLight
102+
val infoBgAlpha = if (isDarkTheme) 0.2f else 0.15f
103+
89104
// Tooltip showing AI analysis log
90105
TooltipWrapper(
91106
tooltip = {
@@ -113,46 +128,69 @@ fun FloatingRunButton(
113128
delayMillis = 300,
114129
modifier = Modifier
115130
) {
116-
SmallFloatingActionButton(
117-
onClick = {},
118-
containerColor = AutoDevColors.Signal.info.copy(alpha = 0.15f)
131+
Surface(
132+
modifier = Modifier.size(40.dp),
133+
shape = RoundedCornerShape(12.dp),
134+
color = infoColor.copy(alpha = infoBgAlpha)
119135
) {
120-
Icon(
121-
imageVector = AutoDevComposeIcons.Sync,
122-
contentDescription = "Analyzing with AI...",
123-
tint = AutoDevColors.Signal.info,
124-
modifier = Modifier.rotate(rotation)
125-
)
136+
Box(contentAlignment = Alignment.Center) {
137+
Icon(
138+
imageVector = AutoDevComposeIcons.Sync,
139+
contentDescription = "Analyzing with AI...",
140+
tint = infoColor,
141+
modifier = Modifier.size(20.dp).rotate(rotation)
142+
)
143+
}
126144
}
127145
}
128146
}
129147

130148
RunConfigState.ERROR -> {
131-
SmallFloatingActionButton(
132-
onClick = onConfigure,
133-
containerColor = AutoDevColors.Signal.error.copy(alpha = 0.12f)
149+
val errorColor = if (isDarkTheme) AutoDevColors.Signal.error else AutoDevColors.Signal.errorLight
150+
val errorBgAlpha = if (isDarkTheme) 0.2f else 0.15f
151+
152+
Surface(
153+
modifier = Modifier
154+
.size(40.dp)
155+
.clickable(role = Role.Button, onClick = onConfigure),
156+
shape = RoundedCornerShape(12.dp),
157+
color = errorColor.copy(alpha = errorBgAlpha)
134158
) {
135-
Icon(
136-
imageVector = AutoDevComposeIcons.Warning,
137-
contentDescription = "Run config error",
138-
tint = AutoDevColors.Signal.error
139-
)
159+
Box(contentAlignment = Alignment.Center) {
160+
Icon(
161+
imageVector = AutoDevComposeIcons.Warning,
162+
contentDescription = "Run config error",
163+
tint = errorColor,
164+
modifier = Modifier.size(20.dp)
165+
)
166+
}
140167
}
141168
}
142169

143170
RunConfigState.CONFIGURED -> {
144171
val isDefaultRunning = isRunning && runningConfigId != null && runningConfigId == defaultConfig?.id
145-
val fabTint = if (isDefaultRunning) AutoDevColors.Signal.error else AutoDevColors.Signal.success
146172

147-
SmallFloatingActionButton(
148-
onClick = { menuExpanded = true },
149-
containerColor = fabTint.copy(alpha = 0.12f)
173+
// 根据主题选择合适的颜色
174+
val successColor = if (isDarkTheme) AutoDevColors.Signal.success else AutoDevColors.Signal.successLight
175+
val errorColor = if (isDarkTheme) AutoDevColors.Signal.error else AutoDevColors.Signal.errorLight
176+
val fabTint = if (isDefaultRunning) errorColor else successColor
177+
val fabBgAlpha = if (isDarkTheme) 0.2f else 0.15f
178+
179+
Surface(
180+
modifier = Modifier
181+
.size(40.dp)
182+
.clickable(role = Role.Button, onClick = { menuExpanded = true }),
183+
shape = RoundedCornerShape(12.dp),
184+
color = fabTint.copy(alpha = fabBgAlpha)
150185
) {
151-
Icon(
152-
imageVector = if (isDefaultRunning) AutoDevComposeIcons.Stop else AutoDevComposeIcons.PlayArrow,
153-
contentDescription = if (isDefaultRunning) "Stop" else "Run",
154-
tint = fabTint
155-
)
186+
Box(contentAlignment = Alignment.Center) {
187+
Icon(
188+
imageVector = if (isDefaultRunning) AutoDevComposeIcons.Stop else AutoDevComposeIcons.PlayArrow,
189+
contentDescription = if (isDefaultRunning) "Stop" else "Run",
190+
tint = fabTint,
191+
modifier = Modifier.size(20.dp)
192+
)
193+
}
156194
}
157195

158196
DropdownMenu(
@@ -163,17 +201,22 @@ fun FloatingRunButton(
163201
configs.forEach { cfg ->
164202
val running = isRunning && runningConfigId == cfg.id
165203
val isDefault = cfg.id == defaultConfig?.id
204+
205+
// 根据主题选择合适的颜色
206+
val successColor = if (isDarkTheme) AutoDevColors.Signal.success else AutoDevColors.Signal.successLight
207+
val errorColor = if (isDarkTheme) AutoDevColors.Signal.error else AutoDevColors.Signal.errorLight
208+
166209
val tint = when {
167-
running -> AutoDevColors.Signal.error
168-
isDefault -> AutoDevColors.Signal.success
210+
running -> errorColor
211+
isDefault -> successColor
169212
else -> MaterialTheme.colorScheme.onSurface
170213
}
171214
DropdownMenuItem(
172-
text = {
215+
text = {
173216
Text(
174217
text = if (isDefault) "${cfg.name} (default)" else cfg.name,
175218
style = if (isDefault) MaterialTheme.typography.bodyMedium else MaterialTheme.typography.bodySmall
176-
)
219+
)
177220
},
178221
onClick = {
179222
menuExpanded = false

‎mpp-ui/src/commonMain/kotlin/cc/unitmesh/devins/ui/compose/runconfig/RunOutputDock.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import cc.unitmesh.devins.ui.compose.terminal.PlatformTerminalDisplay
3737
@Composable
3838
fun RunOutputDock(
3939
isVisible: Boolean,
40-
title: String = "Run Output",
40+
title: String = "Project Run Actions",
4141
output: String,
4242
isRunning: Boolean = false,
4343
onClear: () -> Unit,

0 commit comments

Comments
 (0)