feat(Popups): Add StatusModal

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 {

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"
+        }
+    }
+}

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
 

sandbox/qml.qrc

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

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

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
+    }
 }
 

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
+    }
 }
 

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

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
+        }
+    }
+}

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

src/StatusQ/Popups/statusModal/StatusModalFooter.qml

@@ -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
+    radius: 8
-
-    color: Theme.palette.statusModal.backgroundColor
-
-    signal clicked(var buttonIndex)
-    signal back
-
-    radius: 6
 
     color: Theme.palette.indirectColor1
 
-    onButtonsChanged: {
+    onLeftButtonsChanged: {
-        for (let idx in buttons) {
+        for (let idx in leftButtons) {
-            buttons[idx].parent = buttonsLayout
+            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

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
+        anchors.topMargin: 16
-
-        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()
     }
 
     StatusFlatRoundButton {
         id: closeButton
         anchors.right: parent.right
-        anchors.rightMargin: 22.5
+        anchors.rightMargin: 20
         anchors.top: parent.top
-        anchors.topMargin: 22.5
+        anchors.topMargin: 16
-        width: 11.5
+        width: 32
-        height: 11.5
+        height: 32
         type: StatusFlatRoundButton.Type.Secondary
         icon.name: "close"
         icon.color: Theme.palette.directColor1
+        icon.width: 20
+        icon.height: 20
 
         onClicked: statusModalHeader.close()
     }

src/assets/img/icons/arrow-left.svg

@@ -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>