feat(Core): introduce StatusImageSettings

Very similar to what we're doing with `StatusIconSettings` in https://github.com/status-im/StatusQ/pull/61, this commit introduces `StatusImageSettings` to expose a consisten image API across components.
fix(sandbox): make scrollview content height grow with content
2021-05-21 15:05:53 +02:00 · 2021-05-21 14:38:47 +02:00 · 2021-05-21 14:32:23 +02:00 · 2021-05-21 14:06:34 +02:00
9 changed files with 2 additions and 269 deletions
@@ -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
-            }
-        ]
-    }
-}
@@ -46,11 +46,6 @@ StatusWindow {
            checkable: true
            text: "Controls"
        }
-        Button {
-            id: listItemsTab
-            checkable: true
-            text: "List Items"
-        }
        Button {
            id: layoutTab
            checkable: true
@@ -101,8 +96,6 @@ StatusWindow {
                        return iconsComponent;
                    case controlsTab:
                        return controlsComponent;
-                    case listItemsTab:
-                        return listItemsComponent;
                    case layoutTab:
                        return layoutComponent;
                    case otherTab:
@@ -187,13 +180,6 @@ StatusWindow {
        }
    }

-    Component {
-        id: listItemsComponent
-        ListItems {
-            anchors.centerIn: parent
-        }
-    }
-
    Component {
        id: layoutComponent
        Layout {
@@ -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
-        }
-    }
-}
@@ -2,7 +2,6 @@ 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
@@ -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
@@ -6,6 +6,4 @@ QtObject {
    property string name
    property real width
    property real height
-    property color color
-    property url source
 }
@@ -121,10 +121,6 @@ ThemePalette {
        property color backgroundColor: baseColor5
    }

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

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

-    property QtObject statusListItem: QtObject {
-        property color backgroundColor
-    }
-
    property QtObject statusBadge: QtObject {
        property color foregroundColor
    }
Author	SHA1	Message	Date
Pascal Precht	9a43f02a1f	feat(Core): introduce `StatusImageSettings` Very similar to what we're doing with `StatusIconSettings` in https://github.com/status-im/StatusQ/pull/61, this commit introduces `StatusImageSettings` to expose a consisten image API across components.	2021-05-21 15:05:53 +02:00
Pascal Precht	a0b111f518	fix(sandbox): make scrollview content height grow with content This is just temporary until #40 lands, but for now it allows for the scrollable content to be grow which is needed to make pages with many components usable.	2021-05-21 14:38:47 +02:00
Pascal Precht	321a4a1aba	feat(Components): introduce `StatusRoundIcon` component This commit introduces a `StatusRoundIcon` component which renders a `StatusIcon` inside a rounded rectangle. This is similar to `StatusRoundButton`, just that it isn't a clickable component. With these changes, we also introduce a new `StatusIconSettings` config object that can be used across component that need icon configuration. The configuration includes the following properties: - `name` - Name of the icon and used to locate the asset - `width` - `height` Closes #53	2021-05-21 14:32:23 +02:00
Pascal Precht	77d115e0bb	fix(Components): add proper foreground color for StatusBadge Fixes #59	2021-05-21 14:06:34 +02:00