summaryrefslogtreecommitdiff
path: root/modules/controlcenter/components
diff options
context:
space:
mode:
Diffstat (limited to 'modules/controlcenter/components')
-rw-r--r--modules/controlcenter/components/DeviceDetails.qml15
-rw-r--r--modules/controlcenter/components/DeviceList.qml9
-rw-r--r--modules/controlcenter/components/PaneTransition.qml13
-rw-r--r--modules/controlcenter/components/SettingsHeader.qml1
-rw-r--r--modules/controlcenter/components/SliderInput.qml29
-rw-r--r--modules/controlcenter/components/SplitPaneLayout.qml5
-rw-r--r--modules/controlcenter/components/SplitPaneWithDetails.qml87
-rw-r--r--modules/controlcenter/components/WallpaperGrid.qml302
8 files changed, 224 insertions, 237 deletions
diff --git a/modules/controlcenter/components/DeviceDetails.qml b/modules/controlcenter/components/DeviceDetails.qml
index 8cc9177..a5d0647 100644
--- a/modules/controlcenter/components/DeviceDetails.qml
+++ b/modules/controlcenter/components/DeviceDetails.qml
@@ -14,10 +14,10 @@ Item {
property Session session
property var device: null
-
+
property Component headerComponent: null
property list<Component> sections: []
-
+
property Component topContent: null
property Component bottomContent: null
@@ -34,7 +34,7 @@ Item {
Loader {
id: headerLoader
-
+
Layout.fillWidth: true
sourceComponent: root.headerComponent
visible: root.headerComponent !== null
@@ -42,7 +42,7 @@ Item {
Loader {
id: topContentLoader
-
+
Layout.fillWidth: true
sourceComponent: root.topContent
visible: root.topContent !== null
@@ -50,10 +50,10 @@ Item {
Repeater {
model: root.sections
-
+
Loader {
required property Component modelData
-
+
Layout.fillWidth: true
sourceComponent: modelData
}
@@ -61,11 +61,10 @@ Item {
Loader {
id: bottomContentLoader
-
+
Layout.fillWidth: true
sourceComponent: root.bottomContent
visible: root.bottomContent !== null
}
}
}
-
diff --git a/modules/controlcenter/components/DeviceList.qml b/modules/controlcenter/components/DeviceList.qml
index 75dd913..722f9a1 100644
--- a/modules/controlcenter/components/DeviceList.qml
+++ b/modules/controlcenter/components/DeviceList.qml
@@ -16,21 +16,21 @@ ColumnLayout {
property Session session: null
property var model: null
property Component delegate: null
-
+
property string title: ""
property string description: ""
property var activeItem: null
property Component headerComponent: null
property Component titleSuffix: null
property bool showHeader: true
-
+
signal itemSelected(var item)
spacing: Appearance.spacing.small
Loader {
id: headerLoader
-
+
Layout.fillWidth: true
sourceComponent: root.headerComponent
visible: root.headerComponent !== null && root.showHeader
@@ -58,7 +58,7 @@ ColumnLayout {
Layout.fillWidth: true
}
}
-
+
property alias view: view
StyledText {
@@ -82,4 +82,3 @@ ColumnLayout {
clip: false
}
}
-
diff --git a/modules/controlcenter/components/PaneTransition.qml b/modules/controlcenter/components/PaneTransition.qml
index d1814b5..5d80dbe 100644
--- a/modules/controlcenter/components/PaneTransition.qml
+++ b/modules/controlcenter/components/PaneTransition.qml
@@ -8,12 +8,12 @@ SequentialAnimation {
required property Item target
property list<PropertyAction> propertyActions
-
+
property real scaleFrom: 1.0
property real scaleTo: 0.8
property real opacityFrom: 1.0
property real opacityTo: 0.0
-
+
ParallelAnimation {
NumberAnimation {
target: root.target
@@ -24,7 +24,7 @@ SequentialAnimation {
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standardAccel
}
-
+
NumberAnimation {
target: root.target
property: "scale"
@@ -35,7 +35,7 @@ SequentialAnimation {
easing.bezierCurve: Appearance.anim.curves.standardAccel
}
}
-
+
ScriptAction {
script: {
for (let i = 0; i < root.propertyActions.length; i++) {
@@ -46,7 +46,7 @@ SequentialAnimation {
}
}
}
-
+
ParallelAnimation {
NumberAnimation {
target: root.target
@@ -57,7 +57,7 @@ SequentialAnimation {
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standardDecel
}
-
+
NumberAnimation {
target: root.target
property: "scale"
@@ -69,4 +69,3 @@ SequentialAnimation {
}
}
}
-
diff --git a/modules/controlcenter/components/SettingsHeader.qml b/modules/controlcenter/components/SettingsHeader.qml
index c1ba148..0dc190c 100644
--- a/modules/controlcenter/components/SettingsHeader.qml
+++ b/modules/controlcenter/components/SettingsHeader.qml
@@ -35,4 +35,3 @@ Item {
}
}
}
-
diff --git a/modules/controlcenter/components/SliderInput.qml b/modules/controlcenter/components/SliderInput.qml
index 7348368..11b3f70 100644
--- a/modules/controlcenter/components/SliderInput.qml
+++ b/modules/controlcenter/components/SliderInput.qml
@@ -21,7 +21,7 @@ ColumnLayout {
property int decimals: 1 // Number of decimal places to show (default: 1)
property var formatValueFunction: null // Optional custom format function
property var parseValueFunction: null // Optional custom parse function
-
+
function formatValue(val: real): string {
if (formatValueFunction) {
return formatValueFunction(val);
@@ -34,7 +34,7 @@ ColumnLayout {
// For DoubleValidator or no validator, use the decimals property
return val.toFixed(root.decimals);
}
-
+
function parseValue(text: string): real {
if (parseValueFunction) {
return parseValueFunction(text);
@@ -48,13 +48,13 @@ ColumnLayout {
}
return parseFloat(text);
}
-
+
signal valueModified(real newValue)
property bool _initialized: false
spacing: Appearance.spacing.small
-
+
Component.onCompleted: {
// Set initialized flag after a brief delay to allow component to fully load
Qt.callLater(() => {
@@ -80,13 +80,13 @@ ColumnLayout {
id: inputField
Layout.preferredWidth: 70
validator: root.validator
-
+
Component.onCompleted: {
// Initialize text without triggering valueModified signal
text = root.formatValue(root.value);
}
-
- onTextEdited: (text) => {
+
+ onTextEdited: text => {
if (hasFocus) {
const val = root.parseValue(text);
if (!isNaN(val)) {
@@ -100,14 +100,14 @@ ColumnLayout {
isValid = false;
}
}
-
+
if (isValid) {
root.valueModified(val);
}
}
}
}
-
+
onEditingFinished: {
const val = root.parseValue(text);
let isValid = true;
@@ -119,7 +119,7 @@ ColumnLayout {
isValid = false;
}
}
-
+
if (isNaN(val) || !isValid) {
text = root.formatValue(root.value);
}
@@ -143,7 +143,7 @@ ColumnLayout {
from: root.from
to: root.to
stepSize: root.stepSize
-
+
// Use Binding to allow slider to move freely during dragging
Binding {
target: slider
@@ -151,7 +151,7 @@ ColumnLayout {
value: root.value
when: !slider.pressed
}
-
+
onValueChanged: {
// Update input field text in real-time as slider moves during dragging
// Always update when slider value changes (during dragging or external updates)
@@ -160,7 +160,7 @@ ColumnLayout {
inputField.text = root.formatValue(newValue);
}
}
-
+
onMoved: {
const newValue = root.stepSize > 0 ? Math.round(value / root.stepSize) * root.stepSize : value;
root.valueModified(newValue);
@@ -169,7 +169,7 @@ ColumnLayout {
}
}
}
-
+
// Update input field when value changes externally (slider is already bound)
onValueChanged: {
// Only update if component is initialized to avoid issues during creation
@@ -178,4 +178,3 @@ ColumnLayout {
}
}
}
-
diff --git a/modules/controlcenter/components/SplitPaneLayout.qml b/modules/controlcenter/components/SplitPaneLayout.qml
index 3609a74..89504a0 100644
--- a/modules/controlcenter/components/SplitPaneLayout.qml
+++ b/modules/controlcenter/components/SplitPaneLayout.qml
@@ -14,12 +14,12 @@ RowLayout {
property Component leftContent: null
property Component rightContent: null
-
+
property real leftWidthRatio: 0.4
property int leftMinimumWidth: 420
property var leftLoaderProperties: ({})
property var rightLoaderProperties: ({})
-
+
property alias leftLoader: leftLoader
property alias rightLoader: rightLoader
@@ -107,4 +107,3 @@ RowLayout {
}
}
}
-
diff --git a/modules/controlcenter/components/SplitPaneWithDetails.qml b/modules/controlcenter/components/SplitPaneWithDetails.qml
index 5db5bdb..ce8c9d0 100644
--- a/modules/controlcenter/components/SplitPaneWithDetails.qml
+++ b/modules/controlcenter/components/SplitPaneWithDetails.qml
@@ -15,10 +15,12 @@ Item {
required property Component leftContent
required property Component rightDetailsComponent
required property Component rightSettingsComponent
-
+
property var activeItem: null
- property var paneIdGenerator: function(item) { return item ? String(item) : ""; }
-
+ property var paneIdGenerator: function (item) {
+ return item ? String(item) : "";
+ }
+
property Component overlayComponent: null
SplitPaneLayout {
@@ -29,64 +31,63 @@ Item {
leftContent: root.leftContent
rightContent: Component {
- Item {
- id: rightPaneItem
-
- property var pane: root.activeItem
- property string paneId: root.paneIdGenerator(pane)
- property Component targetComponent: root.rightSettingsComponent
- property Component nextComponent: root.rightSettingsComponent
+ Item {
+ id: rightPaneItem
- function getComponentForPane() {
- return pane ? root.rightDetailsComponent : root.rightSettingsComponent;
- }
+ property var pane: root.activeItem
+ property string paneId: root.paneIdGenerator(pane)
+ property Component targetComponent: root.rightSettingsComponent
+ property Component nextComponent: root.rightSettingsComponent
- Component.onCompleted: {
- targetComponent = getComponentForPane();
- nextComponent = targetComponent;
- }
+ function getComponentForPane() {
+ return pane ? root.rightDetailsComponent : root.rightSettingsComponent;
+ }
- Loader {
- id: rightLoader
+ Component.onCompleted: {
+ targetComponent = getComponentForPane();
+ nextComponent = targetComponent;
+ }
- anchors.fill: parent
+ Loader {
+ id: rightLoader
- opacity: 1
- scale: 1
- transformOrigin: Item.Center
+ anchors.fill: parent
- clip: false
- sourceComponent: rightPaneItem.targetComponent
- }
+ opacity: 1
+ scale: 1
+ transformOrigin: Item.Center
- Behavior on paneId {
- PaneTransition {
- target: rightLoader
- propertyActions: [
- PropertyAction {
- target: rightPaneItem
- property: "targetComponent"
- value: rightPaneItem.nextComponent
- }
- ]
+ clip: false
+ sourceComponent: rightPaneItem.targetComponent
+ }
+
+ Behavior on paneId {
+ PaneTransition {
+ target: rightLoader
+ propertyActions: [
+ PropertyAction {
+ target: rightPaneItem
+ property: "targetComponent"
+ value: rightPaneItem.nextComponent
+ }
+ ]
+ }
}
- }
- onPaneChanged: {
- nextComponent = getComponentForPane();
- paneId = root.paneIdGenerator(pane);
+ onPaneChanged: {
+ nextComponent = getComponentForPane();
+ paneId = root.paneIdGenerator(pane);
+ }
}
}
- }
}
Loader {
id: overlayLoader
-
+
anchors.fill: parent
z: 1000
sourceComponent: root.overlayComponent
active: root.overlayComponent !== null
}
}
-
diff --git a/modules/controlcenter/components/WallpaperGrid.qml b/modules/controlcenter/components/WallpaperGrid.qml
index 5eab5b8..ed6bb40 100644
--- a/modules/controlcenter/components/WallpaperGrid.qml
+++ b/modules/controlcenter/components/WallpaperGrid.qml
@@ -24,7 +24,7 @@ GridView {
model: Wallpapers.list
clip: true
-
+
StyledScrollBar.vertical: StyledScrollBar {
flickable: root
}
@@ -40,202 +40,194 @@ GridView {
readonly property real itemMargin: Appearance.spacing.normal / 2
readonly property real itemRadius: Appearance.rounding.normal
- StateLayer {
- anchors.fill: parent
- anchors.leftMargin: itemMargin
- anchors.rightMargin: itemMargin
- anchors.topMargin: itemMargin
- anchors.bottomMargin: itemMargin
- radius: itemRadius
+ StateLayer {
+ anchors.fill: parent
+ anchors.leftMargin: itemMargin
+ anchors.rightMargin: itemMargin
+ anchors.topMargin: itemMargin
+ anchors.bottomMargin: itemMargin
+ radius: itemRadius
- function onClicked(): void {
- Wallpapers.setWallpaper(modelData.path);
- }
+ function onClicked(): void {
+ Wallpapers.setWallpaper(modelData.path);
}
+ }
- StyledClippingRect {
- id: image
+ StyledClippingRect {
+ id: image
- anchors.fill: parent
- anchors.leftMargin: itemMargin
- anchors.rightMargin: itemMargin
- anchors.topMargin: itemMargin
- anchors.bottomMargin: itemMargin
- color: Colours.tPalette.m3surfaceContainer
- radius: itemRadius
- antialiasing: true
- layer.enabled: true
- layer.smooth: true
+ anchors.fill: parent
+ anchors.leftMargin: itemMargin
+ anchors.rightMargin: itemMargin
+ anchors.topMargin: itemMargin
+ anchors.bottomMargin: itemMargin
+ color: Colours.tPalette.m3surfaceContainer
+ radius: itemRadius
+ antialiasing: true
+ layer.enabled: true
+ layer.smooth: true
- CachingImage {
- id: cachingImage
+ CachingImage {
+ id: cachingImage
- path: modelData.path
- anchors.fill: parent
- fillMode: Image.PreserveAspectCrop
- cache: true
- visible: opacity > 0
- antialiasing: true
- smooth: true
- sourceSize: Qt.size(width, height)
+ path: modelData.path
+ anchors.fill: parent
+ fillMode: Image.PreserveAspectCrop
+ cache: true
+ visible: opacity > 0
+ antialiasing: true
+ smooth: true
+ sourceSize: Qt.size(width, height)
- opacity: status === Image.Ready ? 1 : 0
+ opacity: status === Image.Ready ? 1 : 0
- Behavior on opacity {
- NumberAnimation {
- duration: 1000
- easing.type: Easing.OutQuad
- }
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 1000
+ easing.type: Easing.OutQuad
}
}
+ }
- // Fallback if CachingImage fails to load
- Image {
- id: fallbackImage
+ // Fallback if CachingImage fails to load
+ Image {
+ id: fallbackImage
- anchors.fill: parent
- source: fallbackTimer.triggered && cachingImage.status !== Image.Ready ? modelData.path : ""
- asynchronous: true
- fillMode: Image.PreserveAspectCrop
- cache: true
- visible: opacity > 0
- antialiasing: true
- smooth: true
- sourceSize: Qt.size(width, height)
+ anchors.fill: parent
+ source: fallbackTimer.triggered && cachingImage.status !== Image.Ready ? modelData.path : ""
+ asynchronous: true
+ fillMode: Image.PreserveAspectCrop
+ cache: true
+ visible: opacity > 0
+ antialiasing: true
+ smooth: true
+ sourceSize: Qt.size(width, height)
- opacity: status === Image.Ready && cachingImage.status !== Image.Ready ? 1 : 0
+ opacity: status === Image.Ready && cachingImage.status !== Image.Ready ? 1 : 0
- Behavior on opacity {
- NumberAnimation {
- duration: 1000
- easing.type: Easing.OutQuad
- }
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 1000
+ easing.type: Easing.OutQuad
}
}
+ }
- Timer {
- id: fallbackTimer
+ Timer {
+ id: fallbackTimer
- property bool triggered: false
- interval: 800
- running: cachingImage.status === Image.Loading || cachingImage.status === Image.Null
- onTriggered: triggered = true
- }
+ property bool triggered: false
+ interval: 800
+ running: cachingImage.status === Image.Loading || cachingImage.status === Image.Null
+ onTriggered: triggered = true
+ }
- // Gradient overlay for filename
- Rectangle {
- id: filenameOverlay
+ // Gradient overlay for filename
+ Rectangle {
+ id: filenameOverlay
- anchors.left: parent.left
- anchors.right: parent.right
- anchors.bottom: parent.bottom
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.bottom: parent.bottom
- implicitHeight: filenameText.implicitHeight + Appearance.padding.normal * 1.5
- radius: 0
+ implicitHeight: filenameText.implicitHeight + Appearance.padding.normal * 1.5
+ radius: 0
- gradient: Gradient {
- GradientStop {
- position: 0.0
- color: Qt.rgba(Colours.palette.m3surface.r,
- Colours.palette.m3surface.g,
- Colours.palette.m3surface.b, 0)
- }
- GradientStop {
- position: 0.3
- color: Qt.rgba(Colours.palette.m3surface.r,
- Colours.palette.m3surface.g,
- Colours.palette.m3surface.b, 0.7)
- }
- GradientStop {
- position: 0.6
- color: Qt.rgba(Colours.palette.m3surface.r,
- Colours.palette.m3surface.g,
- Colours.palette.m3surface.b, 0.9)
- }
- GradientStop {
- position: 1.0
- color: Qt.rgba(Colours.palette.m3surface.r,
- Colours.palette.m3surface.g,
- Colours.palette.m3surface.b, 0.95)
- }
+ gradient: Gradient {
+ GradientStop {
+ position: 0.0
+ color: Qt.rgba(Colours.palette.m3surface.r, Colours.palette.m3surface.g, Colours.palette.m3surface.b, 0)
}
-
- opacity: 0
-
- Behavior on opacity {
- NumberAnimation {
- duration: 1000
- easing.type: Easing.OutCubic
- }
+ GradientStop {
+ position: 0.3
+ color: Qt.rgba(Colours.palette.m3surface.r, Colours.palette.m3surface.g, Colours.palette.m3surface.b, 0.7)
}
-
- Component.onCompleted: {
- opacity = 1;
+ GradientStop {
+ position: 0.6
+ color: Qt.rgba(Colours.palette.m3surface.r, Colours.palette.m3surface.g, Colours.palette.m3surface.b, 0.9)
+ }
+ GradientStop {
+ position: 1.0
+ color: Qt.rgba(Colours.palette.m3surface.r, Colours.palette.m3surface.g, Colours.palette.m3surface.b, 0.95)
}
}
- }
- Rectangle {
- anchors.fill: parent
- anchors.leftMargin: itemMargin
- anchors.rightMargin: itemMargin
- anchors.topMargin: itemMargin
- anchors.bottomMargin: itemMargin
- color: "transparent"
- radius: itemRadius + border.width
- border.width: isCurrent ? 2 : 0
- border.color: Colours.palette.m3primary
- antialiasing: true
- smooth: true
+ opacity: 0
- Behavior on border.width {
+ Behavior on opacity {
NumberAnimation {
- duration: 150
- easing.type: Easing.OutQuad
+ duration: 1000
+ easing.type: Easing.OutCubic
}
}
- MaterialIcon {
- anchors.right: parent.right
- anchors.top: parent.top
- anchors.margins: Appearance.padding.small
+ Component.onCompleted: {
+ opacity = 1;
+ }
+ }
+ }
+
+ Rectangle {
+ anchors.fill: parent
+ anchors.leftMargin: itemMargin
+ anchors.rightMargin: itemMargin
+ anchors.topMargin: itemMargin
+ anchors.bottomMargin: itemMargin
+ color: "transparent"
+ radius: itemRadius + border.width
+ border.width: isCurrent ? 2 : 0
+ border.color: Colours.palette.m3primary
+ antialiasing: true
+ smooth: true
- visible: isCurrent
- text: "check_circle"
- color: Colours.palette.m3primary
- font.pointSize: Appearance.font.size.large
+ Behavior on border.width {
+ NumberAnimation {
+ duration: 150
+ easing.type: Easing.OutQuad
}
}
- StyledText {
- id: filenameText
- anchors.left: parent.left
+ MaterialIcon {
anchors.right: parent.right
- anchors.bottom: parent.bottom
- anchors.leftMargin: Appearance.padding.normal + Appearance.spacing.normal / 2
- anchors.rightMargin: Appearance.padding.normal + Appearance.spacing.normal / 2
- anchors.bottomMargin: Appearance.padding.normal
+ anchors.top: parent.top
+ anchors.margins: Appearance.padding.small
- text: modelData.name
- font.pointSize: Appearance.font.size.smaller
- font.weight: 500
- color: isCurrent ? Colours.palette.m3primary : Colours.palette.m3onSurface
- elide: Text.ElideMiddle
- maximumLineCount: 1
- horizontalAlignment: Text.AlignHCenter
+ visible: isCurrent
+ text: "check_circle"
+ color: Colours.palette.m3primary
+ font.pointSize: Appearance.font.size.large
+ }
+ }
- opacity: 0
+ StyledText {
+ id: filenameText
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.bottom: parent.bottom
+ anchors.leftMargin: Appearance.padding.normal + Appearance.spacing.normal / 2
+ anchors.rightMargin: Appearance.padding.normal + Appearance.spacing.normal / 2
+ anchors.bottomMargin: Appearance.padding.normal
- Behavior on opacity {
- NumberAnimation {
- duration: 1000
- easing.type: Easing.OutCubic
- }
- }
+ text: modelData.name
+ font.pointSize: Appearance.font.size.smaller
+ font.weight: 500
+ color: isCurrent ? Colours.palette.m3primary : Colours.palette.m3onSurface
+ elide: Text.ElideMiddle
+ maximumLineCount: 1
+ horizontalAlignment: Text.AlignHCenter
- Component.onCompleted: {
- opacity = 1;
+ opacity: 0
+
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 1000
+ easing.type: Easing.OutCubic
}
}
+
+ Component.onCompleted: {
+ opacity = 1;
+ }
}
}
+}
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-23 14:58:13 +0000