diff --git a/ui/StatusQ/sandbox/DemoApp.qml b/ui/StatusQ/sandbox/DemoApp.qml
index 3d1ef4e8b3..d8fb45ed91 100644
--- a/ui/StatusQ/sandbox/DemoApp.qml
+++ b/ui/StatusQ/sandbox/DemoApp.qml
@@ -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 {
diff --git a/ui/StatusQ/sandbox/Popups.qml b/ui/StatusQ/sandbox/Popups.qml
new file mode 100644
index 0000000000..30cfb71ffb
--- /dev/null
+++ b/ui/StatusQ/sandbox/Popups.qml
@@ -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"
+ }
+ }
+}
diff --git a/ui/StatusQ/sandbox/main.qml b/ui/StatusQ/sandbox/main.qml
index 757c16d7e3..b6fb0b7853 100644
--- a/ui/StatusQ/sandbox/main.qml
+++ b/ui/StatusQ/sandbox/main.qml
@@ -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
diff --git a/ui/StatusQ/sandbox/qml.qrc b/ui/StatusQ/sandbox/qml.qrc
index 082eb1dc8c..eba10cc4db 100644
--- a/ui/StatusQ/sandbox/qml.qrc
+++ b/ui/StatusQ/sandbox/qml.qrc
@@ -11,5 +11,6 @@
StatusPopupMenuPage.qml
ThemeSwitch.qml
Layout.qml
+ Popups.qml
diff --git a/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml b/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml
index b57145fc27..957f5c3055 100644
--- a/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml
+++ b/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml
@@ -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
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
index 5916049cf1..2c29567078 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
@@ -164,5 +164,9 @@ ThemePalette {
property color hoverBackgroundColor: directColor7
property color separatorColor: directColor7
}
+
+ property QtObject statusModal: QtObject {
+ property color backgroundColor: baseColor3
+ }
}
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
index b84132075d..d95e1b4688 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
@@ -162,5 +162,9 @@ ThemePalette {
property color hoverBackgroundColor: baseColor2
property color separatorColor: baseColor2
}
+
+ property QtObject statusModal: QtObject {
+ property color backgroundColor: white
+ }
}
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
index 60c811c13a..68875a32f0 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
@@ -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
diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml b/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml
new file mode 100644
index 0000000000..02b9a3d64b
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml
@@ -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
+ }
+ }
+}
diff --git a/ui/StatusQ/src/StatusQ/Popups/qmldir b/ui/StatusQ/src/StatusQ/Popups/qmldir
index 6f523a56b0..e71f5609ca 100644
--- a/ui/StatusQ/src/StatusQ/Popups/qmldir
+++ b/ui/StatusQ/src/StatusQ/Popups/qmldir
@@ -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
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusImageWithTitle.qml b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
similarity index 100%
rename from ui/StatusQ/src/StatusQ/Components/StatusImageWithTitle.qml
rename to ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
diff --git a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml
index 737bcfcf0d..27a259a8f5 100644
--- a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml
+++ b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml
@@ -10,22 +10,22 @@ import StatusQ.Controls 0.1
Rectangle {
id: statusModalFooter
- property bool showBack: true
+ property list- leftButtons
+ property list rightButtons
- property list 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
diff --git a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml
index 3491fc0bdd..1ee1b3b534 100644
--- a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml
+++ b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml
@@ -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()
}
diff --git a/ui/StatusQ/src/assets/img/icons/arrow-left.svg b/ui/StatusQ/src/assets/img/icons/arrow-left.svg
deleted file mode 100644
index 5799a3de69..0000000000
--- a/ui/StatusQ/src/assets/img/icons/arrow-left.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-