diff --git a/components/StyledComboBox.qml b/components/StyledComboBox.qml new file mode 100644 index 0000000..fff6670 --- /dev/null +++ b/components/StyledComboBox.qml @@ -0,0 +1,79 @@ +pragma ComponentBehavior: Bound + +import qs.config +import QtQuick +import QtQuick.Controls + +ComboBox { + id: control + + palette.button: Styling.theme.base200 + palette.buttonText: Styling.theme.basecontent + palette.highlight: Styling.theme.primary + palette.highlightedText: Styling.theme.primarycontent + palette.text: Styling.theme.basecontent + palette.window: Styling.theme.base200 + + implicitHeight: 40 + + delegate: ItemDelegate { + id: delegate + + required property var model + required property int index + + width: control.width + contentItem: StyledText { + text: delegate.model[control.textRole] + color: delegate.highlighted ? palette.highlightedText : palette.buttonText + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + background: Rectangle { + color: delegate.highlighted ? palette.highlight : palette.button + radius: Styling.theme.radiusSelector + } + highlighted: control.highlightedIndex === index + } + + contentItem: StyledText { + leftPadding: 12 + + text: control.displayText + color: control.hovered || control.down ? palette.highlightedText : palette.buttonText + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + implicitWidth: 120 + implicitHeight: 40 + color: control.hovered || control.down ? palette.highlight : palette.button + border.color: Styling.theme.base100 + border.width: control.visualFocus ? 2 : 1 + radius: Styling.theme.radiusSelector + } + + popup: Popup { + palette: control.palette + y: control.height - 1 + width: control.width + height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin) + padding: 1 + + contentItem: ListView { + clip: true + implicitHeight: contentHeight + 2 + model: control.popup.visible ? control.delegateModel : null + currentIndex: control.highlightedIndex + + ScrollIndicator.vertical: ScrollIndicator {} + } + + background: Rectangle { + color: palette.window + bottomLeftRadius: Styling.theme.radiusField + bottomRightRadius: Styling.theme.radiusField + } + } +} diff --git a/components/StyledRectangle.qml b/components/StyledRectangle.qml index aefab71..77ad318 100644 --- a/components/StyledRectangle.qml +++ b/components/StyledRectangle.qml @@ -3,7 +3,7 @@ import QtQuick Rectangle { radius: Styling.theme.radiusBox - color: Styling.theme.base100 + color: Styling.theme.base200 Behavior on color { ColorAnimation { duration: Styling.animations.speed.normal diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index f03879d..d64fe74 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -1,7 +1,9 @@ import qs.components +import qs.config import qs.services import QtQuick import QtQuick.Controls +import QtQuick.Layouts StyledPanelWindow { id: window @@ -10,13 +12,52 @@ StyledPanelWindow { visible: Visibility.configuration implicitWidth: 800 - implicitHeight: 800 - - ScrollView { - id: view + implicitHeight: 400 + ColumnLayout { + spacing: 0 anchors.fill: parent - background: Item {} + StyledText { + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + + text: "Configurations" + font.pixelSize: Styling.typography.textSize.xl + padding: 8 + } + + StyledRectangle { + id: titleBar + + Layout.fillWidth: true + Layout.preferredHeight: 4 + } + + ScrollView { + id: view + + Layout.fillHeight: true + padding: 24 + background: Item {} + + GridLayout { + + columnSpacing: Styling.layout.spacing.xl + + StyledText { + text: "Theme" + // font.bold: true + font.pixelSize: Styling.typography.textSize.lg + } + + StyledComboBox { + currentIndex: Theme.themes.indexOf(Theme.currentTheme) + model: Theme.themes + onActivated: index => { + Theme.currentTheme = Theme.themes[index]; + } + } + } + } } component Menus: QtObject { diff --git a/modules/configuration/ThemeConfig.qml b/modules/configuration/ThemeConfig.qml new file mode 100644 index 0000000..b2e4f9e --- /dev/null +++ b/modules/configuration/ThemeConfig.qml @@ -0,0 +1,5 @@ +import QtQuick +import QtQuick.Layouts +import Quickshell + +GridLayout {}