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.
feat(Components): introduce StatusRoundIcon component
2021-05-25 12:25:59 +02:00 · 2021-05-21 14:32:23 +02:00 · 2021-05-21 14:06:34 +02:00 · 2021-05-21 10:17:53 +02:00 · 2021-05-21 10:14:30 +02:00 · 2021-05-21 10:14:03 +02:00
20 changed files with 156 additions and 21 deletions
@@ -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.
@@ -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"
    }
@@ -86,10 +93,13 @@ GridLayout {
        badge.value: 100
    }

-    StatusRadioButton {
-        text: "i'm radio!"
-    }
    StatusSwitch {

    }
+
+    StatusRadioButton {
+        text: "i'm radio!"
+    }
+
+    StatusCheckBox {}
 }
@@ -11,7 +11,6 @@ GridLayout {
    columns: 6
    columnSpacing: 5
    rowSpacing: 5
-    property ThemePalette theme

    Button {
        id: btn
@@ -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"
+    }
 }
@@ -70,7 +70,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 +79,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

@@ -175,7 +177,6 @@ StatusWindow {
        id: controlsComponent
        Controls {
            anchors.centerIn: parent
-            theme: Theme.palette
        }
    }

@@ -183,7 +184,6 @@ StatusWindow {
        id: layoutComponent
        Layout {
            anchors.centerIn: parent
-            theme: Theme.palette
        }
    }

@@ -191,7 +191,6 @@ StatusWindow {
        id: othersComponent
        Others {
            anchors.centerIn: parent
-            theme: Theme.palette
        }
    }

@@ -34,6 +34,7 @@ HEADERS += \
 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 
+    ../src/StatusQ/Controls/StatusSwitch.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) {
@@ -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
+    }
+}
@@ -3,4 +3,5 @@ module StatusQ.Components
 StatusBadge 0.1 StatusBadge.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
+StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.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
+    }
+}
@@ -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
+                    }
+                }
            }
        }

@@ -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
@@ -8,5 +8,6 @@ StatusButton 0.1 StatusButton.qml
 StatusFlatButton 0.1 StatusFlatButton.qml
 StatusRoundButton 0.1 StatusRoundButton.qml
 StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
-StatusRadioButton 0.1 StatusRadioButton.qml
 StatusSwitch 0.1 StatusSwitch.qml
+StatusRadioButton 0.1 StatusRadioButton.qml
+StatusCheckBox 0.1 StatusCheckBox.qml
@@ -0,0 +1,9 @@
+import QtQuick 2.13
+
+QtObject {
+    id: statusIconSettings
+
+    property string name
+    property real width
+    property real height
+}
@@ -120,5 +120,9 @@ ThemePalette {
    property QtObject statusAppNavBar: QtObject {
        property color backgroundColor: baseColor5
    }
+
+    property QtObject statusBadge: QtObject {
+        property color foregroundColor: baseColor3
+    }
 }

@@ -120,5 +120,9 @@ ThemePalette {
    property QtObject statusAppNavBar: QtObject {
        property color backgroundColor: baseColor4
    }
+
+    property QtObject statusBadge: QtObject {
+        property color foregroundColor: white
+    }
 }

@@ -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
@@ -82,6 +82,10 @@ QtObject {
        property color backgroundColor
    }

+    property QtObject statusBadge: QtObject {
+        property color foregroundColor
+    }
+
    function alphaColor(color, alpha) {
        let actualColor = Qt.darker(color, 1)
        actualColor.a = alpha
@@ -2,4 +2,5 @@ module StatusQ.Core

 StatusBaseText 0.1 StatusBaseText.qml
 StatusIcon 0.1 StatusIcon.qml
+StatusIconSettings 0.1 StatusIconSettings.qml

@@ -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>
Author	SHA1	Message	Date
Pascal Precht	459150afcf	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-25 12:25:59 +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
Pascal Precht	9b99d8a957	feat(StatusIconTabButton): introduce image loading state and fallback This commit introduces a loading indicator for cases where `icon.source` is set (a custom image/icon) to improve UX of the component. It also falls back to a letter identicon in case loading the image source wasn't successful. Usage: ``` StatusIconTabButton { icon.source: "SOME URL THAT CAN'T BE RESOLVED" icon.color: "red" // in case fallback is used, icon.color will be gray by default name: "Some channel" // used to generated letter identicon as fallback } ``` Closes #37	2021-05-21 10:17:53 +02:00
Pascal Precht	1cb0c1d389	fix(StatusRadioButton): ensure control label as correct color Closes #51	2021-05-21 10:14:30 +02:00
Pascal Precht	136cd55560	refactor(sandbox): rely on global `Theme` instead of theme prop	2021-05-21 10:14:03 +02:00
Pascal Precht	893cd0fdb1	chore(README): add StatusQ.Layout module to readme	2021-05-20 11:23:59 +02:00
B.Melnik	c48d345044	chore: add StatusCheckBox Closes: #10	2021-05-20 11:17:52 +02:00
B.Melnik	fc95910552	chore: add StatusRadioButton Closes #11	2021-05-20 10:56:43 +02:00