Modularlize the shell

2026-01-29 07:52:50 -05:00 · 2025-07-10 16:40:04 -04:00
parent 7cdeba1625
commit 40b2a3af1e
28 changed files with 5260 additions and 4906 deletions
--- a/Widgets/CustomSlider.qml
+++ b/Widgets/CustomSlider.qml
@@ -0,0 +1,150 @@
+import QtQuick
+import "../Common"
+
+Item {
+    id: slider
+    
+    property int value: 50
+    property int minimum: 0
+    property int maximum: 100
+    property string leftIcon: ""
+    property string rightIcon: ""
+    property bool enabled: true
+    property string unit: "%"
+    property bool showValue: true
+    
+    signal sliderValueChanged(int newValue)
+    
+    height: 80
+    
+    Column {
+        anchors.fill: parent
+        spacing: Theme.spacingM
+        
+        // Value display
+        Text {
+            text: slider.value + slider.unit
+            font.pixelSize: Theme.fontSizeMedium
+            color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
+            font.weight: Font.Medium
+            visible: slider.showValue
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+        
+        // Slider row
+        Row {
+            width: parent.width
+            spacing: Theme.spacingM
+            
+            // Left icon
+            Text {
+                text: slider.leftIcon
+                font.family: Theme.iconFont
+                font.pixelSize: Theme.iconSize
+                color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
+                anchors.verticalCenter: parent.verticalCenter
+                visible: slider.leftIcon.length > 0
+            }
+            
+            // Slider track
+            Rectangle {
+                id: sliderTrack
+                width: parent.width - (leftIconWidth + rightIconWidth + (slider.leftIcon.length > 0 ? Theme.spacingM : 0) + (slider.rightIcon.length > 0 ? Theme.spacingM : 0))
+                height: 6
+                radius: 3
+                color: slider.enabled ? 
+                    Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3) :
+                    Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.1)
+                anchors.verticalCenter: parent.verticalCenter
+                
+                property int leftIconWidth: slider.leftIcon.length > 0 ? Theme.iconSize : 0
+                property int rightIconWidth: slider.rightIcon.length > 0 ? Theme.iconSize : 0
+                
+                // Fill
+                Rectangle {
+                    id: sliderFill
+                    width: parent.width * ((slider.value - slider.minimum) / (slider.maximum - slider.minimum))
+                    height: parent.height
+                    radius: parent.radius
+                    color: slider.enabled ? Theme.primary : Theme.surfaceVariantText
+                    
+                    Behavior on width {
+                        NumberAnimation { duration: 150; easing.type: Easing.OutCubic }
+                    }
+                }
+                
+                // Draggable handle
+                Rectangle {
+                    id: sliderHandle
+                    width: 18
+                    height: 18
+                    radius: 9
+                    color: slider.enabled ? Theme.primary : Theme.surfaceVariantText
+                    border.color: slider.enabled ? Qt.lighter(Theme.primary, 1.3) : Qt.lighter(Theme.surfaceVariantText, 1.3)
+                    border.width: 2
+                    
+                    x: Math.max(0, Math.min(parent.width - width, sliderFill.width - width/2))
+                    anchors.verticalCenter: parent.verticalCenter
+                    
+                    scale: sliderMouseArea.containsMouse || sliderMouseArea.pressed ? 1.2 : 1.0
+                    
+                    Behavior on scale {
+                        NumberAnimation { duration: 150 }
+                    }
+                    
+                    // Handle glow effect when active
+                    Rectangle {
+                        anchors.centerIn: parent
+                        width: parent.width + 4
+                        height: parent.height + 4
+                        radius: width / 2
+                        color: "transparent"
+                        border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
+                        border.width: 2
+                        visible: sliderMouseArea.containsMouse && slider.enabled
+                        
+                        Behavior on opacity {
+                            NumberAnimation { duration: 150 }
+                        }
+                    }
+                }
+                
+                MouseArea {
+                    id: sliderMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: slider.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    enabled: slider.enabled
+                    
+                    onClicked: (mouse) => {
+                        if (slider.enabled) {
+                            let ratio = Math.max(0, Math.min(1, mouse.x / width))
+                            let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum))
+                            slider.value = newValue
+                            slider.sliderValueChanged(newValue)
+                        }
+                    }
+                    
+                    onPositionChanged: (mouse) => {
+                        if (pressed && slider.enabled) {
+                            let ratio = Math.max(0, Math.min(1, mouse.x / width))
+                            let newValue = Math.round(slider.minimum + ratio * (slider.maximum - slider.minimum))
+                            slider.value = newValue
+                            slider.sliderValueChanged(newValue)
+                        }
+                    }
+                }
+            }
+            
+            // Right icon
+            Text {
+                text: slider.rightIcon
+                font.family: Theme.iconFont
+                font.pixelSize: Theme.iconSize
+                color: slider.enabled ? Theme.surfaceText : Theme.surfaceVariantText
+                anchors.verticalCenter: parent.verticalCenter
+                visible: slider.rightIcon.length > 0
+            }
+        }
+    }
+}