From fcb6847cc9ef76bbe31f641d6d296a50091aa4d8 Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Fri, 21 May 2021 15:14:08 +0200 Subject: [PATCH] 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 --- ui/StatusQ/sandbox/ListItems.qml | 129 ++++++++++++++++++ ui/StatusQ/sandbox/main.qml | 14 ++ .../src/StatusQ/Components/StatusListItem.qml | 109 +++++++++++++++ ui/StatusQ/src/StatusQ/Components/qmldir | 1 + .../StatusQ/Core/Theme/StatusDarkTheme.qml | 4 + .../StatusQ/Core/Theme/StatusLightTheme.qml | 4 + .../src/StatusQ/Core/Theme/ThemePalette.qml | 4 + 7 files changed, 265 insertions(+) create mode 100644 ui/StatusQ/sandbox/ListItems.qml create mode 100644 ui/StatusQ/src/StatusQ/Components/StatusListItem.qml diff --git a/ui/StatusQ/sandbox/ListItems.qml b/ui/StatusQ/sandbox/ListItems.qml new file mode 100644 index 0000000000..be94da0848 --- /dev/null +++ b/ui/StatusQ/sandbox/ListItems.qml @@ -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 + } + ] + } +} diff --git a/ui/StatusQ/sandbox/main.qml b/ui/StatusQ/sandbox/main.qml index fe2fd26ffb..d758ad764f 100644 --- a/ui/StatusQ/sandbox/main.qml +++ b/ui/StatusQ/sandbox/main.qml @@ -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 { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml new file mode 100644 index 0000000000..739e37535a --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml @@ -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 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 + } + } +} diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir index e583d8cd34..60654f5421 100644 --- a/ui/StatusQ/src/StatusQ/Components/qmldir +++ b/ui/StatusQ/src/StatusQ/Components/qmldir @@ -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 diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml index 0ec738afec..083cc4ab40 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml @@ -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 } diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml index 9ece9d784e..e994c7189f 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml @@ -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 } diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml index 5c02d04134..3f220a0232 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml @@ -82,6 +82,10 @@ QtObject { property color backgroundColor } + property QtObject statusListItem: QtObject { + property color backgroundColor + } + property QtObject statusBadge: QtObject { property color foregroundColor }