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

NComboBox now includes label + description

Browse source 
still working on settings
This commit is contained in:
quadbyte 2025-08-12 18:03:00 -04:00
parent bf3f0cf88d
commit 3997a369ec
5 changed files with 177 additions and 269 deletions
Download patch file Download diff file Expand all files Collapse all files

78
Modules/Settings/Tabs/Bar.qml
View file

@ -29,7 +29,7 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginLarge * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
@ -37,58 +37,50 @@ ColumnLayout {
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.textPrimary color: Colors.textPrimary
Layout.bottomMargin: Style.marginSmall * scaling
} }
// Elements section NToggle {
ColumnLayout { label: "Show Active Window"
spacing: Style.marginSmall * scaling description: "Display the title of the currently focused window below the bar"
Layout.fillWidth: true value: Settings.data.bar.showActiveWindow
Layout.topMargin: Style.marginSmall * scaling onToggled: function (newValue) {
Settings.data.bar.showActiveWindow = newValue
NToggle {
label: "Show Active Window"
description: "Display the title of the currently focused window below the bar"
value: Settings.data.bar.showActiveWindow
onToggled: function (newValue) {
Settings.data.bar.showActiveWindow = newValue
}
} }
}
NToggle { NToggle {
label: "Show Active Window Icon" label: "Show Active Window Icon"
description: "Display the icon of the currently focused window" description: "Display the icon of the currently focused window"
value: Settings.data.bar.showActiveWindowIcon value: Settings.data.bar.showActiveWindowIcon
onToggled: function (newValue) { onToggled: function (newValue) {
Settings.data.bar.showActiveWindowIcon = newValue Settings.data.bar.showActiveWindowIcon = newValue
}
} }
}
NToggle { NToggle {
label: "Show System Info" label: "Show System Info"
description: "Display system information (CPU, RAM, Temperature)" description: "Display system information (CPU, RAM, Temperature)"
value: Settings.data.bar.showSystemInfo value: Settings.data.bar.showSystemInfo
onToggled: function (newValue) { onToggled: function (newValue) {
Settings.data.bar.showSystemInfo = newValue Settings.data.bar.showSystemInfo = newValue
}
} }
}
NToggle { NToggle {
label: "Show Taskbar" label: "Show Taskbar"
description: "Display a taskbar showing currently open windows" description: "Display a taskbar showing currently open windows"
value: Settings.data.bar.showTaskbar value: Settings.data.bar.showTaskbar
onToggled: function (newValue) { onToggled: function (newValue) {
Settings.data.bar.showTaskbar = newValue Settings.data.bar.showTaskbar = newValue
}
} }
}
NToggle { NToggle {
label: "Show Media" label: "Show Media"
description: "Display media controls and information" description: "Display media controls and information"
value: Settings.data.bar.showMedia value: Settings.data.bar.showMedia
onToggled: function (newValue) { onToggled: function (newValue) {
Settings.data.bar.showMedia = newValue Settings.data.bar.showMedia = newValue
}
} }
} }
} }

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

@ -29,7 +29,7 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginTiny * scaling spacing: Style.marginLarge * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
@ -37,7 +37,6 @@ ColumnLayout {
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.textPrimary color: Colors.textPrimary
Layout.bottomMargin: Style.marginSmall * scaling
} }
// Profile section // Profile section
@ -92,7 +91,7 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginLarge * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {

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

@ -94,7 +94,7 @@ ColumnLayout {
// Video Settings // Video Settings
ColumnLayout { ColumnLayout {
spacing: Style.marginTiny * scaling spacing: Style.marginLarge * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
@ -106,125 +106,50 @@ ColumnLayout {
} }
// Frame Rate // Frame Rate
ColumnLayout { NComboBox {
spacing: Style.marginSmall * scaling label: "Frame Rate"
Layout.fillWidth: true description: "Target frame rate for screen recordings (default: 60)"
Layout.topMargin: Style.marginSmall * scaling optionsKeys: ["30", "60", "120", "240"]
optionsLabels: ["30 FPS", "60 FPS", "120 FPS", "240 FPS"]
ColumnLayout { currentKey: Settings.data.screenRecorder.frameRate
spacing: Style.marginTiny * scaling onSelected: function (key) {
NText { Settings.data.screenRecorder.frameRate = key
text: "Frame Rate"
font.weight: Style.fontWeightBold
color: Colors.textPrimary
}
NText {
text: "Target frame rate for screen recordings (default: 60)"
font.pointSize: Style.fontSizeSmall * scaling
color: Colors.textSecondary
wrapMode: Text.WordWrap
}
}
NComboBox {
optionsKeys: ["30", "60", "120", "2Style.marginLarge * scaling0"]
optionsLabels: ["30 FPS", "60 FPS", "120 FPS", "2Style.marginLarge * scaling0 FPS"]
currentKey: Settings.data.screenRecorder.frameRate
onSelected: function (key) {
Settings.data.screenRecorder.frameRate = key
}
} }
} }
// Video Quality // Video Quality
ColumnLayout { NComboBox {
spacing: Style.marginSmall * scaling label: "Video Quality"
Layout.fillWidth: true description: "Higher quality results in larger file sizes"
Layout.topMargin: Style.marginSmall * scaling optionsKeys: ["medium", "high", "very_high", "ultra"]
optionsLabels: ["Medium", "High", "Very High", "Ultra"]
NText { currentKey: Settings.data.screenRecorder.quality
text: "Video Quality" onSelected: function (key) {
font.pointSize: 13 Settings.data.screenRecorder.quality = key
font.weight: Style.fontWeightBold
color: Colors.textPrimary
}
NText {
text: "Higher quality results in larger file sizes"
font.pointSize: 12
color: Colors.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
NComboBox {
optionsKeys: ["medium", "high", "very_high", "ultra"]
optionsLabels: ["Medium", "High", "Very High", "Ultra"]
currentKey: Settings.data.screenRecorder.quality
onSelected: function (key) {
Settings.data.screenRecorder.quality = key
}
} }
} }
// Video Codec // Video Codec
ColumnLayout { NComboBox {
spacing: Style.marginTiny * scaling label: "Video Codec"
Layout.fillWidth: true description: "Different codecs offer different compression and compatibility"
Layout.topMargin: Style.marginSmall * scaling optionsKeys: ["h264", "hevc", "av1", "vp8", "vp9"]
optionsLabels: ["H264", "HEVC", "AV1", "VP8", "VP9"]
NText { currentKey: Settings.data.screenRecorder.videoCodec
text: "Video Codec" onSelected: function (key) {
font.weight: Style.fontWeightBold Settings.data.screenRecorder.videoCodec = key
color: Colors.textPrimary
}
NText {
text: "Different codecs offer different compression and compatibility"
font.pointSize: Style.fontSizeSmall * scaling
color: Colors.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
NComboBox {
optionsKeys: ["h264", "hevc", "av1", "vp8", "vp9"]
optionsLabels: ["H264", "HEVC", "AV1", "VP8", "VP9"]
currentKey: Settings.data.screenRecorder.videoCodec
onSelected: function (key) {
Settings.data.screenRecorder.videoCodec = key
}
} }
} }
// Color Range // Color Range
ColumnLayout { NComboBox {
spacing: Style.marginSmall * scaling label: "Color Range"
Layout.fillWidth: true description: "Limited is recommended for better compatibility"
Layout.topMargin: Style.marginSmall * scaling optionsKeys: ["limited", "full"]
optionsLabels: ["Limited", "Full"]
NText { currentKey: Settings.data.screenRecorder.colorRange
text: "Color Range" onSelected: function (key) {
Settings.data.screenRecorder.colorRange = key
font.weight: Style.fontWeightBold
color: Colors.textPrimary
}
NText {
text: "Limited is recommended for better compatibility"
font.pointSize: Style.fontSizeSmall * scaling
color: Colors.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
NComboBox {
optionsKeys: ["limited", "full"]
optionsLabels: ["Limited", "Full"]
currentKey: Settings.data.screenRecorder.colorRange
onSelected: function (key) {
Settings.data.screenRecorder.colorRange = key
}
} }
} }
} }
@ -237,7 +162,7 @@ ColumnLayout {
// Audio Settings // Audio Settings
ColumnLayout { ColumnLayout {
spacing: Style.spacingTiny * scaling spacing: Style.marginLarge * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
@ -249,64 +174,26 @@ ColumnLayout {
} }
// Audio Source // Audio Source
ColumnLayout { NComboBox {
spacing: Style.marginSmall * scaling label: "Audio Source"
Layout.fillWidth: true description: "Audio source to capture during recording"
Layout.topMargin: Style.marginSmall * scaling optionsKeys: ["default_output", "default_input", "both"]
optionsLabels: ["System Audio", "Microphone", "System Audio + Microphone"]
NText { currentKey: Settings.data.screenRecorder.audioSource
text: "Audio Source" onSelected: function (key) {
Settings.data.screenRecorder.audioSource = key
font.weight: Style.fontWeightBold
color: Colors.textPrimary
}
NText {
text: "Audio source to capture during recording"
font.pointSize: Style.fontSizeSmall * scaling
color: Colors.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
NComboBox {
optionsKeys: ["default_output", "default_input", "both"]
optionsLabels: ["System Audio", "Microphone", "System Audio + Microphone"]
currentKey: Settings.data.screenRecorder.audioSource
onSelected: function (key) {
Settings.data.screenRecorder.audioSource = key
}
} }
} }
// Audio Codec // Audio Codec
ColumnLayout { NComboBox {
spacing: Style.marginSmall * scaling label: "Audio Codec"
Layout.fillWidth: true description: "Opus is recommended for best performance and smallest audio size"
Layout.topMargin: Style.marginSmall * scaling optionsKeys: ["opus", "aac"]
optionsLabels: ["OPUS", "AAC"]
NText { currentKey: Settings.data.screenRecorder.audioCodec
text: "Audio Codec" onSelected: function (key) {
font.pointSize: 13 Settings.data.screenRecorder.audioCodec = key
font.weight: Style.fontWeightBold
color: Colors.textPrimary
}
NText {
text: "Opus is recommended for best performance and smallest audio size"
font.pointSize: 12
color: Colors.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
NComboBox {
optionsKeys: ["opus", "aac"]
optionsLabels: ["OPUS", "AAC"]
currentKey: Settings.data.screenRecorder.audioCodec
onSelected: function (key) {
Settings.data.screenRecorder.audioCodec = key
}
} }
} }
} }

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

@ -64,7 +64,7 @@ ColumnLayout {
// Time section // Time section
ColumnLayout { ColumnLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginLarge * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {

148
Widgets/NComboBox.qml
View file

@ -4,99 +4,129 @@ import QtQuick.Layouts
import qs.Services import qs.Services
import qs.Widgets import qs.Widgets
ComboBox { ColumnLayout {
id: root id: root
readonly property real scaling: Scaling.scale(screen) readonly property real scaling: Scaling.scale(screen)
readonly property real preferredHeight: Style.baseWidgetSize * 1.25 * scaling readonly property real preferredHeight: Style.baseWidgetSize * 1.25 * scaling
property string label: ""
property string description: ""
property list<string> optionsKeys: [] property list<string> optionsKeys: []
property list<string> optionsLabels: [] property list<string> optionsLabels: []
property string currentKey: '' property string currentKey: ''
signal selected(string key) signal selected(string key)
spacing: Style.marginSmall * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: height
model: optionsKeys ColumnLayout {
currentIndex: model.indexOf(currentKey) id: mainColumn
onActivated: { spacing: Style.marginTiniest * scaling
root.selected(model[currentIndex]) Layout.fillWidth: true
}
// Rounded background NText {
background: Rectangle { text: label
implicitWidth: 120 * scaling font.pointSize: Style.fontSizeMedium * scaling
implicitHeight: preferredHeight font.weight: Style.fontWeightBold
color: Colors.surfaceVariant color: Colors.textPrimary
border.color: root.activeFocus ? Colors.hover : Colors.outline }
border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusMedium * scaling
}
// Label (currently selected) NText {
contentItem: NText { text: description
leftPadding: Style.marginLarge * scaling font.pointSize: Style.fontSizeSmall * scaling
rightPadding: root.indicator.width + Style.marginLarge * scaling color: Colors.textSecondary
font.pointSize: Style.fontSizeMedium * scaling wrapMode: Text.WordWrap
font.weight: Style.fontWeightBold Layout.fillWidth: true
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
text: {
return root.optionsLabels[root.currentIndex]
} }
} }
// Drop down indicator ComboBox {
indicator: NText { id: combo
x: root.width - width - Style.marginMedium * scaling
y: root.topPadding + (root.availableHeight - height) / 2
text: "arrow_drop_down"
font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXL * scaling
}
popup: Popup { Layout.fillWidth: true
y: root.height Layout.preferredHeight: height
width: root.width
implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginMedium * scaling * 2)
padding: Style.marginMedium * scaling
contentItem: ListView { model: optionsKeys
clip: true currentIndex: model.indexOf(currentKey)
implicitHeight: contentHeight onActivated: {
model: root.popup.visible ? root.delegateModel : null root.selected(model[combo.currentIndex])
currentIndex: root.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator {}
} }
// Rounded background
background: Rectangle { background: Rectangle {
implicitWidth: 120 * scaling
implicitHeight: preferredHeight
color: Colors.surfaceVariant color: Colors.surfaceVariant
border.color: Colors.outline border.color: root.activeFocus ? Colors.hover : Colors.outline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
} }
}
delegate: ItemDelegate {
width: root.width
highlighted: root.highlightedIndex === index
// Label (currently selected)
contentItem: NText { contentItem: NText {
text: { leftPadding: Style.marginLarge * scaling
return root.optionsLabels[root.model.indexOf(modelData)] rightPadding: combo.indicator.width + Style.marginLarge * scaling
}
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
color: highlighted ? Colors.backgroundPrimary : Colors.textPrimary font.weight: Style.fontWeightBold
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
text: {
return root.optionsLabels[combo.currentIndex]
}
} }
background: Rectangle { // Drop down indicator
width: root.width - Style.marginMedium * scaling * 3 indicator: NText {
color: highlighted ? Colors.hover : "transparent" x: root.width - width - Style.marginMedium * scaling
radius: Style.radiusSmall * scaling y: root.topPadding + (root.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
implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginMedium * scaling * 2)
padding: Style.marginMedium * scaling
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: combo.popup.visible ? combo.delegateModel : null
currentIndex: combo.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator {}
}
background: Rectangle {
color: Colors.surfaceVariant
border.color: Colors.outline
border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusMedium * scaling
}
}
delegate: ItemDelegate {
width: root.width
highlighted: root.highlightedIndex === index
contentItem: NText {
text: {
return root.optionsLabels[combo.model.indexOf(modelData)]
}
font.pointSize: Style.fontSizeMedium * scaling
color: highlighted ? Colors.backgroundPrimary : Colors.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
width: root.width - Style.marginMedium * scaling * 3
color: highlighted ? Colors.hover : "transparent"
radius: Style.radiusSmall * scaling
}
} }
} }
} }