style: DarkLineEdit + scrollable layer sidebar

- DarkLineEdit: wrapper around std LineEdit with Dracula theme
  (dark bg, purple focus border)
- Replaced all remaining std LineEdit in: tab_keymap, tab_macros,
  tab_flasher, key_selector
- Layer sidebar: wrapped in Flickable for scrolling with many layers
- Zero std-widgets visual components remaining (except LineEdit
  inside DarkLineEdit wrapper)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Mae PUGIN 2026-04-07 12:04:13 +02:00
parent 7b6f25a5ad
commit d69b421590
5 changed files with 41 additions and 9 deletions

View file

@ -0,0 +1,23 @@
import { LineEdit } from "std-widgets.slint";
import { Theme } from "../theme.slint";
export component DarkLineEdit inherits Rectangle {
in property <string> placeholder-text: "";
in-out property <string> text: "";
callback accepted(string);
callback edited(string);
forward-focus: inner;
height: 28px;
border-radius: 4px;
border-width: 1px;
border-color: inner.has-focus ? Theme.accent-purple : Theme.button-border;
background: Theme.button-bg;
inner := LineEdit {
text <=> root.text;
placeholder-text: root.placeholder-text;
accepted(t) => { root.accepted(t); }
edited(t) => { root.edited(t); }
}
}

View file

@ -1,4 +1,5 @@
import { LineEdit, ScrollView } from "std-widgets.slint"; import { ScrollView } from "std-widgets.slint";
import { DarkLineEdit } from "dark_line_edit.slint";
import { Theme } from "../theme.slint"; import { Theme } from "../theme.slint";
import { DarkButton } from "dark_button.slint"; import { DarkButton } from "dark_button.slint";
import { DarkComboBox } from "dark_combo_box.slint"; import { DarkComboBox } from "dark_combo_box.slint";
@ -140,7 +141,7 @@ export component KeySelector inherits Rectangle {
} }
// Normal mode: search + key grid // Normal mode: search + key grid
if !keyboard-mode : LineEdit { if !keyboard-mode : DarkLineEdit {
placeholder-text: "Search..."; placeholder-text: "Search...";
text <=> KeySelectorBridge.search-text; text <=> KeySelectorBridge.search-text;
edited(text) => { KeySelectorBridge.apply-filter(text); } edited(text) => { KeySelectorBridge.apply-filter(text); }
@ -233,7 +234,7 @@ export component KeySelector inherits Rectangle {
spacing: 6px; spacing: 6px;
height: 32px; height: 32px;
Text { text: "0x"; color: Theme.accent-orange; font-size: 12px; font-weight: 600; vertical-alignment: center; } Text { text: "0x"; color: Theme.accent-orange; font-size: 12px; font-weight: 600; vertical-alignment: center; }
hex-edit := LineEdit { hex-edit := DarkLineEdit {
width: 80px; width: 80px;
text <=> KeySelectorBridge.hex-input; text <=> KeySelectorBridge.hex-input;
placeholder-text: "5204"; placeholder-text: "5204";

View file

@ -1,4 +1,4 @@
import { LineEdit } from "std-widgets.slint"; import { DarkLineEdit } from "../components/dark_line_edit.slint";
import { Theme } from "../theme.slint"; import { Theme } from "../theme.slint";
import { DarkButton } from "../components/dark_button.slint"; import { DarkButton } from "../components/dark_button.slint";
import { DarkComboBox } from "../components/dark_combo_box.slint"; import { DarkComboBox } from "../components/dark_combo_box.slint";
@ -53,7 +53,7 @@ export component TabFlasher inherits Rectangle {
} }
} }
if FlasherBridge.prog-ports.length == 0 : LineEdit { if FlasherBridge.prog-ports.length == 0 : DarkLineEdit {
horizontal-stretch: 1; horizontal-stretch: 1;
text <=> FlasherBridge.selected-prog-port; text <=> FlasherBridge.selected-prog-port;
placeholder-text: "/dev/ttyUSB0"; placeholder-text: "/dev/ttyUSB0";

View file

@ -1,4 +1,4 @@
import { LineEdit } from "std-widgets.slint"; import { DarkLineEdit } from "../components/dark_line_edit.slint";
import { Theme } from "../theme.slint"; import { Theme } from "../theme.slint";
import { DarkButton } from "../components/dark_button.slint"; import { DarkButton } from "../components/dark_button.slint";
import { KeymapBridge, AppState, ConnectionState } from "../globals.slint"; import { KeymapBridge, AppState, ConnectionState } from "../globals.slint";
@ -28,6 +28,11 @@ export component TabKeymap inherits VerticalLayout {
horizontal-alignment: center; horizontal-alignment: center;
} }
Flickable {
vertical-stretch: 1;
VerticalLayout {
spacing: 4px;
for layer[idx] in KeymapBridge.layers : Rectangle { for layer[idx] in KeymapBridge.layers : Rectangle {
height: 30px; height: 30px;
border-radius: 4px; border-radius: 4px;
@ -46,11 +51,13 @@ export component TabKeymap inherits VerticalLayout {
mouse-cursor: pointer; mouse-cursor: pointer;
} }
} }
}
}
// Rename // Rename
if root.renaming : VerticalLayout { if root.renaming : VerticalLayout {
spacing: 4px; spacing: 4px;
rename-input := LineEdit { rename-input := DarkLineEdit {
placeholder-text: "New name"; placeholder-text: "New name";
accepted(text) => { accepted(text) => {
KeymapBridge.rename-layer(KeymapBridge.active-layer, text); KeymapBridge.rename-layer(KeymapBridge.active-layer, text);

View file

@ -1,4 +1,5 @@
import { ScrollView, LineEdit } from "std-widgets.slint"; import { ScrollView } from "std-widgets.slint";
import { DarkLineEdit } from "../components/dark_line_edit.slint";
import { Theme } from "../theme.slint"; import { Theme } from "../theme.slint";
import { DarkButton } from "../components/dark_button.slint"; import { DarkButton } from "../components/dark_button.slint";
import { DarkComboBox } from "../components/dark_combo_box.slint"; import { DarkComboBox } from "../components/dark_combo_box.slint";
@ -45,7 +46,7 @@ export component TabMacros inherits Rectangle {
current-index <=> MacroBridge.new-slot-idx; current-index <=> MacroBridge.new-slot-idx;
} }
Text { text: "Name:"; color: Theme.fg-secondary; font-size: 12px; vertical-alignment: center; } Text { text: "Name:"; color: Theme.fg-secondary; font-size: 12px; vertical-alignment: center; }
LineEdit { DarkLineEdit {
horizontal-stretch: 1; horizontal-stretch: 1;
text <=> MacroBridge.new-name; text <=> MacroBridge.new-name;
placeholder-text: "macro name"; placeholder-text: "macro name";