fix(Core): disable StatusIcon ColorOverlay if no color is supplied

This is needed to have the underlying SVG's color bleed through and
make use of the image's opacity at the same time.

Using `ColorOverlay` together with (half) transparent colors doesn't
work very well as it makes the underlying SVG color come through,
result in wrong colors.

Applying `opacity` on the image itself cause the `ColorOverlay` to
reduce in opacity as well. So in order to work with transparent
colors, we need a way to turn of the ColorOverlay and work with the
Image's opacity, which is what this change enables.

sandbox/Controls.qml

@@ -9,7 +9,6 @@ GridLayout {
     columns: 6
     columnSpacing: 5
     rowSpacing: 5
-    property ThemePalette theme
 
     StatusIconTabButton {
         icon.name: "chat"
@@ -19,6 +18,14 @@ 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"
     }
@@ -95,11 +102,4 @@ GridLayout {
     }
 
     StatusCheckBox {}
-
-    StatusSlider {
-        width: 360
-        from: 0
-        to: 100
-        value: 40
-    }
 }

sandbox/Layout.qml

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

sandbox/ListItems.qml

@@ -0,0 +1,129 @@
+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,10 +8,9 @@ GridLayout {
     columns: 6
     columnSpacing: 5
     rowSpacing: 5
-    property ThemePalette theme
 
     StatusLoadingIndicator {
-        color: parent.theme.directColor4
+        color: Theme.palette.directColor4
     }
 
     StatusLetterIdenticon {
@@ -35,4 +34,8 @@ GridLayout {
     StatusBadge {
         value: 100
     }
+
+    StatusRoundIcon {
+        icon.name: "info"
+    }
 }

sandbox/main.qml

@@ -46,6 +46,11 @@ StatusWindow {
             checkable: true
             text: "Controls"
         }
+        Button {
+            id: listItemsTab
+            checkable: true
+            text: "List Items"
+        }
         Button {
             id: layoutTab
             checkable: true
@@ -70,7 +75,7 @@ StatusWindow {
         width: parent.width
         anchors.top: tabs.bottom
         anchors.bottom: parent.bottom
-        contentHeight: rootWindow.height * rootWindow.factor
+        contentHeight: lightThemeBg.height * rootWindow.factor
         contentWidth: rootWindow.width * rootWindow.factor
         clip: true
 
@@ -79,12 +84,14 @@ StatusWindow {
             id: lightThemeBg
 
             width: rootWindow.width
-            height: parent.height
+            height: page.height + 64
+            anchors.topMargin: 32
             color: Theme.palette.baseColor5
             clip: true
             scale: rootWindow.factor
 
             Loader {
+                id: page
                 active: true
                 anchors.centerIn: parent
 
@@ -94,6 +101,8 @@ StatusWindow {
                         return iconsComponent;
                     case controlsTab:
                         return controlsComponent;
+                    case listItemsTab:
+                        return listItemsComponent;
                     case layoutTab:
                         return layoutComponent;
                     case otherTab:
@@ -175,7 +184,13 @@ StatusWindow {
         id: controlsComponent
         Controls {
             anchors.centerIn: parent
-            theme: Theme.palette
+        }
+    }
+
+    Component {
+        id: listItemsComponent
+        ListItems {
+            anchors.centerIn: parent
         }
     }
 
@@ -183,7 +198,6 @@ StatusWindow {
         id: layoutComponent
         Layout {
             anchors.centerIn: parent
-            theme: Theme.palette
         }
     }
 
@@ -191,7 +205,6 @@ 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.white
+        color: Theme.palette.statusBadge.foregroundColor
         anchors.centerIn: parent
         text: {
             if (statusBadge.value > 99) {

src/StatusQ/Components/StatusListItem.qml

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,28 @@
+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,5 +2,7 @@ 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,10 +40,37 @@ TabButton {
 
         Component {
             id: imageIcon
-            StatusRoundedImage {
+            Item {
                 width: 28
                 height: 28
-                image.source: icon.source
+                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
+                    }
+                }
             }
         }
 

src/StatusQ/Controls/StatusRadioButton.qml

@@ -33,6 +33,7 @@ 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

@@ -1,60 +0,0 @@
-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,4 +11,3 @@ 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 color color
+    property string color: ""
 
     id: statusIcon
     width: 24
@@ -19,7 +19,7 @@ Image {
     }
 
     ColorOverlay {
-        visible: statusIcon.color !== undefined
+        visible: !!statusIcon.color
         anchors.fill: statusIcon
         source: statusIcon
         color: statusIcon.color

src/StatusQ/Core/StatusIconSettings.qml

@@ -0,0 +1,11 @@
+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

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

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -120,5 +120,13 @@ 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,5 +120,13 @@ 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,10 +4,7 @@ import QtQuick 2.13
 
 QtObject {
     id: appTheme
-    // Replace it with:
-    //      property QtObject palette: StatusLightTheme {}
-    // for reloading
-    property ThemePalette palette: StatusLightTheme {}
+    property QtObject palette: StatusLightTheme {}
 
     function setTheme(theme) {
         palette = theme

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -82,6 +82,14 @@ 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,4 +2,6 @@ module StatusQ.Core
 
 StatusBaseText 0.1 StatusBaseText.qml
 StatusIcon 0.1 StatusIcon.qml
+StatusIconSettings 0.1 StatusIconSettings.qml
+StatusImageSettings 0.1 StatusImageSettings.qml