added audio and apps page in settings
This commit is contained in:
@@ -0,0 +1,96 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import Quickshell.Services.Pipewire
|
||||
import qs.Components
|
||||
import qs.Config
|
||||
|
||||
ItemList {
|
||||
id: root
|
||||
|
||||
property int currentId: -1
|
||||
property string iconName: "speaker"
|
||||
property var nodes: []
|
||||
|
||||
signal selected(node: PwNode)
|
||||
|
||||
last: true
|
||||
showList: true
|
||||
|
||||
delegate: Item {
|
||||
id: device
|
||||
|
||||
readonly property bool active: device.modelData?.id === root.currentId
|
||||
required property int index
|
||||
required property PwNode modelData
|
||||
|
||||
anchors.left: root.list.contentItem.left
|
||||
anchors.right: root.list.contentItem.right
|
||||
implicitHeight: deviceLayout.implicitHeight + deviceLayout.anchors.margins * 2
|
||||
|
||||
StateLayer {
|
||||
bottomLeftRadius: device.index === root?.list.count - 1 ? Appearance.rounding.large : radius
|
||||
bottomRightRadius: device.index === root?.list.count - 1 ? Appearance.rounding.large : radius
|
||||
radius: Appearance.rounding.extraSmall
|
||||
|
||||
onClicked: root.selected(device.modelData)
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: deviceLayout
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Appearance.padding.largeIncreased
|
||||
anchors.margins: Appearance.padding.large
|
||||
anchors.rightMargin: Appearance.padding.largeIncreased
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
CustomRect {
|
||||
color: device.active ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
|
||||
implicitHeight: devIcon.implicitHeight + Appearance.padding.normal * 2
|
||||
implicitWidth: implicitHeight
|
||||
radius: Appearance.rounding.full
|
||||
|
||||
MaterialIcon {
|
||||
id: devIcon
|
||||
|
||||
anchors.centerIn: parent
|
||||
color: device.active ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
|
||||
fill: device.active ? 1 : 0
|
||||
font.pointSize: Appearance.font.size.large
|
||||
text: root.iconName
|
||||
|
||||
Behavior on fill {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: Appearance.font.size.smaller
|
||||
text: device.modelData?.description || device.modelData?.name || qsTr("Unknown")
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
color: DynamicColors.palette.m3primary
|
||||
font.pointSize: Appearance.font.size.large
|
||||
opacity: device.active ? 1 : 0
|
||||
text: "check"
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
model: ScriptModel {
|
||||
values: [...root.nodes].sort((a, b) => (a.description || a.name || "").localeCompare(b.description || b.name || ""))
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
import QtQuick
|
||||
import ZShell.Blobs
|
||||
import qs.Components
|
||||
import qs.Config
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property real animDriver
|
||||
property alias color: blobGroup.color
|
||||
default required property Item content
|
||||
property bool hoverOverride
|
||||
readonly property alias hovered: btn.containsMouse
|
||||
property alias icon: icon.text
|
||||
property bool open
|
||||
property int padding
|
||||
property bool pressOverride
|
||||
property int topMovement: Appearance.padding.large
|
||||
|
||||
implicitHeight: btn.implicitHeight * 0.9
|
||||
implicitWidth: btn.implicitWidth * 0.9
|
||||
|
||||
Binding {
|
||||
property: "opacity"
|
||||
target: root.content
|
||||
value: root.animDriver
|
||||
}
|
||||
|
||||
BlobGroup {
|
||||
id: blobGroup
|
||||
|
||||
color: DynamicColors.palette.m3surfaceContainerHighest
|
||||
smoothing: Appearance.rounding.medium
|
||||
|
||||
Behavior on color {
|
||||
CAnim {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BlobRect {
|
||||
id: btnRect
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: (!(btn.pressed || root.pressOverride) && (btn.containsMouse || root.hoverOverride) ? -Appearance.padding.extraSmall : 0) + (root.open ? -Appearance.padding.extraSmall : 0)
|
||||
group: blobGroup
|
||||
radius: root.open ? Appearance.rounding.large : Appearance.rounding.medium
|
||||
|
||||
Behavior on anchors.margins {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
Behavior on radius {
|
||||
Anim {
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BlobRect {
|
||||
id: rect
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
deformScale: 0.00001
|
||||
group: blobGroup
|
||||
implicitHeight: parent.height
|
||||
implicitWidth: parent.width
|
||||
radius: Appearance.rounding.large
|
||||
|
||||
states: State {
|
||||
name: "open"
|
||||
when: root.open
|
||||
|
||||
PropertyChanges {
|
||||
rect.anchors.rightMargin: root.width - Appearance.spacing.small
|
||||
rect.anchors.topMargin: -root.topMovement
|
||||
rect.implicitHeight: root.content.implicitHeight + root.padding * 2
|
||||
rect.implicitWidth: root.content.implicitWidth + root.padding * 2
|
||||
root.animDriver: 1
|
||||
}
|
||||
}
|
||||
transitions: Transition {
|
||||
Anim {
|
||||
properties: "rightMargin,implicitWidth"
|
||||
}
|
||||
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.expressiveFastSpatial
|
||||
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
|
||||
properties: "topMargin,implicitHeight"
|
||||
}
|
||||
|
||||
Anim {
|
||||
property: "animDriver"
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea { // MouseArea to catch inputs
|
||||
anchors.fill: parent
|
||||
children: [root.content]
|
||||
clip: true
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: btn
|
||||
|
||||
anchors.centerIn: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
hoverEnabled: true
|
||||
implicitHeight: icon.implicitHeight + Appearance.padding.extraSmall * 2
|
||||
implicitWidth: implicitHeight
|
||||
|
||||
onClicked: root.open = !root.open
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
anchors.centerIn: parent
|
||||
color: DynamicColors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Appearance.font.size.medium
|
||||
text: "view_apps"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Components
|
||||
import qs.Config
|
||||
|
||||
ConnectedRect {
|
||||
id: root
|
||||
|
||||
property alias delegate: list.delegate
|
||||
property int extraHeight
|
||||
readonly property alias list: list
|
||||
property alias model: list.model
|
||||
property string placeholderIcon
|
||||
property string placeholderText
|
||||
property bool showList
|
||||
|
||||
Layout.fillWidth: true
|
||||
clip: true
|
||||
color: DynamicColors.tPalette.m3surfaceContainer
|
||||
implicitHeight: (showList && list.count > 0 ? list.contentHeight : placeholder.implicitHeight + Appearance.padding.extraLarge * 2) + extraHeight
|
||||
|
||||
Behavior on implicitHeight {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: placeholder
|
||||
|
||||
active: opacity > 0
|
||||
anchors.centerIn: parent
|
||||
opacity: root.showList && list.count > 0 ? 0 : 1
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
sourceComponent: ColumnLayout {
|
||||
spacing: Appearance.spacing.extraSmall
|
||||
|
||||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
animate: true
|
||||
color: DynamicColors.palette.m3outline
|
||||
font.pointSize: Appearance.font.size.large
|
||||
text: root.placeholderIcon
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
animate: true
|
||||
color: DynamicColors.palette.m3outline
|
||||
font.pointSize: Appearance.font.size.large
|
||||
text: root.placeholderText
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: list
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
interactive: false
|
||||
opacity: root.showList ? 1 : 0
|
||||
spacing: 0
|
||||
|
||||
add: Transition {
|
||||
Anim {
|
||||
from: 0
|
||||
property: "opacity"
|
||||
to: 1
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
displaced: Transition {
|
||||
Anim {
|
||||
property: "opacity"
|
||||
to: 1
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
|
||||
Anim {
|
||||
property: "y"
|
||||
}
|
||||
}
|
||||
move: Transition {
|
||||
Anim {
|
||||
property: "opacity"
|
||||
to: 1
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
|
||||
Anim {
|
||||
property: "y"
|
||||
}
|
||||
}
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
remove: Transition {
|
||||
Anim {
|
||||
property: "opacity"
|
||||
to: 0
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Components
|
||||
import qs.Config
|
||||
|
||||
ConnectedRect {
|
||||
id: root
|
||||
|
||||
property alias icon: icon.text
|
||||
property alias label: label.text
|
||||
property alias status: status.text
|
||||
|
||||
signal clicked
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: navLayout.implicitHeight + navLayout.anchors.margins * 2
|
||||
|
||||
StateLayer {
|
||||
onClicked: root.clicked()
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: navLayout
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Appearance.padding.largeIncreased
|
||||
anchors.margins: Appearance.padding.normal
|
||||
anchors.rightMargin: Appearance.padding.largeIncreased
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
color: DynamicColors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Appearance.font.size.medium
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 0
|
||||
|
||||
CustomText {
|
||||
id: label
|
||||
|
||||
Layout.fillWidth: true
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: Appearance.font.size.small
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: status
|
||||
|
||||
Layout.fillWidth: true
|
||||
animate: true
|
||||
color: DynamicColors.palette.m3outline
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: Appearance.font.size.small
|
||||
visible: text
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
color: DynamicColors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Appearance.font.size.medium
|
||||
text: "chevron_right"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Config
|
||||
import qs.Components
|
||||
import qs.Modules.SettingsNew
|
||||
|
||||
ConnectedRect {
|
||||
id: root
|
||||
|
||||
property alias checked: switchButton.checked
|
||||
property int horizontalPadding: Appearance.padding.largeIncreased
|
||||
required property Component popup
|
||||
property alias subtext: subtext.text
|
||||
property alias text: text.text
|
||||
property int verticalPadding: Appearance.padding.normal
|
||||
|
||||
signal clicked(checked: bool)
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: layout.implicitHeight + verticalPadding * 2
|
||||
|
||||
Column {
|
||||
id: layout
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: root.horizontalPadding
|
||||
anchors.right: icon.left
|
||||
anchors.rightMargin: Appearance.padding.normal
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
CustomText {
|
||||
id: text
|
||||
|
||||
font.pointSize: Appearance.font.size.smaller
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: subtext
|
||||
|
||||
color: DynamicColors.palette.m3outline
|
||||
font.pointSize: Appearance.font.size.small
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
anchors.right: switchButton.left
|
||||
anchors.rightMargin: Appearance.spacing.normal
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "open_in_new"
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
onClicked: PopupManager.requestOpen(root.popup)
|
||||
}
|
||||
|
||||
CustomSwitch {
|
||||
id: switchButton
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: root.horizontalPadding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
onClicked: root.clicked(checked)
|
||||
}
|
||||
}
|
||||
@@ -64,6 +64,7 @@ ColumnLayout {
|
||||
bottomMargin: Appearance.padding.extraLarge
|
||||
contentHeight: root.contentChild?.implicitHeight ?? 0
|
||||
contentItem.children: [root.contentChild]
|
||||
fadeAmount: 0.1
|
||||
topMargin: Appearance.padding.large
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,68 +1,121 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Config
|
||||
import Quickshell
|
||||
import qs.Components
|
||||
import qs.Modules.SettingsNew
|
||||
import qs.Config
|
||||
import qs.Drawers
|
||||
|
||||
ConnectedRect {
|
||||
id: root
|
||||
|
||||
property alias checked: switchButton.checked
|
||||
property int horizontalPadding: Appearance.padding.largeIncreased
|
||||
required property Component popup
|
||||
property alias subtext: subtext.text
|
||||
property alias text: text.text
|
||||
property int verticalPadding: Appearance.padding.normal
|
||||
|
||||
signal clicked(checked: bool)
|
||||
default required property Item content
|
||||
property alias icon: icon.text
|
||||
property bool keepPopupAsChild
|
||||
property alias label: label.text
|
||||
readonly property alias popup: popup
|
||||
property alias status: status.text
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: layout.implicitHeight + verticalPadding * 2
|
||||
|
||||
Column {
|
||||
id: layout
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: root.horizontalPadding
|
||||
anchors.right: icon.left
|
||||
anchors.rightMargin: Appearance.padding.normal
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
CustomText {
|
||||
id: text
|
||||
|
||||
font.pointSize: Appearance.font.size.smaller
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: subtext
|
||||
|
||||
color: DynamicColors.palette.m3outline
|
||||
font.pointSize: Appearance.font.size.small
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
anchors.right: switchButton.left
|
||||
anchors.rightMargin: Appearance.spacing.normal
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "open_in_new"
|
||||
}
|
||||
implicitHeight: navLayout.implicitHeight + navLayout.anchors.margins * 2
|
||||
|
||||
StateLayer {
|
||||
onClicked: PopupManager.requestOpen(root.popup)
|
||||
id: stateLayer
|
||||
|
||||
manualHoverOverride: popup.hovered && !popup.open
|
||||
|
||||
onClicked: popup.open = true
|
||||
}
|
||||
|
||||
CustomSwitch {
|
||||
id: switchButton
|
||||
RowLayout {
|
||||
id: navLayout
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: root.horizontalPadding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Appearance.padding.largeIncreased
|
||||
anchors.margins: Appearance.padding.normal
|
||||
anchors.rightMargin: Appearance.padding.largeIncreased
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
onClicked: root.clicked(checked)
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
color: DynamicColors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Appearance.font.size.medium
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 0
|
||||
|
||||
CustomText {
|
||||
id: label
|
||||
|
||||
Layout.fillWidth: true
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: Appearance.font.size.small
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: status
|
||||
|
||||
Layout.fillWidth: true
|
||||
animate: true
|
||||
color: DynamicColors.palette.m3outline
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: Appearance.font.size.small
|
||||
visible: text
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: triggerArea
|
||||
|
||||
implicitHeight: popup.implicitHeight
|
||||
implicitWidth: popup.implicitWidth
|
||||
|
||||
TransformWatcher {
|
||||
id: tWatcher
|
||||
|
||||
a: area.parent
|
||||
b: triggerArea
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: area
|
||||
|
||||
anchors.fill: parent
|
||||
cursorShape: undefined
|
||||
enabled: popup.open
|
||||
hoverEnabled: true
|
||||
parent: {
|
||||
if (root.keepPopupAsChild)
|
||||
return triggerArea;
|
||||
|
||||
const win = QsWindow.window;
|
||||
const contentWin = win as Windows; // If inside the drawer content window, put it inside the interaction wrapper so hover works
|
||||
return contentWin ? contentWin.interactionWrapper : (win as QsWindow).contentItem;
|
||||
}
|
||||
z: popup.animDriver > 0 ? 1 : 0
|
||||
|
||||
onClicked: popup.open = false
|
||||
|
||||
BlobPopup {
|
||||
id: popup
|
||||
|
||||
color: open || hovered || stateLayer.containsMouse ? DynamicColors.palette.m3secondaryContainer : DynamicColors.palette.m3surfaceContainerHighest
|
||||
content: root.content
|
||||
hoverOverride: stateLayer.containsMouse
|
||||
padding: Appearance.padding.small
|
||||
pressOverride: stateLayer.pressed
|
||||
x: {
|
||||
tWatcher.transform;
|
||||
return triggerArea.mapToItem(area.parent, 0, 0).x;
|
||||
}
|
||||
y: {
|
||||
tWatcher.transform;
|
||||
return triggerArea.mapToItem(area.parent, 0, 0).y;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Components
|
||||
import qs.Config
|
||||
|
||||
CustomText {
|
||||
property bool first
|
||||
|
||||
Layout.bottomMargin: Appearance.spacing.extraSmall
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: Appearance.padding.small
|
||||
Layout.topMargin: first ? 0 : Appearance.spacing.large - ((parent as ColumnLayout).spacing ?? 0)
|
||||
color: DynamicColors.palette.m3onSurfaceVariant
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: Appearance.font.size.medium
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import qs.Components
|
||||
import qs.Config
|
||||
|
||||
ConnectedRect {
|
||||
id: root
|
||||
|
||||
property alias icon: slider.insetIcon
|
||||
property alias label: label.text
|
||||
property real value
|
||||
property alias valueLabel: valueLabel.text
|
||||
|
||||
signal moved(value: real)
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: rowLayout.implicitHeight + rowLayout.anchors.margins + rowLayout.anchors.topMargin
|
||||
|
||||
RowLayout {
|
||||
id: rowLayout
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.largeIncreased
|
||||
anchors.topMargin: Appearance.padding.large
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
CustomText {
|
||||
id: label
|
||||
|
||||
Layout.fillWidth: true
|
||||
elide: Text.ElideRight
|
||||
font.pointSize: Appearance.font.size.small
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: valueLabel
|
||||
|
||||
color: DynamicColors.palette.m3outline
|
||||
font.pointSize: Appearance.font.size.small
|
||||
}
|
||||
}
|
||||
|
||||
CustomMouseArea {
|
||||
function onWheel(event: WheelEvent): void {
|
||||
const step = Config.services.audioIncrement;
|
||||
if (event.angleDelta.y > 0)
|
||||
root.moved(Math.min(1, root.value + step));
|
||||
else if (event.angleDelta.y < 0)
|
||||
root.moved(Math.max(0, root.value - step));
|
||||
}
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: Appearance.padding.larger * 3
|
||||
|
||||
CustomSlider {
|
||||
id: slider
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
enabled: root.enabled
|
||||
implicitHeight: parent.implicitHeight
|
||||
radius: Appearance.rounding.small
|
||||
value: root.value
|
||||
|
||||
onInteraction: v => root.moved(v)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -104,7 +104,7 @@ StackView {
|
||||
id: logCat
|
||||
|
||||
defaultLogLevel: LoggingCategory.Info
|
||||
name: "caelestia.nexus"
|
||||
name: "ZShell.settings"
|
||||
}
|
||||
|
||||
Connections {
|
||||
|
||||
@@ -4,7 +4,7 @@ import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import Quickshell.Hyprland
|
||||
import ZShell.Internal
|
||||
import ZShell.Components
|
||||
import qs.Config
|
||||
import qs.Components
|
||||
import qs.Helpers
|
||||
@@ -13,13 +13,71 @@ Item {
|
||||
id: wrapper
|
||||
|
||||
property bool changesMade: false
|
||||
readonly property var currentScreen: screens.length > selectedScreenIndex ? screens[selectedScreenIndex] : null
|
||||
property var screens: []
|
||||
property int selectedScreenIndex: 0
|
||||
property bool shouldBeActive: true
|
||||
|
||||
signal requestCrop
|
||||
function applyCrop(): void {
|
||||
if (!cropRectLoader.item || !currentScreen)
|
||||
return;
|
||||
|
||||
const cropRect = cropRectLoader.item;
|
||||
|
||||
const cropXPercent = (cropRect.x - cropRect.imageX) / scaledImg.paintedWidth;
|
||||
const cropYPercent = (cropRect.y - cropRect.imageY) / scaledImg.paintedHeight;
|
||||
const cropWidthPercent = cropRect.width / scaledImg.paintedWidth;
|
||||
const cropHeightPercent = cropRect.height / scaledImg.paintedHeight;
|
||||
|
||||
Wallpapers.setCrop(currentScreen.name, Qt.rect(cropXPercent, cropYPercent, cropWidthPercent, cropHeightPercent), cropRect.zoom);
|
||||
}
|
||||
|
||||
function refreshScreens(): void {
|
||||
screens = [...Quickshell.screens].sort((a, b) => a.x - b.x);
|
||||
|
||||
if (screens.length === 0) {
|
||||
selectedScreenIndex = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
selectedScreenIndex = Math.max(0, Math.min(selectedScreenIndex, screens.length - 1));
|
||||
}
|
||||
|
||||
function selectScreen(index: int): void {
|
||||
if (index < 0 || index >= screens.length || index === selectedScreenIndex)
|
||||
return;
|
||||
|
||||
selectedScreenIndex = index;
|
||||
|
||||
if (cropRectLoader.item)
|
||||
Qt.callLater(syncCropToScreen);
|
||||
}
|
||||
|
||||
function syncCropToScreen(): void {
|
||||
if (cropRectLoader.item)
|
||||
cropRectLoader.item.restoreFromData();
|
||||
}
|
||||
|
||||
function zoomClipRect(zoom: real): void {
|
||||
if (!cropRectLoader.item)
|
||||
return;
|
||||
|
||||
const cropRect = cropRectLoader.item;
|
||||
|
||||
const centerX = cropRect.x + cropRect.width * 0.5;
|
||||
const centerY = cropRect.y + cropRect.height * 0.5;
|
||||
|
||||
cropRect.zoom = zoom;
|
||||
|
||||
cropRect.x = centerX - cropRect.width * 0.5;
|
||||
cropRect.y = centerY - cropRect.height * 0.5;
|
||||
|
||||
cropRect.clampToBounds();
|
||||
}
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
implicitHeight: shouldBeActive ? 400 : 0
|
||||
implicitHeight: shouldBeActive ? 430 : 0
|
||||
opacity: shouldBeActive ? 1 : 0
|
||||
scale: shouldBeActive ? 1 : 0.8
|
||||
visible: opacity > 0
|
||||
@@ -37,6 +95,14 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
refreshScreens();
|
||||
Qt.callLater(syncCropToScreen);
|
||||
}
|
||||
onSelectedScreenIndexChanged: {
|
||||
Qt.callLater(syncCropToScreen);
|
||||
}
|
||||
|
||||
IconButton {
|
||||
anchors.margins: Appearance.padding.normal
|
||||
anchors.right: parent.right
|
||||
@@ -56,259 +122,216 @@ Item {
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
wrapper.requestCrop();
|
||||
wrapper.applyCrop();
|
||||
wrapper.changesMade = false;
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: root
|
||||
ButtonRow {
|
||||
id: screenSelector
|
||||
|
||||
anchors.fill: parent
|
||||
spacing: Appearance.spacing.normal
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Appearance.padding.extraLarge * 2
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Appearance.padding.extraLarge * 2
|
||||
anchors.top: parent.top
|
||||
implicitHeight: 34
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
Repeater {
|
||||
model: ScriptModel {
|
||||
values: [...Quickshell.screens].sort((a, b) => {
|
||||
return a.x - b.x;
|
||||
})
|
||||
model: wrapper.screens
|
||||
|
||||
delegate: TextButton {
|
||||
required property int index
|
||||
readonly property bool isCurrent: wrapper.selectedScreenIndex === index
|
||||
required property var modelData
|
||||
|
||||
fillWidth: true
|
||||
inactiveColor: isCurrent ? DynamicColors.palette.m3primary : Qt.alpha(DynamicColors.palette.m3surfaceContainer, 0.7)
|
||||
inactiveOnColor: isCurrent ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
text: modelData.name
|
||||
|
||||
onClicked: wrapper.selectScreen(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: sliderLayout
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
implicitHeight: 30
|
||||
|
||||
CustomSlider {
|
||||
id: zoomSlider
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: Appearance.padding.normal
|
||||
Layout.preferredHeight: Appearance.padding.larger * 3
|
||||
Layout.rightMargin: Appearance.padding.normal
|
||||
from: 1.0
|
||||
implicitHeight: Appearance.padding.larger * 3
|
||||
insetIcon: "crop"
|
||||
to: 5.0
|
||||
value: cropRectLoader.item ? cropRectLoader.item.zoom : 1.0
|
||||
|
||||
onInteraction: value => {
|
||||
wrapper.zoomClipRect(1 + (value * 4));
|
||||
wrapper.changesMade = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
id: scaledImg
|
||||
|
||||
property var displayData
|
||||
property real monitorScale: 1.0
|
||||
|
||||
anchors.bottom: sliderLayout.top
|
||||
anchors.bottomMargin: Appearance.spacing.normal
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: screenSelector.bottom
|
||||
anchors.topMargin: Appearance.spacing.normal
|
||||
asynchronous: true
|
||||
fillMode: Image.PreserveAspectFit
|
||||
retainWhileLoading: true
|
||||
source: Wallpapers.current
|
||||
sourceSize.height: parent.height
|
||||
sourceSize.width: parent.width
|
||||
|
||||
onPaintedWidthChanged: {
|
||||
if (paintedWidth > 0 && cropRectLoader.item) {
|
||||
cropRectLoader.item.restoreFromData();
|
||||
}
|
||||
}
|
||||
onSourceChanged: {
|
||||
if (cropRectLoader.item) {
|
||||
cropRectLoader.item.restoreFromData();
|
||||
}
|
||||
}
|
||||
onStatusChanged: {
|
||||
if (scaledImg.status == Image.Ready && cropRectLoader.item) {
|
||||
cropRectLoader.item.restoreFromData();
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: cropRectLoader
|
||||
|
||||
active: scaledImg.paintedWidth > 0 && wrapper.currentScreen
|
||||
|
||||
sourceComponent: Component {
|
||||
CustomRect {
|
||||
id: cropRect
|
||||
|
||||
property real aspectRatio: wrapper.currentScreen ? wrapper.currentScreen.width / wrapper.currentScreen.height : 1
|
||||
readonly property real baseHeight: baseWidth / aspectRatio
|
||||
readonly property real baseWidth: {
|
||||
let fittedHeight = scaledImg.paintedHeight;
|
||||
let fittedWidth = fittedHeight * aspectRatio;
|
||||
|
||||
if (fittedWidth > scaledImg.paintedWidth) {
|
||||
fittedWidth = scaledImg.paintedWidth;
|
||||
fittedHeight = fittedWidth / aspectRatio;
|
||||
}
|
||||
|
||||
return fittedWidth;
|
||||
}
|
||||
readonly property real imageX: (scaledImg.width - scaledImg.paintedWidth) / 2
|
||||
readonly property real imageY: (scaledImg.height - scaledImg.paintedHeight) / 2
|
||||
property real imgAspectRatio: scaledImg.paintedWidth / scaledImg.paintedHeight
|
||||
property real zoom: 1.0
|
||||
|
||||
function centerInImage() {
|
||||
x = imageX + (scaledImg.paintedWidth - width) / 2;
|
||||
y = imageY + (scaledImg.paintedHeight - height) / 2;
|
||||
}
|
||||
|
||||
function clampToBounds() {
|
||||
x = Math.max(imageX, Math.min(x, imageX + scaledImg.paintedWidth - width));
|
||||
y = Math.max(imageY, Math.min(y, imageY + scaledImg.paintedHeight - height));
|
||||
}
|
||||
|
||||
function restoreFromData() {
|
||||
if (!wrapper.currentScreen)
|
||||
return;
|
||||
|
||||
let data = Wallpapers.getCrop(wrapper.currentScreen.name);
|
||||
|
||||
if (data && (Math.abs(data.x) > 0.001 || Math.abs(data.y) > 0.001 || Math.abs(data.width - 1.0) > 0.001 || Math.abs(data.height - 1.0) > 0.001)) {
|
||||
zoom = data.zoom > 0 ? data.zoom : 1.0;
|
||||
x = imageX + (data.x * scaledImg.paintedWidth);
|
||||
y = imageY + (data.y * scaledImg.paintedHeight);
|
||||
|
||||
clampToBounds();
|
||||
} else {
|
||||
zoom = 1.0;
|
||||
centerInImage();
|
||||
}
|
||||
}
|
||||
|
||||
border.color: DynamicColors.palette.m3primary
|
||||
border.width: 2
|
||||
height: baseHeight / zoom
|
||||
opacity: 1
|
||||
width: baseWidth / zoom
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
restoreFromData();
|
||||
}
|
||||
onHeightChanged: clampToBounds()
|
||||
onWidthChanged: clampToBounds()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouse
|
||||
|
||||
function updateCrop(mouseX, mouseY) {
|
||||
if (!cropRectLoader.item)
|
||||
return;
|
||||
|
||||
const cropRect = cropRectLoader.item;
|
||||
|
||||
let nx = mouseX - cropRect.width * 0.5;
|
||||
let ny = mouseY - cropRect.height * 0.5;
|
||||
|
||||
nx = Math.max(cropRect.imageX, Math.min(nx, cropRect.imageX + scaledImg.paintedWidth - cropRect.width));
|
||||
ny = Math.max(cropRect.imageY, Math.min(ny, cropRect.imageY + scaledImg.paintedHeight - cropRect.height));
|
||||
|
||||
cropRect.x = nx;
|
||||
cropRect.y = ny;
|
||||
}
|
||||
|
||||
Item {
|
||||
id: delegate
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
preventStealing: true
|
||||
|
||||
required property ShellScreen modelData
|
||||
|
||||
function applyCrop(): void {
|
||||
if (!cropRectLoader.item)
|
||||
return;
|
||||
const cropRect = cropRectLoader.item;
|
||||
|
||||
// We need to calculate the exact percentage coordinates that map perfectly
|
||||
// to our C++ backend, regardless of current display scaling
|
||||
const cropXPercent = (cropRect.x - cropRect.imageX) / scaledImg.paintedWidth;
|
||||
const cropYPercent = (cropRect.y - cropRect.imageY) / scaledImg.paintedHeight;
|
||||
const cropWidthPercent = cropRect.width / scaledImg.paintedWidth;
|
||||
const cropHeightPercent = cropRect.height / scaledImg.paintedHeight;
|
||||
|
||||
const finalRect = Qt.rect(cropXPercent, cropYPercent, cropWidthPercent, cropHeightPercent);
|
||||
|
||||
// We just pass the percentages directly to the backend
|
||||
Wallpapers.setCrop(delegate.modelData.name, finalRect, cropRect.zoom);
|
||||
}
|
||||
|
||||
function zoomClipRect(zoom: real): void {
|
||||
if (!cropRectLoader.item)
|
||||
return;
|
||||
const cropRect = cropRectLoader.item;
|
||||
|
||||
let oldCenterX = cropRect.x + cropRect.width * 0.5;
|
||||
let oldCenterY = cropRect.y + cropRect.height * 0.5;
|
||||
|
||||
cropRect.zoom = zoom;
|
||||
|
||||
cropRect.x = oldCenterX - cropRect.width * 0.5;
|
||||
cropRect.y = oldCenterY - cropRect.height * 0.5;
|
||||
|
||||
cropRect.clampToBounds();
|
||||
}
|
||||
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
|
||||
Connections {
|
||||
function onRequestCrop(): void {
|
||||
delegate.applyCrop();
|
||||
}
|
||||
|
||||
target: wrapper
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: sliderLayout
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
implicitHeight: 30
|
||||
|
||||
CustomSlider {
|
||||
id: zoomSlider
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: Appearance.padding.normal
|
||||
Layout.preferredHeight: Appearance.padding.larger * 3
|
||||
Layout.rightMargin: Appearance.padding.normal
|
||||
from: 1.0
|
||||
implicitHeight: Appearance.padding.larger * 3
|
||||
insetIcon: "crop"
|
||||
to: 5.0
|
||||
value: cropRectLoader.item ? cropRectLoader.item.zoom : 1.0
|
||||
|
||||
onInteraction: value => {
|
||||
delegate.zoomClipRect(1 + (value * 4));
|
||||
wrapper.changesMade = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CachingImage {
|
||||
id: scaledImg
|
||||
|
||||
property var displayData
|
||||
property real monitorScale: 1.0
|
||||
|
||||
anchors.bottom: sliderLayout.top
|
||||
anchors.bottomMargin: Appearance.spacing.normal
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
asynchronous: true
|
||||
fillMode: Image.PreserveAspectFit
|
||||
retainWhileLoading: true
|
||||
source: Wallpapers.current
|
||||
sourceSize.height: parent.height
|
||||
sourceSize.width: parent.width
|
||||
|
||||
onPaintedWidthChanged: {
|
||||
if (paintedWidth > 0 && cropRectLoader.item) {
|
||||
cropRectLoader.item.restoreFromData();
|
||||
}
|
||||
}
|
||||
onSourceChanged: {
|
||||
if (cropRectLoader.item) {
|
||||
cropRectLoader.item.restoreFromData();
|
||||
}
|
||||
}
|
||||
onStatusChanged: {
|
||||
if (scaledImg.status == Image.Ready && cropRectLoader.item) {
|
||||
cropRectLoader.item.restoreFromData();
|
||||
}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: monitorId
|
||||
|
||||
anchors.centerIn: parent
|
||||
color: Qt.alpha(DynamicColors.palette.m3surface, 0.85)
|
||||
font.pointSize: Appearance.font.size.large * 4
|
||||
style: Text.Outline
|
||||
styleColor: DynamicColors.palette.m3onSurface
|
||||
text: delegate.modelData.name
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: cropRectLoader
|
||||
|
||||
active: scaledImg.paintedWidth > 0
|
||||
|
||||
sourceComponent: Component {
|
||||
CustomRect {
|
||||
id: cropRect
|
||||
|
||||
property real aspectRatio: delegate.modelData.width / delegate.modelData.height
|
||||
readonly property real baseHeight: baseWidth / aspectRatio
|
||||
readonly property real baseWidth: {
|
||||
let fittedHeight = scaledImg.paintedHeight;
|
||||
let fittedWidth = fittedHeight * aspectRatio;
|
||||
|
||||
if (fittedWidth > scaledImg.paintedWidth) {
|
||||
fittedWidth = scaledImg.paintedWidth;
|
||||
fittedHeight = fittedWidth / aspectRatio;
|
||||
}
|
||||
|
||||
return fittedWidth;
|
||||
}
|
||||
readonly property real imageX: (scaledImg.width - scaledImg.paintedWidth) / 2
|
||||
readonly property real imageY: (scaledImg.height - scaledImg.paintedHeight) / 2
|
||||
property real imgAspectRatio: scaledImg.paintedWidth / scaledImg.paintedHeight
|
||||
property real zoom: 1.0
|
||||
|
||||
function centerInImage() {
|
||||
x = imageX + (scaledImg.paintedWidth - width) / 2;
|
||||
y = imageY + (scaledImg.paintedHeight - height) / 2;
|
||||
}
|
||||
|
||||
function clampToBounds() {
|
||||
x = Math.max(imageX, Math.min(x, imageX + scaledImg.paintedWidth - width));
|
||||
|
||||
y = Math.max(imageY, Math.min(y, imageY + scaledImg.paintedHeight - height));
|
||||
}
|
||||
|
||||
function restoreFromData() {
|
||||
let data = Wallpapers.getCrop(delegate.modelData.name);
|
||||
|
||||
if (data && (Math.abs(data.x) > 0.001 || Math.abs(data.y) > 0.001 || Math.abs(data.width - 1.0) > 0.001 || Math.abs(data.height - 1.0) > 0.001)) {
|
||||
zoom = data.zoom > 0 ? data.zoom : 1.0;
|
||||
x = imageX + (data.x * scaledImg.paintedWidth);
|
||||
y = imageY + (data.y * scaledImg.paintedHeight);
|
||||
|
||||
clampToBounds();
|
||||
} else {
|
||||
zoom = 1.0;
|
||||
centerInImage();
|
||||
}
|
||||
}
|
||||
|
||||
border.color: DynamicColors.palette.m3primary
|
||||
border.width: 2
|
||||
height: baseHeight / zoom
|
||||
opacity: 1
|
||||
width: baseWidth / zoom
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
restoreFromData();
|
||||
}
|
||||
onHeightChanged: clampToBounds()
|
||||
onWidthChanged: clampToBounds()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouse
|
||||
|
||||
function updateCrop(mouseX, mouseY) {
|
||||
if (!cropRectLoader.item)
|
||||
return;
|
||||
const cropRect = cropRectLoader.item;
|
||||
|
||||
let nx = mouseX - cropRect.width * 0.5;
|
||||
let ny = mouseY - cropRect.height * 0.5;
|
||||
|
||||
nx = Math.max(cropRect.imageX, Math.min(nx, cropRect.imageX + scaledImg.paintedWidth - cropRect.width));
|
||||
|
||||
ny = Math.max(cropRect.imageY, Math.min(ny, cropRect.imageY + scaledImg.paintedHeight - cropRect.height));
|
||||
|
||||
cropRect.x = nx;
|
||||
cropRect.y = ny;
|
||||
}
|
||||
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
preventStealing: true
|
||||
|
||||
onPositionChanged: mouse => {
|
||||
if (pressed) {
|
||||
updateCrop(mouse.x, mouse.y);
|
||||
wrapper.changesMade = true;
|
||||
}
|
||||
}
|
||||
onPressed: mouse => {
|
||||
updateCrop(mouse.x, mouse.y);
|
||||
wrapper.changesMade = true;
|
||||
}
|
||||
onReleased: {
|
||||
wrapper.changesMade = true;
|
||||
}
|
||||
}
|
||||
onPositionChanged: mouse => {
|
||||
if (pressed) {
|
||||
updateCrop(mouse.x, mouse.y);
|
||||
wrapper.changesMade = true;
|
||||
}
|
||||
}
|
||||
onPressed: mouse => {
|
||||
updateCrop(mouse.x, mouse.y);
|
||||
wrapper.changesMade = true;
|
||||
}
|
||||
onReleased: {
|
||||
wrapper.changesMade = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user