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

@@ -46,6 +46,11 @@ StatusWindow {
             checkable: true
             text: "Controls"
         }
+        Button {
+            id: listItemsTab
+            checkable: true
+            text: "List Items"
+        }
         Button {
             id: layoutTab
             checkable: true
@@ -96,6 +101,8 @@ StatusWindow {
                         return iconsComponent;
                     case controlsTab:
                         return controlsComponent;
+                    case listItemsTab:
+                        return listItemsComponent;
                     case layoutTab:
                         return layoutComponent;
                     case otherTab:
@@ -180,6 +187,13 @@ StatusWindow {
         }
     }
 
+    Component {
+        id: listItemsComponent
+        ListItems {
+            anchors.centerIn: parent
+        }
+    }
+
     Component {
         id: layoutComponent
         Layout {

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/qmldir

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

@@ -6,4 +6,6 @@ QtObject {
     property string name
     property real width
     property real height
+    property color color
+    property url source
 }

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -121,6 +121,10 @@ ThemePalette {
         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

@@ -121,6 +121,10 @@ ThemePalette {
         property color backgroundColor: baseColor4
     }
 
+    property QtObject statusListItem: QtObject {
+        property color backgroundColor: white
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor: white
     }

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -82,6 +82,10 @@ QtObject {
         property color backgroundColor
     }
 
+    property QtObject statusListItem: QtObject {
+        property color backgroundColor
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor
     }