WIP SAVEPOINT

feat(sandbox): introduce first part of profile view for reference app
feat(Components): introduce StatusListSectionHeadline
2021-06-18 13:51:50 +02:00 · 2021-06-18 13:51:33 +02:00 · 2021-06-18 12:12:04 +02:00 · 2021-06-18 12:11:50 +02:00 · 2021-06-16 11:27:31 +02:00 · 2021-06-16 11:24:18 +02:00
30 changed files with 1797 additions and 84 deletions
@@ -43,8 +43,7 @@ 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:
@@ -1,6 +1,8 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14

+import Sandbox 0.1
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
@@ -141,6 +143,11 @@ Rectangle {
                    badge.border.width: 2

                    tooltip.text: "Profile"
+
+                    checked: appView.sourceComponent == statusAppProfileSettingsView
+                    onClicked: {
+                        appView.sourceComponent = statusAppProfileSettingsView
+                    }
                }
            ]
        }
@@ -160,23 +167,42 @@ Rectangle {
            leftPanel: Item {
                anchors.fill: parent

-                StatusChatList {
+                StatusNavigationPanelHeadline {
+                    id: headline
                    anchors.top: parent.top
-                    anchors.topMargin: 64
+                    anchors.topMargin: 16
                    anchors.horizontalCenter: parent.horizontalCenter
-
-                    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)
-                            }
-                        }
-                    }
+                    text: "Chat"
                }
+
+                StatusChatList {
+                    width: parent.width
+                    anchors.top: headline.bottom
+                    anchors.topMargin: 16
+                    anchors.bottom: parent.bottom
+                    chatListItems.model: demoChatListItems
+                    selectedChatId: "0"
+                    onChatItemSelected: selectedChatId = id
+                }
+
+                /* StatusChatListAndCategories { */
+                /*     anchors.top: headline.bottom */
+                /*     anchors.topMargin: 16 */
+                /*     anchors.bottom: parent.bottom */
+                /*     width: parent.width */
+
+                /*     chatList.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) */
+                /*             } */
+                /*         } */
+                /*     } */
+                /* } */
            }

            rightPanel: Item {
@@ -223,7 +249,6 @@ Rectangle {
                        }
                    }
                }
-
            }
        }
    }
@@ -236,40 +261,54 @@ Rectangle {
            leftPanel: Item {
                anchors.fill: parent

-                Column {
+                StatusChatInfoToolBar {
+                    id: statusChatInfoToolBar
                    anchors.top: parent.top
-                    anchors.topMargin: 64
+
+                    chatInfoButton.title: "Cryptokitties"        
+                    chatInfoButton.subTitle: "128 Members"
+                    chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                    chatInfoButton.icon.color: Theme.palette.miscColor6
                    anchors.horizontalCenter: parent.horizontalCenter
-                    spacing: 4

-                    StatusChatList {
-                        id: statusChatList
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        chatListItems.model: demoCommunityChatListItems
-                    }
+                    popupMenu: StatusPopupMenu {

-                    StatusChatListCategory {
-                        name: "Public"
+                        StatusMenuItem {
+                            text: "Create channel"
+                            icon.name: "channel"
+                        }

-                        chatList.chatListItems.model: demoCommunityChatListItems
-                        chatList.selectedChatId: "0"
-                        chatList.onChatItemSelected: chatList.selectedChatId = id
-                        popupMenu: categoryPopupCmp
-                    }
+                        StatusMenuItem {
+                            text: "Create category"
+                            icon.name: "channel-category"
+                        }

-                    StatusChatListCategory {
-                        name: "Development"
+                        StatusMenuSeparator {}
+
+                        StatusMenuItem {
+                            text: "Invite people"
+                            icon.name: "share-ios"
+                        }

-                        chatList.chatListItems.model: demoCommunityChatListItems
-                        chatList.onChatItemSelected: chatList.selectedChatId = id
-                        popupMenu: categoryPopupCmp
                    }
                }

-                Component {
-                    id: categoryPopupCmp
+                StatusChatListAndCategories {
+                    anchors.top: statusChatInfoToolBar.bottom
+                    anchors.topMargin: 8
+                    anchors.bottom: parent.bottom
+                    width: parent.width
+
+                    chatList.model: demoCommunityChatListItems
+                    categoryList.model: demoCommunityCategoryItems
+
+                    showCategoryActionButtons: true
+                    onChatItemSelected: selectedChatId = id
+
+                    categoryPopupMenu: StatusPopupMenu {
+
+                        property string categoryId

-                    StatusPopupMenu {
                        StatusMenuItem {
                            text: "Mute Category"
                            icon.name: "notification"
@@ -293,8 +332,29 @@ Rectangle {
                            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 +371,78 @@ 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
+            }
+        }
+    }
+
    ListModel {
        id: demoChatListItems
        ListElement {
@@ -360,6 +492,194 @@ Rectangle {
            iconColor: "Orange"
            unreadMessagesCount: 0
        }
+        ListElement {
+            chatId: "0"
+            name: "#status"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "blue"
+        }
+        ListElement {
+            chatId: "1"
+            name: "#status-desktop"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            hasUnreadMessages: true
+            iconColor: "red"
+            unreadMessagesCount: 1
+        }
+        ListElement {
+            chatId: "2"
+            name: "Amazing Funny Squirrel"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: false
+            hasUnreadMessages: false
+            iconColor: "green"
+            identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "3"
+            name: "Black Ops"
+            chatType: StatusChatListItem.Type.GroupChat
+            muted: false
+            hasUnreadMessages: false
+            iconColor: "purple"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "4"
+            name: "Spectacular Growing Otter"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: true
+            hasUnreadMessages: false
+            iconColor: "Orange"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "0"
+            name: "#status"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "blue"
+        }
+        ListElement {
+            chatId: "1"
+            name: "#status-desktop"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            hasUnreadMessages: true
+            iconColor: "red"
+            unreadMessagesCount: 1
+        }
+        ListElement {
+            chatId: "2"
+            name: "Amazing Funny Squirrel"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: false
+            hasUnreadMessages: false
+            iconColor: "green"
+            identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "3"
+            name: "Black Ops"
+            chatType: StatusChatListItem.Type.GroupChat
+            muted: false
+            hasUnreadMessages: false
+            iconColor: "purple"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "4"
+            name: "Spectacular Growing Otter"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: true
+            hasUnreadMessages: false
+            iconColor: "Orange"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "0"
+            name: "#status"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "blue"
+        }
+        ListElement {
+            chatId: "1"
+            name: "#status-desktop"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            hasUnreadMessages: true
+            iconColor: "red"
+            unreadMessagesCount: 1
+        }
+        ListElement {
+            chatId: "2"
+            name: "Amazing Funny Squirrel"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: false
+            hasUnreadMessages: false
+            iconColor: "green"
+            identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "3"
+            name: "Black Ops"
+            chatType: StatusChatListItem.Type.GroupChat
+            muted: false
+            hasUnreadMessages: false
+            iconColor: "purple"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "4"
+            name: "Spectacular Growing Otter"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: true
+            hasUnreadMessages: false
+            iconColor: "Orange"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "0"
+            name: "#status"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "blue"
+        }
+        ListElement {
+            chatId: "1"
+            name: "#status-desktop"
+            chatType: StatusChatListItem.Type.PublicChat
+            muted: false
+            hasUnreadMessages: true
+            iconColor: "red"
+            unreadMessagesCount: 1
+        }
+        ListElement {
+            chatId: "2"
+            name: "Amazing Funny Squirrel"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: false
+            hasUnreadMessages: false
+            iconColor: "green"
+            identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "3"
+            name: "Black Ops"
+            chatType: StatusChatListItem.Type.GroupChat
+            muted: false
+            hasUnreadMessages: false
+            iconColor: "purple"
+            unreadMessagesCount: 0
+        }
+        ListElement {
+            chatId: "4"
+            name: "Spectacular Growing Otter"
+            chatType: StatusChatListItem.Type.OneToOneChat
+            muted: true
+            hasUnreadMessages: false
+            iconColor: "Orange"
+            unreadMessagesCount: 0
+        }
    }

    ListModel {
@@ -383,6 +703,7 @@ Rectangle {
            hasMention: false
            unreadMessagesCount: 0
            iconColor: "orange"
+            categoryId: "public"
        }
        ListElement {
            chatId: "2"
@@ -393,6 +714,329 @@ Rectangle {
            hasMention: false
            unreadMessagesCount: 0
            iconColor: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "3"
+            name: "language-design"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "dev"
+        }
+        ListElement {
+            chatId: "0"
+            name: "general"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+        }
+        ListElement {
+            chatId: "1"
+            name: "random"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "2"
+            name: "watercooler"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "3"
+            name: "language-design"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "dev"
+        }
+        ListElement {
+            chatId: "0"
+            name: "general"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+        }
+        ListElement {
+            chatId: "1"
+            name: "random"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "2"
+            name: "watercooler"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "3"
+            name: "language-design"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "dev"
+        }
+        ListElement {
+            chatId: "0"
+            name: "general"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+        }
+        ListElement {
+            chatId: "1"
+            name: "random"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "2"
+            name: "watercooler"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "3"
+            name: "language-design"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "dev"
+        }
+        ListElement {
+            chatId: "0"
+            name: "general"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+        }
+        ListElement {
+            chatId: "1"
+            name: "random"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "2"
+            name: "watercooler"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "3"
+            name: "language-design"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "dev"
+        }
+        ListElement {
+            chatId: "0"
+            name: "general"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+        }
+        ListElement {
+            chatId: "1"
+            name: "random"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "2"
+            name: "watercooler"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "orange"
+            categoryId: "public"
+        }
+        ListElement {
+            chatId: "3"
+            name: "language-design"
+            chatType: StatusChatListItem.Type.CommunityChat
+            muted: false
+            hasUnreadMessages: false
+            hasMention: false
+            unreadMessagesCount: 0
+            iconColor: "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"
        }
    }
 }
@@ -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 {
@@ -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"
+            }
+        }
+    }
+}
@@ -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>
@@ -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
+    }
+}
@@ -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
@@ -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" "$@"
@@ -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
@@ -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>
@@ -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,18 +143,23 @@ 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
@@ -250,6 +257,11 @@ StatusWindow {
        StatusPopupMenuPage {}
    }

+    Component {
+        id: chatInfoToolBarComponent
+        StatusChatInfoToolBarPage {}
+    }
+
    Component {
        id: demoAppCmp

@@ -5,5 +5,11 @@
        <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>
    </qresource>
 </RCC>
@@ -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
+    }
+}
@@ -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) {
@@ -0,0 +1,4 @@
+make clean
+qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
+make
+
@@ -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()
+{
+
+}
@@ -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"
+                }
+            }
+        }
+    }
+
+}
@@ -1,38 +1,52 @@
 import QtQuick 2.13
+import QtQuick.Controls 2.14

 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1

-Column {
+ScrollView {
    id: statusChatList
+    contentHeight: items.height + 8
+    clip: true

-    spacing: 4
-
+    property string categoryId: ""
    property string selectedChatId: ""
    property alias chatListItems: statusChatListItems

+    property var filterFn
+
    signal chatItemSelected(string id)
    signal chatItemUnmuted(string id)

-    Repeater {
-        id: statusChatListItems
-        delegate: StatusChatListItem {
-            chatId: model.chatId
-            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
+    Column {
+        id: items
+        spacing: 4
+        Repeater {
+            id: statusChatListItems
+            delegate: StatusChatListItem {
+                chatId: model.chatId
+                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

-            icon.color: model.iconColor || ""
-            image.source: model.identicon || ""
+                icon.color: model.iconColor || ""
+                image.source: model.identicon || ""

-            onClicked: statusChatList.chatItemSelected(model.chatId)
-            onUnmute: statusChatList.chatItemUnmuted(model.chatId)
+                onClicked: statusChatList.chatItemSelected(model.chatId)
+                onUnmute: statusChatList.chatItemUnmuted(model.chatId)
+                visible: {
+                    if (!!statusChatList.filterFn) {
+                        return statusChatList.filterFn(model, statusChatList.categoryId)
+                    }
+                    return true
+                }
+            }
        }
    }
 }
@@ -0,0 +1,88 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+ScrollView {
+    id: statusChatListAndCategories
+
+    clip: true
+    contentHeight: chatListsAndCategories.height + 8
+
+    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 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: parent.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
+                }
+            }
+        }
+    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusChatListAndCategories.popupMenu
+    }
+}
@@ -12,6 +12,7 @@ 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
@@ -30,6 +31,8 @@ Column {
        title: statusChatListCategory.name
        opened: statusChatListCategory.opened

+        showMenuButton: !!statusChatListCategory.popupMenu
+
        onClicked: {
            if (mouse.button === Qt.RightButton) {
                highlighted = true
@@ -50,15 +53,23 @@ Column {

    StatusChatList {
        id: statusChatList
-
        anchors.horizontalCenter: parent.horizontalCenter
        visible: statusChatListCategory.opened
+        categoryId: statusChatListCategory.categoryId
+        filterFn: function (model) {
+            return !!model.categoryId && model.categoryId == statusChatList.categoryId
+        }
    }

    Loader {
        id: popupMenuSlot
        active: !!statusChatListCategory.popupMenu
        onLoaded: {
+            popupMenuSlot.item.openHandler = function () {
+                if (popupMenuSlot.item.hasOwnProperty('categoryId')) {
+                    popupMenuSlot.item.categoryId = statusChatListCategory.categoryId
+                }
+            }
            popupMenuSlot.item.closeHandler = function () {
                statusChatListCategoryItem.highlighted = false
                statusChatListCategoryItem.menuButton.highlighted = false
@@ -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"
        },
@@ -26,11 +26,15 @@ Rectangle {
            color: Theme.palette.primaryColor3
        }
    }
-    property StatusImageSettings image: StatusImageSettings {}
+    property StatusImageSettings image: StatusImageSettings {
+        width: 40
+        height: 40
+    }
    property string label: ""

    property alias sensor: sensor
    property alias statusListItemTitle: statusListItemTitle
+    property alias statusListItemSubTitle: statusListItemSubTitle
    property alias statusListItemComponentsSlot: statusListItemComponentsSlot

    property list<Item> components
@@ -47,7 +51,7 @@ Rectangle {
        id: sensor

        anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor 
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        hoverEnabled: true

@@ -76,6 +80,8 @@ Rectangle {
            id: statusRoundedImage
            StatusRoundedImage {
                image.source: statusListItem.image.source
+                image.height: statusListItem.image.height
+                image.width: statusListItem.image.width
            }
        }

@@ -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
    }
 }
-
@@ -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
+}
+
@@ -1,16 +1,20 @@
 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
 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
@@ -35,7 +35,7 @@ Rectangle {
    }

    radius: 8
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusChatInfoButton.backgroundColor
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"

    MouseArea {
        id: sensor
@@ -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
@@ -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()
@@ -0,0 +1,245 @@
+<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/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/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>
+    </qresource>
+</RCC>
Author	SHA1	Message	Date
Pascal Precht	583f60faaa	WIP SAVEPOINT	2021-06-18 13:51:50 +02:00
Pascal Precht	4588d5976d	feat(sandbox): introduce first part of profile view for reference app	2021-06-18 13:51:33 +02:00
Pascal Precht	507703af18	feat(Components): introduce `StatusListSectionHeadline` Usage: ```qml import StatusQ.Components 0.1 StatusListSectionHeadline { text: "Settings" } ``` Closes #164	2021-06-18 12:12:04 +02:00
Pascal Precht	40617cd710	feat(Components): introduce `StatusNavigationPanelHeadline` Component to render navigation panel headlines. Usage: ```qml import StatusQ.Components 0.1 StatusNavigationPanelHeadline { text: "Profile" } ``` Closes #162	2021-06-18 12:11:50 +02:00
Pascal Precht	05fc97ca2f	fix(StatusChatListCategoryItem): don't render menubutton with no popup Fixes #153	2021-06-16 11:27:31 +02:00
Pascal Precht	7bca27455f	feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133	2021-06-16 11:24:18 +02:00
Pascal Precht	4577551873	feat(StatusChatListCategory): apply chat list filter and expose category id in popup menu This uses the newly introduced `filterFn` in `StatusChatList` to hide chat items that don't belong to a given category. It also optionally exposes the `categoryId` on the provided popup menu, so it has access to it inside menu item triggers.	2021-06-16 11:12:50 +02:00
Pascal Precht	cb07813444	feat(StatusChatList): introduce `filterFn` and `categoryId` Chat lists can belong to a category inside of communities, so they should hold a property `categoryId` that represents that. In addition, this commit introduces a `filterFn` function that can be used to conditionally show/hide chat list items. Closes #154	2021-06-16 11:12:26 +02:00
Pascal Precht	2427fa2dee	feat(StatusPopupMenu): introduce `openHandler` Similar to `closeHandler`, StatusPopupMenu can now have a customized `openHandler` to run custom logic on open.	2021-06-16 11:11:54 +02:00
Pascal Precht	9982c3df52	feat(StatusChatListCategory): introduce flag to show/hide buttons This commit introduces a `showActionButtons` flag that defaults to `false` and can be used to render the action buttons provided in the chat list category. This is useful for cases where only admin users should have the right to create channels inside categories or mutate a category's state. Settings `showActionButtons: true` will then render the buttons. Closes #150	2021-06-16 11:11:34 +02:00
Pascal Precht	4f6ff27f90	chore: introduce build script for sandbox app Closes #148	2021-06-16 11:11:04 +02:00
B.Melnik	1a7c213395	fix: make release build work I add several files in .qrc file for running app in release mode (CONFIG+=release)	2021-06-16 11:02:52 +02:00
Pascal Precht	454e73a838	feat(Components): introduce `StatusChatInfoToolBar` component Usage: ```qml import StatusQ.Components 0.1 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" } } } ``` Closes #141	2021-06-16 11:01:22 +02:00
Pascal Precht	3480609f7a	Revert "Revert "feat: can be used on tablets (#146 )"" This reverts commit `59b40c0713`.	2021-06-15 11:16:22 +02:00
Pascal Precht	e5e96af538	fix(StatusListItem): various fixes w.r.t. sensor, icon size etc This also exposes `statusListItemSubTitle` for more control over it's appearance, if needed.	2021-06-15 10:48:32 +02:00
Pascal Precht	7c16a9bd3d	feat(StatusRoundButton): add `highlighted` and `icon.rotation` props These are needed for some UIs where the icon state may change based on the user's interaction.	2021-06-15 10:47:53 +02:00
Pascal Precht	59b40c0713	Revert "feat: can be used on tablets (#146 )" This reverts commit `63be014479`.	2021-06-14 16:41:28 +02:00
Boris MelnikandB.Melnik	63be014479	feat: can be used on tablets (#146 ) Co-authored-by: B.Melnik <b.melnik@restream.rt.ru>	2021-06-14 08:26:16 -04:00