fix: hover effect for StatusFlatRoundButton

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-25 13:42:32 +03:00 · 2021-05-25 12:28:30 +02:00 · 2021-05-25 12:27:33 +02:00 · 2021-05-25 12:23:47 +02:00 · 2021-05-25 12:20:39 +02:00 · 2021-05-21 10:17:53 +02:00
19 changed files with 114 additions and 85 deletions
@@ -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"
    }
@@ -95,11 +102,4 @@ GridLayout {
    }

    StatusCheckBox {}
-
-    StatusSlider {
-        width: 360
-        from: 0
-        to: 100
-        value: 40
-    }
 }
@@ -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
        }
    }

@@ -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
@@ -65,7 +65,7 @@ Rectangle {
            case StatusFlatRoundButton.Type.Primary:
                return Theme.palette.primaryColor2;
            case StatusFlatRoundButton.Type.Secondary:
-                return "transparent";
+                return Theme.palette.baseColor2;
            }
        }

@@ -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
@@ -1,60 +0,0 @@
-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.Controls 0.1
-
-Slider {
-    id: statusSlider
-
-    implicitWidth: 360
-    implicitHeight: 4
-
-    leftPadding: 0
-
-    background: Rectangle {
-        implicitHeight: 4
-        implicitWidth: 100
-        color: {
-            if (statusSlider.value === statusSlider.to) {
-                return Theme.palette.primaryColor1
-            }
-            return Theme.palette.primaryColor3
-        }
-        radius: 2
-        Rectangle {
-            radius: 2
-            anchors.fill: parent
-            visible: statusSlider.value > statusSlider.from && statusSlider.value < statusSlider.to
-            gradient: Gradient {
-                GradientStop { color: Theme.palette.primaryColor1 ; position: 0 }
-                GradientStop { color: Theme.palette.primaryColor3 ; position: (((statusSlider.value - statusSlider.from) * 100) / (statusSlider.to - statusSlider.from) / 100).toFixed(2) }
-                GradientStop { color: Theme.palette.primaryColor1 ; position: (((statusSlider.value - statusSlider.from) * 100) / (statusSlider.to - statusSlider.from) / 100).toFixed(2) }
-                GradientStop { color: Theme.palette.primaryColor3 ; position: 1 }
-                orientation: Gradient.Horizontal
-            }
-        }
-    } // background
-
-    handle: Rectangle {
-        x: statusSlider.leftPadding + statusSlider.visualPosition * (statusSlider.availableWidth - width / 2)
-        anchors.verticalCenter: parent.verticalCenter
-        color: Theme.palette.white
-        implicitWidth: 28
-        implicitHeight: 28
-        radius: 14
-        layer.enabled: true
-        layer.effect: DropShadow {
-            width: parent.width
-            height: parent.height
-            visible: true
-            verticalOffset: 2
-            samples: 15
-            fast: true
-            cached: true
-            color: Theme.palette.dropShadow
-        }
-    }
-}
@@ -11,4 +11,3 @@ StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
 StatusSwitch 0.1 StatusSwitch.qml
 StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml
-StatusSlider 0.1 StatusSlider.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
+}
@@ -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
+    }
 }

@@ -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,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
B.Melnik	8465d215ec	fix: hover effect for StatusFlatRoundButton	2021-05-25 13:42:32 +03:00
Pascal Precht	d9529883a5	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-25 12:28:30 +02:00
Pascal Precht	2f09179fcf	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:27:33 +02:00
Pascal Precht	8639e8ccba	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-25 12:23:47 +02:00
Pascal Precht	6a92ff6823	fix(Components): add proper foreground color for StatusBadge Fixes #59	2021-05-25 12:20:39 +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