status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
status-desktop/ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopup.qml

185 lines
6.5 KiB
QML
Raw Normal View History

Minor UI changes for communities
2020-12-15 16:04:19 +00:00
import QtQuick 2.12
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
import QtQuick.Controls 2.12
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
import QtQuick.Dialogs 1.3
ui: community popup
2020-12-16 18:56:48 +00:00
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
uiux(Communities): various community profile popup ui fixes This commit changes a bunch of things related to ui bugs in the community profile popup. Fixes include: - Removing the `Delete Community` option since this functionality isn't implemented yet - Changing the color of the menu item's icons in dark mode to be blue - Doing the same in the memberlist popup
2021-04-20 09:21:01 +00:00
import QtQuick.Controls.Universal 2.12
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
import "../ContactsColumn"
ModalPopup {
feat: edit communities Allow editing of Community name, description, image, colour, and access.
2021-05-24 03:09:49 +00:00
property string communityId: chatsModel.communities.activeCommunity.id
property string name: chatsModel.communities.activeCommunity.name
property string description: chatsModel.communities.activeCommunity.description
property int access: chatsModel.communities.activeCommunity.access
property string source: chatsModel.communities.activeCommunity.source
property string communityColor: chatsModel.communities.activeCommunity.communityColor
property int nbMembers: chatsModel.communities.activeCommunity.nbMembers
property bool isAdmin: chatsModel.communities.activeCommunity.isAdmin
chore: hide edit community button until the feature is implemented
2021-03-18 17:58:17 +00:00
height: stack.currentItem.height + modalHeader.height + modalFooter.height + Style.current.padding * 3
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
id: popup
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
onClosed: {
while (stack.depth > 1) {
stack.pop()
}
}
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
header: Item {
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
id: modalHeader
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
height: childrenRect.height
width: parent.width
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
property string title: stack.currentItem.headerTitle
property string description: stack.currentItem.headerDescription
property string imageSource: stack.currentItem.headerImageSource
property bool useLetterIdenticon: !!stack.currentItem.useLetterIdenticon
fix(Communities): render community image in profile popup
2021-03-16 12:39:09 +00:00
Loader {
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
id: communityImg
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
sourceComponent: !modalHeader.useLetterIdenticon ? commmunityImgCmp : letterIdenticonCmp
active: !!modalHeader.imageSource || modalHeader.useLetterIdenticon
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
}
fix(Communities): render community image in profile popup
2021-03-16 12:39:09 +00:00
Component {
id: commmunityImgCmp
RoundedImage {
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
source: modalHeader.imageSource
fix(Communities): render community image in profile popup
2021-03-16 12:39:09 +00:00
width: 40
height: 40
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
visible: !!modalHeader.imageSource
fix(Communities): render community image in profile popup
2021-03-16 12:39:09 +00:00
}
}
Component {
id: letterIdenticonCmp
StatusLetterIdenticon {
width: 40
height: 40
chatName: popup.name
fix: fix communities not showing the letter identicon correctly
2021-03-23 19:13:36 +00:00
color: popup.communityColor || Style.current.blue
fix(Communities): render community image in profile popup
2021-03-16 12:39:09 +00:00
}
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
}
fix(Communities): render community image in profile popup
2021-03-16 12:39:09 +00:00
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
StyledTextEdit {
id: communityName
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
text: modalHeader.title
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
anchors.top: parent.top
anchors.topMargin: 2
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
anchors.left: communityImg.active ? communityImg.right : parent.left
anchors.leftMargin: communityImg.active ? Style.current.smallPadding : 0
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
font.bold: true
font.pixelSize: 17
readOnly: true
}
StyledText {
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
id: headerDescription
text: modalHeader.description
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
anchors.left: communityName.left
anchors.top: communityName.bottom
anchors.topMargin: 2
font.pixelSize: 15
font.weight: Font.Thin
color: Style.current.secondaryText
}
fix: fix community profile looks and style
2021-02-12 16:32:04 +00:00
Separator {
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
anchors.top: headerDescription.bottom
fix(Communities): make invite popup push onto modal stackview The popup to invite friends to communities has so far always been a brand new popup that's opened on top of possible existing popups. The design however, expects that the same section should be shown as part of a wizard-like process inside of the existing community profile overview popup, when entered from there. This commit extracts the invite friends popup section into component that can be reused as stack view, as well as modal content, to implement both scenarios.
2021-04-20 12:31:36 +00:00
anchors.topMargin: modalHeader.description === "" ? 0 : Style.current.padding
fix: fix community profile looks and style
2021-02-12 16:32:04 +00:00
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
anchors.leftMargin: -Style.current.padding
}
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
}
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
StackView {
id: stack
initialItem: profileOverview
chore: hide edit community button until the feature is implemented
2021-03-18 17:58:17 +00:00
width: parent.width
ui: community popup
2020-12-16 18:56:48 +00:00
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
pushEnter: Transition { enabled: false }
pushExit: Transition { enabled: false }
popEnter: Transition { enabled: false }
popExit: Transition { enabled: false }
add export function and button
2020-12-18 20:15:00 +00:00
fix(Communities): make invite popup push onto modal stackview The popup to invite friends to communities has so far always been a brand new popup that's opened on top of possible existing popups. The design however, expects that the same section should be shown as part of a wizard-like process inside of the existing community profile overview popup, when entered from there. This commit extracts the invite friends popup section into component that can be reused as stack view, as well as modal content, to implement both scenarios.
2021-04-20 12:31:36 +00:00
Component {
id: inviteFriendsView
CommunityProfilePopupInviteFriendsView {
headerTitle: qsTr("Invite friends")
contactListSearch.chatKey.text: ""
contactListSearch.pubKey: ""
contactListSearch.pubKeys: []
contactListSearch.ensUsername: ""
contactListSearch.existingContacts.visible: profileModel.contacts.list.hasAddedContacts()
contactListSearch.noContactsRect.visible: !contactListSearch.existingContacts.visible
}
}
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
Component {
id: membersList
CommunityProfilePopupMembersList {
headerTitle: qsTr("Members")
headerDescription: popup.nbMembers.toString()
feat: edit communities Allow editing of Community name, description, image, colour, and access.
2021-05-24 03:09:49 +00:00
members: chatsModel.communities.activeCommunity.members
ui: community popup
2020-12-16 18:56:48 +00:00
}
}
add export function and button
2020-12-18 20:15:00 +00:00
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
Component {
id: profileOverview
CommunityProfilePopupOverview {
property bool useLetterIdenticon: !!!popup.source
feat: edit communities Allow editing of Community name, description, image, colour, and access.
2021-05-24 03:09:49 +00:00
headerTitle: chatsModel.communities.activeCommunity.name
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
headerDescription: {
switch(access) {
//% "Public community"
case Constants.communityChatPublicAccess: return qsTrId("public-community");
//% "Invitation only community"
case Constants.communityChatInvitationOnlyAccess: return qsTrId("invitation-only-community");
//% "On request community"
case Constants.communityChatOnRequestAccess: return qsTrId("on-request-community");
//% "Unknown community"
default: return qsTrId("unknown-community");
ui: edit community
2020-12-17 13:24:33 +00:00
}
}
feat: edit communities Allow editing of Community name, description, image, colour, and access.
2021-05-24 03:09:49 +00:00
headerImageSource: chatsModel.communities.activeCommunity.thumbnailImage
description: chatsModel.communities.activeCommunity.description
ui: community popup
2020-12-16 18:56:48 +00:00
}
}
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
}
add export function and button
2020-12-18 20:15:00 +00:00
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
footer: Item {
id: modalFooter
visible: stack.depth > 1
width: parent.width
height: modalFooter.visible ? btnBack.height : 0
StatusRoundButton {
id: btnBack
anchors.left: parent.left
icon.name: "arrow-right"
icon.width: 20
icon.height: 16
rotation: 180
uiux(Communities): various community profile popup ui fixes This commit changes a bunch of things related to ui bugs in the community profile popup. Fixes include: - Removing the `Delete Community` option since this functionality isn't implemented yet - Changing the color of the menu item's icons in dark mode to be blue - Doing the same in the memberlist popup
2021-04-20 09:21:01 +00:00
type: globalSettings.theme === Universal.Dark ? "secondary" : "primary"
refactor(Communities): use StackView inside profile popup for memberlist Prior to this commit, the community memberlist was represented in a nested modal which doesn't adhere to the designs. Rather, the section should render inside the existing modal, requiring it to be refactored using a `StackView`. This commit refactors the community profile popup so that the different content sections ("Overview" and "MemberList") are rendered inside of the popup and can be pushed onto and popped off a stack view. The content components (newly introduced in this commit) `CommunityProfilePopupMembersList` and `CommunityProfilePopupOverview` need to define a `headerTitle`, `headerDescription` and if needed `imageSource` so they can alter the modal's header. The same pattern might be used in other places of the modal if required. Partially fixes #1959
2021-03-16 13:07:09 +00:00
onClicked: {
stack.pop()
ui: community popup
2020-12-16 18:56:48 +00:00
}
}
fix(Communities): make invite popup push onto modal stackview The popup to invite friends to communities has so far always been a brand new popup that's opened on top of possible existing popups. The design however, expects that the same section should be shown as part of a wizard-like process inside of the existing community profile overview popup, when entered from there. This commit extracts the invite friends popup section into component that can be reused as stack view, as well as modal content, to implement both scenarios.
2021-04-20 12:31:36 +00:00
StatusButton {
text: qsTr("Invite")
anchors.right: parent.right
enabled: stack.currentItem.contactListSearch !== undefined && stack.currentItem.contactListSearch.pubKeys.length > 0
onClicked: {
stack.currentItem.sendInvites(stack.currentItem.contactListSearch.pubKeys)
stack.pop()
}
}
ui: community popup
2020-12-16 18:56:48 +00:00
}
Minor UI changes for communities
2020-12-15 16:04:19 +00:00
}