qqc2-desktop-style/org.kde.desktop/RoundButton.qml

0001 /*
0002     SPDX-FileCopyrightText: 2018 Marco Martin <mart@kde.org>
0003     SPDX-FileCopyrightText: 2017 The Qt Company Ltd.
0004
0005     SPDX-License-Identifier: LGPL-3.0-only OR GPL-2.0-or-later
0006 */
0007
0008 import QtQuick 2.6
0009 import QtQuick.Layouts 1.2
0010 import QtQuick.Templates 2.15 as T
0011 import QtQuick.Controls 2.15 as Controls
0012 import org.kde.qqc2desktopstyle.private 1.0 as StylePrivate
0013 import org.kde.kirigami 2.16 as Kirigami
0014
0015 T.RoundButton {
0016     id: controlRoot
0017
0018     palette: Kirigami.Theme.inherit ? Kirigami.Theme.palette : undefined
0019     Kirigami.Theme.colorSet: !flat && (controlRoot.activeFocus || controlRoot.highlighted) ? Kirigami.Theme.Selection : Kirigami.Theme.Button
0020     Kirigami.Theme.inherit: flat && !down && !checked
0021
0022     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
0023                             implicitContentWidth + leftPadding + rightPadding)
0024     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
0025                              implicitContentHeight + topPadding + bottomPadding,
0026                              implicitIndicatorHeight + topPadding + bottomPadding)
0027
0028     baselineOffset: contentItem.y + contentItem.baselineOffset
0029
0030     transform: Translate {
0031         x: controlRoot.down || controlRoot.checked ? 1 : 0
0032         y: controlRoot.down || controlRoot.checked ? 1 : 0
0033     }
0034
0035     icon.width: Kirigami.Units.iconSizes.smallMedium
0036     icon.height: Kirigami.Units.iconSizes.smallMedium
0037
0038     padding: 6 // Matches the button margins of Breeze, Fusion, Oxygen and QCommonStyle
0039     spacing: 4 // Matches the default/hardcoded icon+label spacing of Qt Widgets
0040
0041     contentItem: GridLayout {
0042         rowSpacing: controlRoot.spacing
0043         columnSpacing: controlRoot.spacing
0044         flow: iconContent.visible && labelContent.visible && controlRoot.display === T.AbstractButton.TextUnderIcon ? GridLayout.TopToBottom : GridLayout.LeftToRight
0045         Kirigami.Icon {
0046             id: iconContent
0047             Layout.alignment: {
0048                 if (iconContent.visible && labelContent.visible) {
0049                     if (controlRoot.display === T.AbstractButton.TextBesideIcon) {
0050                         return Qt.AlignRight | Qt.AlignVCenter
0051                     } else if (controlRoot.display === T.AbstractButton.TextUnderIcon) {
0052                         return Qt.AlignHCenter | Qt.AlignBottom
0053                     }
0054                 }
0055                 return Qt.AlignCenter
0056             }
0057             color: controlRoot.icon.color // defaults to Qt::transparent
0058             implicitWidth: controlRoot.icon.width
0059             implicitHeight: controlRoot.icon.height
0060             visible: source.toString().length > 0 && controlRoot.display !== T.AbstractButton.TextOnly
0061             source: controlRoot.icon ? (controlRoot.icon.name || controlRoot.icon.source) : ""
0062         }
0063         Controls.Label {
0064             id: labelContent
0065             Layout.alignment: {
0066                 if (iconContent.visible && labelContent.visible) {
0067                     if (controlRoot.display === T.AbstractButton.TextBesideIcon) {
0068                         return Qt.AlignLeft | Qt.AlignVCenter
0069                     } else if (controlRoot.display === T.AbstractButton.TextUnderIcon) {
0070                         return Qt.AlignHCenter | Qt.AlignTop
0071                     }
0072                 }
0073                 return Qt.AlignCenter
0074             }
0075             text: controlRoot.text
0076             visible: text.length > 0 && controlRoot.display !== T.AbstractButton.IconOnly
0077         }
0078     }
0079     background: Rectangle {
0080         property color borderColor: Qt.tint(controlRoot.palette.buttonText, Qt.rgba(color.r, color.g, color.b, 0.7))
0081
0082         visible: !controlRoot.flat || controlRoot.hovered || controlRoot.activeFocus || controlRoot.highlighted || controlRoot.checked || controlRoot.down
0083
0084         implicitWidth: Kirigami.Units.gridUnit + 6 + 6
0085         implicitHeight: Kirigami.Units.gridUnit + 6 + 6
0086         radius: controlRoot.radius
0087         color: {
0088             if (controlRoot.checked || controlRoot.down) {
0089                 return Qt.tint(Kirigami.Theme.textColor, Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.8))
0090             } else if (controlRoot.flat) {
0091                 return Qt.rgba(
0092                     Kirigami.Theme.backgroundColor.r,
0093                     Kirigami.Theme.backgroundColor.g,
0094                     Kirigami.Theme.backgroundColor.b, 0)
0095             } else {
0096                 return Kirigami.Theme.backgroundColor
0097             }
0098         }
0099
0100         border.color: controlRoot.flat ? Kirigami.Theme.highlightColor : borderColor
0101         border.width: controlRoot.flat && !(controlRoot.hovered || controlRoot.activeFocus || controlRoot.highlighted) ? 0 : 1
0102
0103         Rectangle {
0104             id: gradientRect
0105             radius: controlRoot.radius
0106             anchors.fill: parent
0107             visible: !controlRoot.flat
0108             gradient: Gradient {
0109                 GradientStop { position: 0.0; color: Qt.rgba(1, 1, 1, 0.13) }
0110                 GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.03) }
0111             }
0112         }
0113         Rectangle {
0114             id: shadowRect
0115             z: -1
0116             radius: controlRoot.radius
0117             visible: !controlRoot.down && !controlRoot.checked && !controlRoot.flat
0118             anchors {
0119                 topMargin: 1
0120                 bottomMargin: -1
0121                 fill: parent
0122             }
0123             color: Qt.rgba(0, 0, 0, 0.15)
0124         }
0125     }
0126 }