chore(general): set info in readme before setting repo read-only (#917)

Further development will take place in the status-desktop repository.

README.md

@@ -2,6 +2,9 @@
 
 > An emerging reusable QML UI component library for Status applications.
 
+:bangbang: | This repository is set to read-only. `StatusQ` library is further developed in the [status-desktop](https://github.com/status-im/status-desktop) repository.
+:---: | :---
+
 ## Usage
 
 StatusQ introduces a module namespace that semantically groups components so they can be easily imported.

sandbox/demoapp/StatusAppCommunitiesPortalView.qml

@@ -44,8 +44,6 @@ StatusSectionLayout {
                 spacing: 18
 
                 StatusBaseText {
-                    Layout.topMargin: d.layoutVMargin
-                    Layout.leftMargin: d.layoutHMargin
                     text: qsTr("Find community")
                     font.weight: Font.Bold
                     font.pixelSize: d.titlePixelSize

src/StatusQ/Components/StatusListItem.qml

@@ -326,8 +326,10 @@ Rectangle {
                     contentWidth: row.width
                     padding: 0
                     clip: true
+                    interactive: false
                     Row {
                         id: row
+                        spacing: 4
                         Repeater {
                             id: inlineTagModelRepeater
                             model: inlineTagModel

src/StatusQ/Components/StatusMessage.qml

@@ -69,6 +69,7 @@ Rectangle {
     property color overrideBackgroundColor: "transparent"
     property bool overrideBackground: false
     property bool profileClickable: true
+    property bool hideMessage: false
 
     property alias previousMessageIndex: dateGroupLabel.previousMessageIndex
     property alias previousMessageTimestamp: dateGroupLabel.previousMessageTimestamp
@@ -264,6 +265,7 @@ Rectangle {
             }
 
             ColumnLayout {
+
                 spacing: 4
                 Layout.alignment: Qt.AlignTop
                 Layout.fillWidth: true
@@ -292,7 +294,7 @@ Rectangle {
                 }
                 Loader {
                     Layout.fillWidth: true
-                    active: !editMode && !!root.messageDetails.messageText
+                    active: !root.editMode && !!root.messageDetails.messageText && !root.hideMessage
                     visible: active
                     sourceComponent: StatusTextMessage {
                         objectName: "StatusMessage_textMessage"

src/StatusQ/Components/StatusToolBar.qml

@@ -9,10 +9,12 @@ import StatusQ.Controls 0.1
 ToolBar {
     id: root
 
+    property string backButtonName: ""
     property int notificationCount: 0
     property Item headerContent
     property alias notificationButton: notificationButton
 
+    signal backButtonClicked()
     signal notificationButtonClicked()
 
     implicitWidth: visible ? 518 : 0
@@ -23,6 +25,18 @@ ToolBar {
     RowLayout {
         anchors.fill: parent
         spacing: 0
+        StatusFlatButton {
+            icon.name: "arrow-left"
+            icon.width: 20
+            icon.height: 20
+            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+            Layout.leftMargin: 12
+            visible: !!root.backButtonName
+            text: root.backButtonName
+            size: StatusBaseButton.Size.Large
+            onClicked: { root.backButtonClicked(); }
+        }
+
         Control {
             id: headerContentItem
             Layout.fillWidth: !!headerContent

src/StatusQ/Controls/StatusBaseButton.qml

@@ -42,6 +42,7 @@ Button {
         readonly property color textColor: root.enabled || root.loading ? root.textColor : root.disabledTextColor
     }
 
+    font.family: Theme.palette.baseFont.name
     font.weight: Font.Medium
     font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13
 

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -143,6 +143,7 @@ Button {
                 StatusSelectableText {
                     Layout.fillWidth: implicitWidth + separator.width + pinIcon.width + pinText.width > subtitleRow.width
                     text: root.subTitle
+                    visible: root.subTitle
                     color: Theme.palette.baseColor1
                     font.pixelSize: 12
                     onLinkActivated: root.linkActivated(link)

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.13
 
 QtObject {
-
     id: theme
 
     property string name
@@ -10,88 +9,95 @@ QtObject {
         source: "../../../assets/fonts/Inter/Inter-Regular.otf"
     }
 
-    property var baseFontThin: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Thin.otf"
-    }
-
-    property var baseFontExtraLight: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-ExtraLight.otf"
-    }
-
-    property var baseFontLight: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Light.otf"
-    }
-
-    property var baseFontMedium: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Medium.otf"
-    }
-
-    property var baseFontBold: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Bold.otf"
-    }
-
-    property var baseFontExtraBold: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-ExtraBold.otf"
-    }
-
-    property var baseFontBlack: FontLoader {
-        source: "../../../assets/fonts/Inter/Inter-Black.otf"
-    }
-
     property var monoFont: FontLoader {
         source: "../../../assets/fonts/InterStatus/InterStatus-Regular.otf"
     }
 
-    property var monoFontThin: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Thin.otf"
-    }
-
-    property var monoFontExtraLight: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-ExtraLight.otf"
-    }
-
-    property var monoFontLight: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Light.otf"
-    }
-
-    property var monoFontMedium: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Medium.otf"
-    }
-
-    property var monoFontBold: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Bold.otf"
-    }
-
-    property var monoFontExtraBold: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-ExtraBold.otf"
-    }
-
-    property var monoFontBlack: FontLoader {
-        source: "../../../assets/fonts/InterStatus/InterStatus-Black.otf"
-    }
-
     property var codeFont: FontLoader {
         source: "../../../assets/fonts/RobotoMono/RobotoMono-Regular.ttf"
     }
 
-    property var codeFontThin: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-Thin.ttf"
-    }
+    readonly property QtObject _d: QtObject {
+        // specific font variants should not be accessed directly
 
-    property var codeFontExtraLight: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
-    }
+        // Inter font variants
+        property var baseFontThin: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Thin.otf"
+        }
 
-    property var codeFontLight: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-Light.ttf"
-    }
+        property var baseFontExtraLight: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-ExtraLight.otf"
+        }
 
-    property var codeFontMedium: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-Medium.ttf"
-    }
+        property var baseFontLight: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Light.otf"
+        }
 
-    property var codeFontBold: FontLoader {
-        source: "../../../assets/fonts/RobotoMono/RobotoMono-Bold.ttf"
+        property var baseFontMedium: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Medium.otf"
+        }
+
+        property var baseFontBold: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Bold.otf"
+        }
+
+        property var baseFontExtraBold: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-ExtraBold.otf"
+        }
+
+        property var baseFontBlack: FontLoader {
+            source: "../../../assets/fonts/Inter/Inter-Black.otf"
+        }
+
+        // Inter Status font variants
+        property var monoFontThin: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Thin.otf"
+        }
+
+        property var monoFontExtraLight: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-ExtraLight.otf"
+        }
+
+        property var monoFontLight: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Light.otf"
+        }
+
+        property var monoFontMedium: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Medium.otf"
+        }
+
+        property var monoFontBold: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Bold.otf"
+        }
+
+        property var monoFontExtraBold: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-ExtraBold.otf"
+        }
+
+        property var monoFontBlack: FontLoader {
+            source: "../../../assets/fonts/InterStatus/InterStatus-Black.otf"
+        }
+
+        // Roboto font variants
+        property var codeFontThin: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-Thin.ttf"
+        }
+
+        property var codeFontExtraLight: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
+        }
+
+        property var codeFontLight: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-Light.ttf"
+        }
+
+        property var codeFontMedium: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-Medium.ttf"
+        }
+
+        property var codeFontBold: FontLoader {
+            source: "../../../assets/fonts/RobotoMono/RobotoMono-Bold.ttf"
+        }
     }
 
     property color black: getColor('black')

src/StatusQ/Layout/StatusSectionLayout.qml

@@ -81,11 +81,19 @@ SplitView {
     property bool showHeader: true
 
     /*!
-        \qmlproperty int StatusAppLayout::notificationCount
-        This property holds the number of notifications to be displayed in the notifications
-        button of the header component.
+        \qmlproperty alias StatusAppLayout::notificationCount
+        This property holds a reference to the notificationCount property of the
+        header component.
     */
     property alias notificationCount: statusToolBar.notificationCount
+
+    /*!
+        \qmlproperty alias StatusAppLayout::backButtonName
+        This property holds a reference to the backButtonName property of the
+        header component.
+    */
+    property alias backButtonName: statusToolBar.backButtonName
+
     /*!
         \qmlproperty alias StatusAppLayout::headerContent
         This property holds a reference to the custom header content of
@@ -99,6 +107,13 @@ SplitView {
     */
     property alias notificationButton: statusToolBar.notificationButton
 
+    /*!
+        \qmlsignal
+        This signal is emitted when the back button of the header component
+        is pressed.
+    */
+    signal backButtonClicked()
+
     /*!
         \qmlsignal
         This signal is emitted when the notification button of the header component
@@ -134,6 +149,9 @@ SplitView {
                 id: statusToolBar
                 width: visible ? parent.width : 0
                 visible: root.showHeader
+                onBackButtonClicked: {
+                    root.backButtonClicked();
+                }
                 onNotificationButtonClicked: {
                     root.notificationButtonClicked();
                 }