never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NCombox + NTextInput proper label/description support

Browse source 
+ Associated changes in window settings
This commit is contained in:
quadbyte 2025-08-12 18:34:26 -04:00
parent 3997a369ec
commit 0417590221
8 changed files with 111 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

10
Modules/DemoPanel/DemoPanel.qml
View file

@ -146,6 +146,8 @@ NLoader {
}
NComboBox {
label: "Animal"
description: "What's your favorite"
optionsKeys: ["cat", "dog", "bird", "monkey", "fish", "turtle", "elephant", "tiger"]
optionsLabels: ["Cat", "Dog", "Bird", "Monkey", "Fish", "Turtle", "Elephant", "Tiger"]
currentKey: "cat"
@ -169,14 +171,16 @@ NLoader {
}
NTextInput {
label: "Input label"
description: "A cool description"
text: "Type anything"
Layout.fillWidth: true
onEditingFinished: {
}
NDivider {
Layout.fillWidth: true
}
}
NDivider {
Layout.fillWidth: true
}
}

27
Modules/Settings/Tabs/General.qml
View file

@ -58,26 +58,15 @@ ColumnLayout {
borderColor: Colors.accentPrimary
borderWidth: Math.max(1, Style.borderMedium)
}
ColumnLayout {
NTextInput {
label: "Profile Picture"
description: "Your profile picture displayed in various places throughout the shell"
text: Settings.data.general.avatarImage
placeholderText: "/home/user/.face"
Layout.fillWidth: true
spacing: Style.marginTiny * scaling
NText {
text: "Profile Picture"
color: Colors.textPrimary
font.weight: Style.fontWeightBold
}
NText {
text: "Your profile picture displayed in various places throughout the shell"
color: Colors.textSecondary
font.pointSize: Style.fontSizeSmall * scaling
}
NTextInput {
text: Settings.data.general.avatarImage
placeholderText: "/home/user/.face"
Layout.fillWidth: true
onEditingFinished: {
Settings.data.general.avatarImage = text
}
onEditingFinished: {
Settings.data.general.avatarImage = text
}
}
}

48
Modules/Settings/Tabs/Network.qml
View file

@ -16,8 +16,7 @@ ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
padding: 16
rightPadding: 12
padding: Style.marginMedium * scaling
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
@ -32,46 +31,31 @@ ColumnLayout {
}
ColumnLayout {
spacing: 4
spacing: Style.marginLarge * scaling
Layout.fillWidth: true
NText {
text: "Network Settings"
font.pointSize: 18
font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold
color: Colors.textPrimary
Layout.bottomMargin: 8
}
// Network interfaces section
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
NText {
text: "Network Interfaces"
font.pointSize: 13
font.weight: Style.fontWeightBold
color: Colors.textPrimary
NToggle {
label: "WiFi Enabled"
description: "Enable WiFi connectivity"
value: Settings.data.network.wifiEnabled
onToggled: function (newValue) {
Settings.data.network.wifiEnabled = newValue
}
}
NToggle {
label: "WiFi Enabled"
description: "Enable WiFi connectivity"
value: Settings.data.network.wifiEnabled
onToggled: function (newValue) {
Settings.data.network.wifiEnabled = newValue
}
}
NToggle {
label: "Bluetooth Enabled"
description: "Enable Bluetooth connectivity"
value: Settings.data.network.bluetoothEnabled
onToggled: function (newValue) {
Settings.data.network.bluetoothEnabled = newValue
}
NToggle {
label: "Bluetooth Enabled"
description: "Enable Bluetooth connectivity"
value: Settings.data.network.bluetoothEnabled
onToggled: function (newValue) {
Settings.data.network.bluetoothEnabled = newValue
}
}
}

22
Modules/Settings/Tabs/ScreenRecorder.qml
View file

@ -33,7 +33,7 @@ ColumnLayout {
Layout.fillWidth: true
NText {
text: "Screen Recording"
text: "Recording"
font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold
color: Colors.textPrimary
@ -46,24 +46,10 @@ ColumnLayout {
Layout.fillWidth: true
Layout.topMargin: Style.marginSmall * scaling
ColumnLayout {
spacing: Style.marginTiny * scaling
NText {
text: "Output Directory"
font.weight: Style.fontWeightBold
color: Colors.textPrimary
}
NText {
text: "Directory where screen recordings will be saved"
font.pointSize: Style.fontSizeSmall * scaling
color: Colors.textSecondary
wrapMode: Text.WordWrap
}
}
NTextInput {
label: "Output Directory"
description: "Directory where screen recordings will be saved"
placeholderText: "/home/xxx/Videos"
text: Settings.data.screenRecorder.directory
onEditingFinished: {
Settings.data.screenRecorder.directory = text

6
Modules/Settings/Tabs/TimeWeather.qml
View file

@ -47,8 +47,10 @@ ColumnLayout {
Layout.topMargin: Style.marginSmall * scaling
NTextInput {
label: "Location name"
description: "Choose a known location near you"
text: Settings.data.location.name
placeholderText: "Enter city name"
placeholderText: "Enter the location name"
Layout.fillWidth: true
onEditingFinished: {
Settings.data.location.name = text
@ -64,7 +66,7 @@ ColumnLayout {
// Time section
ColumnLayout {
spacing: Style.marginLarge * scaling
spacing: Style.marginLarge * scaling
Layout.fillWidth: true
NText {

3
Modules/Settings/Tabs/Wallpaper.qml
View file

@ -14,8 +14,7 @@ ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
padding: 16
rightPadding: 12
padding: Style.marginMedium * scaling
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded

17
Widgets/NComboBox.qml
View file

@ -59,7 +59,7 @@ ColumnLayout {
implicitWidth: 120 * scaling
implicitHeight: preferredHeight
color: Colors.surfaceVariant
border.color: root.activeFocus ? Colors.hover : Colors.outline
border.color: combo.activeFocus ? Colors.hover : Colors.outline
border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusMedium * scaling
}
@ -69,7 +69,6 @@ ColumnLayout {
leftPadding: Style.marginLarge * scaling
rightPadding: combo.indicator.width + Style.marginLarge * scaling
font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
text: {
@ -79,16 +78,16 @@ ColumnLayout {
// Drop down indicator
indicator: NText {
x: root.width - width - Style.marginMedium * scaling
y: root.topPadding + (root.availableHeight - height) / 2
x: combo.width - width - Style.marginMedium * scaling
y: combo.topPadding + (combo.availableHeight - height) / 2
text: "arrow_drop_down"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling
}
popup: Popup {
y: root.height
width: root.width
y: combo.height
width: combo.width
implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginMedium * scaling * 2)
padding: Style.marginMedium * scaling
@ -109,8 +108,8 @@ ColumnLayout {
}
delegate: ItemDelegate {
width: root.width
highlighted: root.highlightedIndex === index
width: combo.width
highlighted: combo.highlightedIndex === index
contentItem: NText {
text: {
@ -123,7 +122,7 @@ ColumnLayout {
}
background: Rectangle {
width: root.width - Style.marginMedium * scaling * 3
width: combo.width - Style.marginMedium * scaling * 3
color: highlighted ? Colors.hover : "transparent"
radius: Style.radiusSmall * scaling
}

103
Widgets/NTextInput.qml
View file

@ -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.
}
}
}
}