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.

README.md

@@ -11,6 +11,7 @@ These modules are:
 - [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir)
 - [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
 - [StatusQ.Controls](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
+- [StatusQ.Layout](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/qmldir)
 
 Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.
 Other than that, modules and components can be used as expected.

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"
     }
@@ -89,4 +96,10 @@ GridLayout {
     StatusSwitch {
 
     }
+
+    StatusRadioButton {
+        text: "i'm radio!"
+    }
+
+    StatusCheckBox {}
 }

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

@@ -2,10 +2,12 @@ import QtQuick 2.14
 import QtQuick.Window 2.14
 import QtQuick.Controls 2.14
 
+import Sandbox 0.1
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
-Window {
+StatusWindow {
     id: rootWindow
     width: 1024
     height: 840
@@ -44,6 +46,11 @@ Window {
             checkable: true
             text: "Controls"
         }
+        Button {
+            id: listItemsTab
+            checkable: true
+            text: "List Items"
+        }
         Button {
             id: layoutTab
             checkable: true
@@ -68,7 +75,7 @@ Window {
         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
 
@@ -77,12 +84,14 @@ Window {
             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
 
@@ -92,6 +101,8 @@ Window {
                         return iconsComponent;
                     case controlsTab:
                         return controlsComponent;
+                    case listItemsTab:
+                        return listItemsComponent;
                     case layoutTab:
                         return layoutComponent;
                     case otherTab:
@@ -173,7 +184,13 @@ Window {
         id: controlsComponent
         Controls {
             anchors.centerIn: parent
-            theme: Theme.palette
+        }
+    }
+
+    Component {
+        id: listItemsComponent
+        ListItems {
+            anchors.centerIn: parent
         }
     }
 
@@ -181,7 +198,6 @@ Window {
         id: layoutComponent
         Layout {
             anchors.centerIn: parent
-            theme: Theme.palette
         }
     }
 
@@ -189,7 +205,6 @@ Window {
         id: othersComponent
         Others {
             anchors.centerIn: parent
-            theme: Theme.palette
         }
     }
 

sandbox/sandbox.pro

@@ -12,7 +12,7 @@ SOURCES += \
         sandboxapp.cpp
 
 OBJECTIVE_SOURCES += \
-        sandboxapp_mac.mm
+    statuswindow_mac.mm
 
 RESOURCES += qml.qrc
 
@@ -28,10 +28,13 @@ OTHER_FILES += $$files($$PWD/../src/*, true)
 
 HEADERS += \
     handler.h \
-    sandboxapp.h
+    sandboxapp.h \
+    statuswindow.h
 
 DISTFILES += \
     ../src/StatusQ/Controls/StatusBaseButton.qml \
     ../src/StatusQ/Controls/StatusButton.qml \
+    ../src/StatusQ/Controls/StatusCheckBox.qml \
     ../src/StatusQ/Controls/StatusFlatRoundButton.qml \
+    ../src/StatusQ/Controls/StatusRadioButton.qml \
     ../src/StatusQ/Controls/StatusSwitch.qml

sandbox/sandboxapp.cpp

@@ -4,6 +4,8 @@
 #include <QWindow>
 #include <QDebug>
 
+#include "statuswindow.h"
+
 SandboxApp::SandboxApp(int &argc, char **argv)
     : QGuiApplication(argc, argv),
       m_handler(new Handler(this))
@@ -13,6 +15,8 @@ SandboxApp::SandboxApp(int &argc, char **argv)
 
 void SandboxApp::startEngine()
 {
+    qmlRegisterType<StatusWindow>("Sandbox", 0, 1, "StatusWindow");
+
     const QUrl url(applicationDirPath() + "/../main.qml");
 
     m_engine.rootContext()->setContextProperty("app", m_handler);
@@ -25,13 +29,6 @@ void SandboxApp::startEngine()
                 QCoreApplication::exit(-1);
         }, Qt::QueuedConnection);
     m_engine.load(url);
-
-    QWindow *rootWindow = qobject_cast<QWindow*>(m_engine.rootObjects().at(0));
-    if (rootWindow) {
-        removeTitleBar(rootWindow->winId());
-    } else {
-        qDebug() << "Window doesn't exist";
-    }
 }
 
 void SandboxApp::restartEngine()

sandbox/sandboxapp.h

@@ -13,8 +13,6 @@ public:
 
     void startEngine();
 
-    void removeTitleBar(WId wid);
-
 public slots:
     void restartEngine();
 

sandbox/statuswindow.h

@@ -0,0 +1,21 @@
+#ifndef STATUSWINDOW_H
+#define STATUSWINDOW_H
+
+#include <QQuickWindow>
+
+class StatusWindow: public QQuickWindow
+{
+    Q_OBJECT
+
+public:
+    explicit StatusWindow(QWindow *parent = nullptr)
+        : QQuickWindow(parent)
+    {
+        removeTitleBar(winId());
+    }
+
+private:
+    void removeTitleBar(WId wid);
+};
+
+#endif // STATUSWINDOW_H

sandbox/statuswindow_mac.mm

@@ -1,4 +1,4 @@
-#include "sandboxapp.h"
+#include "statuswindow.h"
 
 #include <QColor>
 
@@ -7,7 +7,7 @@
 #include <AppKit/NSWindow.h>
 #include <AppKit/NSColor.h>
 
-void SandboxApp::removeTitleBar(WId wid)
+void StatusWindow::removeTitleBar(WId wid)
 {
     NSView *nsView = reinterpret_cast<NSView*>(wid);
     NSWindow *window = [nsView window];

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

@@ -0,0 +1,42 @@
+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.Components 0.1
+
+
+CheckBox {
+    id: statusCheckBox
+
+    indicator: Rectangle {
+        implicitWidth: 18
+        implicitHeight: 18
+        x: statusCheckBox.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 2
+        color: (statusCheckBox.down || statusCheckBox.checked) ? Theme.palette.primaryColor1
+                                                               : Theme.palette.directColor8
+
+        StatusIcon {
+            icon: "checkbox"
+            width: 11
+            height: 8
+            anchors.centerIn: parent
+            anchors.horizontalCenterOffset: 1
+            color: Theme.palette.white
+            visible: statusCheckBox.down || statusCheckBox.checked
+        }
+    }
+
+    contentItem: StatusBaseText {
+        text: statusCheckBox.text
+        opacity: enabled ? 1.0 : 0.3
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.WordWrap
+        width: parent.width
+        leftPadding: !!statusCheckBox.text ? statusCheckBox.indicator.width + statusCheckBox.spacing
+                                           : statusCheckBox.indicator.width
+    }
+}

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

@@ -0,0 +1,41 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQml 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+
+RadioButton {
+    id: statusRadioButton
+
+    width: indicator.implicitWidth
+
+    indicator: Rectangle {
+        implicitWidth: 20
+        implicitHeight: 20
+        x: 0
+        y: 6
+        radius: 10
+        color: statusRadioButton.checked ? Theme.palette.primaryColor1
+                                         : Theme.palette.directColor8
+
+        Rectangle {
+            width: 12
+            height: 12
+            radius: 6
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            color: statusRadioButton.checked ? Theme.palette.white : "transparent"
+            visible: statusRadioButton.checked
+        }
+    }
+    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/qmldir

@@ -9,4 +9,5 @@ StatusFlatButton 0.1 StatusFlatButton.qml
 StatusRoundButton 0.1 StatusRoundButton.qml
 StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
 StatusSwitch 0.1 StatusSwitch.qml
-
+StatusRadioButton 0.1 StatusRadioButton.qml
+StatusCheckBox 0.1 StatusCheckBox.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
 

src/assets/img/icons/checkbox.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.76413 5.69006L9.32479 0.278881C9.70676 -0.0928258 10.3248 -0.0940903 10.7111 0.28187C11.0948 0.655228 11.0968 1.25861 10.7142 1.63093L4.45575 7.72112C4.26582 7.90595 4.01753 7.99919 3.76838 8C3.51183 7.99812 3.26284 7.90634 3.07584 7.72437L0.284232 5.0078C-0.0959013 4.63789 -0.0957078 4.03795 0.290638 3.66199C0.674309 3.28863 1.29863 3.29084 1.67363 3.65576L3.76413 5.69006Z" fill="white"/>
+</svg>