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

6
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,16 +171,18 @@ NLoader {
}
NTextInput {
label: "Input label"
description: "A cool description"
text: "Type anything"
Layout.fillWidth: true
onEditingFinished: {
}
}
NDivider {
Layout.fillWidth: true
}
}
}
// NBusyIndicator
ColumnLayout {

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

@ -58,20 +58,10 @@ ColumnLayout {
borderColor: Colors.accentPrimary
borderWidth: Math.max(1, Style.borderMedium)
}
ColumnLayout {
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 {
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
@ -82,7 +72,6 @@ ColumnLayout {
}
}
}
}
NDivider {
Layout.fillWidth: true

22
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,26 +31,12 @@ ColumnLayout {
}
ColumnLayout {
spacing: 4
spacing: Style.marginLarge * scaling
Layout.fillWidth: true
NText {
text: "Network Settings"
font.pointSize: 18
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.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold
color: Colors.textPrimary
}
@ -76,5 +61,4 @@ ColumnLayout {
}
}
}
}
}

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

4
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

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
}

35
Widgets/NTextInput.qml
View file

@ -7,23 +7,45 @@ 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
ColumnLayout {
spacing: Style.marginTiniest * scaling
Layout.fillWidth: true
NText {
text: label
font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold
color: Colors.textPrimary
}
NText {
text: description
font.pointSize: Style.fontSizeSmall * scaling
color: Colors.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
// Container
Rectangle {
id: frame
anchors.fill: parent
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
@ -62,4 +84,5 @@ Item {
}
}
}
}
}