mirror of
https://github.com/zoriya/noctalia-shell.git
synced 2026-06-05 03:30:03 +00:00
NCombox + NTextInput proper label/description support
+ Associated changes in window settings
This commit is contained in:
+63
-40
@@ -7,58 +7,81 @@ Item {
|
||||
id: root
|
||||
|
||||
readonly property real scaling: Scaling.scale(screen)
|
||||
|
||||
// API
|
||||
property alias text: input.text
|
||||
property alias placeholderText: input.placeholderText
|
||||
property string label: ""
|
||||
property string description: ""
|
||||
property bool readOnly: false
|
||||
property bool enabled: true
|
||||
|
||||
property alias text: input.text
|
||||
property alias placeholderText: input.placeholderText
|
||||
|
||||
signal editingFinished
|
||||
|
||||
// Sizing
|
||||
implicitWidth: 320 * scaling
|
||||
implicitHeight: Style.baseWidgetSize * 1.25 * scaling
|
||||
implicitHeight: Style.baseWidgetSize * 2.75 * scaling
|
||||
|
||||
// Container
|
||||
Rectangle {
|
||||
id: frame
|
||||
anchors.fill: parent
|
||||
radius: Style.radiusMedium * scaling
|
||||
color: Colors.surfaceVariant
|
||||
border.color: Colors.outline
|
||||
border.width: Math.max(1, Style.borderThin * scaling)
|
||||
ColumnLayout {
|
||||
spacing: Style.marginTiniest * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
// Focus ring
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: frame.radius
|
||||
color: "transparent"
|
||||
border.color: input.activeFocus ? Colors.hover : "transparent"
|
||||
border.width: input.activeFocus ? Math.max(1, Style.borderThin * scaling) : 0
|
||||
NText {
|
||||
text: label
|
||||
font.pointSize: Style.fontSizeMedium * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Colors.textPrimary
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Style.marginMedium * scaling
|
||||
anchors.rightMargin: Style.marginMedium * scaling
|
||||
spacing: Style.marginSmall * scaling
|
||||
NText {
|
||||
text: description
|
||||
font.pointSize: Style.fontSizeSmall * scaling
|
||||
color: Colors.textSecondary
|
||||
wrapMode: Text.WordWrap
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
// Optional leading icon slot in the future
|
||||
// Item { Layout.preferredWidth: 0 }
|
||||
TextField {
|
||||
id: input
|
||||
Layout.fillWidth: true
|
||||
echoMode: TextInput.Normal
|
||||
readOnly: root.readOnly
|
||||
enabled: root.enabled
|
||||
color: Colors.textPrimary
|
||||
placeholderTextColor: Colors.textSecondary
|
||||
background: null
|
||||
font.pointSize: Style.fontSizeSmall * scaling
|
||||
onEditingFinished: root.editingFinished()
|
||||
// Text changes are observable via the aliased 'text' property (root.text) and its 'textChanged' signal.
|
||||
// No additional callback is invoked here to avoid conflicts with QML's onTextChanged handler semantics.
|
||||
// Container
|
||||
Rectangle {
|
||||
id: frame
|
||||
Layout.topMargin: Style.marginTiny * scaling
|
||||
implicitWidth: root.width
|
||||
implicitHeight: Style.baseWidgetSize * 1.35 * scaling
|
||||
radius: Style.radiusMedium * scaling
|
||||
color: Colors.surfaceVariant
|
||||
border.color: Colors.outline
|
||||
border.width: Math.max(1, Style.borderThin * scaling)
|
||||
|
||||
// Focus ring
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: frame.radius
|
||||
color: "transparent"
|
||||
border.color: input.activeFocus ? Colors.hover : "transparent"
|
||||
border.width: input.activeFocus ? Math.max(1, Style.borderThin * scaling) : 0
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Style.marginMedium * scaling
|
||||
anchors.rightMargin: Style.marginMedium * scaling
|
||||
spacing: Style.marginSmall * scaling
|
||||
|
||||
// Optional leading icon slot in the future
|
||||
// Item { Layout.preferredWidth: 0 }
|
||||
TextField {
|
||||
id: input
|
||||
Layout.fillWidth: true
|
||||
echoMode: TextInput.Normal
|
||||
readOnly: root.readOnly
|
||||
enabled: root.enabled
|
||||
color: Colors.textPrimary
|
||||
placeholderTextColor: Colors.textSecondary
|
||||
background: null
|
||||
font.pointSize: Style.fontSizeSmall * scaling
|
||||
onEditingFinished: root.editingFinished()
|
||||
// Text changes are observable via the aliased 'text' property (root.text) and its 'textChanged' signal.
|
||||
// No additional callback is invoked here to avoid conflicts with QML's onTextChanged handler semantics.
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user