import QtQuick
import qs.config

// The keyboard rune, drawn. Icon themes ship it symbolic only — black on
// transparent, which Qt renders as-is and would be invisible on the dark
// panel — and drawing it makes it recolourable, which is how the on/off state
// is shown.
Item {
    id: root

    property int size: Theme.iconSize
    property color color: Theme.text

    implicitWidth: root.size
    implicitHeight: root.size

    // One key, and the space between two of them. Five keys and four gaps are
    // exactly the width inside the case.
    readonly property real key: Math.max(1, Math.round(root.size * 0.09))
    readonly property real gap: Math.max(1, Math.round(root.size * 0.07))

    Rectangle {
        anchors.centerIn: parent

        width: root.size
        height: Math.round(root.size * 0.72)
        radius: Math.max(2, Math.round(root.size * 0.12))
        color: "transparent"
        border.width: Math.max(1, Math.round(root.size / 16))
        border.color: root.color

        Column {
            anchors.centerIn: parent
            spacing: root.gap

            Repeater {
                model: 2

                Row {
                    spacing: root.gap

                    Repeater {
                        model: 5

                        Rectangle {
                            width: root.key
                            height: root.key
                            color: root.color
                        }
                    }
                }
            }

            // The space bar, short of the full width so the two rows above
            // read as keys rather than as a grid.
            Rectangle {
                anchors.horizontalCenter: parent.horizontalCenter
                width: root.key * 3 + root.gap * 2
                height: root.key
                color: root.color
            }
        }
    }
}