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:
parent
7b6f25a5ad
commit
d69b421590
5 changed files with 41 additions and 9 deletions
23
ui/components/dark_line_edit.slint
Normal file
23
ui/components/dark_line_edit.slint
Normal 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); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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";
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue