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

NComBox: refactored to follow the QML way, should help with bindings.

Browse source
This commit is contained in:
quadbyte 2025-08-15 08:19:18 -04:00
parent a1cd673fb5
commit 3f3a13d254
8 changed files with 267 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

40
Modules/Demo/DemoPanel.qml
View file

@ -221,12 +221,40 @@ NLoader {
NComboBox { NComboBox {
label: "Animal" label: "Animal"
description: "What's your favorite" description: "What's your favorite?"
optionsKeys: ["cat", "dog", "bird", "monkey", "fish", "turtle", "elephant", "tiger"] model: ListModel {
optionsLabels: ["Cat", "Dog", "Bird", "Monkey", "Fish", "Turtle", "Elephant", "Tiger"] ListElement {
currentKey: "cat" key: "cat"
onSelected: function (value) { name: "Cat"
console.log("[DemoPanel] NComboBox: selected ", value) }
ListElement {
key: "dog"
name: "Dog"
}
ListElement {
key: "bird"
name: "Bird"
}
ListElement {
key: "fish"
name: "Fish"
}
ListElement {
key: "turtle"
name: "Turtle"
}
ListElement {
key: "elephant"
name: "Elephant"
}
ListElement {
key: "tiger"
name: "Tiger"
}
}
currentKey: "dog"
onSelected: function (key) {
console.log("[DemoPanel] NComboBox: selected ", key)
} }
} }

12
Modules/Settings/Tabs/AudioTab.qml
View file

@ -256,8 +256,16 @@ ColumnLayout {
id: audioVisualizerCombo id: audioVisualizerCombo
label: "Visualization Type" label: "Visualization Type"
description: "Choose a visualization type for media playback" description: "Choose a visualization type for media playback"
optionsKeys: ["none", "linear"] model: ListModel {
optionsLabels: ["None", "Linear"] ListElement {
key: "none"
name: "None"
}
ListElement {
key: "linear"
name: "Linear"
}
}
currentKey: Settings.data.audio.visualizerType currentKey: Settings.data.audio.visualizerType
onSelected: function (key) { onSelected: function (key) {
Settings.data.audio.visualizerType = key Settings.data.audio.visualizerType = key

105
Modules/Settings/Tabs/ScreenRecorderTab.qml
View file

@ -95,8 +95,24 @@ ColumnLayout {
NComboBox { NComboBox {
label: "Frame Rate" label: "Frame Rate"
description: "Target frame rate for screen recordings (default: 60)" description: "Target frame rate for screen recordings (default: 60)"
optionsKeys: ["30", "60", "120", "240"] model: ListModel {
optionsLabels: ["30 FPS", "60 FPS", "120 FPS", "240 FPS"] ListElement {
key: "30"
name: "30 FPS"
}
ListElement {
key: "60"
name: "60 FPS"
}
ListElement {
key: "120"
name: "120 FPS"
}
ListElement {
key: "240"
name: "240 FPS"
}
}
currentKey: Settings.data.screenRecorder.frameRate currentKey: Settings.data.screenRecorder.frameRate
onSelected: function (key) { onSelected: function (key) {
Settings.data.screenRecorder.frameRate = key Settings.data.screenRecorder.frameRate = key
@ -107,8 +123,24 @@ ColumnLayout {
NComboBox { NComboBox {
label: "Video Quality" label: "Video Quality"
description: "Higher quality results in larger file sizes" description: "Higher quality results in larger file sizes"
optionsKeys: ["medium", "high", "very_high", "ultra"] model: ListModel {
optionsLabels: ["Medium", "High", "Very High", "Ultra"] ListElement {
key: "medium"
name: "Medium"
}
ListElement {
key: "high"
name: "High"
}
ListElement {
key: "very_high"
name: "Very High"
}
ListElement {
key: "ultra"
name: "Ultra"
}
}
currentKey: Settings.data.screenRecorder.quality currentKey: Settings.data.screenRecorder.quality
onSelected: function (key) { onSelected: function (key) {
Settings.data.screenRecorder.quality = key Settings.data.screenRecorder.quality = key
@ -119,8 +151,28 @@ ColumnLayout {
NComboBox { NComboBox {
label: "Video Codec" label: "Video Codec"
description: "Different codecs offer different compression and compatibility" description: "Different codecs offer different compression and compatibility"
optionsKeys: ["h264", "hevc", "av1", "vp8", "vp9"] model: ListModel {
optionsLabels: ["H264", "HEVC", "AV1", "VP8", "VP9"] ListElement {
key: "h264"
name: "H264"
}
ListElement {
key: "hevc"
name: "HEVC"
}
ListElement {
key: "av1"
name: "AV1"
}
ListElement {
key: "vp8"
name: "VP8"
}
ListElement {
key: "vp9"
name: "VP9"
}
}
currentKey: Settings.data.screenRecorder.videoCodec currentKey: Settings.data.screenRecorder.videoCodec
onSelected: function (key) { onSelected: function (key) {
Settings.data.screenRecorder.videoCodec = key Settings.data.screenRecorder.videoCodec = key
@ -131,8 +183,16 @@ ColumnLayout {
NComboBox { NComboBox {
label: "Color Range" label: "Color Range"
description: "Limited is recommended for better compatibility" description: "Limited is recommended for better compatibility"
optionsKeys: ["limited", "full"] model: ListModel {
optionsLabels: ["Limited", "Full"] ListElement {
key: "limited"
name: "Limited"
}
ListElement {
key: "full"
name: "Full"
}
}
currentKey: Settings.data.screenRecorder.colorRange currentKey: Settings.data.screenRecorder.colorRange
onSelected: function (key) { onSelected: function (key) {
Settings.data.screenRecorder.colorRange = key Settings.data.screenRecorder.colorRange = key
@ -163,8 +223,20 @@ ColumnLayout {
NComboBox { NComboBox {
label: "Audio Source" label: "Audio Source"
description: "Audio source to capture during recording" description: "Audio source to capture during recording"
optionsKeys: ["default_output", "default_input", "both"] model: ListModel {
optionsLabels: ["System Audio", "Microphone", "System Audio + Microphone"] ListElement {
key: "default_output"
name: "System Output"
}
ListElement {
key: "default_input"
name: "Microphone Input"
}
ListElement {
key: "both"
name: "System Output + Microphone Input"
}
}
currentKey: Settings.data.screenRecorder.audioSource currentKey: Settings.data.screenRecorder.audioSource
onSelected: function (key) { onSelected: function (key) {
Settings.data.screenRecorder.audioSource = key Settings.data.screenRecorder.audioSource = key
@ -175,8 +247,17 @@ ColumnLayout {
NComboBox { NComboBox {
label: "Audio Codec" label: "Audio Codec"
description: "Opus is recommended for best performance and smallest audio size" description: "Opus is recommended for best performance and smallest audio size"
optionsKeys: ["opus", "aac"] model: ListModel {
optionsLabels: ["OPUS", "AAC"] ListElement {
key: "opus"
name: "Opus"
}
ListElement {
key: "aac"
name: "AAC"
}
}
currentKey: Settings.data.screenRecorder.audioCodec currentKey: Settings.data.screenRecorder.audioCodec
onSelected: function (key) { onSelected: function (key) {
Settings.data.screenRecorder.audioCodec = key Settings.data.screenRecorder.audioCodec = key

80
Modules/Settings/Tabs/WallpaperTab.qml
View file

@ -183,8 +183,24 @@ ColumnLayout {
NComboBox { NComboBox {
label: "Resize Mode" label: "Resize Mode"
description: "How SWWW should resize wallpapers to fit the screen" description: "How SWWW should resize wallpapers to fit the screen"
optionsKeys: ["no", "crop", "fit", "stretch"] model: ListModel {
optionsLabels: ["No", "Crop", "Fit", "Stretch"] ListElement {
key: "no"
name: "No"
}
ListElement {
key: "crop"
name: "Crop"
}
ListElement {
key: "fit"
name: "Fit"
}
ListElement {
key: "stretch"
name: "Stretch"
}
}
currentKey: Settings.data.wallpaper.swww.resizeMethod currentKey: Settings.data.wallpaper.swww.resizeMethod
onSelected: function (key) { onSelected: function (key) {
Settings.data.wallpaper.swww.resizeMethod = key Settings.data.wallpaper.swww.resizeMethod = key
@ -195,8 +211,64 @@ ColumnLayout {
NComboBox { NComboBox {
label: "Transition Type" label: "Transition Type"
description: "Animation type when switching between wallpapers" description: "Animation type when switching between wallpapers"
optionsKeys: ["none", "simple", "fade", "left", "right", "top", "bottom", "wipe", "wave", "grow", "center", "any", "outer", "random"] model: ListModel {
optionsLabels: ["None", "Simple", "Fade", "Left", "Right", "Top", "Bottom", "Wipe", "Wave", "Grow", "Center", "Any", "Outer", "Random"] ListElement {
key: "none"
name: "None"
}
ListElement {
key: "simple"
name: "Simple"
}
ListElement {
key: "fade"
name: "Fade"
}
ListElement {
key: "left"
name: "Left"
}
ListElement {
key: "right"
name: "Right"
}
ListElement {
key: "top"
name: "Top"
}
ListElement {
key: "bottom"
name: "Bottom"
}
ListElement {
key: "wipe"
name: "Wipe"
}
ListElement {
key: "wave"
name: "Wave"
}
ListElement {
key: "grow"
name: "Grow"
}
ListElement {
key: "center"
name: "Center"
}
ListElement {
key: "any"
name: "Any"
}
ListElement {
key: "outer"
name: "Outer"
}
ListElement {
key: "random"
name: "Random"
}
}
currentKey: Settings.data.wallpaper.swww.transitionType currentKey: Settings.data.wallpaper.swww.transitionType
onSelected: function (key) { onSelected: function (key) {
Settings.data.wallpaper.swww.transitionType = key Settings.data.wallpaper.swww.transitionType = key

2
Services/ColorSchemes.qml
View file

@ -9,7 +9,7 @@ Singleton {
id: root id: root
Component.onCompleted: { Component.onCompleted: {
console.log("[ColorSchemes] Service initialized") console.log("[ColorSchemes] Service started")
loadColorSchemes() loadColorSchemes()
} }

2
Services/Settings.qml
View file

@ -70,7 +70,6 @@ Singleton {
property bool showActiveWindowIcon: false property bool showActiveWindowIcon: false
property bool showSystemInfo: false property bool showSystemInfo: false
property bool showMedia: false property bool showMedia: false
// New: optional taskbar visibility in bar
property bool showTaskbar: false property bool showTaskbar: false
property list<string> monitors: [] property list<string> monitors: []
} }
@ -107,7 +106,6 @@ Singleton {
property string quality: "very_high" property string quality: "very_high"
property string colorRange: "limited" property string colorRange: "limited"
property bool showCursor: true property bool showCursor: true
// New: optional audio source selection (default: system output)
property string audioSource: "default_output" property string audioSource: "default_output"
} }

4
Services/Wallpapers.qml
View file

@ -9,7 +9,7 @@ Singleton {
id: root id: root
Component.onCompleted: { Component.onCompleted: {
console.log("[Wallpapers] Service initialized") console.log("[Wallpapers] Service started")
loadWallpapers() loadWallpapers()
// Wallpaper is set when the settings are loaded. // Wallpaper is set when the settings are loaded.
@ -23,7 +23,7 @@ Singleton {
// SWWW // SWWW
property string transitionType: Settings.data.wallpaper.swww.transitionType property string transitionType: Settings.data.wallpaper.swww.transitionType
property var randomChoices: ["simple", "fade", "left", "right", "top", "bottom", "wipe", "wave", "grow", "center", "any", "outer"] property var randomChoices: ["simple", "fade", "left", "right", "top", "bottom", "wipe", "wave", "grow", "center", "any", "outer"]
function loadWallpapers() { function loadWallpapers() {
console.log("[Wallpapers] Load Wallpapers") console.log("[Wallpapers] Load Wallpapers")
scanning = true scanning = true

87
Widgets/NComboBox.qml
View file

@ -12,8 +12,9 @@ ColumnLayout {
property string label: "" property string label: ""
property string description: "" property string description: ""
property list<string> optionsKeys: [] property ListModel model: {
property list<string> optionsLabels: []
}
property string currentKey: '' property string currentKey: ''
signal selected(string key) signal selected(string key)
@ -24,14 +25,12 @@ ColumnLayout {
ColumnLayout { ColumnLayout {
spacing: Style.marginTiniest * scaling spacing: Style.marginTiniest * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: label text: label
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Colors.mOnSurface color: Colors.mOnSurface
} }
NText { NText {
text: description text: description
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
@ -40,19 +39,25 @@ ColumnLayout {
} }
} }
function findIndexByKey(key) {
for (var i = 0; i < root.model.count; i++) {
if (root.model.get(i).key === key) {
return i
}
}
return -1
}
ComboBox { ComboBox {
id: combo id: combo
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: height Layout.preferredHeight: height
model: model
model: optionsKeys currentIndex: findIndexByKey(currentKey)
currentIndex: model.indexOf(currentKey)
onActivated: { onActivated: {
root.selected(model[combo.currentIndex]) root.selected(model.get(combo.currentIndex).key)
} }
// Rounded background
background: Rectangle { background: Rectangle {
implicitWidth: 120 * scaling implicitWidth: 120 * scaling
implicitHeight: preferredHeight implicitHeight: preferredHeight
@ -62,18 +67,16 @@ ColumnLayout {
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
} }
// Label (currently selected)
contentItem: NText { contentItem: NText {
leftPadding: Style.marginLarge * scaling leftPadding: Style.marginLarge * scaling
rightPadding: combo.indicator.width + Style.marginLarge * scaling rightPadding: combo.indicator.width + Style.marginLarge * scaling
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
text: (combo.currentIndex >= 0 text: (combo.currentIndex >= 0 && combo.currentIndex < root.model.count) ? root.model.get(
&& combo.currentIndex < root.optionsLabels.length) ? root.optionsLabels[combo.currentIndex] : "" combo.currentIndex).name : ""
} }
// Drop down indicator
indicator: NText { indicator: NText {
x: combo.width - width - Style.marginMedium * scaling x: combo.width - width - Style.marginMedium * scaling
y: combo.topPadding + (combo.availableHeight - height) / 2 y: combo.topPadding + (combo.availableHeight - height) / 2
@ -89,11 +92,43 @@ ColumnLayout {
padding: Style.marginMedium * scaling padding: Style.marginMedium * scaling
contentItem: ListView { contentItem: ListView {
property var comboBoxRoot: root
clip: true clip: true
implicitHeight: contentHeight implicitHeight: contentHeight
model: combo.popup.visible ? combo.delegateModel : null model: combo.popup.visible ? root.model : null
currentIndex: combo.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator {} ScrollIndicator.vertical: ScrollIndicator {}
delegate: ItemDelegate {
width: combo.width
hoverEnabled: true
highlighted: ListView.view.currentIndex === index
onHoveredChanged: {
if (hovered) {
ListView.view.currentIndex = index
}
}
onClicked: {
ListView.view.comboBoxRoot.selected(ListView.view.comboBoxRoot.model.get(index).key)
combo.currentIndex = index
combo.popup.close()
}
contentItem: NText {
text: name
font.pointSize: Style.fontSizeMedium * scaling
color: highlighted ? Colors.mSurface : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
width: combo.width - Style.marginMedium * scaling * 3
color: highlighted ? Colors.mTertiary : "transparent"
radius: Style.radiusSmall * scaling
}
}
} }
background: Rectangle { background: Rectangle {
@ -103,25 +138,5 @@ ColumnLayout {
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
} }
} }
delegate: ItemDelegate {
width: combo.width
highlighted: combo.highlightedIndex === index
contentItem: NText {
text: (combo.model.indexOf(modelData) >= 0 && combo.model.indexOf(
modelData) < root.optionsLabels.length) ? root.optionsLabels[combo.model.indexOf(modelData)] : ""
font.pointSize: Style.fontSizeMedium * scaling
color: highlighted ? Colors.mSurface : Colors.mOnSurface
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
width: combo.width - Style.marginMedium * scaling * 3
color: highlighted ? Colors.mTertiary : "transparent"
radius: Style.radiusSmall * scaling
}
}
} }
} }