status-desktop/ui/app/AppLayouts/Chat/panels/communities/CommunityProfilePopupOvervi...

175 lines
5.4 KiB
QML

import QtQuick 2.12
import QtQuick.Layouts 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
import utils 1.0
Column {
id: root
property string headerTitle: ""
property string headerSubtitle: ""
property string headerImageSource: ""
property var community
signal membersListButtonClicked()
signal notificationsButtonClicked(bool checked)
signal editButtonClicked()
signal transferOwnershipButtonClicked()
signal leaveButtonClicked()
signal copyToClipboard(string link)
Item {
height: Math.max(46, communityDescription.height + 16)
width: parent.width
StatusBaseText {
id: communityDescription
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 16
anchors.rightMargin: 16
text: root.community.description
font.pixelSize: 15
color: Theme.palette.directColor1
wrapMode: Text.Wrap
}
}
StatusModalDivider {
bottomPadding: 8
}
StatusDescriptionListItem {
//% "Share community"
title: qsTrId("share-community")
subTitle: `${Constants.communityLinkPrefix}${root.community.id.substring(0, 4)}...${root.community.id.substring(root.community.id.length -2)}`
//% "Copy to clipboard"
tooltip.text: qsTrId("copy-to-clipboard")
icon.name: "copy"
iconButton.onClicked: {
let link = `${Constants.communityLinkPrefix}${root.community.id}`
//chatsModel.copyToClipboard(link)
root.copyToClipboard(link);
tooltip.visible = !tooltip.visible
}
width: parent.width
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
StatusListItem {
id: membersListItem
anchors.horizontalCenter: parent.horizontalCenter
property int nbRequests: root.community.communityMembershipRequests.nbRequests
//% "Members"
title: qsTrId("members-label")
icon.name: "group-chat"
label: root.community.nbMembers.toString()
sensor.onClicked: root.membersListButtonClicked()
components: [
StatusBadge {
visible: !!membersListItem.nbRequests
value: membersListItem.nbRequests
anchors.top: parent.top
anchors.topMargin: 2
},
StatusIcon {
icon: "chevron-down"
rotation: 270
color: Theme.palette.baseColor1
}
]
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
//% "Notifications"
title: qsTrId("notifications")
icon.name: "notification"
components: [
StatusSwitch {
checked: !root.community.muted
onClicked: root.notificationsButtonClicked(!checked)
}
]
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
visible: root.community.isAdmin || root.community.admin
//% "Edit community"
title: qsTrId("edit-community")
icon.name: "edit"
type: StatusListItem.Type.Secondary
sensor.onClicked: root.editButtonClicked()
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
visible: root.community.isAdmin || root.community.admin
//% "Transfer ownership"
title: qsTrId("transfer-ownership")
icon.name: "exchange"
type: StatusListItem.Type.Secondary
sensor.onClicked: root.transferOwnershipButtonClicked()
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
//% "Leave community"
title: qsTrId("leave-community")
icon.name: "arrow-right"
icon.height: 16
icon.width: 20
icon.rotation: 180
type: StatusListItem.Type.Danger
sensor.onClicked: root.leaveButtonClicked()
}
//% "Roles"
/* // TODO add this back when roles exist */
/* // Loader { */
/* // active: root.community.isAdmin */
/* // width: parent.width */
/* // sourceComponent: CommunityPopupButton { */
/* // label: qsTrId("community-roles") */
/* // iconName: "roles" */
/* // width: parent.width */
/* // onClicked: console.log("TODO:") */
/* // txtColor: Style.current.textColor */
/* // SVGImage { */
/* // anchors.verticalCenter: parent.verticalCenter */
/* // anchors.right: parent.right */
/* // anchors.rightMargin: Style.current.padding */
/* // source: Style.svg("caret") */
/* // width: 13 */
/* // height: 7 */
/* // rotation: -90 */
/* // ColorOverlay { */
/* // anchors.fill: parent */
/* // source: parent */
/* // color: Style.current.secondaryText */
/* // } */
/* // } */
/* // } */
/* // } */
}