Warning, /frameworks/kirigami/src/controls/NavigationTabButton.qml is written in an unsupported language. File is not indexed.
0001 /* SPDX-FileCopyrightText: 2021 Devin Lin <espidev@gmail.com>
0002 * SPDX-FileCopyrightText: 2021 Noah Davis <noahadvs@gmail.com>
0003 * SPDX-License-Identifier: LGPL-2.0-or-later
0004 */
0005
0006 import QtQuick 2.15
0007 import QtQuick.Layouts 1.15
0008 import QtQuick.Controls 2.15 as QQC2
0009 import QtQuick.Templates 2.15 as T
0010 import org.kde.kirigami 2.19 as Kirigami
0011
0012 /**
0013 * @brief Navigation buttons to be used for the NavigationTabBar component.
0014 *
0015 * It supplies its own padding, and also supports using
0016 * <a href="https://doc.qt.io/qt-5/qml-qtquick-controls2-abstractbutton.html#display-prop">AbstractButton.display</a>
0017 * to be used in column lists.
0018 *
0019 * Alternative way to the "actions" property on NavigationTabBar, as it can be used
0020 * with a QtQuick.Repeater to generate buttons from models.
0021 *
0022 * Example usage:
0023 * @code{.qml}
0024 * Kirigami.NavigationTabBar {
0025 * id: navTabBar
0026 * Kirigami.NavigationTabButton {
0027 * visible: true
0028 * icon.name: "document-save"
0029 * text: `test ${tabIndex + 1}`
0030 * QQC2.ButtonGroup.group: navTabBar.tabGroup
0031 * }
0032 * Kirigami.NavigationTabButton {
0033 * visible: false
0034 * icon.name: "document-send"
0035 * text: `test ${tabIndex + 1}`
0036 * QQC2.ButtonGroup.group: navTabBar.tabGroup
0037 * }
0038 * actions: [
0039 * Kirigami.Action {
0040 * visible: true
0041 * icon.name: "edit-copy"
0042 * icon.height: 32
0043 * icon.width: 32
0044 * text: `test 3`
0045 * checked: true
0046 * },
0047 * Kirigami.Action {
0048 * visible: true
0049 * icon.name: "edit-cut"
0050 * text: `test 4`
0051 * checkable: true
0052 * },
0053 * Kirigami.Action {
0054 * visible: false
0055 * icon.name: "edit-paste"
0056 * text: `test 5`
0057 * },
0058 * Kirigami.Action {
0059 * visible: true
0060 * icon.source: "../logo.png"
0061 * text: `test 6`
0062 * checkable: true
0063 * }
0064 * ]
0065 * }
0066 * @endcode
0067 * @since KDE Frameworks 5.87
0068 * @since org.kde.kirigami 2.19
0069 * @inherit QtQuick.Templates.TabButton
0070 */
0071 T.TabButton {
0072 id: control
0073
0074 /**
0075 * @brief This property specifies the index of this tab within the tab bar.
0076 */
0077 readonly property int tabIndex: {
0078 let tabIdx = 0
0079 for (let i = 0; i < parent.children.length; ++i) {
0080 if (parent.children[i] === this) {
0081 return tabIdx
0082 }
0083 // Checking for AbstractButtons because any AbstractButton can act as a tab
0084 if (parent.children[i] instanceof T.AbstractButton) {
0085 ++tabIdx
0086 }
0087 }
0088 return -1
0089 }
0090
0091 /**
0092 * @brief This property sets whether the icon colors should be masked with a single color.
0093 *
0094 * default: ``true``
0095 *
0096 * @since KDE Frameworks 5.96
0097 */
0098 property bool recolorIcon: true
0099
0100 property color foregroundColor: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.85)
0101 property color highlightForegroundColor: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.85)
0102 property color highlightBarColor: Kirigami.Theme.highlightColor
0103
0104 property color pressedColor: Qt.rgba(highlightBarColor.r, highlightBarColor.g, highlightBarColor.b, 0.3)
0105 property color hoverSelectColor: Qt.rgba(highlightBarColor.r, highlightBarColor.g, highlightBarColor.b, 0.2)
0106 property color checkedBorderColor: Qt.rgba(highlightBarColor.r, highlightBarColor.g, highlightBarColor.b, 0.7)
0107 property color pressedBorderColor: Qt.rgba(highlightBarColor.r, highlightBarColor.g, highlightBarColor.b, 0.9)
0108
0109 implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
0110 implicitContentWidth + leftPadding + rightPadding)
0111 implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
0112 implicitContentHeight + topPadding + bottomPadding)
0113
0114 display: T.AbstractButton.TextUnderIcon
0115
0116 Kirigami.Theme.colorSet: Kirigami.Theme.Window
0117 Kirigami.Theme.inherit: false
0118
0119 // not using the hover handler built into control, since it seems to misbehave and
0120 // permanently report hovered after a touch event
0121 HoverHandler {
0122 id: hoverHandler
0123 }
0124
0125 padding: Kirigami.Units.smallSpacing
0126 spacing: Kirigami.Units.smallSpacing
0127
0128 icon.height: control.display === T.AbstractButton.TextBesideIcon ? Kirigami.Units.iconSizes.small : Kirigami.Units.iconSizes.smallMedium
0129 icon.width: control.display === T.AbstractButton.TextBesideIcon ? Kirigami.Units.iconSizes.small : Kirigami.Units.iconSizes.smallMedium
0130 icon.color: control.checked ? control.highlightForegroundColor : control.foregroundColor
0131
0132 background: Rectangle {
0133 Kirigami.Theme.colorSet: Kirigami.Theme.Button
0134 Kirigami.Theme.inherit: false
0135
0136 implicitHeight: (control.display === T.AbstractButton.TextBesideIcon) ? 0 : (Kirigami.Units.gridUnit * 3 + Kirigami.Units.smallSpacing * 2)
0137
0138 color: "transparent"
0139
0140 Rectangle {
0141 width: parent.width - Kirigami.Units.largeSpacing
0142 height: parent.height - Kirigami.Units.largeSpacing
0143 anchors.centerIn: parent
0144
0145 radius: Kirigami.Units.smallSpacing
0146 color: control.down ? pressedColor : (control.checked || hoverHandler.hovered ? hoverSelectColor : "transparent")
0147
0148 border.color: control.checked ? checkedBorderColor : (control.down ? pressedBorderColor : color)
0149 border.width: 1
0150
0151 Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
0152 Behavior on border.color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
0153 }
0154 }
0155
0156 contentItem: GridLayout {
0157 id: gridLayout
0158 columnSpacing: 0
0159 rowSpacing: (label.visible && label.lineCount > 1) ? 0 : control.spacing
0160
0161 // if this is a row or a column
0162 columns: control.display !== T.AbstractButton.TextBesideIcon ? 1 : 2
0163
0164 property real verticalMargins: (control.display === T.AbstractButton.TextBesideIcon) ? Kirigami.Units.largeSpacing : 0
0165
0166 Kirigami.Icon {
0167 id: icon
0168 source: control.icon.name || control.icon.source
0169 isMask: control.recolorIcon
0170 visible: control.icon.name !== '' && control.icon.source !== '' && control.display !== T.AbstractButton.TextOnly
0171 color: control.icon.color
0172
0173 Layout.topMargin: gridLayout.verticalMargins
0174 Layout.bottomMargin: gridLayout.verticalMargins
0175 Layout.leftMargin: (control.display === T.AbstractButton.TextBesideIcon) ? Kirigami.Units.gridUnit : 0
0176 Layout.rightMargin: (control.display === T.AbstractButton.TextBesideIcon) ? Kirigami.Units.gridUnit : 0
0177
0178 Layout.alignment: {
0179 if (control.display === T.AbstractButton.TextBesideIcon) {
0180 // row layout
0181 return Qt.AlignVCenter | Qt.AlignRight;
0182 } else {
0183 // column layout
0184 return Qt.AlignHCenter | ((!label.visible || label.lineCount > 1) ? Qt.AlignVCenter : Qt.AlignBottom);
0185 }
0186 }
0187 implicitHeight: source ? control.icon.height : 0
0188 implicitWidth: source ? control.icon.width : 0
0189
0190 Behavior on color { ColorAnimation {} }
0191 Behavior on opacity { NumberAnimation {} }
0192 }
0193 QQC2.Label {
0194 id: label
0195 Kirigami.MnemonicData.enabled: control.enabled && control.visible
0196 Kirigami.MnemonicData.controlType: Kirigami.MnemonicData.MenuItem
0197 Kirigami.MnemonicData.label: control.text
0198
0199 text: Kirigami.MnemonicData.richTextLabel
0200 horizontalAlignment: (control.display === T.AbstractButton.TextBesideIcon) ? Text.AlignLeft : Text.AlignHCenter
0201
0202 visible: control.display !== T.AbstractButton.IconOnly
0203 wrapMode: Text.Wrap
0204 elide: Text.ElideMiddle
0205 color: control.checked ? control.highlightForegroundColor : control.foregroundColor
0206
0207 font.bold: control.checked
0208 font.family: Kirigami.Theme.smallFont.family
0209 font.pointSize: {
0210 if (control.display === T.AbstractButton.TextBesideIcon) {
0211 // row layout
0212 return Kirigami.Theme.defaultFont.pointSize;
0213 } else {
0214 // column layout
0215 return icon.visible ? Kirigami.Theme.smallFont.pointSize : Kirigami.Theme.defaultFont.pointSize * 1.20; // 1.20 is equivalent to level 2 heading
0216 }
0217 }
0218
0219 Behavior on color { ColorAnimation {} }
0220 Behavior on opacity { NumberAnimation {} }
0221
0222 Layout.topMargin: gridLayout.verticalMargins
0223 Layout.bottomMargin: gridLayout.verticalMargins
0224
0225 Layout.alignment: {
0226 if (control.display === T.AbstractButton.TextBesideIcon) {
0227 // row layout
0228 return Qt.AlignVCenter | Qt.AlignLeft;
0229 } else {
0230 // column layout
0231 return icon.visible ? Qt.AlignHCenter | Qt.AlignTop : Qt.AlignCenter;
0232 }
0233 }
0234
0235 // Work around bold text changing implicit size
0236 Layout.preferredWidth: boldMetrics.implicitWidth
0237 Layout.preferredHeight: boldMetrics.implicitHeight * label.lineCount
0238 Layout.fillWidth: true
0239
0240 QQC2.Label {
0241 id: boldMetrics
0242 visible: false
0243 text: parent.text
0244 font.bold: true
0245 font.family: Kirigami.Theme.smallFont.family
0246 font.pointSize: Kirigami.Theme.smallFont.pointSize
0247 horizontalAlignment: Text.AlignHCenter
0248 wrapMode: QQC2.Label.Wrap
0249 elide: Text.ElideMiddle
0250 }
0251 }
0252 }
0253 }