feat: can be used on tablets

README.md

@@ -43,7 +43,8 @@ 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
-$ ./scripts/build
+$ qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
+$ make
 ```
 
 Once that is done, the sandbox can be started with the generated executable:

sandbox/DemoApp.qml

@@ -1,8 +1,6 @@
 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
@@ -143,11 +141,6 @@ Rectangle {
                     badge.border.width: 2
 
                     tooltip.text: "Profile"
-
-                    checked: appView.sourceComponent == statusAppProfileSettingsView
-                    onClicked: {
-                        appView.sourceComponent = statusAppProfileSettingsView
-                    }
                 }
             ]
         }
@@ -167,42 +160,23 @@ Rectangle {
             leftPanel: Item {
                 anchors.fill: parent
 
-                StatusNavigationPanelHeadline {
-                    id: headline
-                    anchors.top: parent.top
-                    anchors.topMargin: 16
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    text: "Chat"
-                }
-
                 StatusChatList {
-                    width: parent.width
-                    anchors.top: headline.bottom
-                    anchors.topMargin: 16
-                    anchors.bottom: parent.bottom
-                    chatListItems.model: demoChatListItems
+                    anchors.top: parent.top
+                    anchors.topMargin: 64
+                    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)
+                            }
+                        }
+                    }
                 }
-
-                /* 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 {
@@ -249,6 +223,7 @@ Rectangle {
                         }
                     }
                 }
+
             }
         }
     }
@@ -261,54 +236,40 @@ Rectangle {
             leftPanel: Item {
                 anchors.fill: parent
 
-                StatusChatInfoToolBar {
-                    id: statusChatInfoToolBar
+                Column {
                     anchors.top: parent.top
-
-                    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.topMargin: 64
                     anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: 4
 
-                    popupMenu: StatusPopupMenu {
+                    StatusChatList {
+                        id: statusChatList
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        chatListItems.model: demoCommunityChatListItems
+                    }
 
-                        StatusMenuItem {
-                            text: "Create channel"
-                            icon.name: "channel"
-                        }
+                    StatusChatListCategory {
+                        name: "Public"
 
-                        StatusMenuItem {
-                            text: "Create category"
-                            icon.name: "channel-category"
-                        }
+                        chatList.chatListItems.model: demoCommunityChatListItems
+                        chatList.selectedChatId: "0"
+                        chatList.onChatItemSelected: chatList.selectedChatId = id
+                        popupMenu: categoryPopupCmp
+                    }
 
-                        StatusMenuSeparator {}
-
-                        StatusMenuItem {
-                            text: "Invite people"
-                            icon.name: "share-ios"
-                        }
+                    StatusChatListCategory {
+                        name: "Development"
 
+                        chatList.chatListItems.model: demoCommunityChatListItems
+                        chatList.onChatItemSelected: chatList.selectedChatId = id
+                        popupMenu: 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
+                Component {
+                    id: categoryPopupCmp
 
+                    StatusPopupMenu {
                         StatusMenuItem {
                             text: "Mute Category"
                             icon.name: "notification"
@@ -332,29 +293,8 @@ 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
 
@@ -371,78 +311,6 @@ 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 {
@@ -492,194 +360,6 @@ 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 {
@@ -703,7 +383,6 @@ Rectangle {
             hasMention: false
             unreadMessagesCount: 0
             iconColor: "orange"
-            categoryId: "public"
         }
         ListElement {
             chatId: "2"
@@ -714,329 +393,6 @@ 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"
         }
     }
 }

sandbox/ListItems.qml

@@ -40,18 +40,11 @@ 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 {

sandbox/NavigationHeader.qml

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

sandbox/StatusChatInfoToolBarPage.qml

@@ -1,40 +0,0 @@
-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/main.qml

@@ -118,21 +118,21 @@ StatusWindow {
                         anchors.horizontalCenter: parent.horizontalCenter
                         spacing: 0
 
-                        StatusListSectionHeadline { text: "StatusQ.Core" }
+                        NavigationHeader { text: "StatusQ.Core" }
                         StatusNavigationListItem { 
                             title: "Icons" 
                             selected: page.sourceComponent == iconsComponent
                             onClicked: page.sourceComponent = iconsComponent
                         }
 
-                        StatusListSectionHeadline { text: "StatusQ.Layout" }
+                        NavigationHeader { text: "StatusQ.Layout" }
                         StatusNavigationListItem { 
                             title: "Layouts" 
                             selected: page.sourceComponent == layoutComponent
                             onClicked: page.sourceComponent = layoutComponent
                         }
 
-                        StatusListSectionHeadline { text: "StatusQ.Controls" }
+                        NavigationHeader { text: "StatusQ.Controls" }
                         StatusNavigationListItem { 
                             title: "Buttons" 
                             selected: page.sourceComponent == buttonsComponent
@@ -143,23 +143,18 @@ StatusWindow {
                             selected: page.sourceComponent == controlsComponent
                             onClicked: page.sourceComponent = controlsComponent
                         }
-                        StatusListSectionHeadline { text: "StatusQ.Components" }
+                        NavigationHeader { 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
                         }
-                        StatusListSectionHeadline { text: "StatusQ.Popup" }
+                        NavigationHeader { text: "StatusQ.Popup" }
                         StatusNavigationListItem { 
                             title: "StatusPopupMenu"
                             selected: page.sourceComponent == popupMenuComponent
@@ -257,11 +252,6 @@ StatusWindow {
         StatusPopupMenuPage {}
     }
 
-    Component {
-        id: chatInfoToolBarComponent
-        StatusChatInfoToolBarPage {}
-    }
-
     Component {
         id: demoAppCmp
 

sandbox/qml.qrc

@@ -5,11 +5,5 @@
         <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>

sandbox/scripts/build

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

src/StatusQ/Components/StatusChatInfoToolBar.qml

@@ -1,105 +0,0 @@
-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

@@ -1,52 +1,38 @@
 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
 
-ScrollView {
+Column {
     id: statusChatList
-    contentHeight: items.height + 8
-    clip: true
 
-    property string categoryId: ""
+    spacing: 4
+
     property string selectedChatId: ""
     property alias chatListItems: statusChatListItems
 
-    property var filterFn
-
     signal chatItemSelected(string id)
     signal chatItemUnmuted(string id)
 
-    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
+    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)
-                visible: {
-                    if (!!statusChatList.filterFn) {
-                        return statusChatList.filterFn(model, statusChatList.categoryId)
-                    }
-                    return true
-                }
-            }
+            onClicked: statusChatList.chatItemSelected(model.chatId)
+            onUnmute: statusChatList.chatItemUnmuted(model.chatId)
         }
     }
 }

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -1,88 +0,0 @@
-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
-    }
-}

src/StatusQ/Components/StatusChatListCategory.qml

@@ -12,7 +12,6 @@ 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
@@ -31,8 +30,6 @@ Column {
         title: statusChatListCategory.name
         opened: statusChatListCategory.opened
 
-        showMenuButton: !!statusChatListCategory.popupMenu
-
         onClicked: {
             if (mouse.button === Qt.RightButton) {
                 highlighted = true
@@ -53,23 +50,15 @@ 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

src/StatusQ/Components/StatusChatListCategoryItem.qml

@@ -16,9 +16,6 @@ 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
@@ -42,9 +39,7 @@ StatusListItem {
             id: addButton
             icon.name: "add"
             icon.width: 20
-            visible: statusChatListCategoryItem.showAddButton && 
-                (statusChatListCategoryItem.highlighted ||
-                statusChatListCategoryItem.sensor.containsMouse)
+            visible: statusChatListCategoryItem.sensor.containsMouse || statusChatListCategoryItem.highlighted
             onClicked: statusChatListCategoryItem.addButtonClicked(mouse)
             tooltip.text: "Add channel inside category"
         },
@@ -52,9 +47,7 @@ StatusListItem {
             id: menuButton
             icon.name: "more"
             icon.width: 21
-            visible: statusChatListCategoryItem.showMenuButton && 
-                (statusChatListCategoryItem.highlighted ||
-                statusChatListCategoryItem.sensor.containsMouse)
+            visible: statusChatListCategoryItem.sensor.containsMouse || statusChatListCategoryItem.highlighted
             onClicked: statusChatListCategoryItem.menuButtonClicked(mouse)
             tooltip.text: "More"
         },

src/StatusQ/Components/StatusListItem.qml

@@ -26,15 +26,11 @@ Rectangle {
             color: Theme.palette.primaryColor3
         }
     }
-    property StatusImageSettings image: StatusImageSettings {
-        width: 40
-        height: 40
-    }
+    property StatusImageSettings image: StatusImageSettings {}
     property string label: ""
 
     property alias sensor: sensor
     property alias statusListItemTitle: statusListItemTitle
-    property alias statusListItemSubTitle: statusListItemSubTitle
     property alias statusListItemComponentsSlot: statusListItemComponentsSlot
 
     property list<Item> components
@@ -51,7 +47,7 @@ Rectangle {
         id: sensor
 
         anchors.fill: parent
-        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+        cursorShape: Qt.PointingHandCursor 
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
 
@@ -80,8 +76,6 @@ Rectangle {
             id: statusRoundedImage
             StatusRoundedImage {
                 image.source: statusListItem.image.source
-                image.height: statusListItem.image.height
-                image.width: statusListItem.image.width
             }
         }
 

src/StatusQ/Components/StatusNavigationPanelHeadline.qml

@@ -1,11 +0,0 @@
-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/qmldir

@@ -1,20 +1,16 @@
 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

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -35,7 +35,7 @@ Rectangle {
     }
 
     radius: 8
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusChatInfoButton.backgroundColor
 
     MouseArea {
         id: sensor

src/StatusQ/Controls/StatusRoundButton.qml

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

src/StatusQ/Popups/StatusPopupMenu.qml

@@ -16,15 +16,8 @@ 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()

statusq.qrc

@@ -18,15 +18,11 @@
         <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>
@@ -237,9 +233,5 @@
         <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>