src/controls.6/CSDControls.qml

0001 import QtQuick
0002 import QtQuick.Controls
0003 import QtQuick.Window
0004
0005 import org.mauikit.controls 1.3 as Maui
0006
0007 /**
0008  * @inherit QtQuick.Controls.Control
0009  * @since org.mauikit.controls
0010  * @brief CSD Window control buttons.
0011  *
0012  * @warning This is an implementation template for the CSD window control buttons, for a complete and final implementation please use the WindowControls component.
0013  * @see WindowControlsLinux
0014  *
0015  * @section notes Notes
0016  *
0017  * @subsection customize Customize
0018  * The window control buttons can be customized, by creating a new theme of button assets, or by picking one from the existing ones.
0019  *
0020  * Creating a new theme is simple. There is three important aspects:
0021  * - The config file where the relative paths to the image assets is described.
0022  *
0023  * The following snippet is an example of a config file for the Nitrux CSD theme.
0024  * The file name must be named 'config.conf'
0025  * @code
0026  * [Close]
0027  * Normal=close.svg
0028  * Hover=close-hover.svg
0029  * Pressed=close-pressed.svg
0030  * Backdrop=close-backdrop.svg
0031  *
0032  * [Maximize]
0033  * Normal=maximize.svg
0034  * Hover=maximize-hover.svg
0035  * Pressed=maximize-pressed.svg
0036  * Backdrop=maximize-backdrop.svg
0037  *
0038  * [Restore]
0039  * Normal=restore.svg
0040  * Hover=restore-hover.svg
0041  * Pressed=restore-pressed.svg
0042  * Backdrop=restore-backdrop.svg
0043  *
0044  * [Minimize]
0045  * Normal=minimize.svg
0046  * Hover=minimize-hover.svg
0047  * Pressed=minimize-pressed.svg
0048  * Backdrop=minimize-backdrop.svg
0049  *
0050  * [FullScreen]
0051  * Normal=fullscreen.svg
0052  *
0053  * [Decoration]
0054  * BorderRadius=8
0055  * Source=CSD.qml
0056  * @endcode
0057  *
0058  * - The second part is the QML source file, named CSD.qml by convection. If the theme you imagine is not that different from the regular layout, the following snippet of code will do it.
0059  *
0060  * The code consists of a horizontal row layout, where we feed the buttons model and set the component delegate to draw the button.
0061  * @see CSDButton
0062  * @code
0063  * Control
0064  * {
0065  *    id: control
0066  *
0067  *    implicitHeight: _layout.implicitHeight + topPadding + bottomPadding
0068  *    implicitWidth: _layout.implicitWidth + leftPadding + rightPadding
0069  *
0070  *    spacing: Maui.Style.space.small
0071  *    padding: Maui.Style.defaultPadding
0072  *
0073  *    background: null
0074  *
0075  *    contentItem: Row
0076  *    {
0077  *        id: _layout
0078  *        spacing: control.spacing
0079  *
0080  *        ToolSeparator
0081  *        {
0082  *            height: 8
0083  *            anchors.verticalCenter: parent.verticalCenter
0084  *        }
0085  *
0086  *        Repeater
0087  *        {
0088  *            model: buttonsModel
0089  *            delegate: pluginButton
0090  *        }
0091  *    }
0092  *
0093  *    Component
0094  *    {
0095  *        id: pluginButton
0096  *
0097  *        AbstractButton
0098  *        {
0099  *            id: _button
0100  *
0101  *            visible: modelData === "A" ? canMaximize : true
0102  *
0103  *            hoverEnabled: true
0104  *
0105  *            implicitWidth: 22
0106  *            implicitHeight: 22
0107  *
0108  *            focusPolicy: Qt.NoFocus
0109  *
0110  *            Maui.CSDButton
0111  *            {
0112  *                id: button
0113  *                style: "Nitrux"
0114  *                type: mapType(modelData)
0115  *                isHovered: _button.hovered
0116  *                isPressed: _button.pressed
0117  *                isFocused:  isActiveWindow
0118  *                isMaximized: maximized
0119  *            }
0120  *
0121  *            contentItem:  Maui.Icon
0122  *                {
0123  *                    smooth: true
0124  *
0125  *                    source: button.source
0126  *
0127  *                    color: Maui.Theme.textColor
0128  *                    Behavior on color
0129  *                    {
0130  *                        Maui.ColorTransition{}
0131  *                    }
0132  *                }
0133  *
0134  *
0135  *            onClicked:
0136  *            {
0137  *                console.log("NITRUX CSD BUTTON CLICKED", button.type)
0138  *                buttonClicked(button.type)
0139  *            }
0140  *        }
0141  *    }
0142  * }
0143  * @endcode
0144  *
0145  * - And the last part are the actual image assets for the buttons.
0146  *
0147  */
0148 Loader
0149 {
0150     id: control
0151     asynchronous: true
0152
0153     property bool maximized : Window.window.visibility === Window.Maximized
0154     property bool isActiveWindow : Window.window.active
0155     readonly property bool canMaximize: !(Window.window.isDialog)
0156     readonly property bool canMinimize : !(Window.window.isDialog)
0157     readonly property var buttonsModel : Maui.App.controls.rightWindowControls
0158
0159
0160     /**
0161      * A window control button has been clicked. This signal is public and can be mapped to any arbitrary value. Be carefull.
0162      */
0163     signal buttonClicked(var type)
0164     source: Maui.App.controls.source
0165 }