NComboBox now includes label + description
still working on settings
This commit is contained in:
parent
bf3f0cf88d
commit
3997a369ec
5 changed files with 177 additions and 269 deletions
|
|
@ -29,7 +29,7 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: Style.marginMedium * scaling
|
||||
spacing: Style.marginLarge * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
|
|
@ -37,15 +37,8 @@ ColumnLayout {
|
|||
font.pointSize: Style.fontSizeXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Colors.textPrimary
|
||||
Layout.bottomMargin: Style.marginSmall * scaling
|
||||
}
|
||||
|
||||
// Elements section
|
||||
ColumnLayout {
|
||||
spacing: Style.marginSmall * scaling
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: Style.marginSmall * scaling
|
||||
|
||||
NToggle {
|
||||
label: "Show Active Window"
|
||||
description: "Display the title of the currently focused window below the bar"
|
||||
|
|
@ -94,4 +87,3 @@ ColumnLayout {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: Style.marginTiny * scaling
|
||||
spacing: Style.marginLarge * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
|
|
@ -37,7 +37,6 @@ ColumnLayout {
|
|||
font.pointSize: Style.fontSizeXL * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Colors.textPrimary
|
||||
Layout.bottomMargin: Style.marginSmall * scaling
|
||||
}
|
||||
|
||||
// Profile section
|
||||
|
|
@ -92,7 +91,7 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: Style.marginMedium * scaling
|
||||
spacing: Style.marginLarge * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ ColumnLayout {
|
|||
|
||||
// Video Settings
|
||||
ColumnLayout {
|
||||
spacing: Style.marginTiny * scaling
|
||||
spacing: Style.marginLarge * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
|
|
@ -106,58 +106,21 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
// Frame Rate
|
||||
ColumnLayout {
|
||||
spacing: Style.marginSmall * scaling
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: Style.marginSmall * scaling
|
||||
|
||||
ColumnLayout {
|
||||
spacing: Style.marginTiny * scaling
|
||||
NText {
|
||||
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"]
|
||||
label: "Frame Rate"
|
||||
description: "Target frame rate for screen recordings (default: 60)"
|
||||
optionsKeys: ["30", "60", "120", "240"]
|
||||
optionsLabels: ["30 FPS", "60 FPS", "120 FPS", "240 FPS"]
|
||||
currentKey: Settings.data.screenRecorder.frameRate
|
||||
onSelected: function (key) {
|
||||
Settings.data.screenRecorder.frameRate = key
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Video Quality
|
||||
ColumnLayout {
|
||||
spacing: Style.marginSmall * scaling
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: Style.marginSmall * scaling
|
||||
|
||||
NText {
|
||||
text: "Video Quality"
|
||||
font.pointSize: 13
|
||||
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 {
|
||||
label: "Video Quality"
|
||||
description: "Higher quality results in larger file sizes"
|
||||
optionsKeys: ["medium", "high", "very_high", "ultra"]
|
||||
optionsLabels: ["Medium", "High", "Very High", "Ultra"]
|
||||
currentKey: Settings.data.screenRecorder.quality
|
||||
|
|
@ -165,29 +128,11 @@ ColumnLayout {
|
|||
Settings.data.screenRecorder.quality = key
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Video Codec
|
||||
ColumnLayout {
|
||||
spacing: Style.marginTiny * scaling
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: Style.marginSmall * scaling
|
||||
|
||||
NText {
|
||||
text: "Video Codec"
|
||||
font.weight: Style.fontWeightBold
|
||||
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 {
|
||||
label: "Video Codec"
|
||||
description: "Different codecs offer different compression and compatibility"
|
||||
optionsKeys: ["h264", "hevc", "av1", "vp8", "vp9"]
|
||||
optionsLabels: ["H264", "HEVC", "AV1", "VP8", "VP9"]
|
||||
currentKey: Settings.data.screenRecorder.videoCodec
|
||||
|
|
@ -195,30 +140,11 @@ ColumnLayout {
|
|||
Settings.data.screenRecorder.videoCodec = key
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color Range
|
||||
ColumnLayout {
|
||||
spacing: Style.marginSmall * scaling
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: Style.marginSmall * scaling
|
||||
|
||||
NText {
|
||||
text: "Color Range"
|
||||
|
||||
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 {
|
||||
label: "Color Range"
|
||||
description: "Limited is recommended for better compatibility"
|
||||
optionsKeys: ["limited", "full"]
|
||||
optionsLabels: ["Limited", "Full"]
|
||||
currentKey: Settings.data.screenRecorder.colorRange
|
||||
|
|
@ -227,7 +153,6 @@ ColumnLayout {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NDivider {
|
||||
Layout.fillWidth: true
|
||||
|
|
@ -237,7 +162,7 @@ ColumnLayout {
|
|||
|
||||
// Audio Settings
|
||||
ColumnLayout {
|
||||
spacing: Style.spacingTiny * scaling
|
||||
spacing: Style.marginLarge * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
|
|
@ -249,27 +174,9 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
// Audio Source
|
||||
ColumnLayout {
|
||||
spacing: Style.marginSmall * scaling
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: Style.marginSmall * scaling
|
||||
|
||||
NText {
|
||||
text: "Audio Source"
|
||||
|
||||
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 {
|
||||
label: "Audio Source"
|
||||
description: "Audio source to capture during recording"
|
||||
optionsKeys: ["default_output", "default_input", "both"]
|
||||
optionsLabels: ["System Audio", "Microphone", "System Audio + Microphone"]
|
||||
currentKey: Settings.data.screenRecorder.audioSource
|
||||
|
|
@ -277,30 +184,11 @@ ColumnLayout {
|
|||
Settings.data.screenRecorder.audioSource = key
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Audio Codec
|
||||
ColumnLayout {
|
||||
spacing: Style.marginSmall * scaling
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: Style.marginSmall * scaling
|
||||
|
||||
NText {
|
||||
text: "Audio Codec"
|
||||
font.pointSize: 13
|
||||
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 {
|
||||
label: "Audio Codec"
|
||||
description: "Opus is recommended for best performance and smallest audio size"
|
||||
optionsKeys: ["opus", "aac"]
|
||||
optionsLabels: ["OPUS", "AAC"]
|
||||
currentKey: Settings.data.screenRecorder.audioCodec
|
||||
|
|
@ -313,4 +201,3 @@ ColumnLayout {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ ColumnLayout {
|
|||
|
||||
// Time section
|
||||
ColumnLayout {
|
||||
spacing: Style.marginMedium * scaling
|
||||
spacing: Style.marginLarge * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
NText {
|
||||
|
|
|
|||
|
|
@ -4,25 +4,54 @@ import QtQuick.Layouts
|
|||
import qs.Services
|
||||
import qs.Widgets
|
||||
|
||||
ComboBox {
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
readonly property real scaling: Scaling.scale(screen)
|
||||
readonly property real preferredHeight: Style.baseWidgetSize * 1.25 * scaling
|
||||
|
||||
property string label: ""
|
||||
property string description: ""
|
||||
property list<string> optionsKeys: []
|
||||
property list<string> optionsLabels: []
|
||||
property string currentKey: ''
|
||||
|
||||
signal selected(string key)
|
||||
|
||||
spacing: Style.marginSmall * scaling
|
||||
Layout.fillWidth: true
|
||||
|
||||
ColumnLayout {
|
||||
id: mainColumn
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
ComboBox {
|
||||
id: combo
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: height
|
||||
|
||||
model: optionsKeys
|
||||
currentIndex: model.indexOf(currentKey)
|
||||
onActivated: {
|
||||
root.selected(model[currentIndex])
|
||||
root.selected(model[combo.currentIndex])
|
||||
}
|
||||
|
||||
// Rounded background
|
||||
|
|
@ -38,13 +67,13 @@ ComboBox {
|
|||
// Label (currently selected)
|
||||
contentItem: NText {
|
||||
leftPadding: Style.marginLarge * scaling
|
||||
rightPadding: root.indicator.width + 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: {
|
||||
return root.optionsLabels[root.currentIndex]
|
||||
return root.optionsLabels[combo.currentIndex]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,8 +95,8 @@ ComboBox {
|
|||
contentItem: ListView {
|
||||
clip: true
|
||||
implicitHeight: contentHeight
|
||||
model: root.popup.visible ? root.delegateModel : null
|
||||
currentIndex: root.highlightedIndex
|
||||
model: combo.popup.visible ? combo.delegateModel : null
|
||||
currentIndex: combo.highlightedIndex
|
||||
ScrollIndicator.vertical: ScrollIndicator {}
|
||||
}
|
||||
|
||||
|
|
@ -85,7 +114,7 @@ ComboBox {
|
|||
|
||||
contentItem: NText {
|
||||
text: {
|
||||
return root.optionsLabels[root.model.indexOf(modelData)]
|
||||
return root.optionsLabels[combo.model.indexOf(modelData)]
|
||||
}
|
||||
font.pointSize: Style.fontSizeMedium * scaling
|
||||
color: highlighted ? Colors.backgroundPrimary : Colors.textPrimary
|
||||
|
|
@ -100,3 +129,4 @@ ComboBox {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue