qt-creator/share/qtcreator/qmldesigner/toolbar/Main.qml

// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0+ OR GPL-3.0 WITH Qt-GPL-exception-1.0

import QtQuick
import QtQuick.Controls
import StudioControls 1.0 as StudioControls
import StudioTheme 1.0 as StudioTheme
import QtQuickDesignerTheme 1.0

import ToolBar 1.0

Rectangle {
    id: root
    color: StudioTheme.Values.themeToolbarBackground

    readonly property int mediumBreakpoint: 720
    readonly property int largeBreakpoint: 1200
    readonly property bool flyoutEnabled: root.width < root.largeBreakpoint

    ToolBarBackend {
        id: backend
    }

    Item {
        id: topToolbarOtherMode
        anchors.fill: parent
        visible: !backend.isInDesignMode

        ToolbarButton {
            id: homeOther
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 10
            tooltip: backend.isDesignModeEnabled ? qsTr("Switch to Design Mode.")
                                                 : qsTr("Switch to Welcome Mode.")
            buttonIcon: backend.isDesignModeEnabled ? StudioTheme.Constants.designMode_large
                                                    : StudioTheme.Constants.home_large
            onClicked: backend.triggerModeChange()
        }

        Text {
            id: backTo
            visible: backend.isDesignModeEnabled
            anchors.verticalCenter: parent.verticalCenter
            text: qsTr("Return to Design")
            anchors.left: homeOther.right
            anchors.leftMargin: 10
            color: StudioTheme.Values.themeTextColor
        }
    }

    Item {
        id: topToolbar
        anchors.fill: parent
        visible: backend.isInDesignMode

        ToolbarButton {
            id: home
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 10
            buttonIcon: StudioTheme.Constants.home_large
            onClicked: backend.triggerModeChange()
            tooltip: qsTr("Switch to Welcome Mode.")
        }

        ToolbarButton {
            id: runProject
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: home.right
            anchors.leftMargin: 10
            buttonIcon: StudioTheme.Constants.runProjOutline_large
            style: StudioTheme.ToolbarStyle {
                radius: StudioTheme.Values.smallRadius

                icon: StudioTheme.ControlStyle.IconColors {
                    idle: StudioTheme.Values.themeIdleGreen
                    hover: StudioTheme.Values.themeRunningGreen
                    interaction: "#ffffff"
                    disabled: "#636363"
                }

                background: StudioTheme.ControlStyle.BackgroundColors {
                    idle: StudioTheme.Values.themeControlBackground_toolbarIdle
                    hover: StudioTheme.Values.themeControlBackground_topToolbarHover
                    interaction: StudioTheme.Values.themeInteraction
                    disabled: StudioTheme.Values.themeControlBackground_toolbarIdle
                }

                border: StudioTheme.ControlStyle.BorderColors {
                    idle: StudioTheme.Values.themeControlBackground_toolbarIdle
                    hover: StudioTheme.Values.themeControlBackground_toolbarHover
                    interaction: StudioTheme.Values.themeInteraction
                    disabled: StudioTheme.Values.themeControlBackground_toolbarIdle
                }
            }

            onClicked: backend.runProject()
            tooltip: qsTr("Run Project")
        }

        ToolbarButton {
            id: livePreviewButton
            style: StudioTheme.Values.primaryToolbarStyle
            width: 96
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: runProject.right
            anchors.leftMargin: 10
            iconFont: StudioTheme.Constants.font
            buttonIcon: qsTr("Live Preview")

            onClicked: {
                livePreview.trigger()
            }

            MouseArea {
                acceptedButtons: Qt.RightButton
                anchors.fill: parent

                onClicked: {
                    var p = livePreviewButton.mapToGlobal(0, 0)
                    backend.showZoomMenu(p.x, p.y)
                }
            }

            ActionSubscriber {
                id: livePreview
                actionId: "LivePreview"
            }
        }

        StudioControls.TopLevelComboBox {
            id: currentFile
            style: StudioTheme.Values.toolbarStyle
            width: 320 - ((root.width > root.mediumBreakpoint) ? 0 : (root.mediumBreakpoint - root.width))
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: livePreviewButton.right
            anchors.leftMargin: 10
            model: backend.documentModel
            currentIndex: backend.documentIndex

            onActivated: backend.openFileByIndex(index)
        }

        ToolbarButton {
            id: backButton
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: currentFile.right
            anchors.leftMargin: 10
            enabled: backend.canGoBack
            tooltip: qsTr("Go Back")
            buttonIcon: StudioTheme.Constants.previousFile_large
            iconRotation: 0

            onClicked: backend.goBackward()
        }

        ToolbarButton {
            id: forwardButton
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: backButton.right
            anchors.leftMargin: 10
            enabled: backend.canGoForward
            tooltip: qsTr("Go Forward")
            buttonIcon: StudioTheme.Constants.nextFile_large

            onClicked: backend.goForward()
        }

        ToolbarButton {
            id: closeButton
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: forwardButton.right
            anchors.leftMargin: 10
            tooltip: qsTr("Close")
            buttonIcon: StudioTheme.Constants.closeFile_large

            onClicked: backend.closeCurrentDocument()
        }

        CrumbleBar {
            id: flickable
            height: 36
            anchors.left: closeButton.right
            anchors.leftMargin: 10
            anchors.right: createComponent.left
            anchors.rightMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            model: CrumbleBarModel {
                id: crumbleBarModel
            }

            onClicked: crumbleBarModel.onCrumblePathElementClicked(index)
        }

        ToolbarButton {
            id: createComponent
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: enterComponent.left
            anchors.rightMargin: 10
            enabled: moveToComponentBackend.available
            tooltip: moveToComponentBackend.tooltip
            buttonIcon: StudioTheme.Constants.createComponent_large
            visible: !root.flyoutEnabled

            onClicked: moveToComponentBackend.trigger()

            ActionSubscriber {
                id: moveToComponentBackend
                actionId: "MakeComponent"
            }
        }

        ToolbarButton {
            id: enterComponent
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: workspaces.left
            anchors.rightMargin: 10
            enabled: goIntoComponentBackend.available
            tooltip: goIntoComponentBackend.tooltip
            buttonIcon: StudioTheme.Constants.editComponent_large
            visible: !root.flyoutEnabled

            onClicked: goIntoComponentBackend.trigger()

            ActionSubscriber {
                id: goIntoComponentBackend
                actionId: "GoIntoComponent"
            }
        }

        StudioControls.TopLevelComboBox {
            id: workspaces
            style: StudioTheme.Values.toolbarStyle
            width: 210
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: annotations.left
            anchors.rightMargin: 10
            model: backend.workspaces
            currentIndex: workspaces.find(backend.currentWorkspace)
            visible: !root.flyoutEnabled

            onActivated: backend.setCurrentWorkspace(workspaces.currentText)
        }

        ToolbarButton {
            id: annotations
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: shareButton.left
            anchors.rightMargin: 10
            tooltip: qsTr("Edit Annotations")
            buttonIcon: StudioTheme.Constants.annotations_large
            visible: !root.flyoutEnabled

            onClicked: backend.editGlobalAnnoation()
        }

        ToolbarButton {
            id: shareButton
            style: StudioTheme.Values.primaryToolbarStyle
            width: 96
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: moreItems.left
            anchors.rightMargin: 8
            iconFont: StudioTheme.Constants.font
            buttonIcon: qsTr("Share")
            visible: !root.flyoutEnabled

            onClicked: backend.shareApplicationOnline()
        }

        ToolbarButton {
            // this needs a pop-up panel where overflow toolbar content goes when toolbar is not wide enough
            id: moreItems
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 10
            tooltip: qsTr("More Items")
            buttonIcon: StudioTheme.Constants.more_medium
            enabled: root.flyoutEnabled
            checkable: true
            checked: window.visible
            checkedInverted: true
            onClicked: {
                if (window.visible) {
                    window.close()
                } else {
                    var originMapped = moreItems.mapToGlobal(0,0)
                    window.x = originMapped.x + moreItems.width - window.width
                    window.y = originMapped.y + moreItems.height + 7
                    window.show()
                    window.requestActivate()
                }
            }
        }

        Window {
            id: window

            readonly property int padding: 6

            width: row.width + window.padding * 2
            height: row.height + workspacesFlyout.height + 3 * window.padding
                    + (workspacesFlyout.popup.opened ? workspacesFlyout.popup.height : 0)
            visible: false
            flags: Qt.FramelessWindowHint | Qt.Dialog | Qt.NoDropShadowWindowHint
            modality: Qt.NonModal
            transientParent: null
            color: "transparent"

            onActiveFocusItemChanged: {
                if (window.activeFocusItem === null && !moreItems.hovered)
                    window.close()
            }

            Rectangle {
                anchors.fill: parent
                color: StudioTheme.Values.themePopupBackground
                radius: StudioTheme.Values.smallRadius

                Column {
                    id: column
                    anchors.margins: window.padding
                    anchors.fill: parent
                    spacing: window.padding

                    Row {
                        id: row
                        spacing: window.padding
                        anchors.horizontalCenter: parent.horizontalCenter

                        ToolbarButton {
                            style: StudioTheme.Values.statusbarButtonStyle
                            anchors.verticalCenter: parent.verticalCenter
                            enabled: moveToComponentBackend.available
                            tooltip: moveToComponentBackend.tooltip
                            buttonIcon: StudioTheme.Constants.createComponent_large

                            onClicked: moveToComponentBackend.trigger()

                            ActionSubscriber {
                                actionId: "MakeComponent"
                            }
                        }

                        ToolbarButton {
                            style: StudioTheme.Values.statusbarButtonStyle
                            anchors.verticalCenter: parent.verticalCenter
                            enabled: goIntoComponentBackend.available
                            tooltip: goIntoComponentBackend.tooltip
                            buttonIcon: StudioTheme.Constants.editComponent_large

                            onClicked: goIntoComponentBackend.trigger()

                            ActionSubscriber {
                                actionId: "GoIntoComponent"
                            }
                        }

                        ToolbarButton {
                            style: StudioTheme.Values.statusbarButtonStyle
                            anchors.verticalCenter: parent.verticalCenter
                            tooltip: qsTr("Edit Annotations")
                            buttonIcon: StudioTheme.Constants.annotations_large

                            onClicked: backend.editGlobalAnnoation()
                        }

                        ToolbarButton {
                            anchors.verticalCenter: parent.verticalCenter
                            style: StudioTheme.Values.primaryToolbarStyle
                            width: shareButton.width
                            iconFont: StudioTheme.Constants.font
                            buttonIcon: qsTr("Share")

                            onClicked: backend.shareApplicationOnline()
                        }
                    }

                    StudioControls.ComboBox {
                        id: workspacesFlyout
                        anchors.horizontalCenter: parent.horizontalCenter
                        actionIndicatorVisible: false
                        style: StudioTheme.Values.statusbarControlStyle
                        width: row.width
                        maximumPopupHeight: 400
                        model: backend.workspaces
                        currentIndex: workspacesFlyout.find(backend.currentWorkspace)

                        onCompressedActivated: backend.setCurrentWorkspace(workspacesFlyout.currentText)
                    }
                }
            }
        }
    }
}