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(Popups): Add StatusModal

This commit is contained in:
B.Melnik 2021-06-14 15:10:36 +03:00 committed by Michał Cieślak
parent 78d56235af
commit eab95c1c7b
14 changed files with 373 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
ui/StatusQ/sandbox/DemoApp.qml
View File

@ -251,13 +251,15 @@ Rectangle {
StatusChatInfoToolBar {
id: statusChatInfoToolBar
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
chatInfoButton.title: "Cryptokitties"
chatInfoButton.subTitle: "128 Members"
chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
chatInfoButton.icon.color: Theme.palette.miscColor6
anchors.horizontalCenter: parent.horizontalCenter
chatInfoButton.onClicked: demoCommunityDetailModal.open()
popupMenu: StatusPopupMenu {
@ -431,6 +433,110 @@ Rectangle {
}
}
StatusModal {
id: demoCommunityDetailModal
anchors.centerIn: parent
header.title: "Cryptokitties"
header.subTitle: "Public Community"
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
content: Column {
width: demoCommunityDetailModal.width
StatusModalDivider {
bottomPadding: 8
}
StatusBaseText {
text: "A community of cat lovers, meow!"
verticalAlignment: Text.AlignVCenter
font.pixelSize: 15
height: 46
color: Theme.palette.directColor1
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 16
anchors.rightMargin: 16
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
StatusDescriptionListItem {
title: "Share community"
subTitle: "https://join.status.im/u/0x04...45f19"
tooltip.text: "Copy to clipboard"
icon.name: "copy"
iconButton.onClicked: tooltip.visible = !tooltip.visible
width: parent.width
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Members"
icon.name: "group-chat"
label: "184"
components: [
StatusIcon {
icon: "chevron-down"
rotation: 270
color: Theme.palette.baseColor1
}
]
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Notifications"
icon.name: "notification"
components: [
StatusSwitch {}
]
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Edit community"
icon.name: "edit"
type: StatusListItem.Type.Secondary
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Transfer ownership"
icon.name: "exchange"
type: StatusListItem.Type.Secondary
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Leave community"
icon.name: "arrow-right"
icon.rotation: 180
type: StatusListItem.Type.Secondary
}
}
}
ListModel {
id: demoChatListItems
ListElement {

145
ui/StatusQ/sandbox/Popups.qml Normal file
View File

@ -0,0 +1,145 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
Column {
spacing: 20
StatusButton {
text: "Simple modal"
onClicked: simpleModal.open()
}
StatusButton {
text: "Modal with header image"
onClicked: headerImageModal.open()
}
StatusButton {
text: "Modal with footer buttons"
onClicked: footerButtonsModal.open()
}
StatusButton {
text: "Modal with header action button"
onClicked: headerActionButtonModal.open()
}
StatusButton {
text: "Modal with content"
onClicked: modalExample.open()
}
StatusModal {
id: simpleModal
anchors.centerIn: parent
header.title: "Some Title"
header.subTitle: "Subtitle"
}
StatusModal {
id: headerImageModal
anchors.centerIn: parent
header.title: "Some Title"
header.subTitle: "Subtitle"
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
}
StatusModal {
id: footerButtonsModal
anchors.centerIn: parent
header.title: "Some Title"
header.subTitle: "Subtitle"
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
leftButtons: [
StatusRoundButton {
icon.name: "arrow-right"
rotation: 180
}
]
rightButtons: [
StatusButton {
text: "Button"
},
StatusButton {
text: "Button"
}
]
}
StatusModal {
id: headerActionButtonModal
anchors.centerIn: parent
header.title: "Some Title"
header.subTitle: "Subtitle"
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 32
height: 32
icon.width: 20
icon.height: 20
icon.name: "info"
}
leftButtons: [
StatusRoundButton {
icon.name: "arrow-right"
rotation: 180
}
]
rightButtons: [
StatusButton {
text: "Button"
},
StatusButton {
text: "Button"
}
]
}
StatusModal {
id: modalExample
anchors.centerIn: parent
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
header.title: "Header"
header.subTitle: "SubTitle"
rightButtons: [
StatusButton {
text: "Button"
},
StatusButton {
text: "Button"
}
]
leftButtons: [
StatusRoundButton {
icon.name: "arrow-right"
rotation: 180
}
]
content: StatusBaseText {
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
color: Theme.palette.directColor1
}
headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 32
height: 32
icon.width: 20
icon.height: 20
icon.name: "info"
}
}
}

11
ui/StatusQ/sandbox/main.qml
View File

@ -165,6 +165,12 @@ StatusWindow {
selected: page.sourceComponent == popupMenuComponent
onClicked: page.sourceComponent = popupMenuComponent
}
StatusNavigationListItem {
title: "StatusModal"
selected: page.sourceComponent == statusModalComponent
onClicked: page.sourceComponent = statusModalComponent
}
}
}
}
@ -262,6 +268,11 @@ StatusWindow {
StatusChatInfoToolBarPage {}
}
Component {
id: statusModalComponent
Popups {}
}
Component {
id: demoAppCmp

1
ui/StatusQ/sandbox/qml.qrc
View File

@ -11,5 +11,6 @@
<file>StatusPopupMenuPage.qml</file>
<file>ThemeSwitch.qml</file>
<file>Layout.qml</file>
<file>Popups.qml</file>
</qresource>
</RCC>

4
ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml
View File

@ -3,10 +3,6 @@ import QtQuick 2.14
QtObject {
property string title
property string subTitle
property StatusIconSettings detailsButtonSettings: StatusIconSettings {
width: 20
height: 20
}
property StatusImageSettings image: StatusImageSettings {
width: 40

4
ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
View File

@ -164,5 +164,9 @@ ThemePalette {
property color hoverBackgroundColor: directColor7
property color separatorColor: directColor7
}
property QtObject statusModal: QtObject {
property color backgroundColor: baseColor3
}
}

4
ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
View File

@ -162,5 +162,9 @@ ThemePalette {
property color hoverBackgroundColor: baseColor2
property color separatorColor: baseColor2
}
property QtObject statusModal: QtObject {
property color backgroundColor: white
}
}

5
ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
View File

@ -28,6 +28,7 @@ QtObject {
property color white: getColor('white')
property color dropShadow: getColor('black', 0.12)
property color backdropColor: getColor('black', 0.4)
property color baseColor1
property color baseColor2
@ -125,6 +126,10 @@ QtObject {
property color separatorColor
}
property QtObject statusModal: QtObject {
property color backgroundColor
}
function alphaColor(color, alpha) {
let actualColor = Qt.darker(color, 1)
actualColor.a = alpha

69
ui/StatusQ/src/StatusQ/Popups/StatusModal.qml Normal file
View File

@ -0,0 +1,69 @@
import QtQuick 2.14
import QtQuick.Controls 2.14 as QC
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import "statusModal" as Spares
QC.Popup {
id: statusModal
property Component content
property alias headerActionButton: headerImpl.actionButton
property StatusModalHeaderSettings header: StatusModalHeaderSettings {}
property alias rightButtons: footerImpl.rightButtons
property alias leftButtons: footerImpl.leftButtons
signal editButtonClicked()
parent: QC.Overlay.overlay
width: 480
height: contentItem.implicitHeight
margins: 0
padding: 0
modal: true
QC.Overlay.modal: Rectangle {
color: Theme.palette.backdropColor
}
background: Rectangle {
color: Theme.palette.statusModal.backgroundColor
radius: 8
}
contentItem: Column {
width: parent.width
Spares.StatusModalHeader {
id: headerImpl
width: 480
title: header.title
subTitle: header.subTitle
image: header.image
onEditButtonClicked: statusModal.editButtonClicked()
onClose: statusModal.close()
}
Loader {
active: true
anchors.horizontalCenter: parent.horizontalCenter
sourceComponent: statusModal.content
}
Spares.StatusModalFooter {
id: footerImpl
width: 480
}
}
}

1
ui/StatusQ/src/StatusQ/Popups/qmldir
View File

@ -3,4 +3,5 @@ module StatusQ.Popups
StatusMenuSeparator 0.1 StatusMenuSeparator.qml
StatusPopupMenu 0.1 StatusPopupMenu.qml
StatusMenuItem 0.1 StatusMenuItem.qml
StatusModal 0.1 StatusModal.qml
StatusModalDivider 0.1 StatusModalDivider.qml

0
ui/StatusQ/src/StatusQ/Components/StatusImageWithTitle.qml → ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
View File

33
ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml
View File

@ -10,22 +10,22 @@ import StatusQ.Controls 0.1
Rectangle {
id: statusModalFooter
property bool showBack: true
property list<Item> leftButtons
property list<StatusBaseButton> rightButtons
property list<StatusBaseButton> buttons
color: Theme.palette.statusModal.backgroundColor
signal clicked(var buttonIndex)
signal back
radius: 6
radius: 8
color: Theme.palette.indirectColor1
onButtonsChanged: {
for (let idx in buttons) {
buttons[idx].parent = buttonsLayout
onLeftButtonsChanged: {
for (let idx in leftButtons) {
leftButtons[idx].parent = leftButtonsLayout
}
}
onRightButtonsChanged: {
for (let idx in rightButtons) {
rightButtons[idx].parent = rightButtonsLayout
}
}
@ -39,10 +39,11 @@ Rectangle {
anchors.leftMargin: 16
anchors.rightMargin: 18
StatusRoundButton {
Row {
id: leftButtonsLayout
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
icon.name: "arrow-left"
visible: statusModalFooter.showBack
spacing: 16
}
Item {
@ -51,7 +52,7 @@ Rectangle {
}
Row {
id: buttonsLayout
id: rightButtonsLayout
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
spacing: 16

27
ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml
View File

@ -15,7 +15,7 @@ Rectangle {
property alias image: imageWithTitle.image
property bool editable: false
signal editClicked
signal editButtonClicked
signal close
implicitHeight: imageWithTitle.implicitHeight + 32
@ -39,33 +39,24 @@ Rectangle {
Loader {
id: actionButtonLoader
anchors.right: closeButton.left
anchors.rightMargin: 24.5
anchors.rightMargin: 8
anchors.top: parent.top
anchors.topMargin: 18
type: StatusFlatRoundButton.Type.Secondary
width: 20
height: 20
icon.width: detailsButtonSettings.width
icon.height: detailsButtonSettings.height
icon.name: detailsButtonSettings.name
icon.color: detailsButtonSettings.color
onClicked: statusModalHeader.detailsClicked()
anchors.topMargin: 16
}
StatusFlatRoundButton {
id: closeButton
anchors.right: parent.right
anchors.rightMargin: 22.5
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: 22.5
width: 11.5
height: 11.5
anchors.topMargin: 16
width: 32
height: 32
type: StatusFlatRoundButton.Type.Secondary
icon.name: "close"
icon.color: Theme.palette.directColor1
icon.width: 20
icon.height: 20
onClicked: statusModalHeader.close()
}

3
ui/StatusQ/src/assets/img/icons/arrow-left.svg
View File

@ -1,3 +0,0 @@
<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.28547 1.61872C9.62717 1.27701 9.62717 0.72299 9.28547 0.381282C8.94376 0.0395728 8.38974 0.0395728 8.04803 0.381282L1.04803 7.38128C0.706321 7.72299 0.706321 8.27701 1.04803 8.61872L8.04803 15.6187C8.38974 15.9604 8.94376 15.9604 9.28547 15.6187C9.62717 15.277 9.62717 14.723 9.28547 14.3813L4.775 9.87081C4.40752 9.50333 4.66778 8.875 5.18748 8.875H20.3334C20.8167 8.875 21.2084 8.48325 21.2084 8C21.2084 7.51675 20.8167 7.125 20.3334 7.125H5.18748C4.66778 7.125 4.40752 6.49667 4.775 6.12919L9.28547 1.61872Z" fill="#88B0FF"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 644 B