diff --git a/Widgets/SettingsWindow/SettingsWindow.qml b/Widgets/SettingsWindow/SettingsWindow.qml index a7de10dc..5462e182 100644 --- a/Widgets/SettingsWindow/SettingsWindow.qml +++ b/Widgets/SettingsWindow/SettingsWindow.qml @@ -100,7 +100,7 @@ PanelWithOverlay { Component { id: recordingSettings - Recording { + ScreenRecorder { } } diff --git a/Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml b/Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml index f4263ee7..60b31247 100644 --- a/Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml +++ b/Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml @@ -1,8 +1,9 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts -import qs.Settings import qs.Components +import qs.Settings + Rectangle { id: root @@ -14,7 +15,6 @@ Rectangle { border.width: 1 * Theme.uiScale property bool useFahrenheit: Settings.settings.useFahrenheit - Rectangle { id: slider diff --git a/Widgets/SettingsWindow/Tabs/Recording.qml b/Widgets/SettingsWindow/Tabs/ScreenRecorder.qml similarity index 92% rename from Widgets/SettingsWindow/Tabs/Recording.qml rename to Widgets/SettingsWindow/Tabs/ScreenRecorder.qml index 34cb9ab0..ccb92508 100644 --- a/Widgets/SettingsWindow/Tabs/Recording.qml +++ b/Widgets/SettingsWindow/Tabs/ScreenRecorder.qml @@ -16,7 +16,7 @@ ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - padding: 0 + padding: 16 rightPadding: 12 clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff @@ -687,6 +687,7 @@ ColumnLayout { spacing: 8 Layout.fillWidth: true Layout.topMargin: 8 + Layout.bottomMargin: 16 Text { text: "Color Range" @@ -789,82 +790,14 @@ ColumnLayout { } - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - RowLayout { - spacing: 8 - Layout.fillWidth: true - - ColumnLayout { - spacing: 4 - Layout.fillWidth: true - - Text { - text: "Show Cursor" - font.pixelSize: 13 * Theme.uiScale - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Record mouse cursor in the video" - font.pixelSize: 12 * Theme.uiScale - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - } - - Rectangle { - id: cursorSwitch - - width: 52 - height: 32 - radius: 16 - color: Settings.settings.showCursor ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.showCursor ? Theme.accentPrimary : Theme.outline - border.width: 2 - - Rectangle { - id: cursorThumb - - width: 28 - height: 28 - radius: 14 - color: Theme.surface - border.color: Theme.outline - border.width: 1 - y: 2 - x: Settings.settings.showCursor ? cursorSwitch.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { - duration: 200 - easing.type: Easing.OutCubic - } - - } - - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.showCursor = !Settings.settings.showCursor; - } - } - - } - + ToggleOption { + label: "Show Cursor" + description: "Record mouse cursor in the video" + value: Settings.settings.showCursor + onToggled: function() { + Settings.settings.showCursor = !Settings.settings.showCursor; } - } - } Item { diff --git a/Widgets/SettingsWindow/Tabs/TimeWeather.qml b/Widgets/SettingsWindow/Tabs/TimeWeather.qml index 75921b63..3ae3205d 100644 --- a/Widgets/SettingsWindow/Tabs/TimeWeather.qml +++ b/Widgets/SettingsWindow/Tabs/TimeWeather.qml @@ -5,216 +5,75 @@ import qs.Components import qs.Settings import qs.Widgets.SettingsWindow.Tabs.Components -ScrollView { - anchors.fill: parent - padding: 0 - rightPadding: 12 - clip: true - ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - ScrollBar.vertical.policy: ScrollBar.AsNeeded - - ColumnLayout { - id: root - width: parent.availableWidth - spacing: 0 - anchors.top: parent.top - anchors.margins: 0 +ColumnLayout { + id: root - Item { - Layout.fillWidth: true - Layout.preferredHeight: 0 - } + spacing: 0 + anchors.fill: parent + anchors.margins: 0 + + ScrollView { + id: scrollView + + Layout.fillWidth: true + Layout.fillHeight: true + padding: 16 + rightPadding: 12 + clip: true + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + ScrollBar.vertical.policy: ScrollBar.AsNeeded ColumnLayout { - spacing: 4 - Layout.fillWidth: true + width: scrollView.availableWidth + spacing: 0 Text { text: "Time" font.pixelSize: 18 * Theme.uiScale font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 8 + Layout.bottomMargin: 16 * Theme.uiScale } - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - RowLayout { - spacing: 8 - Layout.fillWidth: true - - ColumnLayout { - spacing: 4 - Layout.fillWidth: true - - Text { - text: "Use 12 Hour Clock" - font.pixelSize: 13 * Theme.uiScale - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Display time in 12-hour format (e.g., 2:30 PM) instead of 24-hour format" - font.pixelSize: 12 * Theme.uiScale - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - } - - Rectangle { - id: use12HourClockSwitch - - width: 52 - height: 32 - radius: 16 - color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.outline - border.width: 2 - - Rectangle { - id: use12HourClockThumb - - width: 28 - height: 28 - radius: 14 - color: Theme.surface - border.color: Theme.outline - border.width: 1 - y: 2 - x: Settings.settings.use12HourClock ? use12HourClockSwitch.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { - duration: 200 - easing.type: Easing.OutCubic - } - - } - - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.use12HourClock = !Settings.settings.use12HourClock; - } - } - - } - + ToggleOption { + label: "Use 12 Hour Clock" + description: "Display time in 12-hour format (e.g., 2:30 PM) instead of 24-hour format" + value: Settings.settings.use12HourClock + onToggled: function() { + Settings.settings.use12HourClock = !Settings.settings.use12HourClock; } - } - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - RowLayout { - spacing: 8 - Layout.fillWidth: true - - ColumnLayout { - spacing: 4 - Layout.fillWidth: true - - Text { - text: "US Style Date" - font.pixelSize: 13 * Theme.uiScale - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Display dates in MM/DD/YYYY format instead of DD/MM/YYYY" - font.pixelSize: 12 * Theme.uiScale - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - } - - Rectangle { - id: reverseDayMonthSwitch - - width: 52 - height: 32 - radius: 16 - color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.outline - border.width: 2 - - Rectangle { - id: reverseDayMonthThumb - - width: 28 - height: 28 - radius: 14 - color: Theme.surface - border.color: Theme.outline - border.width: 1 - y: 2 - x: Settings.settings.reverseDayMonth ? reverseDayMonthSwitch.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { - duration: 200 - easing.type: Easing.OutCubic - } - - } - - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.reverseDayMonth = !Settings.settings.reverseDayMonth; - } - } - - } - + ToggleOption { + label: "US Style Date" + description: "Display dates in MM/DD/YYYY format instead of DD/MM/YYYY" + value: Settings.settings.reverseDayMonth + onToggled: function() { + Settings.settings.reverseDayMonth = !Settings.settings.reverseDayMonth; } - } - } - - Rectangle { - Layout.fillWidth: true - Layout.topMargin: 26 - Layout.bottomMargin: 18 - height: 1 - color: Theme.outline - opacity: 0.3 - } - - ColumnLayout { - spacing: 4 - Layout.fillWidth: true + Rectangle { + Layout.fillWidth: true + Layout.topMargin: 26 + Layout.bottomMargin: 18 + height: 1 + color: Theme.outline + opacity: 0.3 + } Text { text: "Weather" font.pixelSize: 18 * Theme.uiScale font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 8 + Layout.bottomMargin: 16 * Theme.uiScale } ColumnLayout { spacing: 8 Layout.fillWidth: true + Layout.bottomMargin: 8 * Theme.uiScale Text { text: "City" @@ -273,39 +132,39 @@ ScrollView { } - } - - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - RowLayout { + ColumnLayout { spacing: 8 Layout.fillWidth: true + Layout.topMargin: 8 - ColumnLayout { - spacing: 4 + RowLayout { + spacing: 8 Layout.fillWidth: true - Text { - text: "Temperature Unit" - font.pixelSize: 13 * Theme.uiScale - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Choose between Celsius and Fahrenheit" - font.pixelSize: 12 * Theme.uiScale - color: Theme.textSecondary - wrapMode: Text.WordWrap + ColumnLayout { + spacing: 4 Layout.fillWidth: true + + Text { + text: "Temperature Unit" + font.pixelSize: 13 * Theme.uiScale + font.bold: true + color: Theme.textPrimary + } + + Text { + text: "Choose between Celsius and Fahrenheit" + font.pixelSize: 12 * Theme.uiScale + color: Theme.textSecondary + wrapMode: Text.WordWrap + Layout.fillWidth: true + } + } - } + UnitSelector { + } - UnitSelector { } } @@ -314,8 +173,4 @@ ScrollView { } - Item { - Layout.fillWidth: true - Layout.fillHeight: true - } }