Introducing StatusBaseInput

Usage: The same interface like TextField

Closes: #106

README.md

@@ -12,6 +12,7 @@ These modules are:
 - [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
 - [StatusQ.Controls](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
 - [StatusQ.Layout](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/qmldir)
+- [StatusQ.Platform](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Platform/qmldir)
 - [StatusQ.Popups](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/qmldir)
 
 Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.
@@ -43,12 +44,11 @@ To run the sandbox from within a command line interface, run the following comma
 ```
 $ git clone https://github.com/status-im/StatusQ
 $ cd StatusQ/sandbox
-$ qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-$ make
+$ ./scripts/build
 ```
 
 Once that is done, the sandbox can be started with the generated executable:
 
 ```
-$ ./bin
+$ ./bin/sandbox
 ```

sandbox/Controls.qml

@@ -5,6 +5,8 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 
+import Sandbox 0.1
+
 GridLayout {
     columns: 6
     columnSpacing: 5
@@ -141,4 +143,32 @@ GridLayout {
         to: 100
         value: 40
     }
+
+    StatusBaseInput {
+        placeholderText: "One line"
+    }
+
+    StatusBaseInput {
+        multiline: true
+        placeholderText: "Multiline"
+    }
+
+    StatusBaseInput {
+        multiline: true
+        placeholderText: "Multiline with static height"
+        implicitHeight: 100
+    }
+
+    Item {
+        implicitHeight: 300
+        implicitWidth: 300
+
+        StatusBaseInput {
+            anchors.centerIn: parent
+            multiline: true
+            placeholderText: "Multiline with max/min"
+            minimumHeight: 80
+            maximumHeight: 200
+        }
+    }
 }

sandbox/DemoApp.qml

@@ -44,7 +44,6 @@ Rectangle {
         }
     }
 
-
     StatusAppLayout {
         id: statusAppLayout
         anchors.top: demoApp.top
@@ -141,6 +140,11 @@ Rectangle {
                     badge.border.width: 2
 
                     tooltip.text: "Profile"
+
+                    checked: appView.sourceComponent == statusAppProfileSettingsView
+                    onClicked: {
+                        appView.sourceComponent = statusAppProfileSettingsView
+                    }
                 }
             ]
         }
@@ -160,19 +164,78 @@ Rectangle {
             leftPanel: Item {
                 anchors.fill: parent
 
-                StatusChatList {
+                StatusNavigationPanelHeadline {
+                    id: headline
                     anchors.top: parent.top
-                    anchors.topMargin: 64
+                    anchors.topMargin: 16
                     anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Chat"
+                }
 
-                    selectedChatId: "0"
-                    chatListItems.model: demoChatListItems
-                    onChatItemSelected: selectedChatId = id
-                    onChatItemUnmuted: {
-                        for (var i = 0; i < demoChatListItems.count; i++) {
-                            let item = demoChatListItems.get(i);
-                            if (item.chatId === id) {
-                                demoChatListItems.setProperty(i, "muted", false)
+                Column {
+                    anchors.top: headline.bottom
+                    anchors.topMargin: 16
+                    width: parent.width
+                    spacing: 8
+
+                    StatusContactRequestsIndicatorListItem {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        title: "Contact requests"
+                        requestsCount: 3
+                        sensor.onClicked: demoContactRequestsModal.open()
+                    }
+
+                    StatusChatList {
+                        anchors.horizontalCenter: parent.horizontalCenter
+
+                        chatListItems.model: demoChatListItems
+                        selectedChatId: "0"
+                        onChatItemSelected: selectedChatId = id
+                        onChatItemUnmuted: {
+                            for (var i = 0; i < demoChatListItems.count; i++) {
+                                let item = demoChatListItems.get(i);
+                                if (item.chatId === id) {
+                                    demoChatListItems.setProperty(i, "muted", false)
+                                }
+                            }
+                        }
+
+                        popupMenu: StatusPopupMenu {
+
+                            property string chatId
+
+                            openHandler: function (id) {
+                                chatId = id
+                            }
+
+                            StatusMenuItem {
+                                text: "View Profile"
+                                icon.name: "group-chat"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Mute chat"
+                                icon.name: "notification"
+                            }
+
+                            StatusMenuItem {
+                                text: "Mark as Read"
+                                icon.name: "checkmark-circle"
+                            }
+
+                            StatusMenuItem {
+                                text: "Clear history"
+                                icon.name: "close-circle"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Delete chat"
+                                icon.name: "delete"
+                                type: StatusMenuItem.Type.Danger
                             }
                         }
                     }
@@ -223,7 +286,6 @@ Rectangle {
                         }
                     }
                 }
-
             }
         }
     }
@@ -234,67 +296,147 @@ Rectangle {
         StatusAppTwoPanelLayout {
 
             leftPanel: Item {
+                id: leftPanel
                 anchors.fill: parent
 
-                Column {
+                StatusChatInfoToolBar {
+                    id: statusChatInfoToolBar
+
                     anchors.top: parent.top
-                    anchors.topMargin: 64
                     anchors.horizontalCenter: parent.horizontalCenter
-                    spacing: 4
 
-                    StatusChatList {
-                        id: statusChatList
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        chatListItems.model: demoCommunityChatListItems
-                    }
+                    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
+                    chatInfoButton.onClicked: demoCommunityDetailModal.open()
 
-                    StatusChatListCategory {
-                        name: "Public"
+                    popupMenu: StatusPopupMenu {
 
-                        chatList.chatListItems.model: demoCommunityChatListItems
-                        chatList.selectedChatId: "0"
-                        chatList.onChatItemSelected: chatList.selectedChatId = id
-                        popupMenu: categoryPopupCmp
-                    }
-
-                    StatusChatListCategory {
-                        name: "Development"
-
-                        chatList.chatListItems.model: demoCommunityChatListItems
-                        chatList.onChatItemSelected: chatList.selectedChatId = id
-                        popupMenu: categoryPopupCmp
-                    }
-                }
-
-                Component {
-                    id: categoryPopupCmp
-
-                    StatusPopupMenu {
                         StatusMenuItem {
-                            text: "Mute Category"
-                            icon.name: "notification"
+                            text: "Create channel"
+                            icon.name: "channel"
                         }
 
-                        StatusMenuItem { 
-                            text: "Mark as Read"
-                            icon.name: "checkmark-circle"
-                        }
-
-                        StatusMenuItem { 
-                            text: "Edit Category"
-                            icon.name: "edit"
+                        StatusMenuItem {
+                            text: "Create category"
+                            icon.name: "channel-category"
                         }
 
                         StatusMenuSeparator {}
 
                         StatusMenuItem {
-                            text: "Delete Category"
-                            icon.name: "delete"
-                            type: StatusMenuItem.Type.Danger
+                            text: "Invite people"
+                            icon.name: "share-ios"
+                        }
+
+                    }
+                }
+
+                ScrollView {
+                    id: scrollView
+
+                    anchors.top: statusChatInfoToolBar.bottom
+                    anchors.topMargin: 8
+                    anchors.bottom: parent.bottom
+                    width: leftPanel.width
+
+                    contentHeight: communityCategories.height
+                    clip: true
+
+                    StatusChatListAndCategories {
+                        id: communityCategories
+                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
+                        width: leftPanel.width
+
+                        chatList.model: demoCommunityChatListItems
+                        categoryList.model: demoCommunityCategoryItems
+
+                        showCategoryActionButtons: true
+                        onChatItemSelected: selectedChatId = id
+
+                        categoryPopupMenu: StatusPopupMenu {
+
+                            property string categoryId
+
+                            openHandler: function (id) {
+                                categoryId = id
+                            }
+
+                            StatusMenuItem {
+                                text: "Mute Category"
+                                icon.name: "notification"
+                            }
+
+                            StatusMenuItem { 
+                                text: "Mark as Read"
+                                icon.name: "checkmark-circle"
+                            }
+
+                            StatusMenuItem { 
+                                text: "Edit Category"
+                                icon.name: "edit"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Delete Category"
+                                icon.name: "delete"
+                                type: StatusMenuItem.Type.Danger
+                            }
+                        }
+
+                        chatListPopupMenu: StatusPopupMenu {
+
+                            property string chatId
+
+                            StatusMenuItem {
+                                text: "Mute chat"
+                                icon.name: "notification"
+                            }
+
+                            StatusMenuItem {
+                                text: "Mark as Read"
+                                icon.name: "checkmark-circle"
+                            }
+
+                            StatusMenuItem {
+                                text: "Clear history"
+                                icon.name: "close-circle"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Delete chat"
+                                icon.name: "delete"
+                                type: StatusMenuItem.Type.Danger
+                            }
+                        }
+
+                        popupMenu: StatusPopupMenu {
+                            StatusMenuItem {
+                                text: "Create channel"
+                                icon.name: "channel"
+                            }
+
+                            StatusMenuItem {
+                                text: "Create category"
+                                icon.name: "channel-category"
+                            }
+
+                            StatusMenuSeparator {}
+
+                            StatusMenuItem {
+                                text: "Invite people"
+                                icon.name: "share-ios"
+                            }
                         }
                     }
                 }
             }
+
             rightPanel: Item {
                 anchors.fill: parent
 
@@ -311,6 +453,217 @@ Rectangle {
         }
     }
 
+    Component {
+        id: statusAppProfileSettingsView
+
+        StatusAppTwoPanelLayout {
+
+            leftPanel: Item {
+                anchors.fill: parent
+
+                StatusNavigationPanelHeadline {
+                    id: profileHeadline
+                    anchors.top: parent.top
+                    anchors.topMargin: 16
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Profile"
+                }
+
+                ScrollView {
+                    anchors.top: profileHeadline.bottom
+                    anchors.topMargin: 16
+                    anchors.bottom: parent.bottom
+                    width: parent.width
+
+                    contentHeight: profileMenuItems.height + 8
+                    contentWidth: parent.width
+                    clip: true
+
+                    Column {
+                        id: profileMenuItems
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        spacing: 4
+
+                        Repeater {
+                            model: demoProfileGeneralMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+
+                        StatusListSectionHeadline { text: "Settings" }
+
+                        Repeater {
+                            model: demoProfileSettingsMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+
+                        Item { 
+                            id: invisibleSeparator
+                            height: 16
+                            width: parent.width
+                        }
+
+                        Repeater {
+                            model: demoProfileOtherMenuItems
+                            delegate: StatusNavigationListItem {
+                                title: model.title
+                                icon.name: model.icon
+                            }
+                        }
+                    }
+                }
+            }
+
+            rightPanel: Item {
+                anchors.fill: parent
+            }
+        }
+    }
+
+    StatusModal {
+        id: demoContactRequestsModal
+        anchors.centerIn: parent
+
+        header.title: "Contact Requests"
+        headerActionButton: StatusFlatRoundButton {
+            type: StatusFlatRoundButton.Type.Secondary
+            width: 32
+            height: 32
+
+            icon.width: 20
+            icon.height: 20
+            icon.name: "notification"
+        }
+
+        content: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Contact request will be shown here"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Decline all"
+                type: StatusBaseButton.Type.Danger
+                onClicked: demoContactRequestsModal.close()
+            },
+            StatusButton {
+                text: "Accept all"
+                onClicked: demoContactRequestsModal.close()
+            }
+        ]
+    }
+
+    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 {
@@ -321,15 +674,15 @@ Rectangle {
             hasUnreadMessages: false
             hasMention: false
             unreadMessagesCount: 0
-            iconColor: "blue"
+            color: "blue"
         }
         ListElement {
             chatId: "1"
-            name: "#status-desktop"
+            name: "status-desktop"
             chatType: StatusChatListItem.Type.PublicChat
             muted: false
             hasUnreadMessages: true
-            iconColor: "red"
+            color: "red"
             unreadMessagesCount: 1
         }
         ListElement {
@@ -338,8 +691,9 @@ Rectangle {
             chatType: StatusChatListItem.Type.OneToOneChat
             muted: false
             hasUnreadMessages: false
-            iconColor: "green"
-            identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            color: "green"
+            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             unreadMessagesCount: 0
         }
         ListElement {
@@ -348,7 +702,7 @@ Rectangle {
             chatType: StatusChatListItem.Type.GroupChat
             muted: false
             hasUnreadMessages: false
-            iconColor: "purple"
+            color: "purple"
             unreadMessagesCount: 0
         }
         ListElement {
@@ -357,7 +711,7 @@ Rectangle {
             chatType: StatusChatListItem.Type.OneToOneChat
             muted: true
             hasUnreadMessages: false
-            iconColor: "Orange"
+            color: "Orange"
             unreadMessagesCount: 0
         }
     }
@@ -372,7 +726,7 @@ Rectangle {
             hasUnreadMessages: false
             hasMention: false
             unreadMessagesCount: 0
-            iconColor: "orange"
+            color: "orange"
         }
         ListElement {
             chatId: "1"
@@ -382,7 +736,8 @@ Rectangle {
             hasUnreadMessages: false
             hasMention: false
             unreadMessagesCount: 0
-            iconColor: "orange"
+            color: "orange"
+            categoryId: "public"
         }
         ListElement {
             chatId: "2"
@@ -392,7 +747,115 @@ Rectangle {
             hasUnreadMessages: false
             hasMention: false
             unreadMessagesCount: 0
-            iconColor: "orange"
+            color: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "3"
+            name: "language-design"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            color: "orange"
+            categoryId: "dev"
+        }
+    }
+
+    ListModel {
+        id: demoCommunityCategoryItems
+        ListElement {
+            categoryId: "public"
+            name: "Public"
+        }
+        ListElement {
+            categoryId: "dev"
+            name: "Development"
+        }
+    }
+
+    ListModel {
+        id: demoProfileGeneralMenuItems
+
+        ListElement {
+            title: "My Profile"
+            icon: "profile"
+        }
+
+        ListElement {
+            title: "Contacts"
+            icon: "contact"
+        }
+
+        ListElement {
+            title: "ENS Usernames"
+            icon: "username"
+        }
+
+    }
+
+    ListModel {
+        id: demoProfileSettingsMenuItems
+
+        ListElement {
+            title: "Privacy & Security"
+            icon: "security"
+        }
+
+        ListElement {
+            title: "Appearance"
+            icon: "appearance"
+        }
+
+        ListElement {
+            title: "Browser"
+            icon: "browser"
+        }
+
+        ListElement {
+            title: "Sounds"
+            icon: "sound"
+        }
+
+        ListElement {
+            title: "Language"
+            icon: "language"
+        }
+
+        ListElement {
+            title: "Notifications"
+            icon: "notification"
+        }
+
+        ListElement {
+            title: "Sync settings"
+            icon: "mobile"
+        }
+
+        ListElement {
+            title: "Advanced"
+            icon: "settings"
+        }
+
+    }
+
+    ListModel {
+        id: demoProfileOtherMenuItems
+
+        ListElement {
+            title: "Need help?"
+            icon: "help"
+        }
+
+        ListElement {
+            title: "About"
+            icon: "info"
+        }
+
+        ListElement {
+            title: "Sign out & Quit"
+            icon: "logout"
         }
     }
 }

sandbox/ListItems.qml

@@ -40,11 +40,18 @@ GridLayout {
     StatusChatListCategoryItem {
         title: "Chat list category"
         opened: false
+        showActionButtons: true
     }
 
     StatusChatListCategoryItem {
         title: "Chat list category (opened)"
         opened: true
+        showActionButtons: true
+    }
+
+    StatusChatListCategoryItem {
+        title: "Chat list category (no buttons)"
+        opened: true
     }
 
     StatusChatListItem {
@@ -217,6 +224,12 @@ GridLayout {
         ]
     }
 
+    StatusListItem {
+        title: "Title"
+        icon.name: "info"
+        type: StatusListItem.Type.Secondary
+    }
+
     StatusDescriptionListItem {
         title: "Title"
         subTitle: "Subtitle"
@@ -230,4 +243,8 @@ GridLayout {
         iconButton.onClicked: tooltip.visible = !tooltip.visible
     }
 
+    StatusContactRequestsIndicatorListItem {
+        title: "Contact requests"
+        requestsCount: 3
+    }
 }

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/StatusChatInfoToolBarPage.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.13
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusChatInfoToolBar {
+        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
+
+        popupMenu: StatusPopupMenu {
+
+            StatusMenuItem {
+                text: "Create channel"
+                icon.name: "channel"
+            }
+
+            StatusMenuItem {
+                text: "Create category"
+                icon.name: "channel-category"
+            }
+
+            StatusMenuSeparator {}
+
+            StatusMenuItem {
+                text: "Invite people"
+                icon.name: "share-ios"
+            }
+        }
+    }
+}

sandbox/android/AndroidManifest.xml

@@ -0,0 +1,80 @@
+<?xml version="1.0"?>
+<manifest package="im.statusq" xmlns:android="http://schemas.android.com/apk/res/android" android:versionName="0.1" android:versionCode="0100" android:installLocation="auto">
+    <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="29"/>
+
+    <!-- The following comment will be replaced upon deployment with default permissions based on the dependencies of the application.
+         Remove the comment if you do not require these default permissions. -->
+    <!-- %%INSERT_PERMISSIONS -->
+
+    <!-- The following comment will be replaced upon deployment with default features based on the dependencies of the application.
+         Remove the comment if you do not require these default features. -->
+    <!-- %%INSERT_FEATURES -->
+
+    <supports-screens android:largeScreens="true" android:normalScreens="true" android:anyDensity="true" android:smallScreens="true"/>
+
+    <application android:hardwareAccelerated="true" android:name="org.qtproject.qt5.android.bindings.QtApplication" android:label="-- %%INSERT_APP_NAME%% --">
+        <activity android:configChanges="orientation|uiMode|screenLayout|screenSize|smallestScreenSize|layoutDirection|locale|fontScale|keyboard|keyboardHidden|navigation|mcc|mnc|density" android:name="org.qtproject.qt5.android.bindings.QtActivity" android:label="-- %%INSERT_APP_NAME%% --" android:screenOrientation="unspecified" android:launchMode="singleTop">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN"/>
+                <category android:name="android.intent.category.LAUNCHER"/>
+            </intent-filter>
+            <!-- Application arguments -->
+            <!-- meta-data android:name="android.app.arguments" android:value="arg1 arg2 arg3"/ -->
+            <!-- Application arguments -->
+            <meta-data android:name="android.app.lib_name" android:value="-- %%INSERT_APP_LIB_NAME%% --"/>
+            <meta-data android:name="android.app.qt_sources_resource_id" android:resource="@array/qt_sources"/>
+            <meta-data android:name="android.app.repository" android:value="default"/>
+            <meta-data android:name="android.app.qt_libs_resource_id" android:resource="@array/qt_libs"/>
+            <meta-data android:name="android.app.bundled_libs_resource_id" android:resource="@array/bundled_libs"/>
+            <!-- Deploy Qt libs as part of package -->
+            <meta-data android:name="android.app.bundle_local_qt_libs" android:value="-- %%BUNDLE_LOCAL_QT_LIBS%% --"/>
+            <meta-data android:name="android.app.bundled_in_lib_resource_id" android:resource="@array/bundled_in_lib"/>
+            <meta-data android:name="android.app.bundled_in_assets_resource_id" android:resource="@array/bundled_in_assets"/>
+            <!-- Run with local libs -->
+            <meta-data android:name="android.app.use_local_qt_libs" android:value="-- %%USE_LOCAL_QT_LIBS%% --"/>
+            <meta-data android:name="android.app.libs_prefix" android:value="/data/local/tmp/qt/"/>
+            <meta-data android:name="android.app.load_local_libs" android:value="-- %%INSERT_LOCAL_LIBS%% --"/>
+            <meta-data android:name="android.app.load_local_jars" android:value="-- %%INSERT_LOCAL_JARS%% --"/>
+            <meta-data android:name="android.app.static_init_classes" android:value="-- %%INSERT_INIT_CLASSES%% --"/>
+            <!-- Used to specify custom system library path to run with local system libs -->
+            <!-- <meta-data android:name="android.app.system_libs_prefix" android:value="/system/lib/"/> -->
+            <!--  Messages maps -->
+            <meta-data android:value="@string/ministro_not_found_msg" android:name="android.app.ministro_not_found_msg"/>
+            <meta-data android:value="@string/ministro_needed_msg" android:name="android.app.ministro_needed_msg"/>
+            <meta-data android:value="@string/fatal_error_msg" android:name="android.app.fatal_error_msg"/>
+            <meta-data android:value="@string/unsupported_android_version" android:name="android.app.unsupported_android_version"/>
+            <!--  Messages maps -->
+            <!-- Splash screen -->
+            <!-- Orientation-specific (portrait/landscape) data is checked first. If not available for current orientation,
+                 then android.app.splash_screen_drawable. For best results, use together with splash_screen_sticky and
+                 use hideSplashScreen() with a fade-out animation from Qt Android Extras to hide the splash screen when you
+                 are done populating your window with content. -->
+            <!-- meta-data android:name="android.app.splash_screen_drawable_portrait" android:resource="@drawable/logo_portrait" / -->
+            <!-- meta-data android:name="android.app.splash_screen_drawable_landscape" android:resource="@drawable/logo_landscape" / -->
+            <!-- meta-data android:name="android.app.splash_screen_drawable" android:resource="@drawable/logo"/ -->
+            <!-- meta-data android:name="android.app.splash_screen_sticky" android:value="true"/ -->
+            <!-- Splash screen -->
+            <!-- Background running -->
+            <!-- Warning: changing this value to true may cause unexpected crashes if the
+                          application still try to draw after
+                          "applicationStateChanged(Qt::ApplicationSuspended)"
+                          signal is sent! -->
+            <meta-data android:name="android.app.background_running" android:value="false"/>
+            <!-- Background running -->
+            <!-- auto screen scale factor -->
+            <meta-data android:name="android.app.auto_screen_scale_factor" android:value="false"/>
+            <!-- auto screen scale factor -->
+            <!-- extract android style -->
+            <!-- available android:values :
+                * default - In most cases this will be the same as "full", but it can also be something else if needed, e.g., for compatibility reasons
+                * full - useful QWidget & Quick Controls 1 apps
+                * minimal - useful for Quick Controls 2 apps, it is much faster than "full"
+                * none - useful for apps that don't use any of the above Qt modules
+                -->
+            <meta-data android:name="android.app.extract_android_style" android:value="default"/>
+            <!-- extract android style -->
+        </activity>
+        <!-- For adding service(s) please check: https://wiki.qt.io/AndroidServices -->
+    </application>
+
+</manifest>

sandbox/android/build.gradle

@@ -0,0 +1,57 @@
+buildscript {
+    repositories {
+        google()
+        jcenter()
+    }
+
+    dependencies {
+        classpath 'com.android.tools.build:gradle:4.0.2'
+    }
+}
+
+repositories {
+    google()
+    jcenter()
+}
+
+apply plugin: 'com.android.application'
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.aar'])
+}
+
+android {
+    /*******************************************************
+     * The following variables:
+     * - androidBuildToolsVersion,
+     * - androidCompileSdkVersion
+     * - qt5AndroidDir - holds the path to qt android files
+     *                   needed to build any Qt application
+     *                   on Android.
+     *
+     * are defined in gradle.properties file. This file is
+     * updated by QtCreator and androiddeployqt tools.
+     * Changing them manually might break the compilation!
+     *******************************************************/
+
+    compileSdkVersion androidCompileSdkVersion.toInteger()
+
+    buildToolsVersion androidBuildToolsVersion
+
+    sourceSets {
+        main {
+            manifest.srcFile 'AndroidManifest.xml'
+            java.srcDirs = [qt5AndroidDir + '/src', 'src', 'java']
+            aidl.srcDirs = [qt5AndroidDir + '/src', 'src', 'aidl']
+            res.srcDirs = [qt5AndroidDir + '/res', 'res']
+            resources.srcDirs = ['src']
+            renderscript.srcDirs = ['src']
+            assets.srcDirs = ['assets']
+            jniLibs.srcDirs = ['libs']
+       }
+    }
+
+    lintOptions {
+        abortOnError false
+    }
+}

sandbox/android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-bin.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

sandbox/android/gradlew

@@ -0,0 +1,172 @@
+#!/usr/bin/env sh
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"

sandbox/android/gradlew.bat

@@ -0,0 +1,84 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

sandbox/android/res/values/libs.xml

@@ -0,0 +1,25 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <array name="qt_sources">
+        <item>https://download.qt.io/ministro/android/qt5/qt-5.9</item>
+    </array>
+
+    <!-- The following is handled automatically by the deployment tool. It should
+         not be edited manually. -->
+
+    <array name="bundled_libs">
+        <!-- %%INSERT_EXTRA_LIBS%% -->
+    </array>
+
+     <array name="qt_libs">
+         <!-- %%INSERT_QT_LIBS%% -->
+     </array>
+
+    <array name="bundled_in_lib">
+        <!-- %%INSERT_BUNDLED_IN_LIB%% -->
+    </array>
+    <array name="bundled_in_assets">
+        <!-- %%INSERT_BUNDLED_IN_ASSETS%% -->
+    </array>
+
+</resources>

sandbox/main.qml

@@ -14,8 +14,10 @@ import StatusQ.Platform 0.1
 
 StatusWindow {
     id: rootWindow
-    width: 1024
-    height: 840
+    width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
+                                                                  :  1024
+    height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
+                                                                   :840
     visible: true
     title: qsTr("StatusQ Documentation App")
 
@@ -116,21 +118,21 @@ StatusWindow {
                         anchors.horizontalCenter: parent.horizontalCenter
                         spacing: 0
 
-                        NavigationHeader { text: "StatusQ.Core" }
+                        StatusListSectionHeadline { text: "StatusQ.Core" }
                         StatusNavigationListItem { 
                             title: "Icons" 
                             selected: page.sourceComponent == iconsComponent
                             onClicked: page.sourceComponent = iconsComponent
                         }
 
-                        NavigationHeader { text: "StatusQ.Layout" }
+                        StatusListSectionHeadline { text: "StatusQ.Layout" }
                         StatusNavigationListItem { 
                             title: "Layouts" 
                             selected: page.sourceComponent == layoutComponent
                             onClicked: page.sourceComponent = layoutComponent
                         }
 
-                        NavigationHeader { text: "StatusQ.Controls" }
+                        StatusListSectionHeadline { text: "StatusQ.Controls" }
                         StatusNavigationListItem { 
                             title: "Buttons" 
                             selected: page.sourceComponent == buttonsComponent
@@ -141,23 +143,34 @@ StatusWindow {
                             selected: page.sourceComponent == controlsComponent
                             onClicked: page.sourceComponent = controlsComponent
                         }
-                        NavigationHeader { text: "StatusQ.Components" }
+                        StatusListSectionHeadline { text: "StatusQ.Components" }
                         StatusNavigationListItem { 
                             title: "List Items"
                             selected: page.sourceComponent == listItemsComponent
                             onClicked: page.sourceComponent = listItemsComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusChatInfoToolBar"
+                            selected: page.sourceComponent == chatInfoToolBarComponent
+                            onClicked: page.sourceComponent = chatInfoToolBarComponent
+                        }
                         StatusNavigationListItem { 
                             title: "Others"
                             selected: page.sourceComponent == othersComponent
                             onClicked: page.sourceComponent = othersComponent
                         }
-                        NavigationHeader { text: "StatusQ.Popup" }
+                        StatusListSectionHeadline { text: "StatusQ.Popup" }
                         StatusNavigationListItem { 
                             title: "StatusPopupMenu"
                             selected: page.sourceComponent == popupMenuComponent
                             onClicked: page.sourceComponent = popupMenuComponent
                         }
+
+                        StatusNavigationListItem {
+                            title: "StatusModal"
+                            selected: page.sourceComponent == statusModalComponent
+                            onClicked: page.sourceComponent = statusModalComponent
+                        }
                     }
                 }
             }
@@ -250,6 +263,16 @@ StatusWindow {
         StatusPopupMenuPage {}
     }
 
+    Component {
+        id: chatInfoToolBarComponent
+        StatusChatInfoToolBarPage {}
+    }
+
+    Component {
+        id: statusModalComponent
+        Popups {}
+    }
+
     Component {
         id: demoAppCmp
 

sandbox/qml.qrc

@@ -5,5 +5,12 @@
         <file>Icons.qml</file>
         <file>Others.qml</file>
         <file>Buttons.qml</file>
+        <file>DemoApp.qml</file>
+        <file>ListItems.qml</file>
+        <file>StatusChatInfoToolBarPage.qml</file>
+        <file>StatusPopupMenuPage.qml</file>
+        <file>ThemeSwitch.qml</file>
+        <file>Layout.qml</file>
+        <file>Popups.qml</file>
     </qresource>
 </RCC>

sandbox/sandbox.pro

@@ -1,6 +1,9 @@
-QT += quick
+QT += quick svg
+
+CONFIG += c++11 warn_on
+
+DEFINES += QT_DEPRECATED_WARNINGS
 
-CONFIG += c++11
 
 # You can make your code fail to compile if it uses deprecated APIs.
 # In order to do so, uncomment the following line.
@@ -11,20 +14,39 @@ SOURCES += \
         main.cpp \
         sandboxapp.cpp
 
-OBJECTIVE_SOURCES += \
-    statuswindow_mac.mm
+!macx {
+    SOURCES += statuswindow.cpp
+}
 
-RESOURCES += qml.qrc
+TARGET = sandboxapp
+
+macx {
+    CONFIG -= app_bundle
+    OBJECTIVE_SOURCES += \
+        statuswindow_mac.mm
+}
+
+ios {
+   LIBS += -framework UIKit
+
+   QMAKE_TARGET_BUNDLE_PREFIX = "im.status"
+   #QMAKE_XCODE_CODE_SIGN_IDENTITY = "iPhone Developer"
+   MY_DEVELOPMENT_TEAM.name = "STATUS HOLDINGS PTE.LTD"
+   MY_DEVELOPMENT_TEAM.value = "DTX7Z4U3YA"
+   QMAKE_MAC_XCODE_SETTINGS += MY_DEVELOPMENT_TEAM
+
+}
+
+RESOURCES += qml.qrc \
+            $$PWD/../statusq.qrc
 
 DESTDIR = $$PWD/bin
-CONFIG -= app_bundle
 
 # Default rules for deployment.
 qnx: target.path = /tmp/$${TARGET}/bin
 else: unix:!android: target.path = /opt/$${TARGET}/bin
 !isEmpty(target.path): INSTALLS += target
-
-OTHER_FILES += $$files($$PWD/../src/*, true)
+#OTHER_FILES += $$files($$PWD/../src/*, true)
 
 HEADERS += \
     handler.h \
@@ -40,3 +62,20 @@ DISTFILES += \
     ../src/StatusQ/Controls/StatusRadioButton.qml \
     ../src/StatusQ/Controls/StatusSlider.qml \
     ../src/StatusQ/Controls/StatusSwitch.qml
+
+android {
+
+DISTFILES += \
+    android/AndroidManifest.xml \
+    android/build.gradle \
+    android/gradle/wrapper/gradle-wrapper.jar \
+    android/gradle/wrapper/gradle-wrapper.properties \
+    android/gradlew \
+    android/gradlew.bat \
+    android/res/values/libs.xml
+
+    contains(ANDROID_TARGET_ARCH,armeabi-v7a) {
+        ANDROID_PACKAGE_SOURCE_DIR = \
+            $$PWD/android
+    }
+}

sandbox/sandboxapp.cpp

@@ -17,11 +17,20 @@ void SandboxApp::startEngine()
 {
     qmlRegisterType<StatusWindow>("Sandbox", 0, 1, "StatusWindow");
 
+#ifdef QT_DEBUG
     const QUrl url(applicationDirPath() + "/../main.qml");
+#else
+    const QUrl url(QStringLiteral("qrc:/main.qml"));
+#endif
 
     m_engine.rootContext()->setContextProperty("app", m_handler);
 
+
+#ifdef QT_DEBUG
     m_engine.addImportPath(applicationDirPath() + "/../../src");
+#else
+    m_engine.addImportPath(QStringLiteral("qrc:/src"));
+#endif
     qDebug() << m_engine.importPathList();
     QObject::connect(&m_engine, &QQmlApplicationEngine::objectCreated,
         this, [url](QObject *obj, const QUrl &objUrl) {

sandbox/scripts/build

@@ -0,0 +1,4 @@
+make clean
+qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
+make
+

sandbox/statuswindow.cpp

@@ -0,0 +1,25 @@
+#include "statuswindow.h"
+
+void StatusWindow::toggleFullScreen()
+{
+    if (m_isFullScreen) {
+        showNormal();
+    } else {
+        showFullScreen();
+    }
+}
+
+bool StatusWindow::isFullScreen() const
+{
+    return m_isFullScreen;
+}
+
+void StatusWindow::removeTitleBar()
+{
+
+}
+
+void StatusWindow::showTitleBar()
+{
+
+}

src/StatusQ/Components/StatusChatInfoToolBar.qml

@@ -0,0 +1,105 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+Item {
+    id: statusChatInfoToolBar
+
+    implicitWidth: 288
+    implicitHeight: 56
+
+    property alias chatInfoButton: statusChatInfoButton
+    property Component popupMenu
+
+    signal chatInfoButtonClicked()
+    signal addButtonClicked(var mouse)
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    StatusChatInfoButton {
+        id: statusChatInfoButton
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 5
+        type: StatusChatInfoButton.Type.OneToOneChat
+        onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
+    }
+
+    StatusRoundButton {
+        id: menuButton
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+
+        visible: popupMenuSlot.active
+        width: 32
+        height: 32
+
+        type: StatusRoundButton.Type.Secondary
+        icon.name: "add"
+        state: "default"
+
+        states: [
+            State {
+                name: "default"
+                PropertyChanges {
+                    target: menuButton
+                    icon.rotation: 0
+                }
+            },
+            State {
+                name: "pressed"
+                PropertyChanges {
+                    target: menuButton
+                    icon.rotation: 45
+                    highlighted: true
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                from: "default"
+                to: "pressed"
+
+                RotationAnimation {
+                    duration: 150
+                    direction: RotationAnimation.Clockwise
+                    easing.type: Easing.InCubic
+                }
+            },
+            Transition {
+								from: "pressed"
+								to: "default"
+								RotationAnimation {
+										duration: 150
+										direction: RotationAnimation.Counterclockwise
+										easing.type: Easing.OutCubic
+								}
+        		}
+        ]
+
+        onClicked: {
+            statusChatInfoToolBar.addButtonClicked(mouse)
+            menuButton.state = "pressed"
+            popupMenuSlot.item.popup(menuButton.width-popupMenuSlot.item.width, menuButton.height + 4)
+        }
+
+        Loader {
+            id: popupMenuSlot
+            active: !!statusChatInfoToolBar.popupMenu
+            onLoaded: {
+                popupMenuSlot.item.closeHandler = function () {
+                    menuButton.state = "default"
+                }
+            }
+        }
+    }
+
+}

src/StatusQ/Components/StatusChatList.qml

@@ -9,30 +9,91 @@ Column {
     id: statusChatList
 
     spacing: 4
+    width: 288
 
+    property string categoryId: ""
     property string selectedChatId: ""
     property alias chatListItems: statusChatListItems
 
+    property Component popupMenu
+
+    property var filterFn
+    property var profileImageFn
+
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
 
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
     Repeater {
         id: statusChatListItems
         delegate: StatusChatListItem {
-            chatId: model.chatId
+
+            id: statusChatListItem
+
+            property string profileImage: ""
+
+            Component.onCompleted: {
+                if (typeof statusChatList.profileImageFn === "function") {
+                    profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
+                }
+            }
+
+            chatId: model.chatId || model.id
             name: model.name
             type: model.chatType
             muted: !!model.muted
             hasUnreadMessages: !!model.hasUnreadMessages
             hasMention: !!model.hasMention
             badge.value: model.unreadMessagesCount || 0
-            selected: model.chatId === statusChatList.selectedChatId
+            selected: (model.chatId || model.id) === statusChatList.selectedChatId
 
-            icon.color: model.iconColor || ""
-            image.source: model.identicon || ""
+            icon.color: model.color || ""
+            image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
+            image.source: profileImage || model.identityImage || model.identicon || ""
 
-            onClicked: statusChatList.chatItemSelected(model.chatId)
-            onUnmute: statusChatList.chatItemUnmuted(model.chatId)
+            onClicked: {
+                if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
+                    highlighted = true
+
+                    let originalOpenHandler = popupMenuSlot.item.openHandler
+                    let originalCloseHandler = popupMenuSlot.item.closeHandler
+
+                    popupMenuSlot.item.openHandler = function () {
+                        if (!!originalOpenHandler) {
+                            originalOpenHandler((model.chatId || model.id))
+                        }
+                    }
+
+                    popupMenuSlot.item.closeHandler = function () {
+                        highlighted = false
+                        if (!!originalCloseHandler) {
+                            originalCloseHandler()
+                        }
+                    }
+
+                    popupMenuSlot.item.popup(mouse.x + 4, statusChatListItem.y + mouse.y + 6)
+                    popupMenuSlot.item.openHandler = originalOpenHandler
+                    return
+                }
+                statusChatList.chatItemSelected(model.chatId || model.id)
+            }
+            onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
+            visible: {
+                if (!!statusChatList.filterFn) {
+                    return statusChatList.filterFn(model, statusChatList.categoryId)
+                }
+                return true
+            }
         }
     }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatList.popupMenu
+    }
 }

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -0,0 +1,90 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+Item {
+    id: statusChatListAndCategories
+
+    implicitHeight: chatListsAndCategories.height
+    implicitWidth: chatListsAndCategories.width
+
+    property string selectedChatId: ""
+    property bool showCategoryActionButtons: false
+    property alias chatList: statusChatList.chatListItems
+    property alias categoryList: statusChatListCategories
+    property alias sensor: sensor
+
+    property Component categoryPopupMenu
+    property Component chatListPopupMenu
+    property Component popupMenu
+
+    signal chatItemSelected(string id)
+    signal chatItemUnmuted(string id)
+    signal categoryAddButtonClicked(string id)
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    MouseArea {
+        id: sensor
+        anchors.top: parent.top
+        width: statusChatListAndCategories.width
+        height: statusChatListAndCategories.height
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: {
+            if (mouse.button === Qt.RightButton && !!statusChatListAndCategories.popupMenu) {
+                popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
+                return
+            }
+        }
+
+        Column {
+            id: chatListsAndCategories
+
+            anchors.top: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 4
+
+            StatusChatList {
+                id: statusChatList
+                anchors.horizontalCenter: parent.horizontalCenter
+                visible: !!chatListItems.model && chatListItems.model.count > 0
+                selectedChatId: statusChatListAndCategories.selectedChatId
+                onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
+                onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
+                filterFn: function (model) {
+                    return !!!model.categoryId
+                }
+            }
+
+            Repeater {
+                id: statusChatListCategories
+                visible: !!model && model.count > 0
+
+                delegate: StatusChatListCategory {
+                    categoryId: model.categoryId
+                    name: model.name
+                    showActionButtons: statusChatListAndCategories.showCategoryActionButtons
+                    addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
+
+                    chatList.chatListItems.model: statusChatListAndCategories.chatList.model
+                    chatList.selectedChatId: statusChatListAndCategories.selectedChatId
+                    chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
+
+                    popupMenu: statusChatListAndCategories.categoryPopupMenu
+                    chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatListAndCategories.popupMenu
+    }
+}

src/StatusQ/Components/StatusChatListCategory.qml

@@ -12,11 +12,13 @@ Column {
     property string name: ""
     property bool opened: true
 
+    property alias showActionButtons: statusChatListCategoryItem.showActionButtons
     property alias addButton: statusChatListCategoryItem.addButton
     property alias menuButton: statusChatListCategoryItem.menuButton
     property alias toggleButton: statusChatListCategoryItem.toggleButton
     property alias chatList: statusChatList
 
+    property Component chatListPopupMenu
     property Component popupMenu
 
     onPopupMenuChanged: {
@@ -30,6 +32,8 @@ Column {
         title: statusChatListCategory.name
         opened: statusChatListCategory.opened
 
+        showMenuButton: !!statusChatListCategory.popupMenu
+
         onClicked: {
             if (mouse.button === Qt.RightButton) {
                 highlighted = true
@@ -50,18 +54,35 @@ Column {
 
     StatusChatList {
         id: statusChatList
-
         anchors.horizontalCenter: parent.horizontalCenter
         visible: statusChatListCategory.opened
+        categoryId: statusChatListCategory.categoryId
+        filterFn: function (model) {
+            return !!model.categoryId && model.categoryId == statusChatList.categoryId
+        }
+
+        popupMenu: statusChatListCategory.chatListPopupMenu
     }
 
     Loader {
         id: popupMenuSlot
         active: !!statusChatListCategory.popupMenu
         onLoaded: {
+            let originalOpenHandler = popupMenuSlot.item.openHandler
+            let originalCloseHandler = popupMenuSlot.item.closeHandler
+
+            popupMenuSlot.item.openHandler = function () {
+                if (!!originalOpenHandler) {
+                    originalOpenHandler(statusChatListCategory.categoryId)
+                }
+            }
+
             popupMenuSlot.item.closeHandler = function () {
                 statusChatListCategoryItem.highlighted = false
                 statusChatListCategoryItem.menuButton.highlighted = false
+                if (!!originalCloseHandler) {
+                    originalCloseHandler()
+                }
             }
         }
     }

src/StatusQ/Components/StatusChatListCategoryItem.qml

@@ -16,6 +16,9 @@ StatusListItem {
 
     property bool opened: true
     property bool highlighted: false
+    property bool showActionButtons: false
+    property bool showMenuButton: showActionButtons
+    property bool showAddButton: showActionButtons
     property alias addButton: addButton
     property alias menuButton: menuButton
     property alias toggleButton: toggleButton
@@ -39,7 +42,9 @@ StatusListItem {
             id: addButton
             icon.name: "add"
             icon.width: 20
-            visible: statusChatListCategoryItem.sensor.containsMouse || statusChatListCategoryItem.highlighted
+            visible: statusChatListCategoryItem.showAddButton && 
+                (statusChatListCategoryItem.highlighted ||
+                statusChatListCategoryItem.sensor.containsMouse)
             onClicked: statusChatListCategoryItem.addButtonClicked(mouse)
             tooltip.text: "Add channel inside category"
         },
@@ -47,7 +52,9 @@ StatusListItem {
             id: menuButton
             icon.name: "more"
             icon.width: 21
-            visible: statusChatListCategoryItem.sensor.containsMouse || statusChatListCategoryItem.highlighted
+            visible: statusChatListCategoryItem.showMenuButton && 
+                (statusChatListCategoryItem.highlighted ||
+                statusChatListCategoryItem.sensor.containsMouse)
             onClicked: statusChatListCategoryItem.menuButtonClicked(mouse)
             tooltip.text: "More"
         },

src/StatusQ/Components/StatusChatListItem.qml

@@ -18,19 +18,23 @@ Rectangle {
         color: Theme.palette.miscColor5
     }
     property int type: StatusChatListItem.Type.PublicChat
+    property bool highlighted: false
     property bool selected: false
 
     signal clicked(var mouse)
     signal unmute()
 
     enum Type {
-        PublicChat,
-        GroupChat,
-        CommunityChat,
-        OneToOneChat
+        Unknown0, // 0
+        OneToOneChat, // 1
+        PublicChat, // 2
+        GroupChat, // 3
+        Unknown1, // 4
+        Unknown2, // 5
+        CommunityChat // 6
     }
 
-    implicitWidth: 287
+    implicitWidth: 288
     implicitHeight: 40
 
     radius: 8
@@ -39,7 +43,7 @@ Rectangle {
         if (selected) {
             return Theme.palette.statusChatListItem.selectedBackgroundColor
         }
-        return sensor.containsMouse ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
+        return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
     }
 
     MouseArea {
@@ -47,6 +51,7 @@ Rectangle {
 
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor 
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
 
         onClicked: statusChatListItem.clicked(mouse)
@@ -83,6 +88,11 @@ Rectangle {
                     height: parent.height
                     image.source: statusChatListItem.image.source
                     showLoadingIndicator: true
+                    color: statusChatListItem.image.isIdenticon ?
+                        Theme.palette.statusRoundedImage.backgroundColor :
+                        "transparent"
+                    border.width: statusChatListItem.image.isIdenticon ? 1 : 0
+                    border.color: Theme.palette.directColor7
                 }
 
                 Loader {
@@ -101,12 +111,13 @@ Rectangle {
             width: 14
             visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
             opacity: {
-                if (statusChatListItem.muted && !sensor.containsMouse) {
+                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                     return 0.4
                 }
                 return statusChatListItem.hasMention || 
                   statusChatListItem.hasUnreadMessages || 
                   statusChatListItem.selected ||
+                  statusChatListItem.highlighted ||
                   statusBadge.visible ||
                   sensor.containsMouse ? 1.0 : 0.7
             }
@@ -134,14 +145,18 @@ Rectangle {
             anchors.leftMargin: statusIcon.visible ? 1 : 8
             anchors.verticalCenter: parent.verticalCenter
 
-            text: statusChatListItem.name
+            text: statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
+                !statusChatListItem.name.startsWith("#") ?
+                "#" + statusChatListItem.name :
+                statusChatListItem.name
             color: {
-                if (statusChatListItem.muted && !sensor.containsMouse) {
+                if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
                     return Theme.palette.directColor5
                 }
                 return statusChatListItem.hasMention || 
                   statusChatListItem.hasUnreadMessages ||
                   statusChatListItem.selected ||
+                  statusChatListItem.highlighted ||
                   sensor.containsMouse ||
                   statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
             }

src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml

@@ -0,0 +1,30 @@
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+StatusListItem {
+    id: statusContactRequestsListItem
+
+    implicitHeight: 64
+    implicitWidth: 288
+
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
+
+    property int requestsCount: 0
+
+    components: [
+        StatusBadge {
+            value: statusContactRequestsListItem.requestsCount
+            anchors.verticalCenter: parent.verticalCenter
+            border.width: 4
+            border.color: color
+        },
+        StatusIcon {
+            icon: "chevron-down"
+            rotation: 270
+            color: Theme.palette.baseColor1
+        }
+    ]
+}
+
+

src/StatusQ/Components/StatusListItem.qml

@@ -10,7 +10,20 @@ Rectangle {
     implicitWidth: 448
     implicitHeight: 64
 
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusListItem.backgroundColor
+    enum Type {
+        Primary,
+        Secondary
+    }
+
+    color: {
+        if (sensor.containsMouse) {
+            return type === StatusListItem.Type.Primary ?
+                Theme.palette.baseColor2 :
+                Theme.palette.statusListItem.secondaryHoverBackgroundColor
+        }
+        return Theme.palette.statusListItem.backgroundColor
+    }
+
     radius: 8
 
     property string title: ""
@@ -20,17 +33,26 @@ Rectangle {
     property StatusIconSettings icon: StatusIconSettings {
         height: 20
         width: 20
+        rotation: 0
         background: StatusIconBackgroundSettings {
             width: 40
             height: 40
-            color: Theme.palette.primaryColor3
+            color: sensor.containsMouse && type === StatusListItem.Type.Secondary ?
+                      "transparent" :
+                      Theme.palette.primaryColor3
         }
     }
-    property StatusImageSettings image: StatusImageSettings {}
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+    }
     property string label: ""
 
+    property int type: StatusListItem.Type.Primary
+
     property alias sensor: sensor
     property alias statusListItemTitle: statusListItemTitle
+    property alias statusListItemSubTitle: statusListItemSubTitle
     property alias statusListItemComponentsSlot: statusListItemComponentsSlot
 
     property list<Item> components
@@ -47,7 +69,7 @@ Rectangle {
         id: sensor
 
         anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor 
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
 
@@ -66,6 +88,7 @@ Rectangle {
                 icon.width: statusListItem.icon.width
                 icon.height: statusListItem.icon.height
                 icon.name: statusListItem.icon.name
+                icon.rotation: statusListItem.icon.rotation
                 color: statusListItem.icon.background.color
                 width: statusListItem.icon.background.width
                 height: statusListItem.icon.background.height
@@ -76,6 +99,8 @@ Rectangle {
             id: statusRoundedImage
             StatusRoundedImage {
                 image.source: statusListItem.image.source
+                image.height: statusListItem.image.height
+                image.width: statusListItem.image.width
             }
         }
 
@@ -89,7 +114,12 @@ Rectangle {
                 id: statusListItemTitle
                 text: statusListItem.title
                 font.pixelSize: 15
-                color: Theme.palette.directColor1
+                color: {
+                  if (statusListItem.type === StatusListItem.Type.Primary) {
+                      return Theme.palette.directColor1
+                  }
+                  return Theme.palette.primaryColor1
+                }
             }
 
             StatusBaseText {

src/StatusQ/Components/StatusListSectionHeadline.qml

@@ -4,15 +4,18 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 Item {
-    height: 34
-    width: 176
+    implicitHeight: 34
+    implicitWidth: 176
+
     property alias text: label.text
 
     StatusBaseText {
-        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 4
+        anchors.leftMargin: 16
         id: label
         font.pixelSize: 15
         color: Theme.palette.baseColor1
     }
 }
-

src/StatusQ/Components/StatusNavigationPanelHeadline.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.13
+import StatusQ.Core.Theme 0.1
+
+import StatusQ.Core 0.1
+
+StatusBaseText {
+    font.pixelSize: 17
+    font.weight: Font.Bold
+    color: Theme.palette.directColor1
+}
+

src/StatusQ/Components/StatusRoundIcon.qml

@@ -8,6 +8,7 @@ Rectangle {
     property StatusIconSettings icon: StatusIconSettings {
         width: 24
         height: 24
+        rotation: 0
         background: StatusIconBackgroundSettings {
             width: 40
             height: 40
@@ -30,5 +31,6 @@ Rectangle {
 
         color: Theme.palette.primaryColor1
         icon: statusRoundedIcon.icon.name
+        rotation: statusRoundedIcon.icon.rotation
     }
 }

src/StatusQ/Components/StatusRoundedImage.qml

@@ -26,9 +26,12 @@ Rectangle {
 
     Image {
         id: image
-        sourceSize.width: parent.implicitWidth
-        sourceSize.height: parent.implicitHeight
+        width: statusRoundImage.width
+        height: statusRoundImage.height
+        sourceSize.width: parent.width * 2
+        sourceSize.height: parent.height * 2
         fillMode: Image.PreserveAspectFit
+        anchors.centerIn: parent
         cache: true
     }
 

src/StatusQ/Components/qmldir

@@ -1,16 +1,21 @@
 module StatusQ.Components
 
 StatusBadge 0.1 StatusBadge.qml
+StatusChatInfoToolBar 0.1 StatusChatInfoToolBar.qml
 StatusChatList 0.1 StatusChatList.qml
 StatusChatListItem 0.1 StatusChatListItem.qml
 StatusChatListCategory 0.1 StatusChatListCategory.qml
 StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
+StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
 StatusChatToolBar 0.1 StatusChatToolBar.qml
+StatusContactRequestsIndicatorListItem 0.1 StatusContactRequestsIndicatorListItem.qml
 StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml
+StatusListSectionHeadline 0.1 StatusListSectionHeadline.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
 StatusNavigationListItem 0.1 StatusNavigationListItem.qml
+StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
 StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml

src/StatusQ/Controls/StatusBaseInput.qml

@@ -0,0 +1,146 @@
+import QtQuick 2.14
+
+import QtQuick.Controls 2.14 as QC
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+
+Item {
+    id: statusBaseInput
+
+    property bool multiline: false
+
+    property bool clearable: false
+
+    property alias inputMethodHints: edit.inputMethodHints
+
+    property alias selectedText: edit.selectedText
+    property alias selectedTextColor: edit.selectedTextColor
+    property alias selectionStart: edit.selectionStart
+    property alias selectionEnd: edit.selectionEnd
+
+    property alias color: edit.color
+    property alias font: edit.font
+    property alias verticalAlignmet: edit.verticalAlignment
+    property alias horizontalAlignment: edit.horizontalAlignment
+
+    property alias placeholderText: placeholder.text
+    property alias placeholderTextColor: placeholder.color
+    property alias placeholderFont: placeholder.font
+
+    property real leftPadding: 16
+    property real rightPadding: 16
+    property real topPadding: 11
+    property real bottomPadding: 11
+
+    property real minimumHeight: 0
+    property real maximumHeight: 0
+
+    implicitWidth: 200
+    implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 40) : 40
+
+    Rectangle {
+        width: parent.width
+        height: maximumHeight != 0 ? Math.min(
+                                        minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
+                                                          : implicitHeight,
+                                         maximumHeight)
+                                  : parent.height
+        color: Theme.palette.baseColor2
+        radius: 8
+
+        clip: true
+
+        Flickable {
+            id: flick
+
+            anchors.fill: parent
+            anchors.leftMargin: statusBaseInput.leftPadding
+            anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButtton.width : 0
+            anchors.topMargin: statusBaseInput.topPadding
+            anchors.bottomMargin: statusBaseInput.bottomPadding
+            contentWidth: edit.paintedWidth
+            contentHeight: edit.paintedHeight
+            clip: true
+
+            QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline }
+
+
+            function ensureVisible(r) {
+                if (contentX >= r.x)
+                    contentX = r.x;
+                else if (contentX+width <= r.x+r.width)
+                    contentX = r.x+r.width-width;
+                if (contentY >= r.y)
+                    contentY = r.y;
+                else if (contentY+height <= r.y+r.height)
+                    contentY = r.y+r.height-height;
+            }
+
+
+
+            TextEdit {
+                id: edit
+                width: flick.width
+                selectByMouse: true
+                anchors.verticalCenter: parent.verticalCenter
+                focus: true
+
+                font.pixelSize: 15
+                font.family: Theme.palette.baseFont.name
+                color: Theme.palette.directColor1
+
+                onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
+                wrapMode: TextEdit.NoWrap
+
+                Keys.onReturnPressed: {
+                    if (multiline) {
+                        event.accepted = false
+                    } else {
+                        event.accepted = true
+                    }
+                }
+
+                Keys.onEnterPressed: {
+                    if (multiline) {
+                        event.accepted = false
+                    } else {
+                        event.accepted = true
+                    }
+                }
+
+                StatusBaseText {
+                    id: placeholder
+                    visible: edit.text.length === 0
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    font.pixelSize: 15
+
+                    elide: StatusBaseText.ElideRight
+                    font.family: Theme.palette.baseFont.name
+                    color: Theme.palette.baseColor1
+                }
+            }
+        } // Flickable
+    } // Rectangle
+
+    StatusFlatRoundButton {
+        id: clearButtton
+        visible: edit.text.length != 0 && statusBaseInput.clearable && !statusBaseInput.multiline
+        anchors.right: parent.right
+        anchors.rightMargin: 11
+        anchors.verticalCenter: parent.verticalCenter
+        type: StatusFlatRoundButton.Type.Secondary
+        width: 14
+        height: 14
+        icon.name: "clear"
+        icon.width: 14
+        icon.height: 14
+        onClicked: {
+            edit.clear()
+        }
+    }
+
+}

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -28,14 +28,17 @@ Rectangle {
     signal unmute()
 
     enum Type {
-        PublicChat,
-        GroupChat,
-        CommunityChat,
-        OneToOneChat
+        Unknown0, // 0
+        OneToOneChat, // 1
+        PublicChat, // 2
+        GroupChat, // 3
+        Unknown1, // 4
+        Unknown2, // 5
+        CommunityChat // 6
     }
 
     radius: 8
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusChatInfoButton.backgroundColor
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
 
     MouseArea {
         id: sensor

src/StatusQ/Controls/StatusRoundButton.qml

@@ -10,6 +10,7 @@ Rectangle {
     property StatusIconSettings icon: StatusIconSettings {
         width: 23
         height: 23
+        rotation: 0
 
         color: {
             switch(statusRoundButton.type) {
@@ -34,6 +35,8 @@ Rectangle {
 
     property alias hovered: sensor.containsMouse
 
+    property bool highlighted: false
+
     property int type: StatusRoundButton.Type.Primary
 
     signal pressed(var mouse)
@@ -87,7 +90,7 @@ Rectangle {
 
     color: {
         if (statusRoundButton.enabled) {
-            return sensor.containsMouse ? backgroundSettings.hoverColor
+            return sensor.containsMouse || highlighted ? backgroundSettings.hoverColor
                                         : backgroundSettings.color
         } else {
             return backgroundSettings.disabledColor
@@ -109,6 +112,7 @@ Rectangle {
             visible: !loading
 
             icon: statusRoundButton.icon.name
+            rotation: statusRoundButton.icon.rotation
 
             width: statusRoundButton.icon.width
             height: statusRoundButton.icon.height

src/StatusQ/Controls/qmldir

@@ -14,3 +14,4 @@ StatusSwitch 0.1 StatusSwitch.qml
 StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml
 StatusSlider 0.1 StatusSlider.qml
+StatusBaseInput 0.1 StatusBaseInput.qml

src/StatusQ/Core/StatusIcon.qml

@@ -12,19 +12,20 @@ Image {
     sourceSize.height: height
     fillMode: Image.PreserveAspectFit
 
+    antialiasing: true
+    mipmap: true
+
     onIconChanged: {
         if (icon !== "") {
             source = "../../assets/img/icons/" + icon + ".svg";
         }
     }
 
-    ColorOverlay {
-        visible: !Qt.colorEqual(statusIcon.color, "transparent")
-        anchors.fill: statusIcon
-        source: statusIcon
+    layer.mipmap: true
+    layer.smooth: true
+    layer.format: ShaderEffectSource.RGBA
+    layer.enabled:!Qt.colorEqual(statusIcon.color, "transparent")
+    layer.effect: ColorOverlay {
         color: statusIcon.color
-        antialiasing: true
-        smooth: true
     }
 }
-

src/StatusQ/Core/StatusImageSettings.qml

@@ -6,5 +6,6 @@ QtObject {
     property url source
     property real width
     property real height
+    property bool isIdenticon: false
 }
 

src/StatusQ/Core/StatusModalHeaderSettings.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.14
+
+QtObject {
+    property string title
+    property string subTitle
+
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+    }
+}

src/StatusQ/Core/Theme/StatusColors.qml

@@ -13,6 +13,7 @@ QtObject {
         'blue3': '#88B0FF',
         'blue4': '#869EFF',
         'blue5': '#AAC6FF',
+        'blue6': '#ECEFFC',
 
         'brown': '#8B3131',
         'brown2': '#9B832F',

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -132,6 +132,7 @@ ThemePalette {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor: baseColor3
+        property color secondaryHoverBackgroundColor: primaryColor3
     }
 
     property QtObject statusChatListItem: QtObject {
@@ -163,5 +164,13 @@ ThemePalette {
         property color hoverBackgroundColor: directColor7
         property color separatorColor: directColor7
     }
+
+    property QtObject statusModal: QtObject {
+        property color backgroundColor: baseColor3
+    }
+
+    property QtObject statusRoundedImage: QtObject {
+        property color backgroundColor: baseColor3
+    }
 }
 

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -130,6 +130,7 @@ ThemePalette {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor: white
+        property color secondaryHoverBackgroundColor: getColor('blue6')
     }
 
     property QtObject statusChatListItem: QtObject {
@@ -161,5 +162,13 @@ ThemePalette {
         property color hoverBackgroundColor: baseColor2
         property color separatorColor: baseColor2
     }
+
+    property QtObject statusModal: QtObject {
+        property color backgroundColor: white
+    }
+
+    property QtObject statusRoundedImage: 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
@@ -91,6 +92,7 @@ QtObject {
 
     property QtObject statusListItem: QtObject {
         property color backgroundColor
+        property color secondaryHoverBackgroundColor
     }
 
     property QtObject statusChatListItem: QtObject {
@@ -124,6 +126,14 @@ QtObject {
         property color separatorColor
     }
 
+    property QtObject statusModal: QtObject {
+        property color backgroundColor
+    }
+
+    property QtObject statusRoundedImage: QtObject {
+        property color backgroundColor
+    }
+
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha

src/StatusQ/Core/qmldir

@@ -5,4 +5,5 @@ StatusIcon 0.1 StatusIcon.qml
 StatusIconSettings 0.1 StatusIconSettings.qml
 StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
 StatusImageSettings 0.1 StatusImageSettings.qml
+StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
 

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/StatusModalDivider.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.14
+
+import StatusQ.Core.Theme 0.1
+
+Column {
+    spacing: 0
+
+    property real topPadding: 0
+    property real bottomPadding: 0
+
+    width: 480
+
+    Item {
+        id: topPaddingItem
+        height: parent.topPadding
+        width: parent.width
+    }
+
+    Rectangle {
+        id: divider
+        color: Theme.palette.baseColor2
+        height: 1
+        width: parent.width
+    }
+
+    Item {
+        id: bottomPaddingItem
+        height: parent.bottomPadding
+        width: parent.width
+    }
+}

src/StatusQ/Popups/StatusPopupMenu.qml

@@ -16,8 +16,15 @@ Menu {
 
     property int menuItemCount: 0
     property var subMenuItemIcons: []
+    property var openHandler
     property var closeHandler
 
+    onOpened: {
+        if (typeof openHandler === "function") {
+            openHandler()
+        }
+    }
+
     onClosed: {
         if (typeof closeHandler === "function") {
             closeHandler()

src/StatusQ/Popups/qmldir

@@ -3,3 +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/StatusImageWithTitle.qml

@@ -0,0 +1,69 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+Row {
+    id: statusImageWithTitle
+
+    property alias title: headerTitle.text
+    property alias subTitle: headerSubTitle.text
+    property bool editable: false
+
+    signal editButtonClicked
+
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+    }
+
+    spacing: 8
+
+    StatusRoundedImage {
+        id: headerImage
+        anchors.verticalCenter: parent.verticalCenter
+        width: statusImageWithTitle.image.width
+        height: statusImageWithTitle.image.height
+        image.source:  statusImageWithTitle.image.source
+        showLoadingIndicator: true
+        visible: !!statusImageWithTitle.image.source.toString()
+    }
+
+    Column {
+        id: textLayout
+
+        Row {
+            spacing: 4
+            StatusBaseText {
+                id: headerTitle
+                font.family: Theme.palette.baseFont.name
+                font.pixelSize: 17
+                font.bold: true
+                color: Theme.palette.directColor1
+            }
+            StatusFlatRoundButton {
+                id: editButton
+                visible: statusImageWithTitle.editable
+                anchors.bottom: headerTitle.bottom
+                anchors.bottomMargin: -1
+                height: 24
+                width: 24
+                type: StatusFlatRoundButton.Type.Secondary
+                icon.name: "pencil"
+                icon.color: Theme.palette.directColor1
+                icon.width: 12.5
+                icon.height: 12.5
+
+                onClicked: statusImageWithTitle.editButtonClicked()
+            }
+        }
+
+        StatusBaseText {
+            id: headerSubTitle
+            font.family: Theme.palette.baseFont.name
+            font.pixelSize: 15
+            color:Theme.palette.baseColor1
+        }
+    }
+}

src/StatusQ/Popups/statusModal/StatusModalFooter.qml

@@ -0,0 +1,69 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+
+Rectangle {
+    id: statusModalFooter
+
+    property list<Item> leftButtons
+    property list<StatusBaseButton> rightButtons
+
+    radius: 8
+
+    color: Theme.palette.statusModal.backgroundColor
+
+    onLeftButtonsChanged: {
+        for (let idx in leftButtons) {
+            leftButtons[idx].parent = leftButtonsLayout
+        }
+    }
+
+    onRightButtonsChanged: {
+        for (let idx in rightButtons) {
+            rightButtons[idx].parent = rightButtonsLayout
+        }
+    }
+
+    implicitHeight: rootLayout.implicitHeight + 30
+
+    RowLayout {
+        id: rootLayout
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: 16
+        anchors.rightMargin: 18
+
+        Row {
+            id: leftButtonsLayout
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+
+            spacing: 16
+        }
+
+        Item {
+            Layout.fillWidth: true
+            implicitHeight: 1
+        }
+
+        Row {
+            id: rightButtonsLayout
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+
+            spacing: 16
+
+        }
+    }
+
+    Rectangle {
+        anchors.top: parent.top
+        width: parent.width
+        height: parent.radius
+        color: parent.color
+    }
+}

src/StatusQ/Popups/statusModal/StatusModalHeader.qml

@@ -0,0 +1,70 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+Rectangle {
+    id: statusModalHeader
+
+    property alias title: imageWithTitle.title
+    property alias subTitle: imageWithTitle.subTitle
+    property alias actionButton: actionButtonLoader.sourceComponent
+
+    property alias image: imageWithTitle.image
+    property bool editable: false
+
+    signal editButtonClicked
+    signal close
+
+    implicitHeight: Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32
+    implicitWidth: 480
+
+    radius: 16
+
+    color: Theme.palette.statusModal.backgroundColor
+
+
+    StatusImageWithTitle {
+        id: imageWithTitle
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+
+        editable: statusModalHeader.editable
+        onEditButtonClicked: statusModalHeader.editButtonClicked()
+    }
+
+    Loader {
+        id: actionButtonLoader
+        anchors.right: closeButton.left
+        anchors.rightMargin: 8
+        anchors.top: parent.top
+        anchors.topMargin: 16
+    }
+
+    StatusFlatRoundButton {
+        id: closeButton
+        anchors.right: parent.right
+        anchors.rightMargin: 20
+        anchors.top: parent.top
+        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()
+    }
+
+    Rectangle {
+        anchors.bottom: parent.bottom
+        width: parent.width
+        height: parent.radius
+        color: parent.color
+    }
+}

src/assets/img/icons/pencil.svg

@@ -0,0 +1,4 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.100954 12.5959L0.798362 9.80623C0.830588 9.67733 0.871226 9.55116 0.919852 9.42847C0.981714 9.27239 1.18145 9.24231 1.30017 9.36102L3.63897 11.6998C3.75769 11.8185 3.7276 12.0183 3.57152 12.0801C3.44883 12.1288 3.32266 12.1694 3.19376 12.2016L0.404123 12.899C0.221028 12.9448 0.0551798 12.779 0.100954 12.5959Z" fill="black"/>
+<path d="M4.32312 10.2627C4.71364 10.6532 5.34681 10.6532 5.73733 10.2627L12.2928 3.7072C12.6833 3.31668 12.6833 2.68351 12.2928 2.29299L10.707 0.7072C10.3165 0.316676 9.68332 0.316675 9.29279 0.707199L2.73733 7.26266C2.34681 7.65318 2.34681 8.28635 2.73733 8.67687L4.32312 10.2627Z" fill="black"/>
+</svg>

statusq.qrc

@@ -0,0 +1,248 @@
+<RCC>
+    <qresource prefix="/">
+        <file>src/StatusQ/Core/qmldir</file>
+        <file>src/StatusQ/Core/Theme/ThemePalette.qml</file>
+        <file>src/StatusQ/Core/Theme/StatusLightTheme.qml</file>
+        <file>src/StatusQ/Core/Theme/StatusDarkTheme.qml</file>
+        <file>src/StatusQ/Core/Theme/Theme.qml</file>
+        <file>src/StatusQ/Core/Theme/qmldir</file>
+        <file>src/StatusQ/Core/Theme/StatusColors.qml</file>
+        <file>src/StatusQ/Core/StatusIcon.qml</file>
+        <file>src/StatusQ/Core/StatusImageSettings.qml</file>
+        <file>src/StatusQ/Core/StatusIconSettings.qml</file>
+        <file>src/StatusQ/Core/StatusIconBackgroundSettings.qml</file>
+        <file>src/StatusQ/Core/StatusBaseText.qml</file>
+        <file>src/StatusQ/Popups/qmldir</file>
+        <file>src/StatusQ/Popups/StatusPopupMenu.qml</file>
+        <file>src/StatusQ/Popups/StatusMenuSeparator.qml</file>
+        <file>src/StatusQ/Popups/StatusMenuItem.qml</file>
+        <file>src/StatusQ/Popups/StatusModalDivider.qml</file>
+        <file>src/StatusQ/Components/qmldir</file>
+        <file>src/StatusQ/Components/StatusChatListItem.qml</file>
+        <file>src/StatusQ/Components/StatusChatListAndCategories.qml</file>
+        <file>src/StatusQ/Components/StatusChatInfoToolBar.qml</file>
+        <file>src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml</file>
+        <file>src/StatusQ/Components/StatusNavigationListItem.qml</file>
+        <file>src/StatusQ/Components/StatusNavigationPanelHeadline.qml</file>
+        <file>src/StatusQ/Components/StatusChatToolBar.qml</file>
+        <file>src/StatusQ/Components/StatusRoundedImage.qml</file>
+        <file>src/StatusQ/Components/StatusRoundIcon.qml</file>
+        <file>src/StatusQ/Components/StatusListItem.qml</file>
+        <file>src/StatusQ/Components/StatusListSectionHeadline.qml</file>
+        <file>src/StatusQ/Components/StatusDescriptionListItem.qml</file>
+        <file>src/StatusQ/Components/StatusBadge.qml</file>
+        <file>src/StatusQ/Components/StatusLetterIdenticon.qml</file>
+        <file>src/StatusQ/Components/StatusLoadingIndicator.qml</file>
+        <file>src/StatusQ/Platform/qmldir</file>
+        <file>src/StatusQ/Platform/StatusMacTrafficLights.qml</file>
+        <file>src/StatusQ/Controls/StatusIconTabButton.qml</file>
+        <file>src/StatusQ/Controls/StatusChatInfoButton.qml</file>
+        <file>src/StatusQ/Controls/qmldir</file>
+        <file>src/StatusQ/Controls/StatusSlider.qml</file>
+        <file>src/StatusQ/Controls/StatusRoundButton.qml</file>
+        <file>src/StatusQ/Controls/StatusNavBarTabButton.qml</file>
+        <file>src/StatusQ/Controls/StatusFlatRoundButton.qml</file>
+        <file>src/StatusQ/Controls/StatusRadioButton.qml</file>
+        <file>src/StatusQ/Controls/StatusFlatButton.qml</file>
+        <file>src/StatusQ/Controls/StatusBaseButton.qml</file>
+        <file>src/StatusQ/Controls/StatusSwitch.qml</file>
+        <file>src/StatusQ/Controls/StatusCheckBox.qml</file>
+        <file>src/StatusQ/Controls/StatusButton.qml</file>
+        <file>src/StatusQ/Controls/StatusToolTip.qml</file>
+        <file>src/StatusQ/Layout/StatusAppNavBar.qml</file>
+        <file>src/StatusQ/Layout/qmldir</file>
+        <file>src/StatusQ/Layout/StatusAppTwoPanelLayout.qml</file>
+        <file>src/StatusQ/Layout/StatusAppLayout.qml</file>
+        <file>src/StatusQ/qmldir</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-ThinItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Thin.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-SemiBoldItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-SemiBold.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Regular.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-MediumItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Medium.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-LightItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Light.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Italic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-ExtraLightItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-ExtraLight.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-ExtraBoldItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-ExtraBold.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-BoldItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Bold.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-BlackItalic.otf</file>
+        <file>src/assets/fonts/InterStatus/InterStatus-Black.otf</file>
+        <file>src/assets/fonts/Inter/Inter-V.otf</file>
+        <file>src/assets/fonts/Inter/Inter-ThinItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Thin.otf</file>
+        <file>src/assets/fonts/Inter/Inter-SemiBoldItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-SemiBold.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Regular.otf</file>
+        <file>src/assets/fonts/Inter/Inter-MediumItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Medium.otf</file>
+        <file>src/assets/fonts/Inter/Inter-LightItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Light.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Italic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-ExtraLightItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-ExtraLight.otf</file>
+        <file>src/assets/fonts/Inter/Inter-ExtraBoldItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-ExtraBold.otf</file>
+        <file>src/assets/fonts/Inter/Inter-BoldItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Bold.otf</file>
+        <file>src/assets/fonts/Inter/Inter-BlackItalic.otf</file>
+        <file>src/assets/fonts/Inter/Inter-Black.otf</file>
+        <file>src/assets/img/icons/traffic_lights/minimise_pressed.png</file>
+        <file>src/assets/img/icons/traffic_lights/minimise.png</file>
+        <file>src/assets/img/icons/traffic_lights/maximize_pressed.png</file>
+        <file>src/assets/img/icons/traffic_lights/maximize.png</file>
+        <file>src/assets/img/icons/traffic_lights/close_pressed.png</file>
+        <file>src/assets/img/icons/traffic_lights/close.png</file>
+        <file>src/assets/img/icons/public-chat.svg</file>
+        <file>src/assets/img/icons/muted.svg</file>
+        <file>src/assets/img/icons/channel-white.svg</file>
+        <file>src/assets/img/icons/checkbox.svg</file>
+        <file>src/assets/img/icons/warning.svg</file>
+        <file>src/assets/img/icons/wallet.svg</file>
+        <file>src/assets/img/icons/username.svg</file>
+        <file>src/assets/img/icons/up.svg</file>
+        <file>src/assets/img/icons/union.svg</file>
+        <file>src/assets/img/icons/tributeToTalk.svg</file>
+        <file>src/assets/img/icons/travel-and-places.svg</file>
+        <file>src/assets/img/icons/touch-id.svg</file>
+        <file>src/assets/img/icons/token.svg</file>
+        <file>src/assets/img/icons/token-sale.svg</file>
+        <file>src/assets/img/icons/time.svg</file>
+        <file>src/assets/img/icons/text.svg</file>
+        <file>src/assets/img/icons/teller.svg</file>
+        <file>src/assets/img/icons/tabs.svg</file>
+        <file>src/assets/img/icons/symbols.svg</file>
+        <file>src/assets/img/icons/swap.svg</file>
+        <file>src/assets/img/icons/subscription.svg</file>
+        <file>src/assets/img/icons/strikethrough.svg</file>
+        <file>src/assets/img/icons/stickers.svg</file>
+        <file>src/assets/img/icons/status.svg</file>
+        <file>src/assets/img/icons/status-update.svg</file>
+        <file>src/assets/img/icons/speech.svg</file>
+        <file>src/assets/img/icons/sound.svg</file>
+        <file>src/assets/img/icons/smileys-and-people.svg</file>
+        <file>src/assets/img/icons/show.svg</file>
+        <file>src/assets/img/icons/share-ios.svg</file>
+        <file>src/assets/img/icons/share-android.svg</file>
+        <file>src/assets/img/icons/settings.svg</file>
+        <file>src/assets/img/icons/settings-advanced.svg</file>
+        <file>src/assets/img/icons/send.svg</file>
+        <file>src/assets/img/icons/security.svg</file>
+        <file>src/assets/img/icons/secret.svg</file>
+        <file>src/assets/img/icons/search.svg</file>
+        <file>src/assets/img/icons/rotate.svg</file>
+        <file>src/assets/img/icons/right.svg</file>
+        <file>src/assets/img/icons/reply.svg</file>
+        <file>src/assets/img/icons/remove.svg</file>
+        <file>src/assets/img/icons/remove-contact.svg</file>
+        <file>src/assets/img/icons/remove-circle.svg</file>
+        <file>src/assets/img/icons/refresh.svg</file>
+        <file>src/assets/img/icons/receive.svg</file>
+        <file>src/assets/img/icons/reaction-b.svg</file>
+        <file>src/assets/img/icons/reaction-a.svg</file>
+        <file>src/assets/img/icons/qr.svg</file>
+        <file>src/assets/img/icons/profile.svg</file>
+        <file>src/assets/img/icons/private-chat.svg</file>
+        <file>src/assets/img/icons/previous.svg</file>
+        <file>src/assets/img/icons/play.svg</file>
+        <file>src/assets/img/icons/pin.svg</file>
+        <file>src/assets/img/icons/pause.svg</file>
+        <file>src/assets/img/icons/paste.svg</file>
+        <file>src/assets/img/icons/password.svg</file>
+        <file>src/assets/img/icons/offline.svg</file>
+        <file>src/assets/img/icons/objects.svg</file>
+        <file>src/assets/img/icons/notification.svg</file>
+        <file>src/assets/img/icons/node.svg</file>
+        <file>src/assets/img/icons/node-offline.svg</file>
+        <file>src/assets/img/icons/next.svg</file>
+        <file>src/assets/img/icons/network.svg</file>
+        <file>src/assets/img/icons/more.svg</file>
+        <file>src/assets/img/icons/mobile.svg</file>
+        <file>src/assets/img/icons/mobile-sync.svg</file>
+        <file>src/assets/img/icons/mobile-sync-off.svg</file>
+        <file>src/assets/img/icons/max.svg</file>
+        <file>src/assets/img/icons/logout.svg</file>
+        <file>src/assets/img/icons/location.svg</file>
+        <file>src/assets/img/icons/loading.svg</file>
+        <file>src/assets/img/icons/link.svg</file>
+        <file>src/assets/img/icons/left.svg</file>
+        <file>src/assets/img/icons/ledger.svg</file>
+        <file>src/assets/img/icons/language.svg</file>
+        <file>src/assets/img/icons/keycard.svg</file>
+        <file>src/assets/img/icons/keycard-logo.svg</file>
+        <file>src/assets/img/icons/keyboard.svg</file>
+        <file>src/assets/img/icons/italic.svg</file>
+        <file>src/assets/img/icons/info.svg</file>
+        <file>src/assets/img/icons/in-contacts.svg</file>
+        <file>src/assets/img/icons/image.svg</file>
+        <file>src/assets/img/icons/history.svg</file>
+        <file>src/assets/img/icons/hide.svg</file>
+        <file>src/assets/img/icons/help.svg</file>
+        <file>src/assets/img/icons/group.svg</file>
+        <file>src/assets/img/icons/group-chat.svg</file>
+        <file>src/assets/img/icons/gallery.svg</file>
+        <file>src/assets/img/icons/food-and-drinks.svg</file>
+        <file>src/assets/img/icons/flash.svg</file>
+        <file>src/assets/img/icons/flash-disable.svg</file>
+        <file>src/assets/img/icons/flags.svg</file>
+        <file>src/assets/img/icons/filter.svg</file>
+        <file>src/assets/img/icons/filled-account.svg</file>
+        <file>src/assets/img/icons/file.svg</file>
+        <file>src/assets/img/icons/favourite.svg</file>
+        <file>src/assets/img/icons/face-sad.svg</file>
+        <file>src/assets/img/icons/face-id.svg</file>
+        <file>src/assets/img/icons/external.svg</file>
+        <file>src/assets/img/icons/exchange.svg</file>
+        <file>src/assets/img/icons/emojis.svg</file>
+        <file>src/assets/img/icons/edit.svg</file>
+        <file>src/assets/img/icons/download.svg</file>
+        <file>src/assets/img/icons/down.svg</file>
+        <file>src/assets/img/icons/double-checkmark.svg</file>
+        <file>src/assets/img/icons/desktop.svg</file>
+        <file>src/assets/img/icons/delete.svg</file>
+        <file>src/assets/img/icons/dapp.svg</file>
+        <file>src/assets/img/icons/copy.svg</file>
+        <file>src/assets/img/icons/contact.svg</file>
+        <file>src/assets/img/icons/condition-or.svg</file>
+        <file>src/assets/img/icons/communities.svg</file>
+        <file>src/assets/img/icons/code.svg</file>
+        <file>src/assets/img/icons/close.svg</file>
+        <file>src/assets/img/icons/close-circle.svg</file>
+        <file>src/assets/img/icons/clear.svg</file>
+        <file>src/assets/img/icons/chevron-up.svg</file>
+        <file>src/assets/img/icons/chevron-down.svg</file>
+        <file>src/assets/img/icons/checkmark.svg</file>
+        <file>src/assets/img/icons/checkmark-circle.svg</file>
+        <file>src/assets/img/icons/chatbot.svg</file>
+        <file>src/assets/img/icons/chat.svg</file>
+        <file>src/assets/img/icons/chat-commands.svg</file>
+        <file>src/assets/img/icons/channel.svg</file>
+        <file>src/assets/img/icons/channel-category.svg</file>
+        <file>src/assets/img/icons/cancel.svg</file>
+        <file>src/assets/img/icons/camera.svg</file>
+        <file>src/assets/img/icons/browser.svg</file>
+        <file>src/assets/img/icons/bold.svg</file>
+        <file>src/assets/img/icons/backspace.svg</file>
+        <file>src/assets/img/icons/arrow-right.svg</file>
+        <file>src/assets/img/icons/arrow-down.svg</file>
+        <file>src/assets/img/icons/arbitrator.svg</file>
+        <file>src/assets/img/icons/appearance.svg</file>
+        <file>src/assets/img/icons/animals-and-nature.svg</file>
+        <file>src/assets/img/icons/airdrop.svg</file>
+        <file>src/assets/img/icons/admin.svg</file>
+        <file>src/assets/img/icons/address.svg</file>
+        <file>src/assets/img/icons/add.svg</file>
+        <file>src/assets/img/icons/add-contact.svg</file>
+        <file>src/assets/img/icons/add-circle.svg</file>
+        <file>src/assets/img/icons/activity.svg</file>
+        <file>src/StatusQ/Components/StatusChatListCategoryItem.qml</file>
+        <file>src/StatusQ/Components/StatusChatListCategory.qml</file>
+        <file>src/StatusQ/Controls/StatusChatListCategoryItemButton.qml</file>
+        <file>src/StatusQ/Components/StatusChatList.qml</file>
+        <file>src/StatusQ/Controls/StatusBaseInput.qml</file>
+    </qresource>
+</RCC>