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