mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-10 05:39:16 +00:00
686f5e43e2
Instead of having all style duplicated and re-using a base, we just hack into the funciton that queries the dark/light theme based on the style suffix known at compile time. This removes one of the problem that happens when trying to work on the widget style with the extension, as it relies on include path hacks
83 lines
2.8 KiB
Text
83 lines
2.8 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
|
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
|
|
|
|
import { MaterialPalette, MaterialFontSettings } from "styling.slint";
|
|
import { LineEditBase} from "../common/lineedit-base.slint";
|
|
|
|
// Single line text input field with Material Design Outline TextField look and feel.
|
|
export component LineEdit {
|
|
in property <length> font-size <=> i-base.font-size;
|
|
in property <string> placeholder-text <=> i-base.placeholder-text;
|
|
in property <bool> enabled <=> i-base.enabled;
|
|
in property input-type <=> i-base.input-type;
|
|
in property horizontal-alignment <=> i-base.horizontal-alignment;
|
|
in property read-only <=> i-base.read-only;
|
|
out property <bool> has-focus: i-base.has-focus;
|
|
in-out property <string> text <=> i-base.text;
|
|
|
|
callback accepted <=> i-base.accepted;
|
|
callback edited <=> i-base.edited;
|
|
accessible-role: text-input;
|
|
accessible-value <=> text;
|
|
accessible-placeholder-text: text == "" ? placeholder-text : "";
|
|
accessible-action-set-value(v) => { text = v; edited(v); }
|
|
|
|
public function set-selection-offsets(start: int, end: int) {
|
|
i-base.set-selection-offsets(start, end);
|
|
}
|
|
|
|
public function select-all() {
|
|
i-base.select-all();
|
|
}
|
|
public function clear-selection() {
|
|
i-base.clear-selection();
|
|
}
|
|
public function cut() {
|
|
i-base.cut();
|
|
}
|
|
public function copy() {
|
|
i-base.copy();
|
|
}
|
|
public function paste() {
|
|
i-base.paste();
|
|
}
|
|
|
|
min-width: max(120px, i-layout.min-width);
|
|
min-height: max(56px, i-layout.min-height);
|
|
forward-focus: i-base;
|
|
|
|
states [
|
|
disabled when !root.enabled : {
|
|
i-background.border-color: MaterialPalette.control-foreground;
|
|
i-background.opacity: 0.38;
|
|
i-base.opacity: 0.38;
|
|
}
|
|
focused when root.has-focus : {
|
|
i-background.border-width: 2px;
|
|
i-background.border-color: MaterialPalette.accent-background;
|
|
}
|
|
]
|
|
|
|
i-background := Rectangle {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
border-width: 1px;
|
|
border-color: MaterialPalette.border;
|
|
}
|
|
|
|
i-layout := HorizontalLayout {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
|
|
i-base := LineEditBase {
|
|
text-color: MaterialPalette.foreground;
|
|
font-size: MaterialFontSettings.body-large.font-size;
|
|
font-weight: MaterialFontSettings.body-large.font-weight;
|
|
selection-foreground-color: MaterialPalette.selection-foreground;
|
|
margin: i-layout.padding-left + i-layout.padding-right;
|
|
placeholder-color: MaterialPalette.border-variant;
|
|
selection-background-color: MaterialPalette.selection-background;
|
|
}
|
|
}
|
|
}
|