ui/qml/main.qml

import QtGraphicalEffects 1.0
import QtQuick 2.7
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.11

import "opaque"
import "opaque/fonts"
import "opaque/fonts/Twemoji.js" as T
import "opaque/fonts/MutantStandard.js" as Mutant
import "opaque/theme"

import "overlays"
import "panes"
import "widgets"
import "utils.js" as Utils

ApplicationWindow {
    id: windowItem
    width: 1200
    height: 800
    visible: true
    title: "cwtch" + ""
    font.family: Fonts.applicationFontRegular.name
    font.styleName: "Light"

    readonly property real ratio: height / width

    FontAwesome { // PRETTY BUTTON ICONS
        id: awesome
        resource: "qrc:/qml/opaque/fonts/fontawesome.ttf"
    }

    FontLoader {
        source: "qrc:/qml/opaque/fonts/AdobeBlank.ttf"
    }



    function parse(text, size, isntEditable) { // REPLACE EMOJI WITH <IMG> TAGS
        T.twemoji.base = gcd.assetPath + "twemoji/"
        T.twemoji.ext = ".png"
        T.twemoji.size = "72x72"
        T.twemoji.className = "\" height=\""+size+"\" width=\""+size
        var retText = Utils.htmlEscaped(text)//T.twemoji.parse(Utils.htmlEscaped(text))//
        retText = retText.replace(/\n/g,"<br/>")

        // mutant standard stickers
        if (isntEditable) retText = Mutant.standard.parse(retText)

        return retText
    }

    function restoreEmoji(text) { // REPLACE <IMG> TAGS WITH EMOJI
        var re = RegExp('<img src="' + gcd.assetPath + 'twemoji/72x72/([^"]*?)\.png" width="10" height="10" \/>', 'g')
        var arr
        var newtext = text
        while (arr = re.exec(text)) {
            var pieces = arr[1].split("-")
            var replacement = ""
            for (var i = 0; i < pieces.length; i++) {
                replacement += T.twemoji.convert.fromCodePoint(pieces[i])
            }
            newtext = newtext.replace(arr[0], replacement)
        }
        return newtext
    }

    function ptToPx(pt) {
        return Screen.pixelDensity * 25.4 * pt / 72
    }

    function pxToPt(px) {
        return px * 72 / (Screen.pixelDensity * 25.4)
    }



    StackView {
        id: rootStack

        anchors.fill: parent

        property bool splash: true

        // Splash pane
        initialItem: Rectangle {
            anchors.fill: parent
            color: Theme.backgroundMainColor

            visible: true

            SplashPane {
                id: splashPane
                anchors.fill: parent
                running: true
            }
        }

        replaceEnter: Transition {
            PropertyAnimation{
                property: "opacity"
                from: 0
                to: 1
                duration: 500
            }
        }

        replaceExit: Transition {
            PropertyAnimation{
                property: "opacity"
                from: 1
                to: 0
                duration: 450
            }
        }

        // The actual app
        property Item mainLayout: Rectangle {
            anchors.fill: parent
            color: Theme.backgroundMainColor

            Toolbar {
                id: toolbar

                onLeftMenu: {
                    gcd.requestSettings()
                    parentStack.pane = parentStack.settingsPane
                }

                onBack: { backFn() }

                onRightMenu: {
                    if (gcd.selectedConversation.length == 32) {
                        theStack.pane = theStack.groupProfilePane
                        gcd.requestGroupSettings(gcd.selectedConversation)
                    } else {
                        theStack.pane = theStack.userProfilePane
                        gcd.requestPeerSettings(gcd.selectedConversation)
                    }
                }
            }

            StackLayout {
                id: parentStack
                currentIndex: managementPane

                anchors.right: parent.right
                anchors.left: parent.left
                anchors.bottom: statusbar.top
                anchors.top: toolbar.bottom

                readonly property int managementPane: 0
                readonly property int settingsPane: 1
                readonly property int addEditProfilePane: 2
                readonly property int profilePane: 3
                readonly property int addEditServerPane: 4
                property alias pane: parentStack.currentIndex

                Rectangle { // Profile login/management pane
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    visible: false
                    color: Theme.backgroundMainColor

                    ProfileManagerPane {
                        id: profilesPane
                        anchors.fill: parent
                    }
                }

                Rectangle { // Settings pane
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    color:  Theme.backgroundPaneColor

                    SettingsPane {
                        id: settingsPane
                        anchors.fill: parent
                    }
                }

                Rectangle { // Profile Add / Edit pane
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    color: Theme.backgroundPaneColor


                    ProfileAddEditPane{
                        id: profileAddEditPane
                        anchors.fill: parent
                    }
                }

                RowLayout { // Profile Pane (contact list + overlays)
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    spacing: 0

                    Rectangle { // THE LEFT PANE WITH TOOLS AND CONTACTS
                        color: Theme.backgroundMainColor
                        Layout.fillHeight: true
                        Layout.minimumWidth: Theme.sidePaneMinSize
                        Layout.maximumWidth: theStack.pane == theStack.emptyPane ? parent.width : Theme.sidePaneMinSize
                        Layout.fillWidth: theStack.pane == theStack.emptyPane ? true : false
                        visible: (windowItem.width >= Theme.doublePaneMinSize && !Qt.inputMethod.visible) || theStack.pane == theStack.emptyPane

                        ContactList {
                            anchors.top: parent.top
                            anchors.left: parent.left
                            anchors.bottom: parent.bottom
                            anchors.right: (divider.visible ? divider.left : parent.right)
                            //anchors.topMargin: 10 * gcd.themeScale
                            dualPane: theStack.pane != theStack.emptyPane || theStack.pane == undefined
                        }

                        Rectangle {
                            id: divider
                            width: 2
                            anchors.right: parent.right
                            height: parent.height - (20 * gcd.themeScale)
                            anchors.verticalCenter: parent.verticalCenter
                            visible: theStack.pane != theStack.emptyPane
                            //Layout.fillHeight: true
                            color: Theme.dividerColor
                        }
                    }

                    Rectangle { // THE RIGHT PANE WHERE THE MESSAGES AND STUFF GO
                        color: Theme.backgroundPaneColor
                        Layout.fillWidth: true
                        Layout.fillHeight: true

                        StackLayout {
                            id: theStack
                            anchors.fill: parent
                            currentIndex: 0

                            property alias pane: theStack.currentIndex
                            readonly property int emptyPane: 0
                            readonly property int messagePane: 1
                            readonly property int userProfilePane: 2
                            readonly property int groupProfilePane: 3
                            readonly property int addPeerGroupPane: 4
                            readonly property int serverInfoPane: 5

                            Item { anchors.fill: parent } // empty

                            Rectangle {
                                color: Theme.backgroundMainColor
                                Layout.fillWidth: true
                                Layout.fillHeight: true
                                OverlayPane { // messagePane
                                    anchors.fill: parent
                                    anchors.topMargin: 10 * gcd.themeScale
                                }
                            }


                            PeerSettingsPane { anchors.fill: parent }

                            GroupSettingsPane{ anchors.fill: parent }

                            AddPeerGroupPane {
                                id: addPeerGroupPaneInstance
                                anchors.fill: parent
                            }

                            ServerInfoPane { anchors.fill: parent }

                            onCurrentIndexChanged: {
                                parentStack.updateToolbar()
                                if (currentIndex == emptyPane) {
                                    toolbar.hideTitle()
                                    toolbar.rightMenuVisible = false
                                } else if (currentIndex == addPeerGroupPane) {
                                    //: New Connection
                                    toolbar.setTitle(qsTr('new-connection-pane-title'))
                                    toolbar.rightMenuVisible = false
                                    addPeerGroupPaneInstance.reset()
                                }
                            }

                            onWidthChanged: {toolbar.titleWidth = width}
                        }
                    }
                }

                Rectangle { // Server Add / Edit pane
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    color: Theme.backgroundPaneColor


                    ServerAddEditPane{
                        id: serverAddEditPane
                        anchors.fill: parent
                    }
                }

                focus: true
                Keys.onPressed: {
                    if (event.key == Qt.Key_Back) {
                        event.accepted = true
                        backFn()
                    }
                }

                onCurrentIndexChanged : { updateToolbar(); statusbar.resetHeight() }

                function updateToolbar() {
                    if (rootStack.splash == true) {
                        toolbar.hideTitle()
                        toolbar.rightMenuVisible = false
                        toolbar.visible = false
                    } else {
                        toolbar.visible = true
                        if (currentIndex == managementPane) {
                            toolbar.hideTitle()
                            toolbar.rightMenuVisible = false
                            toolbar.color =  Theme.toolbarMainColor
                            toolbar.leftMenuVisible = true
                            toolbar.backVisible = false
                        } else {
                            toolbar.leftMenuVisible = false
                            toolbar.backVisible = true

                            if (currentIndex == profilePane && theStack.currentIndex == theStack.emptyPane) {
                                toolbar.hideTitle()
                                toolbar.rightMenuVisible = false
                                toolbar.color =  Theme.toolbarMainColor
                            } else {
                                toolbar.color = Theme.toolbarAltColor
                            }
                        }
                    }
                }

                Component.onCompleted: updateToolbar()

                Connections {
                    target: Theme

                    onThemeChanged: {
                        parentStack.updateToolbar()
                    }
                }
            }

            Statusbar {
                id: statusbar
            }
        }
    }



    function backFn() {
        if (parentStack.currentIndex == parentStack.managementPane) {
            androidCwtchActivity.rootHomeButtonHandle()
        } else if (parentStack.currentIndex != parentStack.profilePane) {
            parentStack.currentIndex = parentStack.managementPane
        } else {
            if (theStack.currentIndex == theStack.emptyPane) {
                gcd.selectedProfile = "none"
                gcd.reloadProfileList()
                parentStack.pane = parentStack.managementPane
            } else if (theStack.currentIndex == theStack.userProfilePane || theStack.currentIndex == theStack.groupProfilePane) {
                theStack.currentIndex = theStack.messagePane
            } else {
                theStack.currentIndex = theStack.emptyPane
            }
        }
    }

    PropertyAnimation { id: anmPopup; easing.type: Easing.InQuart; duration: 7000; target: popup; property: "opacity"; to: 0; }

    Rectangle { // THE ERROR MESSAGE POPUP
        id: popup
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 20
        width: lblPopup.width + 30
        height: lblPopup.height + 8 * gcd.themeScale
        color: "#000000"
        opacity: 0.5
        radius: 15
        visible: false


        Label {
            id: lblPopup
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 18 * gcd.themeScale
            color: "#FFFFFF"
        }
    }



    Connections { // POPUPS ARE INVOKED BY GO FUNCS
        target: gcd

        onInvokePopup: function(str) {
            lblPopup.text = str
            popup.opacity = 0.5
            popup.visible = true
            anmPopup.restart()
        }

        onLoaded: function() {
            //parentStack.pane = parentStack.managementPane
            rootStack.replace(rootStack.mainLayout)
            splashPane.running = false
            rootStack.splash = false
            parentStack.updateToolbar()
            statusbar.resetHeight()
        }
    }

    Component.onCompleted: Mutant.standard.imagePath = gcd.assetPath;

    Connections {
        target: Qt.application
        onStateChanged: function() {
            // https://doc.qt.io/qt-5/qt.html#ApplicationState-enum
            if (Qt.application.state == 4) {
                // Active
                gcd.onActivate()
            }
        }
    }
}