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
11 changed files with 71 additions and 3 deletions
@@ -34,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

@@ -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,9 @@
+import QtQuick 2.13
+
+QtObject {
+    id: statusIconSettings
+
+    property string name
+    property real width
+    property real height
+}
@@ -0,0 +1,10 @@
+import QtQuick 2.13
+
+QtObject {
+    id: statusImageSettings
+
+    property url source
+    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
+    }
 }

@@ -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,6 @@ module StatusQ.Core

 StatusBaseText 0.1 StatusBaseText.qml
 StatusIcon 0.1 StatusIcon.qml
+StatusIconSettings 0.1 StatusIconSettings.qml
+StatusImageSettings 0.1 StatusImageSettings.qml
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