status-desktop/ui/StatusQ/sandbox/controls/Buttons.qml

import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Dialogs 1.3

import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1

Column {
    spacing: 10
    Grid {
        id: buttonGridWidth
        columns: 3
        columnSpacing: 38
        rowSpacing: 10

        horizontalItemAlignment: Grid.AlignHCenter

        // Primary
        StatusButton {
            text: "Button"
            type: StatusBaseButton.Type.Primary

            StatusToolTip {
                visible: parent.hovered
                text: "Look I'm a tooltip on a button!"
            }
            onClicked: console.warn("Primary button clicked")
            onPressed: console.warn("Primary button pressed")
        }

        StatusButton {
            text: "Button"
            enabled: false
            type: StatusBaseButton.Type.Primary

            StatusToolTip {
                visible: parent.hovered
                text: "Tooltip on a disabled button, should not be visible!"
            }
            onClicked: console.warn("Primary disabled button clicked, this should not happen !!!")
        }

        StatusButton {
            text: "Button"
            loading: true
            type: StatusBaseButton.Type.Primary

            StatusToolTip {
                visible: parent.hovered
                text: "Look I'm a tooltip on a loading button!"
            }
            onClicked: console.warn("Primary loading button clicked, this should not happen !!!")
        }

        // Large
        StatusButton {
            text: "Button"
        }

        StatusButton {
            text: "Button"
            enabled: false
        }

        StatusButton {
            text: "Button"
            loading: true
        }

        // Large + Icon
        StatusButton {
            text: "Button"
            icon.name: "info"
        }

        StatusButton {
            text: "Button"
            enabled: false
            icon.name: "info"
        }

        StatusButton {
            text: "Button"
            loading: true
            icon.name: "info"
        }

        // Danger
        StatusButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
        }

        StatusButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
            enabled: false
        }

        StatusButton {
            text: "Button"
            loading: true
            type: StatusBaseButton.Type.Danger
        }

        // Flat
        StatusFlatButton {
            text: "Button"
        }

        StatusFlatButton {
            text: "Button"
            enabled: false
        }

        StatusFlatButton {
            text: "Button"
            loading: true
        }

        // Flat + Danger
        StatusFlatButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
        }

        StatusFlatButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
            enabled: false
        }

        StatusFlatButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
            loading: true
        }

        // Small
        StatusButton {
            text: "Button"
            size: StatusBaseButton.Size.Small
        }

        StatusButton {
            text: "Button"
            enabled: false
            size: StatusBaseButton.Size.Small
        }

        StatusButton {
            text: "Button"
            size: StatusBaseButton.Size.Small
            loading: true
        }

        // Small + danger
        StatusButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
            size: StatusBaseButton.Size.Small
        }

        StatusButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
            size: StatusBaseButton.Size.Small
            enabled: false
        }

        StatusButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
            size: StatusBaseButton.Size.Small
            loading: true
        }

        // icon only
        StatusButton {
            icon.name: "info"
        }

        StatusButton {
            icon.name: "info"
            enabled: false
        }

        StatusButton {
            icon.name: "info"
            loading: true
        }

        // icon only + small
        StatusButton {
            size: StatusBaseButton.Size.Small
            icon.name: "info"
        }

        StatusButton {
            size: StatusBaseButton.Size.Small
            icon.name: "info"
            enabled: false
        }

        StatusButton {
            size: StatusBaseButton.Size.Small
            icon.name: "info"
            loading: true
        }

        // Flat + small
        StatusFlatButton {
            text: "Button"
            size: StatusBaseButton.Size.Small
        }

        StatusFlatButton {
            text: "Button"
            enabled: false
            size: StatusBaseButton.Size.Small
        }

        StatusFlatButton {
            text: "Button"
            enabled: false
            size: StatusBaseButton.Size.Small
            loading: true
        }

        // Icon buttons

        // blue

        StatusRoundButton {
            icon.name: "info"
        }

        StatusRoundButton {
            icon.name: "info"
            enabled: false
        }

        StatusRoundButton {
            icon.name: "info"
            loading: true
        }

        // black

        StatusRoundButton {
            type: StatusRoundButton.Type.Secondary
            icon.name: "info"
        }

        StatusRoundButton {
            type: StatusRoundButton.Type.Secondary
            icon.name: "info"
            enabled: false
        }

        StatusRoundButton {
            type: StatusRoundButton.Type.Secondary
            icon.name: "info"
            loading: true
        }

        // transparent

        StatusRoundButton {
            type: StatusRoundButton.Type.Tertiary
            icon.name: "info"
        }

        StatusRoundButton {
            type: StatusRoundButton.Type.Tertiary
            icon.name: "info"
            enabled: false
        }

        StatusRoundButton {
            type: StatusRoundButton.Type.Tertiary
            icon.name: "info"
            loading: true
        }

        // Rounded blue

        StatusFlatRoundButton {
            width: 44
            height: 44

            icon.name: "info"
        }

        StatusFlatRoundButton {
            width: 44
            height: 44
            icon.name: "info"
            enabled: false
        }

        StatusFlatRoundButton {
            width: 44
            height: 44
            icon.name: "info"
            loading: true
        }

        // Rounded white

        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Secondary
            width: 44
            height: 44

            icon.name: "info"
        }

        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Secondary
            width: 44
            height: 44
            icon.name: "info"
            enabled: false
        }

        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Secondary
            width: 44
            height: 44
            icon.name: "info"
            loading: true
        }

        StatusFlatButton {
            icon.name: "info"
            text: "Button"
            size: StatusBaseButton.Size.Small
        }
        StatusFlatButton {
            icon.name: "info"
            text: "Button"
            enabled: false
            size: StatusBaseButton.Size.Small
        }

        StatusFlatButton {
            icon.name: "info"
            text: "Button"
            loading: true
            size: StatusBaseButton.Size.Small
        }

        // Tertiary
        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Tertiary
            icon.name: "gif"
        }

        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Tertiary
            icon.name: "gif"
            enabled: false
        }

        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Tertiary
            icon.name: "gif"
            loading: true
        }

        // No background Tertiary
        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Tertiary
            color: "transparent"
            icon.name: "gif"
        }

        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Tertiary
            icon.name: "gif"
            color: "transparent"
            enabled: false
        }

        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Tertiary
            icon.name: "gif"
            color: "transparent"
            loading: true
        }

        // Quartenery
        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Quaternary
            icon.name: "gif"
        }

        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Quaternary
            icon.name: "gif"
            enabled: false
        }

        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Quaternary
            icon.name: "gif"
            loading: true
        }
    }

    StatusPickerButton {
        width: buttonGridWidth.width
        bgColor: colorDialog.colorSelected ? colorDialog.color : Theme.palette.baseColor2
        contentColor: colorDialog.colorSelected ? Theme.palette.indirectColor1 : Theme.palette.baseColor1
        text: colorDialog.colorSelected ? colorDialog.color.toString().toUpperCase() : "Pick a color"
        onClicked: {
            colorDialog.open();
        }
    }

    StatusColorDialog {
        id: colorDialog
        anchors.centerIn: parent
        property bool colorSelected: false
        onAccepted: {
            colorSelected = true;
        }
    }

    // Button with emoji
    StatusButton {
        text: "Button with Emoji"
        asset.emoji: "🖼️️"
    }

    StatusButton {
        width: parent.width
        text: "wide"
    }

    RowLayout {
        spacing: 20

        StatusIconTextButton {
            Layout.alignment: Qt.AlignVCenter
            spacing: 0
            statusIcon: "next"
            icon.width: 24
            icon.height: 24
            iconRotation: 180
            text: "Previous page"
            font.pixelSize: 15
            onClicked: testText.visible = !testText.visible
        }
        StatusBaseText {
            id: testText
            Layout.alignment: Qt.AlignVCenter
            text: "Click and hide!"
            font.pixelSize: 15
        }
    }
}