diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml index 0a8db4dbd3..8c135cbc83 100644 --- a/storybook/PagesModel.qml +++ b/storybook/PagesModel.qml @@ -305,6 +305,10 @@ ListModel { title: "StatusDateRangePicker" section: "Components" } + ListElement { + title: "StatusChatListItem" + section: "Components" + } ListElement { title: "BrowserSettings" section: "Settings" diff --git a/storybook/main.qml b/storybook/main.qml index c967864473..6546c1f232 100644 --- a/storybook/main.qml +++ b/storybook/main.qml @@ -18,6 +18,8 @@ ApplicationWindow { property string currentPage + title: "%1 – %2".arg(currentPage).arg(Qt.application.displayName) + palette.window: Theme.palette.statusAppLayout.backgroundColor palette.text: Theme.palette.directColor1 palette.windowText: Theme.palette.directColor1 diff --git a/storybook/pages/StatusChatListItemPage.qml b/storybook/pages/StatusChatListItemPage.qml new file mode 100644 index 0000000000..ed2525282e --- /dev/null +++ b/storybook/pages/StatusChatListItemPage.qml @@ -0,0 +1,129 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 + +import StatusQ.Components 0.1 + +import Storybook 1.0 + +SplitView { + id: root + + Logs { id: logs } + + orientation: Qt.Horizontal + + Item { + SplitView.fillWidth: true + SplitView.fillHeight: true + + StatusChatListItem { + anchors.centerIn: parent + name: ctrlName.text + hasUnreadMessages: ctrlHasUnreadMessages.checked + notificationsCount: ctrlNotificationsCount.value + muted: ctrlMuted.checked + onlineStatus: ctrlOnlineStatus.currentIndex + type: ctrlType.currentIndex + highlighted: ctrlHighlighted.checked + highlightWhenCreated: ctrlHighlighWhenCreated.checked + dragged: ctrlDragged.checked + requiresPermissions: ctrlRequiresPermission.checked + locked: ctrlLocked.checked + onClicked: logs.logEvent("StatusChatListItem::clicked", ["mouse"], arguments) + onUnmute: logs.logEvent("StatusChatListItem::unmute", [], arguments) + } + } + + LogsAndControlsPanel { + SplitView.minimumWidth: 300 + SplitView.preferredWidth: 400 + + logsView.logText: logs.logText + + ColumnLayout { + Layout.fillWidth: true + RowLayout { + Layout.fillWidth: true + Label { text: "Name:" } + TextField { + Layout.fillWidth: true + id: ctrlName + text: "Example channel" + placeholderText: "name" + } + } + CheckBox { + id: ctrlHasUnreadMessages + text: "Has unread messages" + } + RowLayout { + Layout.fillWidth: true + Label { text: "Unread msg count:" } + ToolButton { text: "min"; onClicked: ctrlNotificationsCount.value = ctrlNotificationsCount.from } + SpinBox { + Layout.fillWidth: true + id: ctrlNotificationsCount + from: 0 + to: 1000 + } + ToolButton { text: "max"; onClicked: ctrlNotificationsCount.value = ctrlNotificationsCount.to } + } + CheckBox { + id: ctrlMuted + text: "Muted" + } + RowLayout { + Label { text: "Online status:" } + ComboBox { + Layout.fillWidth: true + id: ctrlOnlineStatus + model: [ + "Inactive", + "Online" + ] + } + } + RowLayout { + Label { text: "Type:" } + ComboBox { + Layout.fillWidth: true + id: ctrlType + currentIndex: 6 + model: [ + "SCLI.Type.Unknown0", // 0 + "SCLI.Type.OneToOneChat", // 1 + "SCLI.Type.PublicChat", // 2 + "SCLI.Type.GroupChat", // 3 + "SCLI.Type.Unknown1", // 4 + "SCLI.Type.Unknown2", // 5 + "SCLI.Type.CommunityChat" // 6 + ] + } + } + CheckBox { + id: ctrlHighlighted + text: "Highlighted" + } + CheckBox { + id: ctrlHighlighWhenCreated + text: "Highlight when created" + } + CheckBox { + id: ctrlDragged + text: "Dragged" + } + CheckBox { + id: ctrlRequiresPermission + text: "Requires permission" + enabled: ctrlType.currentIndex === StatusChatListItem.Type.CommunityChat + } + CheckBox { + Layout.leftMargin: 16 + id: ctrlLocked + text: "Locked" + enabled: ctrlRequiresPermission.enabled && ctrlRequiresPermission.checked + } + } + } +} diff --git a/ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml index df645d6340..871cb0d01e 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml @@ -1,7 +1,5 @@ -import QtQuick 2.13 -import QtQml.Models 2.13 -import QtQuick.Controls 2.13 as QC -import QtGraphicalEffects 1.13 +import QtQuick 2.15 +import QtQml.Models 2.15 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 @@ -38,6 +36,9 @@ Rectangle { property bool dragged: false property alias sensor: sensor + property bool requiresPermissions + property bool locked + signal clicked(var mouse) signal unmute() @@ -107,7 +108,7 @@ Rectangle { anchors.leftMargin: 8 anchors.verticalCenter: parent.verticalCenter - width: 14 + width: 16 visible: root.type !== StatusChatListItem.Type.OneToOneChat opacity: { if (root.muted && !hoverHander.hovered && !root.highlighted) { @@ -125,8 +126,12 @@ Rectangle { switch (root.type) { case StatusChatListItem.Type.GroupChat: return Theme.palette.name === "light" ? "tiny/group" : "tiny/group-white" - case StatusChatListItem.Type.CommunityChat: - return Theme.palette.name === "light" ? "tiny/channel" : "tiny/channel-white" + case StatusChatListItem.Type.CommunityChat: { + var iconName = "tiny/channel" + if (root.requiresPermissions) + iconName = root.locked ? "tiny/channel-locked" : "tiny/channel-unlocked" + return Theme.palette.name === "light" ? iconName : iconName+"-white" + } default: return Theme.palette.name === "light" ? "tiny/public-chat" : "tiny/public-chat-white" } diff --git a/ui/StatusQ/src/assets.qrc b/ui/StatusQ/src/assets.qrc index 986d6ecf9c..955fb7cae5 100644 --- a/ui/StatusQ/src/assets.qrc +++ b/ui/StatusQ/src/assets.qrc @@ -71,6 +71,10 @@ assets/img/icons/tiny/bridge.svg assets/img/icons/tiny/channel-white.svg assets/img/icons/tiny/channel.svg + assets/img/icons/tiny/channel-locked.svg + assets/img/icons/tiny/channel-locked-white.svg + assets/img/icons/tiny/channel-unlocked.svg + assets/img/icons/tiny/channel-unlocked-white.svg assets/img/icons/tiny/chat.svg assets/img/icons/tiny/chatbot.svg assets/img/icons/tiny/checkmark.svg diff --git a/ui/StatusQ/src/assets/img/icons/tiny/channel-locked-white.svg b/ui/StatusQ/src/assets/img/icons/tiny/channel-locked-white.svg new file mode 100644 index 0000000000..90e0273f74 --- /dev/null +++ b/ui/StatusQ/src/assets/img/icons/tiny/channel-locked-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/StatusQ/src/assets/img/icons/tiny/channel-locked.svg b/ui/StatusQ/src/assets/img/icons/tiny/channel-locked.svg new file mode 100644 index 0000000000..64a17919db --- /dev/null +++ b/ui/StatusQ/src/assets/img/icons/tiny/channel-locked.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/StatusQ/src/assets/img/icons/tiny/channel-unlocked-white.svg b/ui/StatusQ/src/assets/img/icons/tiny/channel-unlocked-white.svg new file mode 100644 index 0000000000..cb1828a237 --- /dev/null +++ b/ui/StatusQ/src/assets/img/icons/tiny/channel-unlocked-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/StatusQ/src/assets/img/icons/tiny/channel-unlocked.svg b/ui/StatusQ/src/assets/img/icons/tiny/channel-unlocked.svg new file mode 100644 index 0000000000..ee5abdeec5 --- /dev/null +++ b/ui/StatusQ/src/assets/img/icons/tiny/channel-unlocked.svg @@ -0,0 +1,4 @@ + + + +