diff --git a/ui/components/connection_bar.slint b/ui/components/connection_bar.slint index 7dbb575..40cb8dc 100644 --- a/ui/components/connection_bar.slint +++ b/ui/components/connection_bar.slint @@ -1,5 +1,6 @@ -import { ComboBox, Button } from "std-widgets.slint"; +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 { @@ -29,7 +30,7 @@ export component ConnectionBar inherits Rectangle { } // Connect/Disconnect button - Button { + DarkButton { text: AppState.connection == ConnectionState.connected ? "Disconnect" : "Connect"; enabled: AppState.connection == ConnectionState.connected || AppState.connection == ConnectionState.disconnected; clicked => { diff --git a/ui/components/dark_button.slint b/ui/components/dark_button.slint new file mode 100644 index 0000000..d2ac656 --- /dev/null +++ b/ui/components/dark_button.slint @@ -0,0 +1,32 @@ +import { Theme } from "../theme.slint"; + +export component DarkButton inherits Rectangle { + in property text; + in property enabled: true; + in property primary: false; + callback clicked(); + + min-width: btn-text.preferred-width + 20px; + height: 28px; + border-radius: 4px; + background: !root.enabled ? Theme.bg-primary + : root.primary && ta.has-hover ? Theme.accent-purple.darker(0.2) + : root.primary ? Theme.accent-purple + : ta.has-hover ? Theme.button-hover + : Theme.button-bg; + opacity: root.enabled ? 1.0 : 0.5; + + btn-text := Text { + text: root.text; + color: root.enabled ? Theme.fg-primary : Theme.fg-secondary; + font-size: 12px; + horizontal-alignment: center; + vertical-alignment: center; + } + + ta := TouchArea { + enabled: root.enabled; + clicked => { root.clicked(); } + mouse-cursor: root.enabled ? pointer : default; + } +} diff --git a/ui/components/key_selector.slint b/ui/components/key_selector.slint index f7eb169..d6d1ecd 100644 --- a/ui/components/key_selector.slint +++ b/ui/components/key_selector.slint @@ -1,5 +1,6 @@ -import { LineEdit, Button, ComboBox, ScrollView } from "std-widgets.slint"; +import { LineEdit, ComboBox, ScrollView } from "std-widgets.slint"; import { Theme } from "../theme.slint"; +import { DarkButton } from "dark_button.slint"; import { KeySelectorBridge, KeymapBridge, KeyEntry, KeycapData } from "../globals.slint"; import { KeyButton } from "key_button.slint"; @@ -185,7 +186,7 @@ export component KeySelector inherits Rectangle { font-size: 11px; vertical-alignment: center; } - Button { + DarkButton { text: "Set"; clicked => { KeySelectorBridge.apply-mt(mt-mod.current-index, mt-key.current-index); @@ -217,7 +218,7 @@ export component KeySelector inherits Rectangle { font-size: 11px; vertical-alignment: center; } - Button { + DarkButton { text: "Set"; clicked => { KeySelectorBridge.apply-lt(lt-layer.current-index, lt-key.current-index); @@ -248,7 +249,7 @@ export component KeySelector inherits Rectangle { font-size: 11px; vertical-alignment: center; } - Button { + DarkButton { text: "Set"; clicked => { KeySelectorBridge.apply-hex(KeySelectorBridge.hex-input); diff --git a/ui/tabs/tab_advanced.slint b/ui/tabs/tab_advanced.slint index add0d20..ef26d28 100644 --- a/ui/tabs/tab_advanced.slint +++ b/ui/tabs/tab_advanced.slint @@ -1,5 +1,6 @@ -import { Button, ComboBox, ScrollView } from "std-widgets.slint"; +import { ComboBox, ScrollView } from "std-widgets.slint"; import { Theme } from "../theme.slint"; +import { DarkButton } from "../components/dark_button.slint"; import { AdvancedBridge, AppState, ConnectionState, KeymapBridge } from "../globals.slint"; component SectionHeader inherits Text { @@ -25,7 +26,7 @@ component ItemRow inherits Rectangle { Text { text: root.left; color: Theme.fg-primary; font-size: 11px; vertical-alignment: center; horizontal-stretch: 1; } Text { text: "->"; color: Theme.fg-secondary; font-size: 11px; vertical-alignment: center; } Text { text: root.right; color: Theme.accent-green; font-size: 11px; vertical-alignment: center; } - Button { text: "Del"; clicked => { root.delete(); } } + DarkButton { text: "Del"; clicked => { root.delete(); } } } } @@ -61,7 +62,7 @@ export component TabAdvanced inherits Rectangle { spacing: 8px; Text { text: "Advanced Features"; color: Theme.fg-primary; font-size: 20px; font-weight: 700; vertical-alignment: center; } Rectangle { horizontal-stretch: 1; } - Button { + DarkButton { text: "Refresh All"; enabled: AppState.connection == ConnectionState.connected; clicked => { AdvancedBridge.refresh-advanced(); } @@ -139,7 +140,7 @@ export component TabAdvanced inherits Rectangle { Text { text: "Mod:"; color: Theme.fg-secondary; font-size: 11px; vertical-alignment: center; } ModComboBox { current-index <=> AdvancedBridge.new-ko-res-mod-idx; } } - Button { + DarkButton { text: "Add Key Override"; clicked => { AdvancedBridge.create-ko(AdvancedBridge.new-ko-trigger-code, AdvancedBridge.new-ko-trig-mod-idx, AdvancedBridge.new-ko-result-code, AdvancedBridge.new-ko-res-mod-idx); } } @@ -159,7 +160,7 @@ export component TabAdvanced inherits Rectangle { HorizontalLayout { spacing: 8px; Text { text: AdvancedBridge.autoshift-status != "" ? AdvancedBridge.autoshift-status : "Unknown"; color: Theme.fg-primary; font-size: 11px; vertical-alignment: center; } - Button { text: "Toggle"; clicked => { AdvancedBridge.toggle-autoshift(); } } + DarkButton { text: "Toggle"; clicked => { AdvancedBridge.toggle-autoshift(); } } } } } @@ -207,7 +208,7 @@ export component TabAdvanced inherits Rectangle { alignment: start; Text { text: "Result:"; color: Theme.fg-secondary; font-size: 11px; vertical-alignment: center; } PickButton { label: AdvancedBridge.new-combo-result-name; target: "combo-result"; } - Button { + DarkButton { text: "Add Combo"; clicked => { AdvancedBridge.create-combo(); } } @@ -278,7 +279,7 @@ export component TabAdvanced inherits Rectangle { Text { text: "Mod:"; color: Theme.fg-secondary; font-size: 11px; vertical-alignment: center; } ModComboBox { current-index <=> AdvancedBridge.new-leader-mod-idx; } } - Button { + DarkButton { text: "Add Leader Key"; clicked => { AdvancedBridge.create-leader(AdvancedBridge.new-leader-result-code, AdvancedBridge.new-leader-mod-idx); } } @@ -304,7 +305,7 @@ export component TabAdvanced inherits Rectangle { ComboBox { width: 50px; model: ["0","1","2","3","4","5","6","7","8","9"]; current-index <=> AdvancedBridge.tri-l2-idx; } Text { text: "-> L3:"; color: Theme.fg-secondary; font-size: 12px; vertical-alignment: center; } ComboBox { width: 50px; model: ["0","1","2","3","4","5","6","7","8","9"]; current-index <=> AdvancedBridge.tri-l3-idx; } - Button { text: "Set"; clicked => { AdvancedBridge.set-trilayer(AdvancedBridge.tri-l1-idx, AdvancedBridge.tri-l2-idx, AdvancedBridge.tri-l3-idx); } } + DarkButton { text: "Set"; clicked => { AdvancedBridge.set-trilayer(AdvancedBridge.tri-l1-idx, AdvancedBridge.tri-l2-idx, AdvancedBridge.tri-l3-idx); } } } } } @@ -332,11 +333,11 @@ export component TabAdvanced inherits Rectangle { Text { text: AdvancedBridge.tama-status; color: Theme.fg-primary; font-size: 11px; wrap: word-wrap; } HorizontalLayout { spacing: 4px; - Button { text: "Feed"; clicked => { AdvancedBridge.tama-action("feed"); } } - Button { text: "Play"; clicked => { AdvancedBridge.tama-action("play"); } } - Button { text: "Sleep"; clicked => { AdvancedBridge.tama-action("sleep"); } } - Button { text: "Meds"; clicked => { AdvancedBridge.tama-action("meds"); } } - Button { text: "On/Off"; clicked => { AdvancedBridge.tama-action("toggle"); } } + DarkButton { text: "Feed"; clicked => { AdvancedBridge.tama-action("feed"); } } + DarkButton { text: "Play"; clicked => { AdvancedBridge.tama-action("play"); } } + DarkButton { text: "Sleep"; clicked => { AdvancedBridge.tama-action("sleep"); } } + DarkButton { text: "Meds"; clicked => { AdvancedBridge.tama-action("meds"); } } + DarkButton { text: "On/Off"; clicked => { AdvancedBridge.tama-action("toggle"); } } } } } diff --git a/ui/tabs/tab_flasher.slint b/ui/tabs/tab_flasher.slint index db74107..3a499a4 100644 --- a/ui/tabs/tab_flasher.slint +++ b/ui/tabs/tab_flasher.slint @@ -1,5 +1,6 @@ -import { Button, ComboBox, LineEdit } from "std-widgets.slint"; +import { ComboBox, LineEdit } from "std-widgets.slint"; import { Theme } from "../theme.slint"; +import { DarkButton } from "../components/dark_button.slint"; import { FlasherBridge } from "../globals.slint"; export component TabFlasher inherits Rectangle { @@ -57,7 +58,7 @@ export component TabFlasher inherits Rectangle { placeholder-text: "/dev/ttyUSB0"; } - Button { + DarkButton { text: "Refresh"; clicked => { FlasherBridge.refresh-prog-ports(); } } @@ -123,7 +124,7 @@ export component TabFlasher inherits Rectangle { overflow: elide; } - Button { + DarkButton { text: "Browse..."; clicked => { FlasherBridge.browse-firmware(); } } @@ -143,7 +144,7 @@ export component TabFlasher inherits Rectangle { HorizontalLayout { spacing: 12px; - Button { + DarkButton { text: FlasherBridge.flashing ? "Flashing..." : "Flash Firmware"; enabled: !FlasherBridge.flashing && FlasherBridge.firmware-path != "" diff --git a/ui/tabs/tab_keymap.slint b/ui/tabs/tab_keymap.slint index c8576ed..794e1df 100644 --- a/ui/tabs/tab_keymap.slint +++ b/ui/tabs/tab_keymap.slint @@ -1,5 +1,6 @@ -import { Button, LineEdit } from "std-widgets.slint"; +import { LineEdit } from "std-widgets.slint"; import { Theme } from "../theme.slint"; +import { DarkButton } from "../components/dark_button.slint"; import { KeymapBridge, AppState, ConnectionState } from "../globals.slint"; import { KeyboardView } from "../components/keyboard_view.slint"; @@ -56,7 +57,7 @@ export component TabKeymap inherits VerticalLayout { root.renaming = false; } } - Button { + DarkButton { text: "Cancel"; clicked => { root.renaming = false; } } @@ -129,7 +130,7 @@ export component TabKeymap inherits VerticalLayout { Rectangle { horizontal-stretch: 1; } - Button { + DarkButton { text: "Change Key..."; clicked => { KeymapBridge.key-selector-open = true; diff --git a/ui/tabs/tab_macros.slint b/ui/tabs/tab_macros.slint index 50901a4..53498cd 100644 --- a/ui/tabs/tab_macros.slint +++ b/ui/tabs/tab_macros.slint @@ -1,5 +1,6 @@ -import { Button, ComboBox, ScrollView, LineEdit } from "std-widgets.slint"; +import { ComboBox, ScrollView, LineEdit } from "std-widgets.slint"; import { Theme } from "../theme.slint"; +import { DarkButton } from "../components/dark_button.slint"; import { MacroBridge, AppState, ConnectionState, KeymapBridge } from "../globals.slint"; export component TabMacros inherits Rectangle { @@ -14,7 +15,7 @@ export component TabMacros inherits Rectangle { spacing: 8px; Text { text: "Macros"; color: Theme.fg-primary; font-size: 20px; font-weight: 700; vertical-alignment: center; } Rectangle { horizontal-stretch: 1; } - Button { + DarkButton { text: "Refresh"; enabled: AppState.connection == ConnectionState.connected; clicked => { MacroBridge.refresh-macros(); } @@ -87,7 +88,7 @@ export component TabMacros inherits Rectangle { spacing: 6px; alignment: start; - Button { + DarkButton { text: "Add Key"; clicked => { KeymapBridge.selector-target = "macro-step"; @@ -95,14 +96,14 @@ export component TabMacros inherits Rectangle { } } - Button { text: "T 50ms"; clicked => { MacroBridge.add-delay-step(50); } } - Button { text: "T 100ms"; clicked => { MacroBridge.add-delay-step(100); } } - Button { text: "T 200ms"; clicked => { MacroBridge.add-delay-step(200); } } + DarkButton { text: "T 50ms"; clicked => { MacroBridge.add-delay-step(50); } } + DarkButton { text: "T 100ms"; clicked => { MacroBridge.add-delay-step(100); } } + DarkButton { text: "T 200ms"; clicked => { MacroBridge.add-delay-step(200); } } Rectangle { horizontal-stretch: 1; } - Button { text: "Undo"; clicked => { MacroBridge.remove-last-step(); } } - Button { text: "Clear"; clicked => { MacroBridge.clear-steps(); } } + DarkButton { text: "Undo"; clicked => { MacroBridge.remove-last-step(); } } + DarkButton { text: "Clear"; clicked => { MacroBridge.clear-steps(); } } } // Save @@ -110,7 +111,7 @@ export component TabMacros inherits Rectangle { spacing: 8px; alignment: start; - Button { + DarkButton { text: "Save Macro"; enabled: AppState.connection == ConnectionState.connected; clicked => { MacroBridge.save-macro(); } @@ -153,7 +154,7 @@ export component TabMacros inherits Rectangle { Text { text: "#" + macro.slot; color: Theme.accent-purple; font-size: 12px; vertical-alignment: center; width: 30px; } Text { text: macro.name; color: Theme.fg-primary; font-size: 12px; font-weight: 600; vertical-alignment: center; width: 100px; } Text { text: macro.steps; color: Theme.fg-secondary; font-size: 10px; vertical-alignment: center; horizontal-stretch: 1; overflow: elide; } - Button { text: "Del"; clicked => { MacroBridge.delete-macro(macro.slot); } } + DarkButton { text: "Del"; clicked => { MacroBridge.delete-macro(macro.slot); } } } } } diff --git a/ui/tabs/tab_stats.slint b/ui/tabs/tab_stats.slint index 39e7bdd..4f92647 100644 --- a/ui/tabs/tab_stats.slint +++ b/ui/tabs/tab_stats.slint @@ -1,5 +1,6 @@ -import { Button, ScrollView } from "std-widgets.slint"; +import { ScrollView } from "std-widgets.slint"; import { Theme } from "../theme.slint"; +import { DarkButton } from "../components/dark_button.slint"; import { StatsBridge, AppState, ConnectionState } from "../globals.slint"; component BarChart inherits Rectangle { @@ -63,7 +64,7 @@ export component TabStats inherits Rectangle { vertical-alignment: center; } Rectangle { horizontal-stretch: 1; } - Button { + DarkButton { text: "Refresh"; enabled: AppState.connection == ConnectionState.connected; clicked => { StatsBridge.refresh-stats(); }