From b4b1f472f1e75849123c0090f9237089d9afbdec Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Thu, 6 May 2021 11:20:50 +0200 Subject: [PATCH] feat(Core.Controls): introduce StatusIconTabButton component This adds the `StatusIconTabButton` componoent to `StatusQ` with some slight adjustments: - removes `iconColor` in favour of `icon.color` - removes `disabledColor` (main reason being that we don't show disabled buttons of this type) This button handles various cases: 1. Icon tab buttons - An icon button used in Status Desktop for different sections 2. Letter identicon button - Used for community sections that don't have a profile picture 3. Image icon button - Used for community sections that do have a profile picture Which type is rendered depends on the configuration of the component as shown in the usage. Usage: ``` import StatusQ.Controls 0.1 // When `icon.name` is set, it renders a `StatusIcon` button StatusIconTabButton { icon.name: "chat" } // When `icon.source` is set, it renders a `StatusRoundedImage` button StatusIconTabButton { icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" } // When `name` is set, it renders a `StatusLetterIdenticon` button StatusIconTabButton { name: "#status" } ``` Closes #16 --- README.md | 1 + sandbox/Controls.qml | 25 +++++++ sandbox/main.qml | 17 +++++ sandbox/qml.qrc | 1 + src/StatusQ/Controls/StatusIconTabButton.qml | 75 ++++++++++++++++++++ src/StatusQ/Controls/qmldir | 4 ++ 6 files changed, 123 insertions(+) create mode 100644 sandbox/Controls.qml create mode 100644 src/StatusQ/Controls/StatusIconTabButton.qml create mode 100644 src/StatusQ/Controls/qmldir diff --git a/README.md b/README.md index 3118a143..50812659 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ These modules are: - [StatusQ.Core](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/qmldir) - [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir) +- [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir) - [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir) Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository. diff --git a/sandbox/Controls.qml b/sandbox/Controls.qml new file mode 100644 index 00000000..ba7ceac1 --- /dev/null +++ b/sandbox/Controls.qml @@ -0,0 +1,25 @@ +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 + +GridLayout { + columns: 6 + columnSpacing: 5 + rowSpacing: 5 + property ThemePalette theme + + StatusIconTabButton { + icon.name: "chat" + } + + StatusIconTabButton { + icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" + } + + StatusIconTabButton { + name: "#status" + } +} + diff --git a/sandbox/main.qml b/sandbox/main.qml index 0827dd94..4a09074b 100644 --- a/sandbox/main.qml +++ b/sandbox/main.qml @@ -29,6 +29,11 @@ Window { checkable: true text: "Icons" } + Button { + id: controlsTab + checkable: true + text: "Controls" + } Button { id: otherTab checkable: true @@ -67,6 +72,8 @@ Window { switch(topicsGroup.checkedButton) { case iconsTab: return iconsComponent; + case controlsTab: + return controlsComponent; case otherTab: return othersComponent; default: @@ -95,6 +102,8 @@ Window { switch(topicsGroup.checkedButton) { case iconsTab: return iconsComponent; + case controlsTab: + return controlsComponent; case otherTab: return othersComponent; default: @@ -142,6 +151,14 @@ Window { } } + Component { + id: controlsComponent + Controls { + anchors.centerIn: parent + theme: parent.currentTheme + } + } + Component { id: othersComponent Others { diff --git a/sandbox/qml.qrc b/sandbox/qml.qrc index f17247dc..34dd3676 100644 --- a/sandbox/qml.qrc +++ b/sandbox/qml.qrc @@ -1,6 +1,7 @@ main.qml + Controls.qml Icons.qml Others.qml diff --git a/src/StatusQ/Controls/StatusIconTabButton.qml b/src/StatusQ/Controls/StatusIconTabButton.qml new file mode 100644 index 00000000..df79aaa9 --- /dev/null +++ b/src/StatusQ/Controls/StatusIconTabButton.qml @@ -0,0 +1,75 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import QtGraphicalEffects 1.13 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Components 0.1 + +TabButton { + id: statusIconTabButton + + property string name: "" + + implicitWidth: 40 + implicitHeight: 40 + + icon.height: 24 + icon.width: 24 + icon.color: Theme.palette.baseColor1 + + contentItem: Item { + anchors.fill: parent + + Loader { + active: true + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + sourceComponent: statusIconTabButton.name !== "" && !icon.source.toString() ? letterIdenticon : + !!icon.source.toString() ? imageIcon : defaultIcon + } + + Component { + id: defaultIcon + StatusIcon { + icon: statusIconTabButton.icon.name + height: statusIconTabButton.icon.height + width: statusIconTabButton.icon.width + color: (statusIconTabButton.hovered || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color + } + } + + Component { + id: imageIcon + StatusRoundedImage { + width: 28 + height: 28 + image.source: icon.source + } + } + + Component { + id: letterIdenticon + StatusLetterIdenticon { + width: 26 + height: 26 + letterSize: 15 + name: statusIconTabButton.name + color: (statusIconTabButton.hovered || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color + } + } + } + + background: Rectangle { + color: hovered || ((!!icon.source.toString() || !!name) && checked) ? Theme.palette.primaryColor3 : "transparent" + border.color: Theme.palette.primaryColor1 + border.width: (!!icon.source.toString() || !!name) && checked ? 1 : 0 + radius: statusIconTabButton.width / 2 + } + + MouseArea { + cursorShape: Qt.PointingHandCursor + anchors.fill: parent + onPressed: mouse.accepted = false + } +} + diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir new file mode 100644 index 00000000..a18f7760 --- /dev/null +++ b/src/StatusQ/Controls/qmldir @@ -0,0 +1,4 @@ +module StatusQ.Controls + +StatusIconTabButton 0.1 StatusIconTabButton.qml +