status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: Add support for "locked" icons in chat list items 

- introduce 2 new bool properties: `requiresPermissions` and `locked`
- import the new icons
- add a respective storybook to play around with the StatusChatListItem
properties

Fixes #11012
This commit is contained in:
Lukáš Tinkl 2023-06-12 14:23:50 +02:00 committed by Lukáš Tinkl
parent 6bfe79a7f3
commit c21c7cf705
9 changed files with 167 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/PagesModel.qml
View File

@ -305,6 +305,10 @@ ListModel {
title: "StatusDateRangePicker"
section: "Components"
}
ListElement {
title: "StatusChatListItem"
section: "Components"
}
ListElement {
title: "BrowserSettings"
section: "Settings"

2
storybook/main.qml
View File

@ -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

129
storybook/pages/StatusChatListItemPage.qml Normal file
View File

@ -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
}
}
}
}

19
ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml
View File

@ -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"
}

4
ui/StatusQ/src/assets.qrc
View File

@ -71,6 +71,10 @@
<file>assets/img/icons/tiny/bridge.svg</file>
<file>assets/img/icons/tiny/channel-white.svg</file>
<file>assets/img/icons/tiny/channel.svg</file>
<file>assets/img/icons/tiny/channel-locked.svg</file>
<file>assets/img/icons/tiny/channel-locked-white.svg</file>
<file>assets/img/icons/tiny/channel-unlocked.svg</file>
<file>assets/img/icons/tiny/channel-unlocked-white.svg</file>
<file>assets/img/icons/tiny/chat.svg</file>
<file>assets/img/icons/tiny/chatbot.svg</file>
<file>assets/img/icons/tiny/checkmark.svg</file>

4
ui/StatusQ/src/assets/img/icons/tiny/channel-locked-white.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.14689 2.61886C6.21939 2.21104 6.60877 1.93921 7.01658 2.0117C7.4244 2.0842 7.69624 2.47358 7.62374 2.8814L7.38279 4.23679C7.31199 4.63505 7.61825 5.00056 8.02275 5.00056H9.99775C10.3128 5.00056 10.5826 4.77456 10.6377 4.46433L10.9658 2.61886C11.0383 2.21104 11.4277 1.93921 11.8355 2.0117C12.2433 2.0842 12.5151 2.47358 12.4426 2.8814L12.2017 4.23679C12.1309 4.63505 12.4371 5.00056 12.8417 5.00056H14.0518C14.466 5.00056 14.8018 5.33635 14.8018 5.75056C14.8018 6.16478 14.466 6.50056 14.0518 6.50056H12.3439C12.0288 6.50056 11.7591 6.72656 11.7039 7.03679L11.4994 8.38636C11.4354 8.80844 11.238 9.19898 10.9362 9.50084L10.4009 10.0361L9.97688 10.4311C9.6067 10.7759 9.1196 10.9676 8.61369 10.9676H6.73088C6.41579 10.9676 6.14607 11.1936 6.09092 11.5039L5.74763 13.4349C5.67513 13.8428 5.28575 14.1146 4.87793 14.0421C4.47012 13.9696 4.19828 13.5802 4.27078 13.1724L4.52695 11.7314C4.59775 11.3331 4.29149 10.9676 3.88699 10.9676H2.75C2.33579 10.9676 2 10.6318 2 10.2176C2 9.80341 2.33579 9.46762 2.75 9.46762H4.38474C4.69984 9.46762 4.96956 9.24162 5.02471 8.93139L5.32106 7.26433C5.39186 6.86607 5.0856 6.50056 4.6811 6.50056H3.4816C3.06739 6.50056 2.7316 6.16477 2.7316 5.75056C2.7316 5.33635 3.06739 5.00056 3.4816 5.00056H5.17885C5.49395 5.00056 5.76367 4.77456 5.81882 4.46433L6.14689 2.61886ZM10.14 7.26433L9.84361 8.93139C9.78846 9.24162 9.51874 9.46762 9.20364 9.46762L7.22864 9.46762C6.82414 9.46762 6.51788 9.10211 6.58868 8.70385L6.88503 7.03679C6.94018 6.72656 7.2099 6.50056 7.525 6.50056L9.5 6.50056C9.9045 6.50056 10.2108 6.86607 10.14 7.26433Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7441 11.9886V11.2952C10.7441 10.586 11.2838 10 11.9651 10C12.6464 10 13.186 10.586 13.186 11.2952V11.9886H13.3895C13.7266 11.9886 13.9999 12.2557 13.9999 12.5852V13.7784C13.9999 14.1079 13.7266 14.375 13.3895 14.375H10.5406C10.2035 14.375 9.93018 14.1079 9.93018 13.7784V12.5852C9.93018 12.2557 10.2035 11.9886 10.5406 11.9886H10.7441ZM11.3077 11.9888H12.6225V11.2953C12.6225 10.8781 12.3212 10.5508 11.9651 10.5508C11.609 10.5508 11.3077 10.8781 11.3077 11.2953V11.9888Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

4
ui/StatusQ/src/assets/img/icons/tiny/channel-locked.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.14689 2.61886C6.21939 2.21104 6.60877 1.93921 7.01658 2.0117C7.4244 2.0842 7.69624 2.47358 7.62374 2.8814L7.38279 4.23679C7.31199 4.63505 7.61825 5.00056 8.02275 5.00056H9.99775C10.3128 5.00056 10.5826 4.77456 10.6377 4.46433L10.9658 2.61886C11.0383 2.21104 11.4277 1.93921 11.8355 2.0117C12.2433 2.0842 12.5151 2.47358 12.4426 2.8814L12.2017 4.23679C12.1309 4.63505 12.4371 5.00056 12.8417 5.00056H14.0518C14.466 5.00056 14.8018 5.33635 14.8018 5.75056C14.8018 6.16478 14.466 6.50056 14.0518 6.50056H12.3439C12.0288 6.50056 11.7591 6.72656 11.7039 7.03679L11.4994 8.38636C11.4354 8.80844 11.238 9.19898 10.9362 9.50084L10.4009 10.0361L9.97688 10.4311C9.6067 10.7759 9.1196 10.9676 8.61369 10.9676H6.73088C6.41579 10.9676 6.14607 11.1936 6.09092 11.5039L5.74763 13.4349C5.67513 13.8428 5.28575 14.1146 4.87793 14.0421C4.47012 13.9696 4.19828 13.5802 4.27078 13.1724L4.52695 11.7314C4.59775 11.3331 4.29149 10.9676 3.88699 10.9676H2.75C2.33579 10.9676 2 10.6318 2 10.2176C2 9.80341 2.33579 9.46762 2.75 9.46762H4.38474C4.69984 9.46762 4.96956 9.24162 5.02471 8.93139L5.32106 7.26433C5.39186 6.86607 5.0856 6.50056 4.6811 6.50056H3.4816C3.06739 6.50056 2.7316 6.16477 2.7316 5.75056C2.7316 5.33635 3.06739 5.00056 3.4816 5.00056H5.17885C5.49395 5.00056 5.76367 4.77456 5.81882 4.46433L6.14689 2.61886ZM10.14 7.26433L9.84361 8.93139C9.78846 9.24162 9.51874 9.46762 9.20364 9.46762L7.22864 9.46762C6.82414 9.46762 6.51788 9.10211 6.58868 8.70385L6.88503 7.03679C6.94018 6.72656 7.2099 6.50056 7.525 6.50056L9.5 6.50056C9.9045 6.50056 10.2108 6.86607 10.14 7.26433Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7441 11.9886V11.2952C10.7441 10.586 11.2838 10 11.9651 10C12.6464 10 13.186 10.586 13.186 11.2952V11.9886H13.3895C13.7266 11.9886 13.9999 12.2557 13.9999 12.5852V13.7784C13.9999 14.1079 13.7266 14.375 13.3895 14.375H10.5406C10.2035 14.375 9.93018 14.1079 9.93018 13.7784V12.5852C9.93018 12.2557 10.2035 11.9886 10.5406 11.9886H10.7441ZM11.3077 11.9888H12.6225V11.2953C12.6225 10.8781 12.3212 10.5508 11.9651 10.5508C11.609 10.5508 11.3077 10.8781 11.3077 11.2953V11.9888Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

4
ui/StatusQ/src/assets/img/icons/tiny/channel-unlocked-white.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.14689 2.61886C6.21939 2.21104 6.60877 1.93921 7.01658 2.0117C7.4244 2.0842 7.69624 2.47358 7.62374 2.8814L7.38279 4.23679C7.31199 4.63505 7.61825 5.00056 8.02275 5.00056H9.99775C10.3128 5.00056 10.5826 4.77456 10.6377 4.46433L10.9658 2.61886C11.0383 2.21104 11.4277 1.93921 11.8355 2.0117C12.2433 2.0842 12.5151 2.47358 12.4426 2.8814L12.2017 4.23679C12.1309 4.63505 12.4371 5.00056 12.8417 5.00056H14.0518C14.466 5.00056 14.8018 5.33635 14.8018 5.75056C14.8018 6.16478 14.466 6.50056 14.0518 6.50056H12.3439C12.0288 6.50056 11.7591 6.72656 11.7039 7.03679L11.4994 8.38636C11.4354 8.80844 11.238 9.19898 10.9362 9.50084L10.4009 10.0361L9.97688 10.4311C9.6067 10.7759 9.1196 10.9676 8.61369 10.9676H6.73088C6.41579 10.9676 6.14607 11.1936 6.09092 11.5039L5.74763 13.4349C5.67513 13.8428 5.28575 14.1146 4.87793 14.0421C4.47012 13.9696 4.19828 13.5802 4.27078 13.1724L4.52695 11.7314C4.59775 11.3331 4.29149 10.9676 3.88699 10.9676H2.75C2.33579 10.9676 2 10.6318 2 10.2176C2 9.80341 2.33579 9.46762 2.75 9.46762H4.38474C4.69984 9.46762 4.96956 9.24162 5.02471 8.93139L5.32106 7.26433C5.39186 6.86607 5.0856 6.50056 4.6811 6.50056H3.4816C3.06739 6.50056 2.7316 6.16477 2.7316 5.75056C2.7316 5.33635 3.06739 5.00056 3.4816 5.00056H5.17885C5.49395 5.00056 5.76367 4.77456 5.81882 4.46433L6.14689 2.61886ZM10.14 7.26433L9.84361 8.93139C9.78846 9.24162 9.51874 9.46762 9.20364 9.46762L7.22864 9.46762C6.82414 9.46762 6.51788 9.10211 6.58868 8.70385L6.88503 7.03679C6.94018 6.72656 7.2099 6.50056 7.525 6.50056L9.5 6.50056C9.9045 6.50056 10.2108 6.86607 10.14 7.26433Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.035 10C11.3866 10 10.8665 10.543 10.8177 11.221H11.3836C11.4279 10.845 11.7084 10.5635 12.035 10.5635C12.3911 10.5635 12.6924 10.8983 12.6924 11.3253V12.035H11.628V12.035L10.814 12.035H10.6105C10.2733 12.035 10 12.3083 10 12.6455V13.8665C10 14.2037 10.2733 14.477 10.6105 14.477H13.4595C13.7967 14.477 14.07 14.2037 14.07 13.8665V12.6455C14.07 12.3083 13.7967 12.035 13.4595 12.035H13.256V11.3254C13.256 10.5996 12.7163 10 12.035 10Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

4
ui/StatusQ/src/assets/img/icons/tiny/channel-unlocked.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.14689 2.61886C6.21939 2.21104 6.60877 1.93921 7.01658 2.0117C7.4244 2.0842 7.69624 2.47358 7.62374 2.8814L7.38279 4.23679C7.31199 4.63505 7.61825 5.00056 8.02275 5.00056H9.99775C10.3128 5.00056 10.5826 4.77456 10.6377 4.46433L10.9658 2.61886C11.0383 2.21104 11.4277 1.93921 11.8355 2.0117C12.2433 2.0842 12.5151 2.47358 12.4426 2.8814L12.2017 4.23679C12.1309 4.63505 12.4371 5.00056 12.8417 5.00056H14.0518C14.466 5.00056 14.8018 5.33635 14.8018 5.75056C14.8018 6.16478 14.466 6.50056 14.0518 6.50056H12.3439C12.0288 6.50056 11.7591 6.72656 11.7039 7.03679L11.4994 8.38636C11.4354 8.80844 11.238 9.19898 10.9362 9.50084L10.4009 10.0361L9.97688 10.4311C9.6067 10.7759 9.1196 10.9676 8.61369 10.9676H6.73088C6.41579 10.9676 6.14607 11.1936 6.09092 11.5039L5.74763 13.4349C5.67513 13.8428 5.28575 14.1146 4.87793 14.0421C4.47012 13.9696 4.19828 13.5802 4.27078 13.1724L4.52695 11.7314C4.59775 11.3331 4.29149 10.9676 3.88699 10.9676H2.75C2.33579 10.9676 2 10.6318 2 10.2176C2 9.80341 2.33579 9.46762 2.75 9.46762H4.38474C4.69984 9.46762 4.96956 9.24162 5.02471 8.93139L5.32106 7.26433C5.39186 6.86607 5.0856 6.50056 4.6811 6.50056H3.4816C3.06739 6.50056 2.7316 6.16477 2.7316 5.75056C2.7316 5.33635 3.06739 5.00056 3.4816 5.00056H5.17885C5.49395 5.00056 5.76367 4.77456 5.81882 4.46433L6.14689 2.61886ZM10.14 7.26433L9.84361 8.93139C9.78846 9.24162 9.51874 9.46762 9.20364 9.46762L7.22864 9.46762C6.82414 9.46762 6.51788 9.10211 6.58868 8.70385L6.88503 7.03679C6.94018 6.72656 7.2099 6.50056 7.525 6.50056L9.5 6.50056C9.9045 6.50056 10.2108 6.86607 10.14 7.26433Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.035 10C11.3866 10 10.8665 10.543 10.8177 11.221H11.3836C11.4279 10.845 11.7084 10.5635 12.035 10.5635C12.3911 10.5635 12.6924 10.8983 12.6924 11.3253V12.035H11.628V12.035L10.814 12.035H10.6105C10.2733 12.035 10 12.3083 10 12.6455V13.8665C10 14.2037 10.2733 14.477 10.6105 14.477H13.4595C13.7967 14.477 14.07 14.2037 14.07 13.8665V12.6455C14.07 12.3083 13.7967 12.035 13.4595 12.035H13.256V11.3254C13.256 10.5996 12.7163 10 12.035 10Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB