make customswitch and extend settings app
This commit is contained in:
parent
169a202157
commit
10c34ffabc
99
modules/widgets/MainWindow.qml
Normal file
99
modules/widgets/MainWindow.qml
Normal file
@ -0,0 +1,99 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import QtQuick.Dialogs
|
||||
import Quickshell.Widgets
|
||||
import qs
|
||||
import qs.settings
|
||||
import qs.reusables
|
||||
|
||||
FloatingWindow {
|
||||
id: root
|
||||
visible: Settings.config.settingsShown
|
||||
onClosed: {
|
||||
Settings.config.settingsShown = false;
|
||||
}
|
||||
color: Colors.surface
|
||||
title: "qs-settings"
|
||||
implicitWidth: 800
|
||||
implicitHeight: 600
|
||||
ListModel {
|
||||
id: pageModel
|
||||
ListElement {
|
||||
text: "welcomePage"
|
||||
source: "WelcomePage.qml"
|
||||
}
|
||||
ListElement {
|
||||
text: "Appearance"
|
||||
source: "Appearance.qml"
|
||||
}
|
||||
ListElement {
|
||||
text: "Matugen"
|
||||
source: "Matugen.qml"
|
||||
}
|
||||
ListElement {
|
||||
text: "test"
|
||||
source: "WelcomePage.qml"
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
id: windowLayout
|
||||
clip: true
|
||||
anchors.fill: parent
|
||||
spacing: 10
|
||||
|
||||
ClippingWrapperRectangle {
|
||||
id: pageWrapper
|
||||
Layout.margins: 20
|
||||
Layout.fillHeight: true
|
||||
Layout.preferredWidth: 200
|
||||
Layout.rightMargin: 0
|
||||
margin: 20
|
||||
color: Colors.surfaceContainerLow
|
||||
radius: 12
|
||||
ListView {
|
||||
id: pageView
|
||||
clip: true
|
||||
model: pageModel
|
||||
delegate: pageDelegate
|
||||
Component {
|
||||
id: pageDelegate
|
||||
Rectangle {
|
||||
radius: 24
|
||||
color: ListView.isCurrentItem ? Colors.surfaceContainerHigh : "transparent"
|
||||
implicitHeight: 30
|
||||
implicitWidth: pageWrapper.width - 50
|
||||
required property var modelData
|
||||
required property int index
|
||||
CustomText {
|
||||
id: delegateText
|
||||
leftPadding: 10
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: parent.modelData.text
|
||||
}
|
||||
MouseArea {
|
||||
id: clickHandler
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onClicked: {
|
||||
contentLoader.source = parent.modelData.source;
|
||||
console.log(parent.index);
|
||||
pageView.currentIndex = parent.index;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loader {
|
||||
id: contentLoader
|
||||
Layout.leftMargin: 0
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
Layout.margins: 20
|
||||
source: pageModel.get(pageView.currentIndex).source
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -35,39 +35,50 @@ ClippingWrapperRectangle {
|
||||
id: fontWrapper
|
||||
radius: 14
|
||||
color: Colors.surfaceContainerHigh
|
||||
implicitHeight: fontLayout.implicitHeight + 10
|
||||
implicitWidth: fontLayout.implicitWidth + 10
|
||||
implicitHeight: 30
|
||||
implicitWidth: 300
|
||||
RowLayout {
|
||||
id: fontLayout
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
spacing: 10
|
||||
CustomText {
|
||||
id: fontText
|
||||
Layout.leftMargin: 20
|
||||
Layout.alignment: Qt.AlignLeft
|
||||
font.bold: true
|
||||
text: "current font: " + Settings.config.font
|
||||
}
|
||||
Rectangle {
|
||||
id: fontSelector
|
||||
Layout.rightMargin: 5
|
||||
implicitWidth: fontSelectorText.implicitWidth + 20
|
||||
implicitHeight: 20
|
||||
color: Colors.surfaceContainerHigh
|
||||
border.width: 2
|
||||
border.color: Colors.outline
|
||||
radius: 12
|
||||
CustomText {
|
||||
id: fontSelectorText
|
||||
anchors.centerIn: parent
|
||||
text: "Pick Font"
|
||||
}
|
||||
MouseArea {
|
||||
id: fontPickerOpener
|
||||
}
|
||||
Rectangle {
|
||||
id: floatingWrapper
|
||||
radius: 14
|
||||
color: Colors.surfaceContainerHigh
|
||||
implicitHeight: 30
|
||||
implicitWidth: 300
|
||||
RowLayout {
|
||||
id: floatingToggleLayout
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.LeftButton
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: fontPicker.open()
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
clip: true
|
||||
spacing: 10
|
||||
CustomText {
|
||||
id: floatingToggleText
|
||||
Layout.leftMargin: 20
|
||||
Layout.alignment: Qt.AlignLeft
|
||||
font.bold: true
|
||||
text: "top bar floating"
|
||||
}
|
||||
CustomSwitch {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
Layout.rightMargin: 20
|
||||
implicitHeight: 15
|
||||
implicitWidth: 30
|
||||
|
||||
onToggled: {
|
||||
Settings.config.floating = !Settings.config.floating;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
62
modules/widgets/settingsapp/FontButton.qml
Normal file
62
modules/widgets/settingsapp/FontButton.qml
Normal file
@ -0,0 +1,62 @@
|
||||
import qs.reusables
|
||||
import qs.settings
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs
|
||||
import QtQuick.Dialogs
|
||||
|
||||
Rectangle {
|
||||
id: fontButton
|
||||
FontDialog {
|
||||
id: fontPicker
|
||||
title: "qs-fontpicker"
|
||||
flags: FontDialog.NoButtons | FontDialog.MonospacedFonts
|
||||
|
||||
onAccepted: {
|
||||
Settings.config.font = selectedFont.family;
|
||||
Settings.config.fontSize = selectedFont.pointSize;
|
||||
}
|
||||
onSelectedFontChanged: {
|
||||
Settings.config.font = selectedFont.family;
|
||||
Settings.config.fontSize = selectedFont.pointSize;
|
||||
}
|
||||
}
|
||||
radius: 14
|
||||
color: Colors.surfaceContainerHigh
|
||||
implicitHeight: fontLayout.implicitHeight + 10
|
||||
implicitWidth: fontLayout.implicitWidth + 10
|
||||
RowLayout {
|
||||
id: fontLayout
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
clip: true
|
||||
spacing: 10
|
||||
CustomText {
|
||||
id: fontText
|
||||
font.bold: true
|
||||
text: "current font: " + Settings.config.font
|
||||
}
|
||||
Rectangle {
|
||||
id: fontSelector
|
||||
Layout.rightMargin: 5
|
||||
implicitWidth: fontSelectorText.implicitWidth + 20
|
||||
implicitHeight: 20
|
||||
color: Colors.surfaceContainerHigh
|
||||
border.width: 2
|
||||
border.color: Colors.outline
|
||||
radius: 12
|
||||
CustomText {
|
||||
id: fontSelectorText
|
||||
anchors.centerIn: parent
|
||||
text: "Pick Font"
|
||||
}
|
||||
MouseArea {
|
||||
id: fontPickerOpener
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.LeftButton
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: fontPicker.open()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
0
reusables/CustomButton.qml
Normal file
0
reusables/CustomButton.qml
Normal file
27
reusables/CustomSwitch.qml
Normal file
27
reusables/CustomSwitch.qml
Normal file
@ -0,0 +1,27 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls.Basic
|
||||
import qs
|
||||
|
||||
Switch {
|
||||
id: control
|
||||
indicator: Rectangle {
|
||||
implicitWidth: parent.implicitWidth
|
||||
implicitHeight: parent.implicitHeight
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
x: control.leftPadding
|
||||
y: parent.height / 2 - height / 2
|
||||
radius: 13
|
||||
color: control.checked ? Colors.surfaceContainerHighest : Colors.surfaceContainerHighest
|
||||
border.color: control.checked ? Colors.primary : Colors.onSurfaceColor
|
||||
|
||||
Rectangle {
|
||||
x: control.checked ? parent.width - width : 0
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: parent.implicitWidth / 2
|
||||
height: parent.implicitHeight
|
||||
radius: 13
|
||||
color: control.down ? Colors.surfaceContainerHighest : Colors.primary
|
||||
border.color: control.checked ? (control.down ? Colors.onSurfaceColor : Colors.primary) : "#999999"
|
||||
}
|
||||
}
|
||||
}
|
||||
24
reusables/customSwitch.qml
Normal file
24
reusables/customSwitch.qml
Normal file
@ -0,0 +1,24 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls.Basic
|
||||
|
||||
Switch {
|
||||
id: control
|
||||
|
||||
indicator: Rectangle {
|
||||
implicitWidth: 48
|
||||
implicitHeight: 26
|
||||
x: control.leftPadding
|
||||
y: parent.height / 2 - height / 2
|
||||
radius: 13
|
||||
border.color: control.checked ? "#17a81a" : "#cccccc"
|
||||
|
||||
Rectangle {
|
||||
x: control.checked ? parent.width - width : 0
|
||||
width: 26
|
||||
height: 26
|
||||
radius: 13
|
||||
color: control.down ? "#cccccc" : "#ffffff"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user