diff --git a/Components/Toggle.qml b/Components/Toggle.qml new file mode 100644 index 0000000..d2d0ce8 --- /dev/null +++ b/Components/Toggle.qml @@ -0,0 +1,88 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import qs.Components +import qs.Settings + +ColumnLayout { + id: root + + property string label: "" + property string description: "" + property bool value: false + property var onToggled: function() { + } + + Layout.fillWidth: true + + RowLayout { + Layout.fillWidth: true + + ColumnLayout { + spacing: 4 * Theme.uiScale + Layout.fillWidth: true + + Text { + text: label + font.pixelSize: 13 * Theme.uiScale + font.bold: true + color: Theme.textPrimary + } + + Text { + text: description + font.pixelSize: 12 * Theme.uiScale + color: Theme.textSecondary + wrapMode: Text.WordWrap + Layout.fillWidth: true + } + + } + + Rectangle { + id: switcher + + width: 52 * Theme.uiScale + height: 32 * Theme.uiScale + radius: 16 * Theme.uiScale + color: value ? Theme.accentPrimary : Theme.surfaceVariant + border.color: value ? Theme.accentPrimary : Theme.outline + border.width: 2 * Theme.uiScale + + Rectangle { + width: 28 * Theme.uiScale + height: 28 * Theme.uiScale + radius: 14 * Theme.uiScale + color: Theme.surface + border.color: Theme.outline + border.width: 1 * Theme.uiScale + y: 2 + x: value ? switcher.width - width - 2 : 2 + + Behavior on x { + NumberAnimation { + duration: 200 + easing.type: Easing.OutCubic + } + + } + + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + root.onToggled(); + } + } + + } + + } + + Rectangle { + height: 8 * Theme.uiScale + } + +} diff --git a/Widgets/SettingsWindow/Tabs/General.qml b/Widgets/SettingsWindow/Tabs/General.qml index a600643..6a064e2 100644 --- a/Widgets/SettingsWindow/Tabs/General.qml +++ b/Widgets/SettingsWindow/Tabs/General.qml @@ -4,115 +4,108 @@ import QtQuick.Layouts import qs.Components import qs.Settings -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 * Theme.uiScale - anchors.top: parent.top - anchors.margins: 0 * Theme.uiScale +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 * Theme.uiScale - Layout.fillWidth: true + width: scrollView.availableWidth + spacing: 0 Text { text: "Profile" font.pixelSize: 18 * Theme.uiScale font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 8 + Layout.bottomMargin: 16 * Theme.uiScale } - ColumnLayout { - spacing: 2 * Theme.uiScale + Text { + text: "Profile Image" + font.pixelSize: 13 * Theme.uiScale + font.bold: true + color: Theme.textPrimary + Layout.bottomMargin: 4 * Theme.uiScale + } + + Text { + text: "Your profile picture displayed in various places throughout the shell" + font.pixelSize: 12 * Theme.uiScale + color: Theme.textSecondary + wrapMode: Text.WordWrap + Layout.fillWidth: true + Layout.bottomMargin: 4 + } + + RowLayout { + spacing: 8 * Theme.uiScale Layout.fillWidth: true - Text { - text: "Profile Image" - font.pixelSize: 13 * Theme.uiScale - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Your profile picture displayed in various places throughout the shell" - font.pixelSize: 12 * Theme.uiScale - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - Layout.bottomMargin: 4 - } - - RowLayout { - spacing: 8 * Theme.uiScale - Layout.fillWidth: true + Rectangle { + width: 48 * Theme.uiScale + height: 48 * Theme.uiScale + radius: 24 * Theme.uiScale Rectangle { - width: 48 * Theme.uiScale - height: 48 * Theme.uiScale + anchors.fill: parent + color: "transparent" radius: 24 * Theme.uiScale - - Rectangle { - anchors.fill: parent - color: "transparent" - radius: 24 * Theme.uiScale - border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline - border.width: 2 * Theme.uiScale - z: 2 - } - - Avatar { - } - + border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline + border.width: 2 * Theme.uiScale + z: 2 } - Rectangle { - Layout.fillWidth: true - Layout.preferredHeight: 40 * Theme.uiScale - radius: 16 * Theme.uiScale - color: Theme.surfaceVariant - border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline - border.width: 1 * Theme.uiScale + Avatar { + } - TextInput { - id: profileImageInput + } + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 40 * Theme.uiScale + radius: 16 * Theme.uiScale + color: Theme.surfaceVariant + border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline + border.width: 1 * Theme.uiScale + + TextInput { + id: profileImageInput + + anchors.fill: parent + anchors.leftMargin: 12 * Theme.uiScale + anchors.rightMargin: 12 * Theme.uiScale + anchors.topMargin: 6 * Theme.uiScale + anchors.bottomMargin: 6 * Theme.uiScale + text: Settings.settings.profileImage + font.pixelSize: 13 * Theme.uiScale + color: Theme.textPrimary + verticalAlignment: TextInput.AlignVCenter + clip: true + selectByMouse: true + activeFocusOnTab: true + inputMethodHints: Qt.ImhUrlCharactersOnly + onTextChanged: { + Settings.settings.profileImage = text; + } + + MouseArea { anchors.fill: parent - anchors.leftMargin: 12 * Theme.uiScale - anchors.rightMargin: 12 * Theme.uiScale - anchors.topMargin: 6 * Theme.uiScale - anchors.bottomMargin: 6 * Theme.uiScale - text: Settings.settings.profileImage - font.pixelSize: 13 * Theme.uiScale - color: Theme.textPrimary - verticalAlignment: TextInput.AlignVCenter - clip: true - selectByMouse: true - activeFocusOnTab: true - inputMethodHints: Qt.ImhUrlCharactersOnly - onTextChanged: { - Settings.settings.profileImage = text; - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.IBeamCursor - onClicked: profileImageInput.forceActiveFocus() - } - + cursorShape: Qt.IBeamCursor + onClicked: profileImageInput.forceActiveFocus() } } @@ -121,257 +114,53 @@ ScrollView { } - } - - Rectangle { - Layout.fillWidth: true - Layout.topMargin: 26 * Theme.uiScale - Layout.bottomMargin: 18 * Theme.uiScale - height: 1 * Theme.uiScale - color: Theme.outline - opacity: 0.3 - } - - ColumnLayout { - spacing: 4 * Theme.uiScale - Layout.fillWidth: true + // Separator + Rectangle { + Layout.fillWidth: true + Layout.topMargin: 26 * Theme.uiScale + Layout.bottomMargin: 18 * Theme.uiScale + height: 1 * Theme.uiScale + color: Theme.outline + opacity: 0.3 + } Text { text: "User Interface" font.pixelSize: 18 * Theme.uiScale font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 8 + Layout.bottomMargin: 16 * Theme.uiScale } - ColumnLayout { - spacing: 4 * Theme.uiScale - Layout.fillWidth: true - - RowLayout { - spacing: 8 * Theme.uiScale - Layout.fillWidth: true - - ColumnLayout { - spacing: 4 * Theme.uiScale - Layout.fillWidth: true - - Text { - text: "Show Corners" - font.pixelSize: 13 * Theme.uiScale - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Display rounded corners" - font.pixelSize: 12 * Theme.uiScale - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - } - - Rectangle { - id: cornersSwitch - - width: 52 * Theme.uiScale - height: 32 * Theme.uiScale - radius: 16 * Theme.uiScale - color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.outline - border.width: 2 * Theme.uiScale - - Rectangle { - id: cornersThumb - - width: 28 * Theme.uiScale - height: 28 * Theme.uiScale - radius: 14 * Theme.uiScale - color: Theme.surface - border.color: Theme.outline - border.width: 1 * Theme.uiScale - y: 2 - x: Settings.settings.showCorners ? cornersSwitch.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { - duration: 200 - easing.type: Easing.OutCubic - } - - } - - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.showCorners = !Settings.settings.showCorners; - } - } - - } - + Toggle { + label: "Show Corners" + description: "Display rounded corners" + value: Settings.settings.showCorners + onToggled: function() { + Settings.settings.showCorners = !Settings.settings.showCorners; } - } - ColumnLayout { - spacing: 8 * Theme.uiScale - Layout.fillWidth: true - Layout.topMargin: 4 * Theme.uiScale - - RowLayout { - spacing: 8 * Theme.uiScale - Layout.fillWidth: true - - ColumnLayout { - spacing: 4 * Theme.uiScale - Layout.fillWidth: true - - Text { - text: "Show Dock" - font.pixelSize: 13 * Theme.uiScale - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Display a dock at the bottom of the screen for quick access to applications" - font.pixelSize: 12 * Theme.uiScale - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - } - - Rectangle { - id: dockSwitch - - width: 52 * Theme.uiScale - height: 32 * Theme.uiScale - radius: 16 * Theme.uiScale - color: Settings.settings.showDock ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.showDock ? Theme.accentPrimary : Theme.outline - border.width: 2 * Theme.uiScale - - Rectangle { - id: dockThumb - - width: 28 * Theme.uiScale - height: 28 * Theme.uiScale - radius: 14 * Theme.uiScale - color: Theme.surface - border.color: Theme.outline - border.width: 1 * Theme.uiScale - y: 2 - x: Settings.settings.showDock ? dockSwitch.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { - duration: 200 - easing.type: Easing.OutCubic - } - - } - - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.showDock = !Settings.settings.showDock; - } - } - - } - + Toggle { + label: "Show Dock" + description: "Display a dock at the bottom of the screen for quick access to applications" + value: Settings.settings.showDock + onToggled: function() { + Settings.settings.showDock = !Settings.settings.showDock; } - } - ColumnLayout { - spacing: 8 * Theme.uiScale - Layout.fillWidth: true - Layout.topMargin: 4 * Theme.uiScale - - RowLayout { - spacing: 8 * Theme.uiScale - Layout.fillWidth: true - - ColumnLayout { - spacing: 4 * Theme.uiScale - Layout.fillWidth: true - - Text { - text: "Dim Desktop" - font.pixelSize: 13 * Theme.uiScale - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Dim the desktop when panels or menus are open" - font.pixelSize: 12 * Theme.uiScale - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - } - - Rectangle { - id: dimSwitch - - width: 52 * Theme.uiScale - height: 32 * Theme.uiScale - radius: 16 * Theme.uiScale - color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.outline - border.width: 2 * Theme.uiScale - - Rectangle { - id: dimThumb - - width: 28 * Theme.uiScale - height: 28 * Theme.uiScale - radius: 14 * Theme.uiScale - color: Theme.surface - border.color: Theme.outline - border.width: 1 * Theme.uiScale - y: 2 - x: Settings.settings.dimPanels ? dimSwitch.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { - duration: 200 - easing.type: Easing.OutCubic - } - - } - - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.dimPanels = !Settings.settings.dimPanels; - } - } - - } - + Toggle { + label: "Dim Desktop" + description: "Dim the desktop when panels or menus are open" + value: Settings.settings.dimPanels + onToggled: function() { + Settings.settings.dimPanels = !Settings.settings.dimPanels; } - } + } } } -} +