From bf3f0cf88d6137749a877d7659af4fa9522af277 Mon Sep 17 00:00:00 2001 From: quadbyte Date: Tue, 12 Aug 2025 17:31:09 -0400 Subject: [PATCH] Settings ScreenRecorder wip --- Modules/Settings/Tabs/ScreenRecorder.qml | 99 +++++++++++++----------- Modules/Settings/Tabs/TimeWeather.qml | 40 ++++------ Widgets/NToggle.qml | 2 +- 3 files changed, 69 insertions(+), 72 deletions(-) diff --git a/Modules/Settings/Tabs/ScreenRecorder.qml b/Modules/Settings/Tabs/ScreenRecorder.qml index 7aa1e77..f9346a8 100644 --- a/Modules/Settings/Tabs/ScreenRecorder.qml +++ b/Modules/Settings/Tabs/ScreenRecorder.qml @@ -46,28 +46,44 @@ ColumnLayout { Layout.fillWidth: true Layout.topMargin: Style.marginSmall * scaling - NText { - text: "Output Directory" - font.pointSize: 13 - font.weight: Style.fontWeightBold - color: Colors.textPrimary - } + ColumnLayout { + spacing: Style.marginTiny * scaling - NText { - text: "Directory where screen recordings will be saved" - font.pointSize: 12 - color: Colors.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true + 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 { text: Settings.data.screenRecorder.directory - Layout.fillWidth: true onEditingFinished: { Settings.data.screenRecorder.directory = text } } + + ColumnLayout { + spacing: Style.marginSmall * scaling + Layout.fillWidth: true + Layout.topMargin: Style.marginMedium * scaling + // Show Cursor + NToggle { + label: "Show Cursor" + description: "Record mouse cursor in the video" + value: Settings.data.screenRecorder.showCursor + onToggled: function (newValue) { + Settings.data.screenRecorder.showCursor = newValue + } + } + } } NDivider { @@ -78,7 +94,7 @@ ColumnLayout { // Video Settings ColumnLayout { - spacing: 4 + spacing: Style.marginTiny * scaling Layout.fillWidth: true NText { @@ -95,24 +111,24 @@ ColumnLayout { Layout.fillWidth: true Layout.topMargin: Style.marginSmall * scaling - NText { - text: "Frame Rate" - font.pointSize: 13 - font.weight: Style.fontWeightBold - color: Colors.textPrimary - } + 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: 12 - color: Colors.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true + 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", "240"] - optionsLabels: ["30 FPS", "60 FPS", "120 FPS", "240 FPS"] + 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 @@ -153,20 +169,19 @@ ColumnLayout { // Video Codec ColumnLayout { - spacing: 8 + spacing: Style.marginTiny * scaling Layout.fillWidth: true Layout.topMargin: Style.marginSmall * scaling NText { text: "Video Codec" - font.pointSize: 13 font.weight: Style.fontWeightBold color: Colors.textPrimary } NText { text: "Different codecs offer different compression and compatibility" - font.pointSize: 12 + font.pointSize: Style.fontSizeSmall * scaling color: Colors.textSecondary wrapMode: Text.WordWrap Layout.fillWidth: true @@ -190,14 +205,14 @@ ColumnLayout { NText { text: "Color Range" - font.pointSize: 13 + font.weight: Style.fontWeightBold color: Colors.textPrimary } NText { text: "Limited is recommended for better compatibility" - font.pointSize: 12 + font.pointSize: Style.fontSizeSmall * scaling color: Colors.textSecondary wrapMode: Text.WordWrap Layout.fillWidth: true @@ -227,7 +242,7 @@ ColumnLayout { NText { text: "Audio Settings" - font.pointSize: 18 + font.pointSize: Style.fontSizeXL * scaling font.weight: Style.fontWeightBold color: Colors.textPrimary Layout.bottomMargin: Style.marginSmall * scaling @@ -241,14 +256,14 @@ ColumnLayout { NText { text: "Audio Source" - font.pointSize: 13 + font.weight: Style.fontWeightBold color: Colors.textPrimary } NText { text: "Audio source to capture during recording" - font.pointSize: 12 + font.pointSize: Style.fontSizeSmall * scaling color: Colors.textSecondary wrapMode: Text.WordWrap Layout.fillWidth: true @@ -294,16 +309,6 @@ ColumnLayout { } } } - - // Show Cursor - NToggle { - label: "Show Cursor" - description: "Record mouse cursor in the video" - value: Settings.data.screenRecorder.showCursor - onToggled: function (newValue) { - Settings.data.screenRecorder.showCursor = newValue - } - } } } } diff --git a/Modules/Settings/Tabs/TimeWeather.qml b/Modules/Settings/Tabs/TimeWeather.qml index f8d43d7..383eeba 100644 --- a/Modules/Settings/Tabs/TimeWeather.qml +++ b/Modules/Settings/Tabs/TimeWeather.qml @@ -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 @@ -30,29 +29,22 @@ ColumnLayout { } ColumnLayout { - spacing: 4 + spacing: Style.marginTiny * scaling Layout.fillWidth: true NText { - text: "Time & Weather Settings" - font.pointSize: 18 + text: "Location" + font.pointSize: Style.fontSizeXL * scaling font.weight: Style.fontWeightBold color: Colors.textPrimary - Layout.bottomMargin: 8 + Layout.bottomMargin: Style.marginSmall * scaling } // Location section ColumnLayout { - spacing: 8 + spacing: Style.marginMedium * scaling Layout.fillWidth: true - Layout.topMargin: 8 - - NText { - text: "Location" - font.pointSize: 13 - font.weight: Style.fontWeightBold - color: Colors.textPrimary - } + Layout.topMargin: Style.marginSmall * scaling NTextInput { text: Settings.data.location.name @@ -66,18 +58,18 @@ ColumnLayout { NDivider { Layout.fillWidth: true - Layout.topMargin: 26 - Layout.bottomMargin: 18 + Layout.topMargin: Style.marginLarge * 2 * scaling + Layout.bottomMargin: Style.marginLarge * scaling } // Time section ColumnLayout { - spacing: 4 + spacing: Style.marginMedium * scaling Layout.fillWidth: true NText { text: "Time Format" - font.pointSize: 18 + font.pointSize: Style.fontSizeXL * scaling font.weight: Style.fontWeightBold color: Colors.textPrimary Layout.bottomMargin: 8 @@ -104,21 +96,21 @@ ColumnLayout { NDivider { Layout.fillWidth: true - Layout.topMargin: 26 - Layout.bottomMargin: 18 + Layout.topMargin: Style.marginLarge * 2 * scaling + Layout.bottomMargin: Style.marginLarge * scaling } // Weather section ColumnLayout { - spacing: 4 + spacing: Style.marginMedium * scaling Layout.fillWidth: true NText { text: "Weather" - font.pointSize: 18 + font.pointSize: Style.fontSizeXL * scaling font.weight: Style.fontWeightBold color: Colors.textPrimary - Layout.bottomMargin: 8 + Layout.bottomMargin: Style.marginSmall * scaling } NToggle { diff --git a/Widgets/NToggle.qml b/Widgets/NToggle.qml index 55d4e2e..9073f7c 100644 --- a/Widgets/NToggle.qml +++ b/Widgets/NToggle.qml @@ -18,7 +18,7 @@ RowLayout { Layout.fillWidth: true ColumnLayout { - spacing: 2 * scaling + spacing: Style.marginTiniest * scaling Layout.fillWidth: true NText {