diff --git a/ui/StatusQ/sandbox/DemoApp.qml b/ui/StatusQ/sandbox/DemoApp.qml index 96f7be581d..e7b49e3be8 100644 --- a/ui/StatusQ/sandbox/DemoApp.qml +++ b/ui/StatusQ/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/ui/StatusQ/sandbox/ListItems.qml b/ui/StatusQ/sandbox/ListItems.qml index deb0046279..6ba94946e8 100644 --- a/ui/StatusQ/sandbox/ListItems.qml +++ b/ui/StatusQ/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/ui/StatusQ/src/StatusQ/Components/StatusChatListCategoryItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusChatListCategoryItem.qml new file mode 100644 index 0000000000..6a0ff4ff2b --- /dev/null +++ b/ui/StatusQ/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/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir index 3805dbab25..dc0bf29efd 100644 --- a/ui/StatusQ/src/StatusQ/Components/qmldir +++ b/ui/StatusQ/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/ui/StatusQ/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml new file mode 100644 index 0000000000..b529465a56 --- /dev/null +++ b/ui/StatusQ/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/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir index 796e5c6ff6..9c7612faf6 100644 --- a/ui/StatusQ/src/StatusQ/Controls/qmldir +++ b/ui/StatusQ/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/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml index c9c2ecb980..13448d556c 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml +++ b/ui/StatusQ/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/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml index 6311107dda..342f00e2dd 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml +++ b/ui/StatusQ/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/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml index f3dbd48c09..d6fbf8c1a0 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml +++ b/ui/StatusQ/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