feat(Components): Add StatusSlider

sandbox/Controls.qml

@@ -9,6 +9,7 @@ GridLayout {
     columns: 6
     columnSpacing: 5
     rowSpacing: 5
+    property ThemePalette theme
 
     StatusIconTabButton {
         icon.name: "chat"
@@ -18,14 +19,6 @@ GridLayout {
         icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
     }
 
-    StatusIconTabButton {
-        icon.color: Theme.palette.miscColor9
-        // This icon source is flawed and demonstrates the fallback case
-        // when the image source can't be loaded
-        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jp"
-        name: "Pascal"
-    }
-
     StatusIconTabButton {
         name: "#status"
     }
@@ -102,4 +95,11 @@ GridLayout {
     }
 
     StatusCheckBox {}
+
+    StatusSlider {
+        width: 360
+        from: 0
+        to: 100
+        value: 40
+    }
 }

sandbox/Layout.qml

@@ -11,6 +11,7 @@ GridLayout {
     columns: 6
     columnSpacing: 5
     rowSpacing: 5
+    property ThemePalette theme
 
     Button {
         id: btn

sandbox/Others.qml

@@ -8,9 +8,10 @@ GridLayout {
     columns: 6
     columnSpacing: 5
     rowSpacing: 5
+    property ThemePalette theme
 
     StatusLoadingIndicator {
-        color: Theme.palette.directColor4
+        color: parent.theme.directColor4
     }
 
     StatusLetterIdenticon {
@@ -34,8 +35,4 @@ GridLayout {
     StatusBadge {
         value: 100
     }
-
-    StatusRoundIcon {
-        icon.name: "info"
-    }
 }

sandbox/main.qml

@@ -70,7 +70,7 @@ StatusWindow {
         width: parent.width
         anchors.top: tabs.bottom
         anchors.bottom: parent.bottom
-        contentHeight: lightThemeBg.height * rootWindow.factor
+        contentHeight: rootWindow.height * rootWindow.factor
         contentWidth: rootWindow.width * rootWindow.factor
         clip: true
 
@@ -79,14 +79,12 @@ StatusWindow {
             id: lightThemeBg
 
             width: rootWindow.width
-            height: page.height + 64
-            anchors.topMargin: 32
+            height: parent.height
             color: Theme.palette.baseColor5
             clip: true
             scale: rootWindow.factor
 
             Loader {
-                id: page
                 active: true
                 anchors.centerIn: parent
 
@@ -177,6 +175,7 @@ StatusWindow {
         id: controlsComponent
         Controls {
             anchors.centerIn: parent
+            theme: Theme.palette
         }
     }
 
@@ -184,6 +183,7 @@ StatusWindow {
         id: layoutComponent
         Layout {
             anchors.centerIn: parent
+            theme: Theme.palette
         }
     }
 
@@ -191,6 +191,7 @@ StatusWindow {
         id: othersComponent
         Others {
             anchors.centerIn: parent
+            theme: Theme.palette
         }
     }
 

src/StatusQ/Components/StatusBadge.qml

@@ -28,7 +28,7 @@ Rectangle {
         visible: statusBadge.value > 0
         font.pixelSize: statusBadge.value > 99 ? 10 : 12
         font.weight: Font.Bold
-        color: Theme.palette.statusBadge.foregroundColor
+        color: Theme.palette.white
         anchors.centerIn: parent
         text: {
             if (statusBadge.value > 99) {

src/StatusQ/Components/StatusRoundIcon.qml

@@ -1,28 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Rectangle {
-    id: statusRoundedIcon
-
-    implicitWidth: 40
-    implicitHeight: 40
-    radius: width / 2;
-
-    color: Theme.palette.primaryColor3;
-    property StatusIconSettings icon: StatusIconSettings {
-        width: 24
-        height: 24
-    }
-
-    StatusIcon {
-        id: statusIcon
-        anchors.centerIn: parent
-
-        width: statusRoundedIcon.icon.width
-        height: statusRoundedIcon.icon.height
-
-        color: Theme.palette.primaryColor1
-        icon: statusRoundedIcon.icon.name
-    }
-}

src/StatusQ/Components/qmldir

@@ -3,5 +3,4 @@ module StatusQ.Components
 StatusBadge 0.1 StatusBadge.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
-StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml

src/StatusQ/Controls/StatusIconTabButton.qml

@@ -40,37 +40,10 @@ TabButton {
 
         Component {
             id: imageIcon
-            Item {
+            StatusRoundedImage {
                 width: 28
                 height: 28
-                StatusRoundedImage {
-                    id: statusRoundImage
-                    width: parent.width
-                    height: parent.height
-                    image.source: icon.source
-                }
-                Loader {
-                    sourceComponent: {
-                        switch (statusRoundImage.image.status) {
-                            case Image.Loading:
-                              return statusLoadingIndicator
-                              break;
-                            case Image.Error:
-                              return letterIdenticon
-                              break;
-                        }
-                    }
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    active: statusRoundImage.image.status === Image.Loading || statusRoundImage.image.status === Image.Error
-                }
-
-                Component {
-                    id: statusLoadingIndicator
-                    StatusLoadingIndicator {
-                        color: Theme.palette.directColor6
-                    }
-                }
+                image.source: icon.source
             }
         }
 

src/StatusQ/Controls/StatusRadioButton.qml

@@ -33,7 +33,6 @@ RadioButton {
     }
     contentItem: StatusBaseText {
         text: statusRadioButton.text
-        color: Theme.palette.directColor1
         verticalAlignment: Text.AlignVCenter
         leftPadding: !!statusRadioButton.text ? statusRadioButton.indicator.width + statusRadioButton.spacing
                                               : statusRadioButton.indicator.width

src/StatusQ/Controls/StatusSlider.qml

@@ -0,0 +1,60 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Slider {
+    id: statusSlider
+
+    implicitWidth: 360
+    implicitHeight: 4
+
+    leftPadding: 0
+
+    background: Rectangle {
+        implicitHeight: 4
+        implicitWidth: 100
+        color: {
+            if (statusSlider.value === statusSlider.to) {
+                return Theme.palette.primaryColor1
+            }
+            return Theme.palette.primaryColor3
+        }
+        radius: 2
+        Rectangle {
+            radius: 2
+            anchors.fill: parent
+            visible: statusSlider.value > statusSlider.from && statusSlider.value < statusSlider.to
+            gradient: Gradient {
+                GradientStop { color: Theme.palette.primaryColor1 ; position: 0 }
+                GradientStop { color: Theme.palette.primaryColor3 ; position: (((statusSlider.value - statusSlider.from) * 100) / (statusSlider.to - statusSlider.from) / 100).toFixed(2) }
+                GradientStop { color: Theme.palette.primaryColor1 ; position: (((statusSlider.value - statusSlider.from) * 100) / (statusSlider.to - statusSlider.from) / 100).toFixed(2) }
+                GradientStop { color: Theme.palette.primaryColor3 ; position: 1 }
+                orientation: Gradient.Horizontal
+            }
+        }
+    } // background
+
+    handle: Rectangle {
+        x: statusSlider.leftPadding + statusSlider.visualPosition * (statusSlider.availableWidth - width / 2)
+        anchors.verticalCenter: parent.verticalCenter
+        color: Theme.palette.white
+        implicitWidth: 28
+        implicitHeight: 28
+        radius: 14
+        layer.enabled: true
+        layer.effect: DropShadow {
+            width: parent.width
+            height: parent.height
+            visible: true
+            verticalOffset: 2
+            samples: 15
+            fast: true
+            cached: true
+            color: Theme.palette.dropShadow
+        }
+    }
+}

src/StatusQ/Controls/qmldir

@@ -11,3 +11,4 @@ StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
 StatusSwitch 0.1 StatusSwitch.qml
 StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml
+StatusSlider 0.1 StatusSlider.qml

src/StatusQ/Core/StatusIconSettings.qml

@@ -1,9 +0,0 @@
-import QtQuick 2.13
-
-QtObject {
-    id: statusIconSettings
-
-    property string name
-    property real width
-    property real height
-}

src/StatusQ/Core/StatusImageSettings.qml

@@ -1,10 +0,0 @@
-import QtQuick 2.13
-
-QtObject {
-    id: statusImageSettings
-
-    property url source
-    property real width
-    property real height
-}
-

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -120,9 +120,5 @@ ThemePalette {
     property QtObject statusAppNavBar: QtObject {
         property color backgroundColor: baseColor5
     }
-
-    property QtObject statusBadge: QtObject {
-        property color foregroundColor: baseColor3
-    }
 }
 

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -120,9 +120,5 @@ ThemePalette {
     property QtObject statusAppNavBar: QtObject {
         property color backgroundColor: baseColor4
     }
-
-    property QtObject statusBadge: QtObject {
-        property color foregroundColor: white
-    }
 }
 

src/StatusQ/Core/Theme/Theme.qml

@@ -4,7 +4,10 @@ import QtQuick 2.13
 
 QtObject {
     id: appTheme
-    property QtObject palette: StatusLightTheme {}
+    // Replace it with:
+    //      property QtObject palette: StatusLightTheme {}
+    // for reloading
+    property ThemePalette palette: StatusLightTheme {}
 
     function setTheme(theme) {
         palette = theme

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -82,10 +82,6 @@ QtObject {
         property color backgroundColor
     }
 
-    property QtObject statusBadge: QtObject {
-        property color foregroundColor
-    }
-
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha

src/StatusQ/Core/qmldir

@@ -2,6 +2,4 @@ module StatusQ.Core
 
 StatusBaseText 0.1 StatusBaseText.qml
 StatusIcon 0.1 StatusIcon.qml
-StatusIconSettings 0.1 StatusIconSettings.qml
-StatusImageSettings 0.1 StatusImageSettings.qml