status-qml/sandbox/DemoApp.qml

import QtQuick 2.14
import QtQuick.Controls 2.14

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Layout 0.1
import StatusQ.Popups 0.1
import StatusQ.Platform 0.1

import "demoapp"

Rectangle {
    id: demoApp
    height: 602
    width: 1002
    border.width: 1
    border.color: Theme.palette.baseColor2

    property string titleStyle: "osx"

    QtObject {
        id: appSectionType
        readonly property int chat: 0
        readonly property int community: 1
        readonly property int wallet: 2
        readonly property int browser: 3
        readonly property int nodeManagement: 4
        readonly property int profileSettings: 5
        readonly property int apiDocumentation: 100
        readonly property int demoApp: 101
    }

    function setActiveItem(sectionId) {
        for (var i = 0; i < models.demoAppSectionsModel.count; i++) {
            let item = models.demoAppSectionsModel.get(i)
            if (item.sectionId !== sectionId)
            {
                models.demoAppSectionsModel.setProperty(i, "active", false)
                continue
            }

            models.demoAppSectionsModel.setProperty(i, "active", true);
        }
    }

    StatusMacTrafficLights {
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: 13
        z: statusAppLayout.z + 1
        visible: titleStyle === "osx"
    }

    StatusWindowsTitleBar {
        id: windowsTitle
        anchors.top: parent.top
        width: parent.width
        z: statusAppLayout.z + 1
        visible: titleStyle === "windows"
    }

    StatusAppLayout {
        id: statusAppLayout
        anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
        anchors.left: demoApp.left
        anchors.topMargin: demoApp.border.width
        anchors.leftMargin: demoApp.border.width

        height: demoApp.height - demoApp.border.width * 2
        width: demoApp.width - demoApp.border.width * 2

        appNavBar: StatusAppNavBar {

            id: navBar

            communityTypeRole: "sectionType"
            communityTypeValue: appSectionType.community
            sectionModel: models.demoAppSectionsModel

            property bool communityAdded: false

            onAboutToUpdateFilteredRegularModel: {
                communityAdded = false
            }

            filterRegularItem: function(item) {
                if(item.sectionType === appSectionType.community)
                    if(communityAdded)
                        return false
                    else
                        communityAdded = true

                return true
            }

            filterCommunityItem: function(item) {
                return item.sectionType === appSectionType.community
            }

            regularNavBarButton: StatusNavBarTabButton {
                anchors.horizontalCenter: parent.horizontalCenter
                name: model.icon.length > 0? "" : model.name
                icon.name: model.icon
                icon.source: model.image
                tooltip.text: model.name
                autoExclusive: true
                checked: model.active
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                badge.border.width: 2
                onClicked: {
                    if(model.sectionType === appSectionType.chat)
                    {
                        appView.sourceComponent = statusAppChatView
                        demoApp.setActiveItem(model.sectionId)
                    }
                    else if(model.sectionType === appSectionType.profileSettings)
                    {
                        appView.sourceComponent = statusAppProfileSettingsView
                        demoApp.setActiveItem(model.sectionId)
                    }
                }
            }

            communityNavBarButton: StatusNavBarTabButton {
                anchors.horizontalCenter: parent.horizontalCenter
                name: model.icon.length > 0? "" : model.name
                icon.name: model.icon
                icon.source: model.image
                tooltip.text: model.name
                autoExclusive: true
                checked: model.active
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                badge.border.width: 2
                onClicked: {
                    if(model.sectionType === appSectionType.community)
                    {
                        appView.sourceComponent = statusAppCommunityView
                        demoApp.setActiveItem(model.sectionId)
                    }
                }

                popupMenu: StatusPopupMenu {

                    StatusMenuItem {
                        text: qsTr("Invite People")
                        icon.name: "share-ios"
                    }

                    StatusMenuItem {
                        text: qsTr("View Community")
                        icon.name: "group"
                    }

                    StatusMenuItem {
                        text: qsTr("Edit Community")
                        icon.name: "edit"
                        enabled: false
                    }

                    StatusMenuSeparator {}

                    StatusMenuItem {
                        text: qsTr("Leave Community")
                        icon.name: "arrow-right"
                        icon.width: 14
                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
                }
            }
        }

        appView: Loader {
            id: appView
            anchors.fill: parent
            sourceComponent: statusAppChatView
        }
    }

    Component {
        id: statusAppChatView

        StatusAppTwoPanelLayout {

            leftPanel: Item {
                anchors.fill: parent

                StatusNavigationPanelHeadline {
                    id: headline
                    anchors.top: parent.top
                    anchors.topMargin: 16
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: "Chat"
                }

                Item {
                    id: searchInputWrapper
                    anchors.top: headline.bottom
                    anchors.topMargin: 16
                    width: parent.width
                    height: searchInput.height

                    StatusBaseInput {
                        id: searchInput

                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        anchors.right: actionButton.left
                        anchors.leftMargin: 16
                        anchors.rightMargin: 16

                        height: 36
                        topPadding: 8
                        bottomPadding: 0
                        placeholderText: "Search"
                        icon.name: "search"
                    }

                    StatusRoundButton {
                        id: actionButton
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
                        anchors.rightMargin: 8
                        width: 32
                        height: 32

                        type: StatusRoundButton.Type.Secondary
                        icon.name: "add"
                        state: "default"

                        onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
                        states: [
                            State {
                                name: "default"
                                PropertyChanges {
                                    target: actionButton
                                    icon.rotation: 0
                                    highlighted: false
                                }
                            },
                            State {
                                name: "pressed"
                                PropertyChanges {
                                    target: actionButton
                                    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
                                }
                            }
                        ]

                        StatusPopupMenu {
                            id: chatContextMenu

                            onOpened: {
                                actionButton.state = "pressed"
                            }

                            onClosed: {
                                actionButton.state = "default"
                            }

                            StatusMenuItem {
                                text: "Start new chat"
                                icon.name: "private-chat"
                            }

                            StatusMenuItem {
                                text: "Start group chat"
                                icon.name: "group-chat"
                            }

                            StatusMenuItem {
                                text: "Join public chat"
                                icon.name: "public-chat"
                            }

                            StatusMenuItem {
                                text: "Communities"
                                icon.name: "communities"
                            }
                        }
                    }
                }

                Column {
                    anchors.top: searchInputWrapper.bottom
                    anchors.topMargin: 16
                    width: parent.width
                    spacing: 8

                    StatusContactRequestsIndicatorListItem {
                        anchors.horizontalCenter: parent.horizontalCenter
                        title: "Contact requests"
                        requestsCount: 3
                        sensor.onClicked: demoContactRequestsModal.open()
                    }

                    StatusChatList {
                        anchors.horizontalCenter: parent.horizontalCenter

                        model: models.demoChatListItems
                        onChatItemUnmuted: {
                            for (var i = 0; i < models.demoChatListItems.count; i++) {
                                let item = models.demoChatListItems.get(i);
                                if (item.chatId === id) {
                                    models.demoChatListItems.setProperty(i, "muted", false)
                                }
                            }
                        }

                        popupMenu: StatusPopupMenu {

                            property string chatId

                            openHandler: function (id) {
                                chatId = id
                            }

                            StatusMenuItem {
                                text: "View Profile"
                                icon.name: "group-chat"
                            }

                            StatusMenuSeparator {}

                            StatusMenuItem {
                                text: "Mute chat"
                                icon.name: "notification"
                            }

                            StatusMenuItem {
                                text: "Mark as Read"
                                icon.name: "checkmark-circle"
                            }

                            StatusMenuItem {
                                text: "Clear history"
                                icon.name: "close-circle"
                            }

                            StatusMenuSeparator {}

                            StatusMenuItem {
                                text: "Delete chat"
                                icon.name: "delete"
                                type: StatusMenuItem.Type.Danger
                            }
                        }
                    }
                }
            }

            rightPanel: Item {
                anchors.fill: parent

                StatusChatToolBar {
                    anchors.top: parent.top
                    width: parent.width

                    chatInfoButton.title: "Amazing Funny Squirrel"
                    chatInfoButton.subTitle: "Contact"
                    chatInfoButton.icon.color: Theme.palette.miscColor7
                    chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
                    chatInfoButton.pinnedMessagesCount: 1

                    searchButton.visible: false
                    membersButton.visible: false
                    notificationCount: 1

                    onNotificationButtonClicked: notificationCount = 0

                    popupMenu: StatusPopupMenu {
                        id: contextMenu

                        StatusMenuItem {
                            text: "Mute Chat"
                            icon.name: "notification"
                        }
                        StatusMenuItem {
                            text: "Mark as Read"
                            icon.name: "checkmark-circle"
                        }
                        StatusMenuItem {
                            text: "Clear History"
                            icon.name: "close-circle"
                        }

                        StatusMenuSeparator {}

                        StatusMenuItem {
                            text: "Leave Chat"
                            icon.name: "arrow-right"
                            icon.width: 14
                            iconRotation: 180
                            type: StatusMenuItem.Type.Danger
                        }
                    }
                }
            }
        }
    }

    Component {
        id: statusAppCommunityView

        StatusAppThreePanelLayout {
            id: root

            handle: Rectangle {
                implicitWidth: 5
                color: SplitHandle.pressed ? Theme.palette.baseColor2
                                           : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
            }
            leftPanel: Item {
                id: leftPanel

                StatusChatInfoToolBar {
                    id: statusChatInfoToolBar

                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter

                    chatInfoButton.title: "CryptoKitties"
                    chatInfoButton.subTitle: "128 Members"
                    chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
                    chatInfoButton.icon.color: Theme.palette.miscColor6
                    chatInfoButton.onClicked: demoCommunityDetailModal.open()

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

                    }
                }

                ScrollView {
                    id: scrollView

                    anchors.top: statusChatInfoToolBar.bottom
                    anchors.topMargin: 8
                    anchors.bottom: parent.bottom
                    width: leftPanel.width

                    contentHeight: communityCategories.height
                    clip: true

                    StatusChatListAndCategories {
                        id: communityCategories
                        width: leftPanel.width
                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64

                        draggableItems: true
                        draggableCategories: false
                        model: models.demoCommunityChatListItems
                        showCategoryActionButtons: true

                        categoryPopupMenu: StatusPopupMenu {

                            property string categoryId

                            openHandler: function (id) {
                                categoryId = id
                            }

                            StatusMenuItem {
                                text: "Mute Category"
                                icon.name: "notification"
                            }

                            StatusMenuItem {
                                text: "Mark as Read"
                                icon.name: "checkmark-circle"
                            }

                            StatusMenuItem {
                                text: "Edit Category"
                                icon.name: "edit"
                            }

                            StatusMenuSeparator {}

                            StatusMenuItem {
                                text: "Delete Category"
                                icon.name: "delete"
                                type: StatusMenuItem.Type.Danger
                            }
                        }

                        chatListPopupMenu: StatusPopupMenu {

                            property string chatId

                            StatusMenuItem {
                                text: "Mute chat"
                                icon.name: "notification"
                            }

                            StatusMenuItem {
                                text: "Mark as Read"
                                icon.name: "checkmark-circle"
                            }

                            StatusMenuItem {
                                text: "Clear history"
                                icon.name: "close-circle"
                            }

                            StatusMenuSeparator {}

                            StatusMenuItem {
                                text: "Delete chat"
                                icon.name: "delete"
                                type: StatusMenuItem.Type.Danger
                            }
                        }

                        popupMenu: StatusPopupMenu {
                            StatusMenuItem {
                                text: "Create channel"
                                icon.name: "channel"
                            }

                            StatusMenuItem {
                                text: "Create category"
                                icon.name: "channel-category"
                            }

                            StatusMenuSeparator {}

                            StatusMenuItem {
                                text: "Invite people"
                                icon.name: "share-ios"
                            }
                        }
                    }
                }
            }

            centerPanel: Item {
                StatusChatToolBar {
                    id: statusChatToolBar
                    anchors.top: parent.top
                    width: parent.width

                    chatInfoButton.title: "general"
                    chatInfoButton.subTitle: "Community Chat"
                    chatInfoButton.icon.color: Theme.palette.miscColor6
                    chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
                    onSearchButtonClicked: {
                        searchButton.highlighted = !searchButton.highlighted;
                        searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
                                                       "",
                                                       demoCommunityDetailModal.header.image.source);
                        searchPopup.open();
                    }
                    membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
                    onMembersButtonClicked: {
                        root.showRightPanel = !root.showRightPanel;
                    }
                }

                StatusSearchPopup {
                    id: searchPopup
                    searchOptionsPopupMenu: searchPopupMenu
                    onAboutToHide: {
                        if (searchPopupMenu.visible) {
                            searchPopupMenu.close();
                        }
                        //clear menu
                        for (var i = 2; i < searchPopupMenu.count; i++) {
                            searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
                        }
                    }
                    onClosed: {
                        statusChatToolBar.searchButton.highlighted = false
                        searchPopupMenu.dismiss();
                    }
                    onSearchTextChanged: {
                        if (searchPopup.searchText !== "") {
                            searchPopup.loading = true;
                            searchModelSimTimer.start();
                        } else {
                            searchPopup.searchResults = [];
                            searchModelSimTimer.stop();
                        }
                    }
                    Timer {
                        id: searchModelSimTimer
                        interval: 500
                        onTriggered: {
                            if (searchPopup.searchText.startsWith("c")) {
                                searchPopup.searchResults = models.searchResultsA;
                            } else {
                                searchPopup.searchResults = models.searchResultsB;
                            }
                            searchPopup.loading = false;
                        }
                    }
                }
                StatusSearchLocationMenu {
                    id: searchPopupMenu
                    searchPopup: searchPopup
                    locationModel: models.optionsModel
                }
            }

            rightPanel: Item {
                id: rightPanel
                StatusBaseText {
                    id: titleText
                    anchors.top: parent.top
                    anchors.topMargin:16
                    anchors.left: parent.left
                    anchors.leftMargin: 16
                    opacity: (rightPanel.width > 50) ? 1.0 : 0.0
                    visible: (opacity > 0.1)
                    font.pixelSize: 15
                    text: qsTr("Members")
                }

                ListView {
                    anchors.top: titleText.bottom
                    anchors.topMargin: 16
                    anchors.left: parent.left
                    anchors.leftMargin: 8
                    anchors.right: parent.right
                    anchors.rightMargin: 8
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 16
                    boundsBehavior: Flickable.StopAtBounds
                    model: ["John", "Nick", "Maria", "Mike"]
                    delegate: Row {
                        width: parent.width
                        height: 30
                        spacing: 8
                        Rectangle {
                            width: 24
                            height: 24
                            radius: width/2
                            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
                        }
                        StatusBaseText {
                            height: parent.height
                            horizontalAlignment: Text.AlignHCenter
                            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
                            visible: (opacity > 0.1)
                            font.pixelSize: 15
                            color: Theme.palette.directColor1
                            text: modelData
                        }
                    }
                }
            }
        }
    }

    Component {
        id: statusAppProfileSettingsView
        StatusAppProfileSettingsView { }
    }

    DemoContactRequestsModal {
        id: demoContactRequestsModal
        anchors.centerIn: parent
    }

    DemoCommunityDetailModal {
        id: demoCommunityDetailModal
    }
}