28fbf10b79
Custom DarkButton component with Dracula theme colors: - bg-secondary base, button-hover on hover - primary variant with accent-purple - Disabled state with reduced opacity - Consistent 28px height, 4px border-radius Also fixes PickDarkButton/KeyDarkButton naming errors from agent. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
57 lines
1.8 KiB
Text
57 lines
1.8 KiB
Text
import { ComboBox } from "std-widgets.slint";
|
|
import { Theme } from "../theme.slint";
|
|
import { DarkButton } from "dark_button.slint";
|
|
import { AppState, ConnectionBridge, ConnectionState } from "../globals.slint";
|
|
|
|
export component ConnectionBar inherits Rectangle {
|
|
height: 48px;
|
|
background: Theme.bg-secondary;
|
|
|
|
HorizontalLayout {
|
|
padding: 8px;
|
|
spacing: 12px;
|
|
alignment: start;
|
|
// Status LED (wrapped in a VerticalLayout to center it)
|
|
VerticalLayout {
|
|
alignment: center;
|
|
Rectangle {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 8px;
|
|
background: AppState.connection == ConnectionState.connected ? Theme.connected : Theme.disconnected;
|
|
}
|
|
}
|
|
|
|
// Port selector (placeholder - ComboBox needs string model)
|
|
Text {
|
|
text: ConnectionBridge.selected-port != "" ? ConnectionBridge.selected-port : "No port selected";
|
|
color: Theme.fg-primary;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
// Connect/Disconnect button
|
|
DarkButton {
|
|
text: AppState.connection == ConnectionState.connected ? "Disconnect" : "Connect";
|
|
enabled: AppState.connection == ConnectionState.connected || AppState.connection == ConnectionState.disconnected;
|
|
clicked => {
|
|
if AppState.connection == ConnectionState.connected {
|
|
ConnectionBridge.disconnect();
|
|
} else {
|
|
ConnectionBridge.connect();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Spacer
|
|
Rectangle {
|
|
horizontal-stretch: 1;
|
|
}
|
|
|
|
// Firmware version
|
|
Text {
|
|
text: AppState.firmware-version;
|
|
color: Theme.fg-secondary;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|