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

ui: community popup

This commit is contained in:
Richard Ramos 2020-12-16 14:56:48 -04:00 committed by Iuri Matias
parent 04845e3a8e
commit 6be81c4575
8 changed files with 221 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
ui/app/AppLayouts/Chat/CommunityComponents/CommunityPopupButton.qml Normal file
View File

@ -0,0 +1,58 @@
import QtQuick 2.12
import QtQuick.Dialogs 1.3
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
import "../ContactsColumn"
import QtGraphicalEffects 1.13
Item {
id: root
width: contentItem.width
height: contentItem.height
default property alias actionContent: placeholder.data
signal clicked()
property string iconName
property string label
property string txtColor: Style.current.blue
Item {
id: contentItem
anchors.verticalCenter: parent.verticalCenter
width: btn.width + btnLabel.width + Style.current.padding
height: btn.height
StatusRoundButton {
id: btn
anchors.verticalCenter: parent.verticalCenter
icon.name: "communities/" + iconName
icon.color: Style.current.lightBlue
width: 40
height: 40
}
StyledText {
id: btnLabel
text: label
color: txtColor
anchors.left: btn.right
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: btn.verticalCenter
font.pixelSize: 15
}
}
Item {
id: placeholder
anchors.right: parent.right
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: root.clicked()
}
}

147
ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopup.qml
View File

@ -1,5 +1,7 @@
import QtQuick 2.12
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
@ -14,6 +16,8 @@ ModalPopup {
// TODO get the real image once it's available
property string source: "../../../img/ens-header-dark@2x.png"
property int nbMembers: community.nbMembers
property bool isAdmin: false // TODO:
height: isAdmin ? 627 : 509
id: popup
@ -78,14 +82,147 @@ ModalPopup {
anchors.rightMargin: -Style.current.padding
}
StyledText {
id: chatsTitle
text: qsTr("TODO:")
TextWithLabel {
id: shareCommunity
anchors.top: sep1.bottom
anchors.topMargin: Style.current.bigPadding
font.pixelSize: 15
font.weight: Font.Thin
label: qsTr("Share community")
text: "https://join.status.im/u/TODO"
textToCopy: text
}
Separator {
id: sep2
anchors.left: parent.left
anchors.right: parent.right
anchors.top: shareCommunity.bottom
anchors.topMargin: Style.current.smallPadding
anchors.leftMargin: -Style.current.padding
anchors.rightMargin: -Style.current.padding
}
Column {
anchors.top: sep2.bottom
anchors.topMargin: Style.current.padding
width: parent.width
spacing: Style.current.padding
Loader {
active: isAdmin
width: parent.width
sourceComponent: CommunityPopupButton {
label: qsTr("Members")
iconName: "members"
txtColor: Style.current.textColor
Item {
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: 0
width: 100
StyledText {
text: nbMembers.toString()
anchors.right: caret.left
anchors.rightMargin: Style.current.smallPadding
anchors.top: parent.top
anchors.topMargin: 10
padding: 0
font.pixelSize: 15
color: Style.current.secondaryText
}
SVGImage {
id: caret
anchors.right: parent.right
anchors.topMargin: Style.current.padding
anchors.top: parent.top
source: "../../../img/caret.svg"
width: 13
height: 7
rotation: -90
ColorOverlay {
anchors.fill: parent
source: parent
color: Style.current.secondaryText
}
}
}
}
}
Loader {
active: isAdmin
width: parent.width
sourceComponent: CommunityPopupButton {
label: qsTr("Roles")
iconName: "roles"
width: parent.width
onClicked: console.log("TODO:")
txtColor: Style.current.textColor
SVGImage {
anchors.top: parent.top
anchors.topMargin: Style.current.padding
anchors.right: parent.right
anchors.rightMargin: 0
source: "../../../img/caret.svg"
width: 13
height: 7
rotation: -90
ColorOverlay {
anchors.fill: parent
source: parent
color: Style.current.secondaryText
}
}
}
}
CommunityPopupButton {
id: notificationsBtn
label: qsTr("Notifications")
iconName: "notifications"
width: parent.width
txtColor: Style.current.textColor
onClicked: function(){
notificationSwitch.checked = !notificationSwitch.checked
}
StatusSwitch {
id: notificationSwitch
anchors.right: parent.right
onCheckedChanged: function(value) {
// TODO: enable/disable notifications
console.log("TODO: toggle")
}
}
}
Separator {
width: parent.width
}
Loader {
active: isAdmin
width: parent.width
sourceComponent: CommunityPopupButton {
label: qsTr("Edit community")
iconName: "edit"
}
}
CommunityPopupButton {
label: qsTr("Leave community")
iconName: "leave"
}
Loader {
active: isAdmin
width: parent.width
sourceComponent: CommunityPopupButton {
id: deleteBtn
label: qsTr("Delete")
iconName: "delete"
txtColor: Style.current.red
//btnColor: Style.current.red // TODO: statusroundbutton should support changing color
}
}
}
}

3
ui/app/img/communities/delete.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.39286 2.25C8.20939 2.25 7.25 3.20939 7.25 4.39286C7.25 5.00431 6.75432 5.5 6.14286 5.5H3C2.58579 5.5 2.25 5.83579 2.25 6.25C2.25 6.66421 2.58579 7 3 7H3.73876C3.99164 7 4.2047 7.1888 4.23513 7.43983L5.57349 18.4813C5.81692 20.4896 7.52145 22 9.54443 22H14.4556C16.4786 22 18.1831 20.4896 18.4265 18.4813L19.7649 7.43983C19.7953 7.1888 20.0084 7 20.2612 7H21C21.4142 7 21.75 6.66421 21.75 6.25C21.75 5.83579 21.4142 5.5 21 5.5H17.8571C17.2457 5.5 16.75 5.00432 16.75 4.39286C16.75 3.20939 15.7906 2.25 14.6071 2.25L9.39286 2.25ZM14.7088 5.5C15.0751 5.5 15.3234 5.11087 15.274 4.74786C15.2582 4.63178 15.25 4.51327 15.25 4.39286C15.25 4.03782 14.9622 3.75 14.6071 3.75L9.39286 3.75C9.03782 3.75 8.75 4.03782 8.75 4.39286C8.75 4.51327 8.74184 4.63178 8.72603 4.74786C8.67661 5.11087 8.92485 5.5 9.29121 5.5L14.7088 5.5ZM17.8571 7C18.0964 7 18.2818 7.20925 18.253 7.44679L16.9374 18.3008C16.7853 19.556 15.7199 20.5 14.4556 20.5H9.54443C8.28007 20.5 7.21474 19.556 7.06259 18.3008L5.74695 7.44679C5.71816 7.20925 5.90358 7 6.14286 7L17.8571 7Z" fill="#FF2D55"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
ui/app/img/communities/edit.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.25 3.50019C11.6642 3.50019 12 3.1644 12 2.75019C12 2.33598 11.6642 2.00019 11.25 2.00019L6 2.00019C3.79086 2.00019 2 3.79105 2 6.00019L2 18.0002C2 20.2093 3.79086 22.0002 6 22.0002H18C20.2091 22.0002 22 20.2093 22 18.0002V12.7502C22 12.336 21.6642 12.0002 21.25 12.0002C20.8358 12.0002 20.5 12.336 20.5 12.7502V18.0002C20.5 19.3809 19.3807 20.5002 18 20.5002H6C4.61929 20.5002 3.5 19.3809 3.5 18.0002L3.5 6.00019C3.5 4.61948 4.61929 3.50019 6 3.50019L11.25 3.50019Z" fill="#4360DF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2803 2.71986C20.2971 1.73661 18.7029 1.73661 17.7197 2.71986L9.33613 11.1034C9.00567 11.4339 8.76487 11.8431 8.63648 12.2925L7.77886 15.2941C7.70403 15.556 7.77707 15.8379 7.96967 16.0305C8.16227 16.2231 8.44415 16.2962 8.70604 16.2213L11.7077 15.3637C12.1571 15.2353 12.5663 14.9945 12.8968 14.6641L21.2803 6.28052C22.2636 5.29727 22.2636 3.70311 21.2803 2.71986ZM18.7803 3.78052C19.1778 3.38306 19.8222 3.38306 20.2197 3.78052C20.6171 4.17798 20.6171 4.8224 20.2197 5.21986L11.8361 13.6034C11.6859 13.7536 11.4999 13.8631 11.2956 13.9214C10.5531 14.1336 9.86662 13.4471 10.0788 12.7045C10.1371 12.5003 10.2466 12.3143 10.3968 12.1641L18.7803 3.78052Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
ui/app/img/communities/leave.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5303 6.53033C10.8232 6.23744 10.8232 5.76256 10.5303 5.46967C10.2374 5.17678 9.76256 5.17678 9.46967 5.46967L3.46967 11.4697C3.17678 11.7626 3.17678 12.2374 3.46967 12.5303L9.46967 18.5303C9.76256 18.8232 10.2374 18.8232 10.5303 18.5303C10.8232 18.2374 10.8232 17.7626 10.5303 17.4697L6.66421 13.6036C6.34923 13.2886 6.57232 12.75 7.01777 12.75H20C20.4142 12.75 20.75 12.4142 20.75 12C20.75 11.5858 20.4142 11.25 20 11.25H7.01777C6.57231 11.25 6.34923 10.7114 6.66421 10.3964L10.5303 6.53033Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 627 B

4
ui/app/img/communities/members.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2516 12.4656C14.4937 12.3433 14.7935 12.407 14.9707 12.6123C15.7042 13.4621 16.7893 14 18 14C20.2091 14 22 12.2091 22 10C22 7.79086 20.2091 6 18 6C17.7062 6 17.4199 6.03167 17.1441 6.09177C16.8792 6.14951 16.6011 6.02089 16.4804 5.77808C15.6623 4.13156 13.9633 3 12 3C10.0367 3 8.33769 4.13156 7.51958 5.77808C7.39894 6.02089 7.12078 6.14952 6.85587 6.09177C6.58013 6.03167 6.29376 6 6 6C3.79086 6 2 7.79086 2 10C2 12.2091 3.79086 14 6 14C7.21068 14 8.29574 13.4621 9.02925 12.6123C9.20647 12.407 9.50633 12.3433 9.74842 12.4656C10.4251 12.8074 11.1901 13 12 13C12.8099 13 13.5749 12.8074 14.2516 12.4656ZM15.5 8C15.5 9.933 13.933 11.5 12 11.5C10.067 11.5 8.5 9.933 8.5 8C8.5 6.067 10.067 4.5 12 4.5C13.933 4.5 15.5 6.067 15.5 8ZM16.0355 10.9526C15.912 11.1212 15.8848 11.3495 16.0116 11.5156C16.4684 12.114 17.1891 12.5 18 12.5C19.3807 12.5 20.5 11.3807 20.5 10C20.5 8.61929 19.3807 7.5 18 7.5C17.7431 7.5 17.4953 7.53875 17.262 7.61071C17.0961 7.66188 17 7.82644 17 8C17 9.10444 16.6419 10.1252 16.0355 10.9526ZM6.73802 7.61072C6.50475 7.53875 6.2569 7.5 6 7.5C4.61929 7.5 3.5 8.61929 3.5 10C3.5 11.3807 4.61929 12.5 6 12.5C6.81088 12.5 7.53159 12.1139 7.98837 11.5156C8.11515 11.3495 8.08799 11.1212 7.96448 10.9526C7.35808 10.1252 7 9.10443 7 8C7 7.82644 6.90387 7.66189 6.73802 7.61072Z" fill="#4360DF"/>
<path d="M5.14735 21.0368C5.53098 21.1327 5.91944 20.9141 6.08362 20.5543C7.1079 18.3099 9.37181 16.75 12 16.75C14.6684 16.75 16.9613 18.3579 17.9625 20.6577C18.1289 21.0398 18.5478 21.2663 18.9456 21.142C19.3386 21.0192 19.5622 20.6006 19.4061 20.2196C18.2119 17.3039 15.3458 15.25 12 15.25C8.70404 15.25 5.8736 17.2432 4.64834 20.0901C4.47629 20.4898 4.72515 20.9313 5.14735 21.0368Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

3
ui/app/img/communities/notifications.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.281 19C14.9447 19 14.7031 19.3279 14.7344 19.6628C14.7444 19.7703 14.7499 19.8827 14.7499 20C14.7499 21.3889 13.5436 22.75 11.9999 22.75C10.4563 22.75 9.24992 21.3889 9.24992 20C9.24992 19.8827 9.25542 19.7703 9.26547 19.6628C9.29677 19.3279 9.05515 19 8.71885 19H5.52103C3.78474 19 2.87319 16.9394 4.04115 15.6547L5.218 14.3601C5.72872 13.7983 6.069 13.1028 6.19909 12.3548L7.31456 5.94085C7.71072 3.66293 9.68781 2 11.9999 2C14.312 2 16.2891 3.66293 16.6853 5.94085L17.8008 12.3548C17.9308 13.1028 18.2711 13.7983 18.7818 14.3601L19.9587 15.6547C21.1266 16.9394 20.2151 19 18.4788 19H15.281ZM11.0322 19.0283L11.0313 19.0293L11.039 19.0214L11.0415 19.0188C11.0427 19.0175 11.0433 19.0168 11.0434 19.0167C11.0438 19.0163 11.0434 19.0167 11.0434 19.0167L11.0415 19.0188C11.0525 19.0073 11.0681 19 11.084 19H12.9159C12.9318 19 12.9469 19.0068 12.9579 19.0183C12.9608 19.0217 12.9679 19.0302 12.978 19.0438C13.001 19.0744 13.0389 19.13 13.0791 19.2104C13.1582 19.3687 13.2499 19.6296 13.2499 20C13.2499 20.6111 12.6654 21.25 11.9999 21.25C11.3344 21.25 10.7499 20.6111 10.7499 20C10.7499 19.6296 10.8416 19.3687 10.9207 19.2104C10.9609 19.13 10.9988 19.0744 11.0218 19.0438C11.032 19.0302 11.0386 19.0222 11.0415 19.0188L11.039 19.0214L11.0372 19.0233L11.034 19.0265L11.0322 19.0283ZM5.15106 16.6637L6.32791 15.3691C7.03015 14.5967 7.49804 13.6403 7.67691 12.6118L8.79238 6.19786C9.06358 4.63842 10.4171 3.5 11.9999 3.5C13.5828 3.5 14.9363 4.63842 15.2075 6.19786L16.3229 12.6118C16.5018 13.6403 16.9697 14.5967 17.6719 15.3691L18.8488 16.6637C19.1408 16.9849 18.9129 17.5 18.4788 17.5H5.52103C5.08696 17.5 4.85907 16.9849 5.15106 16.6637Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

4
ui/app/img/communities/roles.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.35614 16.8391C9.35614 18.0317 8.3846 18.9985 7.18614 18.9985C5.98768 18.9985 5.01614 18.0317 5.01614 16.8391C5.01614 15.6465 5.98768 14.6797 7.18614 14.6797C8.3846 14.6797 9.35614 15.6465 9.35614 16.8391ZM7.84807 16.8391C7.84807 17.2029 7.55172 17.4978 7.18614 17.4978C6.82057 17.4978 6.52421 17.2029 6.52421 16.8391C6.52421 16.4753 6.82057 16.1804 7.18614 16.1804C7.55172 16.1804 7.84807 16.4753 7.84807 16.8391Z" fill="#4360DF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1478 11.0812C17.1005 11.273 16.9442 11.4192 16.7489 11.4543L15.7802 11.6282C15.5611 11.6675 15.3941 11.8456 15.3698 12.0658L15.2137 13.4777C15.2007 13.5955 15.1461 13.7049 15.0596 13.7863L14.152 14.6412C14.0267 14.7592 13.9725 14.9326 13.998 15.1023C14.0419 15.3942 14.0646 15.693 14.0646 15.9971C14.0646 19.3124 11.3638 22 8.03229 22C4.70075 22 2 19.3124 2 15.9971C2 12.6817 4.70075 9.99414 8.03229 9.99414C8.72826 9.99414 9.39671 10.1114 10.0188 10.3272C10.209 10.3932 10.4224 10.3534 10.5661 10.2129L18.8142 2.14352C18.9083 2.05154 19.0348 2 19.1667 2H21.4971C21.8164 2 22.0547 2.29229 21.9891 2.60318L21.1655 6.50062C21.1295 6.67113 21.0069 6.8107 20.8419 6.86904L19.9524 7.18361C19.8038 7.23618 19.6886 7.35511 19.6413 7.50485L19.2408 8.77166C19.1902 8.93162 19.0624 9.05573 18.9005 9.10219L17.8191 9.41248C17.6462 9.46211 17.5131 9.59996 17.4702 9.77391L17.1478 11.0812ZM12.5565 15.9971C12.5565 15.6498 12.517 15.3117 12.4422 14.9871L12.4329 14.9595C12.3759 14.7914 12.3116 14.6264 12.2404 14.4649C12.2279 14.4366 12.2343 14.4035 12.2567 14.382L13.7095 12.9916C13.7389 12.9639 13.7574 12.9268 13.7618 12.8868L13.9939 10.7878C14.0182 10.5676 14.1852 10.3896 14.4043 10.3502L15.5176 10.1504C15.7129 10.1153 15.8693 9.96912 15.9166 9.77729L16.2137 8.5726C16.2566 8.39864 16.3896 8.26079 16.5626 8.21116L17.7049 7.88339C17.8668 7.83693 17.9946 7.71282 18.0451 7.55285L18.4282 6.34117C18.4755 6.19143 18.5908 6.07249 18.7394 6.01993L19.5401 5.73675C19.7051 5.6784 19.8277 5.53883 19.8637 5.36832L20.1533 3.99802C20.2074 3.74171 20.0109 3.50073 19.7477 3.50073C19.639 3.50073 19.5347 3.54323 19.4572 3.61905L11.6873 11.2212L10.5987 12.2834C10.5968 12.2852 10.5938 12.2855 10.5916 12.284C9.86375 11.7862 8.9822 11.4949 8.03229 11.4949C5.53363 11.4949 3.50807 13.5106 3.50807 15.9971C3.50807 18.4836 5.53363 20.4993 8.03229 20.4993C10.5309 20.4993 12.5565 18.4836 12.5565 15.9971Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB