From 916dcc9c7ffa69b62e3ec6ab0f7f35810888866d Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Mon, 7 Jun 2021 14:16:37 +0200 Subject: [PATCH] feat(Components): introduce `StatusChatListCategoryItem` This component is used to render chat list categories. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategoryItem { title: "Public" onClicked: opened = !opened onToggleButtonClicked: opened = !opened onMenuButtonClicked: ... onAddButtonClicked: ... addButton.[...]: ... // StatusChatListCategoryItemButton menuButton.[...]: ... // StatusChatListCategoryItemButton toggleButton.[...]: ... // StatusChatListCategoryItemButton } ``` The button components are exposed so their tooltips can be configured with (internationalized) app messages. Closes #117 --- sandbox/DemoApp.qml | 57 +++++++++++++---- sandbox/ListItems.qml | 10 +++ .../Components/StatusChatListCategoryItem.qml | 62 +++++++++++++++++++ src/StatusQ/Components/qmldir | 1 + .../StatusChatListCategoryItemButton.qml | 26 ++++++++ src/StatusQ/Controls/qmldir | 1 + src/StatusQ/Core/Theme/StatusDarkTheme.qml | 4 ++ src/StatusQ/Core/Theme/StatusLightTheme.qml | 4 ++ src/StatusQ/Core/Theme/ThemePalette.qml | 4 ++ 9 files changed, 157 insertions(+), 12 deletions(-) create mode 100644 src/StatusQ/Components/StatusChatListCategoryItem.qml create mode 100644 src/StatusQ/Controls/StatusChatListCategoryItemButton.qml diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml index 96f7be58..e7b49e3b 100644 --- a/sandbox/DemoApp.qml +++ b/sandbox/DemoApp.qml @@ -210,21 +210,20 @@ Rectangle { anchors.horizontalCenter: parent.horizontalCenter spacing: 4 - StatusChatListItem { - name: "general" - type: StatusChatListItem.Type.CommunityChat - selected: true + StatusChatListCategoryItem { + id: publicCategory + title: "Public" + onClicked: opened = !opened + onToggleButtonClicked: opened = !opened } - StatusChatListItem { - name: "random" - type: StatusChatListItem.Type.CommunityChat - } + StatusChatList { + anchors.horizontalCenter: parent.horizontalCenter - StatusChatListItem { - name: "watercooler" - type: StatusChatListItem.Type.CommunityChat - muted: true + selectedChatId: "0" + chatListItems.model: demoCommunityChatListItems + onChatItemSelected: selectedChatId = id + visible: publicCategory.opened } } } @@ -294,4 +293,38 @@ Rectangle { unreadMessagesCount: 0 } } + + ListModel { + id: demoCommunityChatListItems + ListElement { + chatId: "0" + name: "general" + chatType: StatusChatListItem.Type.CommunityChat + muted: false + hasUnreadMessages: false + hasMention: false + unreadMessagesCount: 0 + iconColor: "orange" + } + ListElement { + chatId: "1" + name: "random" + chatType: StatusChatListItem.Type.CommunityChat + muted: false + hasUnreadMessages: false + hasMention: false + unreadMessagesCount: 0 + iconColor: "orange" + } + ListElement { + chatId: "2" + name: "watercooler" + chatType: StatusChatListItem.Type.CommunityChat + muted: false + hasUnreadMessages: false + hasMention: false + unreadMessagesCount: 0 + iconColor: "orange" + } + } } diff --git a/sandbox/ListItems.qml b/sandbox/ListItems.qml index deb00462..6ba94946 100644 --- a/sandbox/ListItems.qml +++ b/sandbox/ListItems.qml @@ -37,6 +37,16 @@ GridLayout { type: StatusChatListItem.Type.PublicChat } + StatusChatListCategoryItem { + title: "Chat list category" + opened: false + } + + StatusChatListCategoryItem { + title: "Chat list category (opened)" + opened: true + } + StatusChatListItem { name: "group-chat" type: StatusChatListItem.Type.GroupChat diff --git a/src/StatusQ/Components/StatusChatListCategoryItem.qml b/src/StatusQ/Components/StatusChatListCategoryItem.qml new file mode 100644 index 00000000..6a0ff4ff --- /dev/null +++ b/src/StatusQ/Components/StatusChatListCategoryItem.qml @@ -0,0 +1,62 @@ +import QtQuick 2.13 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Controls 0.1 +import StatusQ.Components 0.1 + +StatusListItem { + id: statusChatListCategoryItem + + implicitWidth: 288 + implicitHeight: 28 + + leftPadding: 8 + rightPadding: 8 + + property bool opened: true + property alias addButton: addButton + property alias menuButton: menuButton + property alias toggleButton: toggleButton + + signal clicked(var mouse) + signal addButtonClicked(var mouse) + signal menuButtonClicked(var mouse) + signal toggleButtonClicked(var mouse) + + color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent" + + sensor.onClicked: statusChatListCategoryItem.clicked(mouse) + + statusListItemTitle.color: Theme.palette.directColor4 + statusListItemTitle.font.weight: Font.Medium + + statusListItemComponentsSlot.spacing: 1 + + components: [ + StatusChatListCategoryItemButton { + id: addButton + icon.name: "add" + icon.width: 20 + visible: statusChatListCategoryItem.sensor.containsMouse + onClicked: statusChatListCategoryItem.addButtonClicked(mouse) + tooltip.text: "Add channel inside category" + }, + StatusChatListCategoryItemButton { + id: menuButton + icon.name: "more" + icon.width: 21 + visible: statusChatListCategoryItem.sensor.containsMouse + onClicked: statusChatListCategoryItem.menuButtonClicked(mouse) + tooltip.text: "More" + }, + StatusChatListCategoryItemButton { + id: toggleButton + icon.name: "chevron-down" + icon.width: 18 + icon.rotation: statusChatListCategoryItem.opened ? 0 : 270 + onClicked: statusChatListCategoryItem.toggleButtonClicked(mouse) + } + ] +} + diff --git a/src/StatusQ/Components/qmldir b/src/StatusQ/Components/qmldir index 3805dbab..dc0bf29e 100644 --- a/src/StatusQ/Components/qmldir +++ b/src/StatusQ/Components/qmldir @@ -3,6 +3,7 @@ module StatusQ.Components StatusBadge 0.1 StatusBadge.qml StatusChatList 0.1 StatusChatList.qml StatusChatListItem 0.1 StatusChatListItem.qml +StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml StatusChatToolBar 0.1 StatusChatToolBar.qml StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml diff --git a/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml b/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml new file mode 100644 index 00000000..b529465a --- /dev/null +++ b/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml @@ -0,0 +1,26 @@ +import StatusQ.Core.Theme 0.1 +import StatusQ.Controls 0.1 + +StatusFlatRoundButton { + id: statusChatListCategoryItemButton + + height: 22 + width: 22 + radius: 4 + + property alias tooltip: statusToolTip + + type: StatusFlatRoundButton.Type.Secondary + icon.width: 20 + icon.color: Theme.palette.directColor4 + + color: hovered ? + Theme.palette.statusChatListCategoryItem.buttonHoverBackgroundColor : + "transparent" + + StatusToolTip { + id: statusToolTip + visible: !!text && parent.hovered + } +} + diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir index 796e5c6f..9c7612fa 100644 --- a/src/StatusQ/Controls/qmldir +++ b/src/StatusQ/Controls/qmldir @@ -1,6 +1,7 @@ module StatusQ.Controls StatusChatInfoButton 0.1 StatusChatInfoButton.qml +StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml StatusIconTabButton 0.1 StatusIconTabButton.qml StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml StatusToolTip 0.1 StatusToolTip.qml diff --git a/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/src/StatusQ/Core/Theme/StatusDarkTheme.qml index c9c2ecb9..13448d55 100644 --- a/src/StatusQ/Core/Theme/StatusDarkTheme.qml +++ b/src/StatusQ/Core/Theme/StatusDarkTheme.qml @@ -139,6 +139,10 @@ ThemePalette { property color selectedBackgroundColor: directColor7 } + property QtObject statusChatListCategoryItem: QtObject { + property color buttonHoverBackgroundColor: directColor7 + } + property QtObject statusNavigationListItem: QtObject { property color hoverBackgroundColor: directColor8 property color selectedBackgroundColor: directColor7 diff --git a/src/StatusQ/Core/Theme/StatusLightTheme.qml b/src/StatusQ/Core/Theme/StatusLightTheme.qml index 6311107d..342f00e2 100644 --- a/src/StatusQ/Core/Theme/StatusLightTheme.qml +++ b/src/StatusQ/Core/Theme/StatusLightTheme.qml @@ -137,6 +137,10 @@ ThemePalette { property color selectedBackgroundColor: baseColor3 } + property QtObject statusChatListCategoryItem: QtObject { + property color buttonHoverBackgroundColor: directColor8 + } + property QtObject statusNavigationListItem: QtObject { property color hoverBackgroundColor: baseColor2 property color selectedBackgroundColor: baseColor3 diff --git a/src/StatusQ/Core/Theme/ThemePalette.qml b/src/StatusQ/Core/Theme/ThemePalette.qml index f3dbd48c..d6fbf8c1 100644 --- a/src/StatusQ/Core/Theme/ThemePalette.qml +++ b/src/StatusQ/Core/Theme/ThemePalette.qml @@ -98,6 +98,10 @@ QtObject { property color selectedBackgroundColor } + property QtObject statusChatListCategoryItem: QtObject { + property color buttonHoverBackgroundColor + } + property QtObject statusNavigationListItem: QtObject { property color hoverBackgroundColor property color selectedBackgroundColor