status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(Components): introduce `StatusListItem` component 

This introduces a base list item component that is used in many different
places across Status Desktop. The component is configurable and allows for
child component customization.

Usage:

```qml
StatusListItem {
    title: "Title"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    icon.name: "info"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    image.source: "..."
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    image.source: "..."
    label: "Some label"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    icon.name: "info"
    label: "Some label"
    components: [
        StatusButton {
            text: "Button"
            size: StatusBaseButton.Size.Small
        }
        ...
    ]
}
```

Closes #19
This commit is contained in:
Pascal Precht 2021-05-21 15:14:08 +02:00 committed by Michał Cieślak
parent ebb0b62005
commit fcb6847cc9
7 changed files with 265 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
ui/StatusQ/sandbox/ListItems.qml Normal file
View File

@ -0,0 +1,129 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
GridLayout {
columns: 1
columnSpacing: 5
rowSpacing: 5
StatusListItem {
title: "Title"
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
components: [StatusButton {
text: "Button"
size: StatusBaseButton.Size.Small
}]
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
components: [StatusSwitch {}]
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
components: [StatusRadioButton {}]
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
components: [StatusCheckBox {}]
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
label: "Text"
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
label: "Text"
components: [
StatusButton {
text: "Button"
size: StatusBaseButton.Size.Small
}
]
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
label: "Text"
components: [StatusSwitch {}]
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
label: "Text"
components: [
StatusRadioButton {}
]
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
label: "Text"
components: [StatusCheckBox {}]
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
label: "Text"
components: [
StatusBadge {
value: 1
},
StatusIcon {
icon: "info"
color: Theme.palette.baseColor1
width: 20
height: 20
}
]
}
}

14
ui/StatusQ/sandbox/main.qml
View File

@ -46,6 +46,11 @@ StatusWindow {
checkable: true
text: "Controls"
}
Button {
id: listItemsTab
checkable: true
text: "List Items"
}
Button {
id: layoutTab
checkable: true
@ -96,6 +101,8 @@ StatusWindow {
return iconsComponent;
case controlsTab:
return controlsComponent;
case listItemsTab:
return listItemsComponent;
case layoutTab:
return layoutComponent;
case otherTab:
@ -180,6 +187,13 @@ StatusWindow {
}
}
Component {
id: listItemsComponent
ListItems {
anchors.centerIn: parent
}
}
Component {
id: layoutComponent
Layout {

109
ui/StatusQ/src/StatusQ/Components/StatusListItem.qml Normal file
View File

@ -0,0 +1,109 @@
import QtQuick 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
Rectangle {
id: statusListItem
implicitWidth: 448
implicitHeight: 64
color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusListItem.backgroundColor
radius: 8
property string title: ""
property string subTitle: ""
property StatusIconSettings icon: StatusIconSettings {
height: 20
width: 20
}
property StatusImageSettings image: StatusImageSettings {}
property string label: ""
property list<Item> components
onComponentsChanged: {
if (components.length) {
for (let idx in components) {
components[idx].parent = statusListItemComponentsSlot
}
}
}
MouseArea {
id: sensor
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
Loader {
id: iconOrImage
anchors.left: parent.left
anchors.leftMargin: 16
anchors.verticalCenter: parent.verticalCenter
sourceComponent: !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
active: !!statusListItem.icon.name || !!statusListItem.image.source.toString()
}
Component {
id: statusRoundedIcon
StatusRoundIcon {
icon: statusListItem.icon
}
}
Component {
id: statusRoundedImage
StatusRoundedImage {
image.source: statusListItem.image.source
}
}
Item {
anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
anchors.leftMargin: 16
anchors.verticalCenter: parent.verticalCenter
height: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0)
StatusBaseText {
id: statusListItemTitle
text: statusListItem.title
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusBaseText {
id: statusListItemSubTitle
anchors.top: statusListItemTitle.bottom
text: statusListItem.subTitle
font.pixelSize: 15
color: Theme.palette.baseColor1
visible: !!statusListItem.subTitle
}
}
StatusBaseText {
anchors.verticalCenter: parent.verticalCenter
anchors.right: statusListItemComponentsSlot.left
anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
text: statusListItem.label
font.pixelSize: 15
color: Theme.palette.baseColor1
visible: !!statusListItem.label
}
Row {
id: statusListItemComponentsSlot
anchors.right: parent.right
anchors.rightMargin: 16
anchors.verticalCenter: parent.verticalCenter
spacing: 10
}
}
}

1
ui/StatusQ/src/StatusQ/Components/qmldir
View File

@ -2,6 +2,7 @@ module StatusQ.Components
StatusBadge 0.1 StatusBadge.qml
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
StatusListItem 0.1 StatusListItem.qml
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
StatusRoundIcon 0.1 StatusRoundIcon.qml
StatusRoundedImage 0.1 StatusRoundedImage.qml

4
ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
View File

@ -121,6 +121,10 @@ ThemePalette {
property color backgroundColor: baseColor5
}
property QtObject statusListItem: QtObject {
property color backgroundColor: baseColor3
}
property QtObject statusBadge: QtObject {
property color foregroundColor: baseColor3
}

4
ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
View File

@ -121,6 +121,10 @@ ThemePalette {
property color backgroundColor: baseColor4
}
property QtObject statusListItem: QtObject {
property color backgroundColor: white
}
property QtObject statusBadge: QtObject {
property color foregroundColor: white
}

4
ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
View File

@ -82,6 +82,10 @@ QtObject {
property color backgroundColor
}
property QtObject statusListItem: QtObject {
property color backgroundColor
}
property QtObject statusBadge: QtObject {
property color foregroundColor
}