mirror of
https://github.com/belsabbagh/dotfiles.git
synced 2026-04-11 17:47:09 +00:00
quickshell and hyprland additions
This commit is contained in:
@@ -0,0 +1,108 @@
|
||||
import ".."
|
||||
import qs.components
|
||||
import qs.components.controls
|
||||
import qs.components.effects
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
StyledRect {
|
||||
id: root
|
||||
|
||||
property var options: [] // Array of {label: string, propertyName: string, onToggled: function}
|
||||
property var rootItem: null // The root item that contains the properties we want to bind to
|
||||
property string title: "" // Optional title text
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
|
||||
radius: Appearance.rounding.normal
|
||||
color: Colours.layer(Colours.palette.m3surfaceContainer, 2)
|
||||
clip: true
|
||||
|
||||
Behavior on implicitHeight {
|
||||
Anim {}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: layout
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.large
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
StyledText {
|
||||
visible: root.title !== ""
|
||||
text: root.title
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: buttonRow
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
Repeater {
|
||||
id: repeater
|
||||
model: root.options
|
||||
|
||||
delegate: TextButton {
|
||||
id: button
|
||||
required property int index
|
||||
required property var modelData
|
||||
|
||||
Layout.fillWidth: true
|
||||
text: modelData.label
|
||||
|
||||
property bool _checked: false
|
||||
|
||||
checked: _checked
|
||||
toggle: false
|
||||
type: TextButton.Tonal
|
||||
|
||||
// Create binding in Component.onCompleted
|
||||
Component.onCompleted: {
|
||||
if (root.rootItem && modelData.propertyName) {
|
||||
const propName = modelData.propertyName;
|
||||
const rootItem = root.rootItem;
|
||||
_checked = Qt.binding(function () {
|
||||
return rootItem[propName] ?? false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Match utilities Toggles radius styling
|
||||
// Each button has full rounding (not connected) since they have spacing
|
||||
radius: stateLayer.pressed ? Appearance.rounding.small / 2 : internalChecked ? Appearance.rounding.small : Appearance.rounding.normal
|
||||
|
||||
// Match utilities Toggles inactive color
|
||||
inactiveColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
|
||||
|
||||
// Adjust width similar to utilities toggles
|
||||
Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? Appearance.padding.large : internalChecked ? Appearance.padding.smaller : 0)
|
||||
|
||||
onClicked: {
|
||||
if (modelData.onToggled && root.rootItem && modelData.propertyName) {
|
||||
const currentValue = root.rootItem[modelData.propertyName] ?? false;
|
||||
modelData.onToggled(!currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on Layout.preferredWidth {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.expressiveFastSpatial
|
||||
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on radius {
|
||||
Anim {
|
||||
duration: Appearance.anim.durations.expressiveFastSpatial
|
||||
easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import ".."
|
||||
import qs.components
|
||||
import qs.components.controls
|
||||
import qs.components.effects
|
||||
import qs.components.containers
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property Session session
|
||||
property var device: null
|
||||
|
||||
property Component headerComponent: null
|
||||
property list<Component> sections: []
|
||||
|
||||
property Component topContent: null
|
||||
property Component bottomContent: null
|
||||
|
||||
implicitWidth: layout.implicitWidth
|
||||
implicitHeight: layout.implicitHeight
|
||||
|
||||
ColumnLayout {
|
||||
id: layout
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
Loader {
|
||||
id: headerLoader
|
||||
|
||||
Layout.fillWidth: true
|
||||
sourceComponent: root.headerComponent
|
||||
visible: root.headerComponent !== null
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: topContentLoader
|
||||
|
||||
Layout.fillWidth: true
|
||||
sourceComponent: root.topContent
|
||||
visible: root.topContent !== null
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: root.sections
|
||||
|
||||
Loader {
|
||||
required property Component modelData
|
||||
|
||||
Layout.fillWidth: true
|
||||
sourceComponent: modelData
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: bottomContentLoader
|
||||
|
||||
Layout.fillWidth: true
|
||||
sourceComponent: root.bottomContent
|
||||
visible: root.bottomContent !== null
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import ".."
|
||||
import qs.components
|
||||
import qs.components.controls
|
||||
import qs.components.containers
|
||||
import qs.services
|
||||
import qs.config
|
||||
import Quickshell
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: root.headerComponent ? 0 : 0
|
||||
spacing: Appearance.spacing.small
|
||||
visible: root.title !== "" || root.description !== ""
|
||||
|
||||
StyledText {
|
||||
visible: root.title !== ""
|
||||
text: root.title
|
||||
font.pointSize: Appearance.font.size.large
|
||||
font.weight: 500
|
||||
}
|
||||
|
||||
Loader {
|
||||
sourceComponent: root.titleSuffix
|
||||
visible: root.titleSuffix !== null
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
|
||||
property alias view: view
|
||||
|
||||
StyledText {
|
||||
visible: root.description !== ""
|
||||
Layout.fillWidth: true
|
||||
text: root.description
|
||||
color: Colours.palette.m3outline
|
||||
}
|
||||
|
||||
StyledListView {
|
||||
id: view
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: contentHeight
|
||||
|
||||
model: root.model
|
||||
delegate: root.delegate
|
||||
|
||||
spacing: Appearance.spacing.small / 2
|
||||
interactive: false
|
||||
clip: false
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import qs.config
|
||||
import QtQuick
|
||||
|
||||
SequentialAnimation {
|
||||
id: root
|
||||
|
||||
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
|
||||
property: "opacity"
|
||||
from: root.opacityFrom
|
||||
to: root.opacityTo
|
||||
duration: Appearance.anim.durations.normal / 2
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Appearance.anim.curves.standardAccel
|
||||
}
|
||||
|
||||
NumberAnimation {
|
||||
target: root.target
|
||||
property: "scale"
|
||||
from: root.scaleFrom
|
||||
to: root.scaleTo
|
||||
duration: Appearance.anim.durations.normal / 2
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Appearance.anim.curves.standardAccel
|
||||
}
|
||||
}
|
||||
|
||||
ScriptAction {
|
||||
script: {
|
||||
for (let i = 0; i < root.propertyActions.length; i++) {
|
||||
const action = root.propertyActions[i];
|
||||
if (action.target && action.property !== undefined) {
|
||||
action.target[action.property] = action.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ParallelAnimation {
|
||||
NumberAnimation {
|
||||
target: root.target
|
||||
property: "opacity"
|
||||
from: root.opacityTo
|
||||
to: root.opacityFrom
|
||||
duration: Appearance.anim.durations.normal / 2
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Appearance.anim.curves.standardDecel
|
||||
}
|
||||
|
||||
NumberAnimation {
|
||||
target: root.target
|
||||
property: "scale"
|
||||
from: root.scaleTo
|
||||
to: root.scaleFrom
|
||||
duration: Appearance.anim.durations.normal / 2
|
||||
easing.type: Easing.BezierSpline
|
||||
easing.bezierCurve: Appearance.anim.curves.standardDecel
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import ".."
|
||||
import "../components"
|
||||
import qs.components
|
||||
import qs.components.controls
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
property string label: ""
|
||||
property real value: 0
|
||||
property real from: 0
|
||||
property real to: 100
|
||||
property string suffix: ""
|
||||
property bool readonly: false
|
||||
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
StyledText {
|
||||
visible: root.label !== ""
|
||||
text: root.label
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
color: root.readonly ? Colours.palette.m3outline : Colours.palette.m3onSurface
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
visible: root.readonly
|
||||
text: "lock"
|
||||
color: Colours.palette.m3outline
|
||||
font.pointSize: Appearance.font.size.small
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: Math.round(root.value) + (root.suffix !== "" ? " " + root.suffix : "")
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
color: root.readonly ? Colours.palette.m3outline : Colours.palette.m3onSurface
|
||||
}
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: Appearance.padding.normal
|
||||
radius: Appearance.rounding.full
|
||||
color: Colours.layer(Colours.palette.m3surfaceContainerHighest, 1)
|
||||
opacity: root.readonly ? 0.5 : 1.0
|
||||
|
||||
StyledRect {
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
width: parent.width * ((root.value - root.from) / (root.to - root.from))
|
||||
radius: parent.radius
|
||||
color: root.readonly ? Colours.palette.m3outline : Colours.palette.m3primary
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import qs.components
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
required property string icon
|
||||
required property string title
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: column.implicitHeight
|
||||
|
||||
ColumnLayout {
|
||||
id: column
|
||||
|
||||
anchors.centerIn: parent
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: root.icon
|
||||
font.pointSize: Appearance.font.size.extraLarge * 3
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
StyledText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: root.title
|
||||
font.pointSize: Appearance.font.size.large
|
||||
font.bold: true
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import qs.components
|
||||
import qs.components.controls
|
||||
import qs.components.effects
|
||||
import qs.services
|
||||
import qs.config
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
property string label: ""
|
||||
property real value: 0
|
||||
property real from: 0
|
||||
property real to: 100
|
||||
property real stepSize: 0
|
||||
property var validator: null
|
||||
property string suffix: "" // Optional suffix text (e.g., "×", "px")
|
||||
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);
|
||||
}
|
||||
// Default format function
|
||||
// Check if it's an IntValidator (IntValidator doesn't have a 'decimals' property)
|
||||
if (validator && validator.bottom !== undefined && validator.decimals === undefined) {
|
||||
return Math.round(val).toString();
|
||||
}
|
||||
// For DoubleValidator or no validator, use the decimals property
|
||||
return val.toFixed(root.decimals);
|
||||
}
|
||||
|
||||
function parseValue(text: string): real {
|
||||
if (parseValueFunction) {
|
||||
return parseValueFunction(text);
|
||||
}
|
||||
// Default parse function
|
||||
if (validator && validator.bottom !== undefined) {
|
||||
// Check if it's an integer validator
|
||||
if (validator.top !== undefined && validator.top === Math.floor(validator.top)) {
|
||||
return parseInt(text);
|
||||
}
|
||||
}
|
||||
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(() => {
|
||||
_initialized = true;
|
||||
});
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
StyledText {
|
||||
visible: root.label !== ""
|
||||
text: root.label
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
StyledInputField {
|
||||
id: inputField
|
||||
Layout.preferredWidth: 70
|
||||
validator: root.validator
|
||||
|
||||
Component.onCompleted: {
|
||||
// Initialize text without triggering valueModified signal
|
||||
text = root.formatValue(root.value);
|
||||
}
|
||||
|
||||
onTextEdited: text => {
|
||||
if (hasFocus) {
|
||||
const val = root.parseValue(text);
|
||||
if (!isNaN(val)) {
|
||||
// Validate against validator bounds if available
|
||||
let isValid = true;
|
||||
if (root.validator) {
|
||||
if (root.validator.bottom !== undefined && val < root.validator.bottom) {
|
||||
isValid = false;
|
||||
}
|
||||
if (root.validator.top !== undefined && val > root.validator.top) {
|
||||
isValid = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (isValid) {
|
||||
root.valueModified(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onEditingFinished: {
|
||||
const val = root.parseValue(text);
|
||||
let isValid = true;
|
||||
if (root.validator) {
|
||||
if (root.validator.bottom !== undefined && val < root.validator.bottom) {
|
||||
isValid = false;
|
||||
}
|
||||
if (root.validator.top !== undefined && val > root.validator.top) {
|
||||
isValid = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (isNaN(val) || !isValid) {
|
||||
text = root.formatValue(root.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
visible: root.suffix !== ""
|
||||
text: root.suffix
|
||||
color: Colours.palette.m3outline
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
}
|
||||
}
|
||||
|
||||
StyledSlider {
|
||||
id: slider
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: Appearance.padding.normal * 3
|
||||
|
||||
from: root.from
|
||||
to: root.to
|
||||
stepSize: root.stepSize
|
||||
|
||||
// Use Binding to allow slider to move freely during dragging
|
||||
Binding {
|
||||
target: slider
|
||||
property: "value"
|
||||
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)
|
||||
if (!inputField.hasFocus) {
|
||||
const newValue = root.stepSize > 0 ? Math.round(value / root.stepSize) * root.stepSize : value;
|
||||
inputField.text = root.formatValue(newValue);
|
||||
}
|
||||
}
|
||||
|
||||
onMoved: {
|
||||
const newValue = root.stepSize > 0 ? Math.round(value / root.stepSize) * root.stepSize : value;
|
||||
root.valueModified(newValue);
|
||||
if (!inputField.hasFocus) {
|
||||
inputField.text = root.formatValue(newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update input field when value changes externally (slider is already bound)
|
||||
onValueChanged: {
|
||||
// Only update if component is initialized to avoid issues during creation
|
||||
if (root._initialized && !inputField.hasFocus) {
|
||||
inputField.text = root.formatValue(root.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import qs.components
|
||||
import qs.components.effects
|
||||
import qs.config
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
RowLayout {
|
||||
id: root
|
||||
|
||||
spacing: 0
|
||||
|
||||
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
|
||||
|
||||
Item {
|
||||
id: leftPane
|
||||
|
||||
Layout.preferredWidth: Math.floor(parent.width * root.leftWidthRatio)
|
||||
Layout.minimumWidth: root.leftMinimumWidth
|
||||
Layout.fillHeight: true
|
||||
|
||||
ClippingRectangle {
|
||||
id: leftClippingRect
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.normal
|
||||
anchors.leftMargin: 0
|
||||
anchors.rightMargin: Appearance.padding.normal / 2
|
||||
|
||||
radius: leftBorder.innerRadius
|
||||
color: "transparent"
|
||||
|
||||
Loader {
|
||||
id: leftLoader
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.large + Appearance.padding.normal
|
||||
anchors.leftMargin: Appearance.padding.large
|
||||
anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
|
||||
|
||||
sourceComponent: root.leftContent
|
||||
|
||||
Component.onCompleted: {
|
||||
for (const key in root.leftLoaderProperties) {
|
||||
leftLoader[key] = root.leftLoaderProperties[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
InnerBorder {
|
||||
id: leftBorder
|
||||
|
||||
leftThickness: 0
|
||||
rightThickness: Appearance.padding.normal / 2
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: rightPane
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
ClippingRectangle {
|
||||
id: rightClippingRect
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.normal
|
||||
anchors.leftMargin: 0
|
||||
anchors.rightMargin: Appearance.padding.normal / 2
|
||||
|
||||
radius: rightBorder.innerRadius
|
||||
color: "transparent"
|
||||
|
||||
Loader {
|
||||
id: rightLoader
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.large * 2
|
||||
|
||||
sourceComponent: root.rightContent
|
||||
|
||||
Component.onCompleted: {
|
||||
for (const key in root.rightLoaderProperties) {
|
||||
rightLoader[key] = root.rightLoaderProperties[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
InnerBorder {
|
||||
id: rightBorder
|
||||
|
||||
leftThickness: Appearance.padding.normal / 2
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import ".."
|
||||
import qs.components
|
||||
import qs.components.effects
|
||||
import qs.components.containers
|
||||
import qs.config
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
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 Component overlayComponent: null
|
||||
|
||||
SplitPaneLayout {
|
||||
id: splitLayout
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
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
|
||||
|
||||
function getComponentForPane() {
|
||||
return pane ? root.rightDetailsComponent : root.rightSettingsComponent;
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
targetComponent = getComponentForPane();
|
||||
nextComponent = targetComponent;
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: rightLoader
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
opacity: 1
|
||||
scale: 1
|
||||
transformOrigin: Item.Center
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: overlayLoader
|
||||
|
||||
anchors.fill: parent
|
||||
z: 1000
|
||||
sourceComponent: root.overlayComponent
|
||||
active: root.overlayComponent !== null
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import ".."
|
||||
import qs.components
|
||||
import qs.components.controls
|
||||
import qs.components.effects
|
||||
import qs.components.images
|
||||
import qs.services
|
||||
import qs.config
|
||||
import Caelestia.Models
|
||||
import QtQuick
|
||||
|
||||
GridView {
|
||||
id: root
|
||||
|
||||
required property Session session
|
||||
|
||||
readonly property int minCellWidth: 200 + Appearance.spacing.normal
|
||||
readonly property int columnsCount: Math.max(1, Math.floor(width / minCellWidth))
|
||||
|
||||
cellWidth: width / columnsCount
|
||||
cellHeight: 140 + Appearance.spacing.normal
|
||||
|
||||
model: Wallpapers.list
|
||||
|
||||
clip: true
|
||||
|
||||
StyledScrollBar.vertical: StyledScrollBar {
|
||||
flickable: root
|
||||
}
|
||||
|
||||
delegate: Item {
|
||||
required property var modelData
|
||||
required property int index
|
||||
|
||||
width: root.cellWidth
|
||||
height: root.cellHeight
|
||||
|
||||
readonly property bool isCurrent: modelData && modelData.path === Wallpapers.actualCurrent
|
||||
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
|
||||
|
||||
function onClicked(): void {
|
||||
Wallpapers.setWallpaper(modelData.path);
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
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)
|
||||
|
||||
opacity: status === Image.Ready ? 1 : 0
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: 1000
|
||||
easing.type: Easing.OutQuad
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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)
|
||||
|
||||
opacity: status === Image.Ready && cachingImage.status !== Image.Ready ? 1 : 0
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: 1000
|
||||
easing.type: Easing.OutQuad
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: fallbackTimer
|
||||
|
||||
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
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
opacity: 0
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: 1000
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
Behavior on border.width {
|
||||
NumberAnimation {
|
||||
duration: 150
|
||||
easing.type: Easing.OutQuad
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
anchors.margins: Appearance.padding.small
|
||||
|
||||
visible: isCurrent
|
||||
text: "check_circle"
|
||||
color: Colours.palette.m3primary
|
||||
font.pointSize: Appearance.font.size.large
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
opacity: 0
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: 1000
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
opacity = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user