feat(StatusQ.Components): introduce `StatusAddress` component

This introduces a `StatusAddress` component which renders an address
and can be made `expandable` by applying a `width`:

```qml
import StatusQ.Components 0.1

// Simple case
StatusAddress {
    text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
}

// Expandable case
Item {
    width: 200
    height: childrenRect.height
    StatusAddress {
        text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
        expandable: true
        width: parent.width
    }
}

```

Closes #430
This commit is contained in:
Pascal Precht 2021-10-13 12:51:54 +02:00 committed by Pascal Precht
parent 5e15cc49f6
commit 6789446df3
5 changed files with 76 additions and 0 deletions

View File

@ -0,0 +1,25 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Components 0.1
import Sandbox 0.1
Column {
spacing: 8
StatusAddress {
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
}
Item {
width: 200
height: childrenRect.height
StatusAddress {
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
expandable: true
width: parent.width
}
}
}

View File

@ -164,6 +164,11 @@ StatusWindow {
onClicked: page.sourceComponent = statusAccountSelectorPageComponent
}
StatusListSectionHeadline { text: "StatusQ.Components" }
StatusNavigationListItem {
title: "StatusAddress"
selected: page.sourceComponent == statusAddressPageComponent
onClicked: page.sourceComponent = statusAddressPageComponent
}
StatusNavigationListItem {
title: "List Items"
selected: page.sourceComponent == listItemsComponent
@ -281,6 +286,11 @@ StatusWindow {
ListItems {}
}
Component {
id: statusAddressPageComponent
StatusAddressPage {}
}
Component {
id: layoutComponent
Layout {}

View File

@ -0,0 +1,39 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
StatusBaseText {
id: root
property bool expandable: false
property bool expanded: false
readonly property real actualWidth: implicitWidth
property real maxWidth: width
font.family: Theme.palette.monoFont.name
font.pixelSize: 13
elide: Text.ElideMiddle
color: Theme.palette.baseColor1
Component.onCompleted: {
maxWidth = width
expanded = actualWidth <= maxWidth
}
MouseArea {
anchors.fill: parent
cursorShape: root.expandable ? Qt.PointingHandCursor : Qt.arrowCursor
enabled: root.expandable
onClicked: {
if (root.expanded) {
width = root.width = root.maxWidth
} else {
width = root.width = root.actualWidth
}
root.expanded = !root.expanded
}
}
}

View File

@ -1,5 +1,6 @@
module StatusQ.Components
StatusAddress 0.1 StatusAddress.qml
StatusBadge 0.1 StatusBadge.qml
StatusChatInfoToolBar 0.1 StatusChatInfoToolBar.qml
StatusChatList 0.1 StatusChatList.qml

View File

@ -21,6 +21,7 @@
<file>src/StatusQ/Popups/StatusMenuItemDelegate.qml</file>
<file>src/StatusQ/Popups/StatusModalDivider.qml</file>
<file>src/StatusQ/Components/qmldir</file>
<file>src/StatusQ/Components/StatusAddress.qml</file>
<file>src/StatusQ/Components/StatusChatListItem.qml</file>
<file>src/StatusQ/Components/StatusChatListAndCategories.qml</file>
<file>src/StatusQ/Components/StatusChatInfoToolBar.qml</file>