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
20 changed files with 1052 additions and 74 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"
+            }
+        }
+    }
+}
@@ -118,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
@@ -143,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
@@ -252,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>
@@ -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,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()
@@ -18,11 +18,15 @@
        <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>
@@ -233,5 +237,9 @@
        <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