diff --git a/modules/widgets/settingsapp/Appearance.qml b/modules/widgets/settingsapp/Appearance.qml index 7dccba5..948b9c1 100644 --- a/modules/widgets/settingsapp/Appearance.qml +++ b/modules/widgets/settingsapp/Appearance.qml @@ -4,7 +4,6 @@ import qs.reusables import QtQuick.Layouts import qs.settings import Quickshell.Widgets -import QtQuick.Controls import QtQuick.Dialogs ClippingWrapperRectangle { @@ -35,9 +34,10 @@ ClippingWrapperRectangle { anchors.fill: parent ClippingWrapperRectangle { id: fontWrapper + Layout.fillWidth: true leftMargin: 10 - rightMargin: 10 - implicitWidth: 300 + rightMargin: 15 + implicitWidth: parent.implicitWidth - 20 topLeftRadius: 12 topRightRadius: 12 bottomRightRadius: 4 @@ -50,12 +50,12 @@ ClippingWrapperRectangle { spacing: 40 CustomText { id: fontText - text: "current font: " + Settings.config.font + text: "Current font" Layout.fillWidth: true } CustomButton { id: fontPickerButton - customText: "pick font" + customText: Settings.config.font implicitHeight: fontWrapper.implicitHeight - 10 onClicked: fontPicker.open() } @@ -63,12 +63,12 @@ ClippingWrapperRectangle { } ClippingWrapperRectangle { id: floatingWrapper + Layout.fillWidth: true leftMargin: 10 - rightMargin: 10 + rightMargin: 20 implicitHeight: 30 - implicitWidth: 300 - bottomLeftRadius: 12 - bottomRightRadius: 12 + bottomLeftRadius: 4 + bottomRightRadius: 4 topRightRadius: 4 topLeftRadius: 4 color: Colors.surfaceContainerHigh @@ -77,16 +77,202 @@ ClippingWrapperRectangle { spacing: 40 CustomText { id: floatingToggleText - text: "top bar floating" + text: "Top bar floating" Layout.fillWidth: true } CustomSwitch { + checked: Settings.config.floating implicitHeight: floatingWrapper.implicitHeight - 10 implicitWidth: 34 - onToggled: { - Settings.config.floating = !Settings.config.floating; + onClicked: { + Settings.config.floating = checked; + } + } + } + } + ClippingWrapperRectangle { + id: screenCornerWrapper + Layout.fillWidth: true + leftMargin: 10 + rightMargin: 20 + implicitHeight: 30 + bottomLeftRadius: 4 + bottomRightRadius: 4 + topRightRadius: 4 + topLeftRadius: 4 + color: Colors.surfaceContainerHigh + child: RowLayout { + id: screenCornerLayout + spacing: 40 + CustomText { + id: screenCornerText + text: "Show screen corners" + Layout.fillWidth: true + } + CustomSwitch { + checked: Settings.config.showScreenCorners + implicitHeight: floatingWrapper.implicitHeight - 10 + implicitWidth: 34 + onClicked: { + Settings.config.showScreenCorners = checked; + } + } + } + } + ClippingWrapperRectangle { + id: screenCornerRadiusWrapper + Layout.fillWidth: true + leftMargin: 10 + rightMargin: 15 + implicitHeight: 30 + bottomLeftRadius: 4 + bottomRightRadius: 4 + topRightRadius: 4 + topLeftRadius: 4 + color: Colors.surfaceContainerHigh + child: RowLayout { + id: screenCornerRadiusLayout + spacing: 5 + CustomText { + id: screenCornerRadiusText + text: "Screen corner radius" + Layout.fillWidth: true + } + CustomButton { + implicitHeight: screenCornerRadiusWrapper.implicitHeight - 10 + implicitWidth: 20 + onClicked: { + Settings.config.screenCornerRadius = Settings.config.screenCornerRadius + 1; + } + customText: "+" + Layout.rightMargin: 0 + } + CustomText { + text: Settings.config.screenCornerRadius + } + + CustomButton { + implicitHeight: barHeightWrapper.implicitHeight - 10 + implicitWidth: 20 + onClicked: { + Settings.config.screenCornerRadius = Settings.config.screenCornerRadius - 1; + } + customText: "-" + Layout.rightMargin: 0 + } + } + } + ClippingWrapperRectangle { + id: barHeightWrapper + Layout.fillWidth: true + leftMargin: 10 + rightMargin: 15 + implicitHeight: 30 + bottomLeftRadius: 4 + bottomRightRadius: 4 + topRightRadius: 4 + topLeftRadius: 4 + color: Colors.surfaceContainerHigh + child: RowLayout { + id: barControlsLayout + spacing: 5 + CustomText { + id: barControlsText + text: "Bar height" + Layout.fillWidth: true + } + CustomButton { + implicitHeight: barHeightWrapper.implicitHeight - 10 + implicitWidth: 20 + onClicked: { + Settings.config.barHeight = Settings.config.barHeight + 1; + } + customText: "+" + Layout.rightMargin: 0 + } + CustomText { + text: Settings.config.barHeight + } + + CustomButton { + implicitHeight: barHeightWrapper.implicitHeight - 10 + implicitWidth: 20 + onClicked: { + Settings.config.barHeight = Settings.config.barHeight - 1; + } + customText: "-" + Layout.rightMargin: 0 + } + } + } + ClippingWrapperRectangle { + id: barMarginWrapper + Layout.fillWidth: true + leftMargin: 10 + rightMargin: 15 + implicitHeight: 30 + bottomLeftRadius: 4 + bottomRightRadius: 4 + topRightRadius: 4 + topLeftRadius: 4 + color: Colors.surfaceContainerHigh + child: RowLayout { + id: barMarginLayout + spacing: 5 + CustomText { + id: barMarginText + text: "Bar margins" + Layout.fillWidth: true + } + CustomButton { + implicitHeight: barMarginWrapper.implicitHeight - 10 + implicitWidth: 20 + onClicked: { + Settings.config.margins = Settings.config.margins + 1; + } + customText: "+" + } + CustomText { + text: Settings.config.margins + } + + CustomButton { + implicitHeight: barHeightWrapper.implicitHeight - 10 + implicitWidth: 20 + onClicked: { + Settings.config.margins = Settings.config.margins - 1; + } + customText: "-" + } + } + } + ClippingWrapperRectangle { + id: translucencyWrapper + leftMargin: 10 + rightMargin: 10 + implicitHeight: 30 + bottomLeftRadius: 12 + bottomRightRadius: 12 + topRightRadius: 4 + topLeftRadius: 4 + color: Colors.surfaceContainerHigh + Layout.fillWidth: true + RowLayout { + id: translucencyLayout + CustomText { + id: translucencyText + text: "Bar trasnlucency" + Layout.fillWidth: true + } + CustomSlider { + from: 0.0 + to: 1.0 + value: Settings.config.translucency + implicitWidth: 100 + implicitHeight: translucencyWrapper.implicitHeight - 10 + onMoved: { + Settings.config.translucency = position; } - Layout.rightMargin: 5 } } } diff --git a/reusables/CustomButton.qml b/reusables/CustomButton.qml index 4c76463..ddea156 100644 --- a/reusables/CustomButton.qml +++ b/reusables/CustomButton.qml @@ -18,6 +18,6 @@ Button { border.color: control.down ? Colors.primaryFixed : Colors.primary border.width: 1 radius: parent.implicitHeight / 2 - color: "transparent" + color: Colors.surfaceContainerLow } } diff --git a/reusables/CustomSlider.qml b/reusables/CustomSlider.qml new file mode 100644 index 0000000..b913556 --- /dev/null +++ b/reusables/CustomSlider.qml @@ -0,0 +1,35 @@ +import QtQuick +import QtQuick.Controls.Basic +import qs + +Slider { + id: control + + background: Rectangle { + x: control.leftPadding + y: control.topPadding + control.availableHeight / 2 - height / 2 + implicitWidth: control.implicitWidth + implicitHeight: 4 + width: control.availableWidth + height: implicitHeight + radius: 2 + color: Colors.surfaceContainerLow + + Rectangle { + width: control.visualPosition * parent.width + height: parent.height + color: Colors.primary + radius: 2 + } + } + + handle: Rectangle { + x: control.leftPadding + control.visualPosition * (control.availableWidth - width) + y: control.topPadding + control.availableHeight / 2 - height / 2 + implicitWidth: control.implicitHeight - 2 + implicitHeight: control.implicitHeight - 2 + radius: 13 + color: control.pressed ? Colors.primary : Colors.surfaceContainerLow + border.color: Colors.outline + } +}