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(Community): Create `CommunityColumnHeaderPanel` component 

- `CommunityColumnHeaderPanel` created.
- Added corresponding `storybook` page.
- Modified `CommunityColumnView` to use new component `CommunityColumnHeaderPanel` instead.
This commit is contained in:
Noelia 2023-01-26 19:52:41 +01:00 committed by Alexandra Betouni
parent 182a189818
commit 842c90a31e
7 changed files with 280 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/PagesModel.qml
View File

@ -57,6 +57,10 @@ ListModel {
title: "PermissionConflictWarningPanel"
section: "Panels"
}
ListElement {
title: "CommunityColumnHeaderPanel"
section: "Panels"
}
ListElement {
title: "InviteFriendsToCommunityPopup"
section: "Popups"

100
storybook/pages/CommunityColumnHeaderPanelPage.qml Normal file
View File

@ -0,0 +1,100 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Storybook 1.0
import AppLayouts.Chat.panels.communities 1.0
import StatusQ.Core.Theme 0.1
import utils 1.0
SplitView {
QtObject {
id: d
property string name: "Uniswap"
property int membersCount: 184
property bool amISectionAdmin: false
property color color: "orchid"
property url image: Style.png("tokens/UNI")
property bool openCreateChat: false
}
Logs { id: logs }
SplitView {
orientation: Qt.Vertical
SplitView.fillWidth: true
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
Rectangle {
width: widthSlider.value
height: communityColumnHeader.implicitHeight
anchors.centerIn: parent
color: Theme.palette.baseColor4
CommunityColumnHeaderPanel {
id: communityColumnHeader
width: widthSlider.value
anchors.centerIn: parent
name: d.name
membersCount: d.membersCount
image: d.image
color: d.color
amISectionAdmin: d.amISectionAdmin
openCreateChat: false
onInfoButtonClicked: logs.logEvent("CommunityColumnHeaderPanel::onInfoButtonClicked()")
onAdHocChatButtonClicked: {
logs.logEvent("CommunityColumnHeaderPanel::onAdHocChatButtonClicked(): " + openCreateChat.toString())
openCreateChat = !openCreateChat
}
}
}
}
LogsAndControlsPanel {
SplitView.minimumHeight: 100
SplitView.preferredHeight: 250
logsView.logText: logs.logText
Row {
Label {
anchors.verticalCenter: parent.verticalCenter
text: "Width:"
}
Slider {
id: widthSlider
value: 400
from: 250
to: 600
}
}
}
}
Pane {
SplitView.minimumWidth: 300
SplitView.preferredWidth: 300
CommunityInfoEditor {
name: d.name
membersCount: d.membersCount
amISectionAdmin: d.amISectionAdmin
color: d.color
image: d.image
onNameChanged: d.name = name
onMembersCountChanged: d.membersCount = membersCount
onAmISectionAdminChanged: d.amISectionAdmin = amISectionAdmin
onColorChanged: d.color = color
onImageChanged: d.image = image
}
}
}

99
storybook/pages/CommunityInfoEditor.qml Normal file
View File

@ -0,0 +1,99 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import utils 1.0
ColumnLayout {
id: root
property string name: "Uniswap"
property int membersCount: 184
property bool amISectionAdmin: false
property color color: "orchid"
property url image: Style.png("tokens/UNI")
property bool colorVisible: false
spacing: 24
ColumnLayout {
Label {
Layout.fillWidth: true
text: "Name"
}
TextField {
background: Rectangle { border.color: 'lightgrey' }
Layout.preferredWidth: 200
text: root.name
onTextChanged: root.name = text
}
}
ColumnLayout {
Label {
Layout.fillWidth: true
text: "Community members:"
}
Slider {
value: root.membersCount
from: 0
to: 1000
onValueChanged: root.membersCount = value
}
}
ColumnLayout {
visible: root.colorVisible
Label {
Layout.fillWidth: true
text: "Community color:"
}
RadioButton {
checked: true
text: "Orchid"
onCheckedChanged: if(checked) root.color = "orchid"
}
RadioButton {
text: "Blue"
onCheckedChanged: if(checked) root.color = "blue"
}
RadioButton {
text: "Orange"
onCheckedChanged: if(checked) root.color = "orange"
}
}
ColumnLayout {
Label {
Layout.fillWidth: true
text: "Community image:"
}
RadioButton {
checked: true
text: qsTr("UNI")
onCheckedChanged: if(checked) root.image = Style.png("tokens/UNI")
}
RadioButton {
text: qsTr("SOCKS")
onCheckedChanged: if(checked) root.image = Style.png("tokens/SOCKS")
}
RadioButton {
text: qsTr("Status")
onCheckedChanged: if(checked) root.image = Style.png("tokens/SNT")
}
}
RowLayout {
Label {
text: "Is community admin:"
}
CheckBox {
checked: root.amISectionAdmin
onCheckedChanged: root.amISectionAdmin = checked
}
}
}

59
ui/app/AppLayouts/Chat/panels/communities/CommunityColumnHeaderPanel.qml Normal file
View File

@ -0,0 +1,59 @@
import QtQuick 2.0
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import utils 1.0
Control {
id: root
property string name
property int membersCount
property url image
property color color
property bool amISectionAdmin
property bool openCreateChat
signal infoButtonClicked
signal adHocChatButtonClicked
padding: Style.current.halfPadding
rightPadding: Style.current.padding
topPadding: Style.current.smallPadding
contentItem: RowLayout {
StatusChatInfoButton {
objectName: "communityHeaderButton"
Layout.fillWidth: true
title: root.name
subTitle: qsTr("%n member(s)", "", root.membersCount)
asset.name: root.image
asset.color: root.color
asset.isImage: true
type: StatusChatInfoButton.Type.OneToOneChat
hoverEnabled: root.amISectionAdmin
onClicked: if(root.amISectionAdmin) root.infoButtonClicked()
}
StatusIconTabButton {
objectName: "startChatButton"
icon.name: "edit"
icon.color: Theme.palette.directColor1
Layout.alignment: Qt.AlignVCenter
checked: root.openCreateChat
highlighted: root.openCreateChat
onClicked: root.adHocChatButtonClicked()
StatusToolTip {
text: qsTr("Start chat")
visible: parent.hovered
orientation: StatusToolTip.Orientation.Bottom
y: parent.height + 12
}
}
}
}

1
ui/app/AppLayouts/Chat/panels/communities/qmldir
View File

@ -3,3 +3,4 @@ CommunityProfilePopupInviteFriendsPanel 1.0 CommunityProfilePopupInviteFriendsPa
CommunityProfilePopupInviteMessagePanel 1.0 CommunityProfilePopupInviteMessagePanel.qml
PermissionQualificationPanel 1.0 PermissionQualificationPanel.qml
PermissionConflictWarningPanel 1.0 PermissionConflictWarningPanel.qml
CommunityColumnHeaderPanel 1.0 CommunityColumnHeaderPanel.qml

7
ui/app/AppLayouts/Chat/stores/RootStore.qml
View File

@ -122,6 +122,13 @@ QtObject {
return result
}
function openCloseCreateChatView() {
if (root.openCreateChat) {
Global.closeCreateChatView()
} else {
Global.openCreateChatView()
}
}
property var messageStore: MessageStore { }

50
ui/app/AppLayouts/Chat/views/CommunityColumnView.qml
View File

@ -51,50 +51,20 @@ Item {
}
}
StatusChatInfoButton {
CommunityColumnHeaderPanel {
id: communityHeader
objectName: "communityHeaderButton"
readonly property int nbMembers: communityData.members.count
title: communityData.name
subTitle: qsTr("%n member(s)", "", nbMembers)
asset.name: communityData.image
asset.color: communityData.color
asset.isImage: true
onClicked: if (communityData.amISectionAdmin) { root.infoButtonClicked() }
anchors.top: parent.top
anchors.topMargin: Style.current.smallPadding
anchors.left: parent.left
anchors.leftMargin: Style.current.halfPadding
anchors.right: (implicitWidth > parent.width - 50) ? adHocChatButton.left : undefined
anchors.rightMargin: Style.current.halfPadding
type: StatusChatInfoButton.Type.OneToOneChat
hoverEnabled: communityData.amISectionAdmin
}
StatusIconTabButton {
id: adHocChatButton
icon.name: "edit"
objectName: "startChatButton"
icon.color: Theme.palette.directColor1
anchors.verticalCenter: communityHeader.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
checked: root.store.openCreateChat
highlighted: root.store.openCreateChat
onClicked: {
if (root.store.openCreateChat) {
Global.closeCreateChatView()
} else {
Global.openCreateChatView()
}
}
StatusToolTip {
text: qsTr("Start chat")
visible: parent.hovered
orientation: StatusToolTip.Orientation.Bottom
y: parent.height + 12
}
name: communityData.name
membersCount: communityData.members.count
image: communityData.image
color: communityData.color
amISectionAdmin: communityData.amISectionAdmin
openCreateChat: root.store.openCreateChat
onInfoButtonClicked: root.infoButtonClicked()
onAdHocChatButtonClicked: root.store.openCloseCreateChatView()
}
StatusButton {