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/ListItems.qml

@@ -1,129 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-
-GridLayout {
-    columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
-
-    StatusListItem {
-        title: "Title"
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-    }
-
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        components: [StatusButton {
-            text: "Button"
-            size: StatusBaseButton.Size.Small
-        }]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        components: [StatusSwitch {}]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        components: [StatusRadioButton {}]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        components: [StatusCheckBox {}]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        label: "Text"
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        label: "Text"
-        components: [
-            StatusButton {
-                text: "Button"
-                size: StatusBaseButton.Size.Small
-            }
-        ]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        label: "Text"
-        components: [StatusSwitch {}]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        label: "Text"
-        components: [
-          StatusRadioButton {}
-        ]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        label: "Text"
-        components: [StatusCheckBox {}]
-    }
-
-    StatusListItem {
-        title: "Title"
-        subTitle: "Subtitle"
-        icon.name: "info"
-        label: "Text"
-        components: [
-            StatusBadge {
-                value: 1
-            },
-            StatusIcon {
-                icon: "info"
-                color: Theme.palette.baseColor1
-                width: 20
-                height: 20
-            }
-        ]
-    }
-}

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

@@ -46,11 +46,6 @@ StatusWindow {
             checkable: true
             text: "Controls"
         }
-        Button {
-            id: listItemsTab
-            checkable: true
-            text: "List Items"
-        }
         Button {
             id: layoutTab
             checkable: true
@@ -75,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
 
@@ -84,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
 
@@ -101,8 +94,6 @@ StatusWindow {
                         return iconsComponent;
                     case controlsTab:
                         return controlsComponent;
-                    case listItemsTab:
-                        return listItemsComponent;
                     case layoutTab:
                         return layoutComponent;
                     case otherTab:
@@ -184,13 +175,7 @@ StatusWindow {
         id: controlsComponent
         Controls {
             anchors.centerIn: parent
-        }
-    }
-
-    Component {
-        id: listItemsComponent
-        ListItems {
-            anchors.centerIn: parent
+            theme: Theme.palette
         }
     }
 
@@ -198,6 +183,7 @@ StatusWindow {
         id: layoutComponent
         Layout {
             anchors.centerIn: parent
+            theme: Theme.palette
         }
     }
 
@@ -205,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/StatusListItem.qml

@@ -1,109 +0,0 @@
-import QtQuick 2.13
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-import StatusQ.Controls 0.1
-
-Rectangle {
-    id: statusListItem
-
-    implicitWidth: 448
-    implicitHeight: 64
-
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusListItem.backgroundColor
-    radius: 8
-
-    property string title: ""
-    property string subTitle: ""
-    property StatusIconSettings icon: StatusIconSettings {
-        height: 20
-        width: 20
-    }
-    property StatusImageSettings image: StatusImageSettings {}
-    property string label: ""
-
-    property list<Item> components
-
-    onComponentsChanged: {
-        if (components.length) {
-            for (let idx in components) {
-                components[idx].parent = statusListItemComponentsSlot
-            }
-        }
-    }
-
-    MouseArea {
-        id: sensor
-
-        anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor 
-        hoverEnabled: true
-
-        Loader {
-            id: iconOrImage
-            anchors.left: parent.left
-            anchors.leftMargin: 16
-            anchors.verticalCenter: parent.verticalCenter
-            sourceComponent: !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
-            active: !!statusListItem.icon.name || !!statusListItem.image.source.toString()
-        }
-
-        Component {
-            id: statusRoundedIcon
-            StatusRoundIcon {
-                icon: statusListItem.icon
-            }
-        }
-
-        Component {
-            id: statusRoundedImage
-            StatusRoundedImage {
-                image.source: statusListItem.image.source
-            }
-        }
-
-        Item {
-            anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
-            anchors.leftMargin: 16
-            anchors.verticalCenter: parent.verticalCenter
-            height: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0)
-
-            StatusBaseText {
-                id: statusListItemTitle
-                text: statusListItem.title
-                font.pixelSize: 15
-                color: Theme.palette.directColor1
-            }
-
-            StatusBaseText {
-                id: statusListItemSubTitle
-                anchors.top: statusListItemTitle.bottom
-
-                text: statusListItem.subTitle
-                font.pixelSize: 15
-                color: Theme.palette.baseColor1
-                visible: !!statusListItem.subTitle
-            }
-        }
-
-        StatusBaseText {
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: statusListItemComponentsSlot.left
-            anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
-
-            text: statusListItem.label
-            font.pixelSize: 15
-            color: Theme.palette.baseColor1
-            visible: !!statusListItem.label
-        }
-
-
-        Row {
-            id: statusListItemComponentsSlot
-            anchors.right: parent.right
-            anchors.rightMargin: 16
-            anchors.verticalCenter: parent.verticalCenter
-            spacing: 10
-        }
-    }
-}

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

@@ -2,7 +2,5 @@ module StatusQ.Components
 
 StatusBadge 0.1 StatusBadge.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
-StatusListItem 0.1 StatusListItem.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/StatusIcon.qml

@@ -3,7 +3,7 @@ import QtGraphicalEffects 1.13
 
 Image {
     property string icon: ""
-    property string color: ""
+    property color color
 
     id: statusIcon
     width: 24
@@ -19,7 +19,7 @@ Image {
     }
 
     ColorOverlay {
-        visible: !!statusIcon.color
+        visible: statusIcon.color !== undefined
         anchors.fill: statusIcon
         source: statusIcon
         color: statusIcon.color

src/StatusQ/Core/StatusIconSettings.qml

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

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,13 +120,5 @@ ThemePalette {
     property QtObject statusAppNavBar: QtObject {
         property color backgroundColor: baseColor5
     }
-
-    property QtObject statusListItem: QtObject {
-        property color backgroundColor: baseColor3
-    }
-
-    property QtObject statusBadge: QtObject {
-        property color foregroundColor: baseColor3
-    }
 }
 

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -120,13 +120,5 @@ ThemePalette {
     property QtObject statusAppNavBar: QtObject {
         property color backgroundColor: baseColor4
     }
-
-    property QtObject statusListItem: QtObject {
-        property color backgroundColor: white
-    }
-
-    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,14 +82,6 @@ QtObject {
         property color backgroundColor
     }
 
-    property QtObject statusListItem: 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