Kirigami2

NavigationTabButton.qml
1 /* SPDX-FileCopyrightText: 2021 Devin Lin <[email protected]>
2  * SPDX-FileCopyrightText: 2021 Noah Davis <[email protected]>
3  * SPDX-License-Identifier: LGPL-2.0-or-later
4  */
5 
6 import QtQuick 2.15
7 import QtQuick.Layouts 1.15
8 import QtQuick.Controls 2.15 as QQC2
9 import QtQuick.Templates 2.15 as T
10 import org.kde.kirigami 2.19 as Kirigami
11 
12 /**
13  * @brief Navigation buttons to be used for the NavigationTabBar component.
14  *
15  * It supplies its own padding, and also supports using the QQC2 AbstractButton ``display`` property to be used in column lists.
16  *
17  * Alternative way to the "actions" property on NavigationTabBar, as it can be used
18  * with Repeater to generate buttons from models.
19  *
20  * Example usage:
21  * @code{.qml}
22  * Kirigami.NavigationTabBar {
23  * id: navTabBar
24  * Kirigami.NavigationTabButton {
25  * visible: true
26  * icon.name: "document-save"
27  * text: `test ${tabIndex + 1}`
28  * QQC2.ButtonGroup.group: navTabBar.tabGroup
29  * }
30  * Kirigami.NavigationTabButton {
31  * visible: false
32  * icon.name: "document-send"
33  * text: `test ${tabIndex + 1}`
34  * QQC2.ButtonGroup.group: navTabBar.tabGroup
35  * }
36  * actions: [
37  * Kirigami.Action {
38  * visible: true
39  * icon.name: "edit-copy"
40  * icon.height: 32
41  * icon.width: 32
42  * text: `test 3`
43  * checked: true
44  * },
45  * Kirigami.Action {
46  * visible: true
47  * icon.name: "edit-cut"
48  * text: `test 4`
49  * checkable: true
50  * },
51  * Kirigami.Action {
52  * visible: false
53  * icon.name: "edit-paste"
54  * text: `test 5`
55  * },
56  * Kirigami.Action {
57  * visible: true
58  * icon.source: "../logo.png"
59  * text: `test 6`
60  * checkable: true
61  * }
62  * ]
63  * }
64  * @endcode
65  *
66  * @since 5.87
67  * @since org.kde.kirigami 2.19
68  * @inherit QtQuick.Templates.TabButton
69  */
70 T.TabButton {
71  id: control
72 
73  /**
74  * @brief This property tells the index of this tab within the tab bar.
75  */
76  readonly property int tabIndex: {
77  let tabIdx = 0
78  for (let i = 0; i < parent.children.length; ++i) {
79  if (parent.children[i] === this) {
80  return tabIdx
81  }
82  // Checking for AbstractButtons because any AbstractButton can act as a tab
83  if (parent.children[i] instanceof T.AbstractButton) {
84  ++tabIdx
85  }
86  }
87  return -1
88  }
89 
90  /**
91  * @brief This property sets whether the icon colors should be masked with a single color.
92  *
93  * default: ``true``
94  *
95  * @since 5.96
96  */
97  property bool recolorIcon: true
98 
99  property color foregroundColor: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.85)
100  property color highlightForegroundColor: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.85)
101  property color highlightBarColor: Kirigami.Theme.highlightColor
102 
103  property color pressedColor: Qt.rgba(highlightBarColor.r, highlightBarColor.g, highlightBarColor.b, 0.3)
104  property color hoverSelectColor: Qt.rgba(highlightBarColor.r, highlightBarColor.g, highlightBarColor.b, 0.2)
105  property color checkedBorderColor: Qt.rgba(highlightBarColor.r, highlightBarColor.g, highlightBarColor.b, 0.7)
106  property color pressedBorderColor: Qt.rgba(highlightBarColor.r, highlightBarColor.g, highlightBarColor.b, 0.9)
107 
108  implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
109  implicitContentWidth + leftPadding + rightPadding)
110  implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
111  implicitContentHeight + topPadding + bottomPadding)
112 
113  display: T.AbstractButton.TextUnderIcon
114 
115  Kirigami.Theme.colorSet: Kirigami.Theme.Window
116  Kirigami.Theme.inherit: false
117 
118  // not using the hover handler built into control, since it seems to misbehave and
119  // permanently report hovered after a touch event
120  HoverHandler {
121  id: hoverHandler
122  }
123 
124  padding: Kirigami.Units.smallSpacing
125  spacing: Kirigami.Units.smallSpacing
126 
127  icon.height: control.display === T.AbstractButton.TextBesideIcon ? Kirigami.Units.iconSizes.small : Kirigami.Units.iconSizes.smallMedium
128  icon.width: control.display === T.AbstractButton.TextBesideIcon ? Kirigami.Units.iconSizes.small : Kirigami.Units.iconSizes.smallMedium
129  icon.color: control.checked ? control.highlightForegroundColor : control.foregroundColor
130 
131  background: Rectangle {
132  Kirigami.Theme.colorSet: Kirigami.Theme.Button
133  Kirigami.Theme.inherit: false
134 
135  implicitHeight: (control.display === T.AbstractButton.TextBesideIcon) ? 0 : (Kirigami.Units.gridUnit * 3 + Kirigami.Units.smallSpacing * 2)
136 
137  color: "transparent"
138 
139  Rectangle {
140  width: parent.width - Kirigami.Units.largeSpacing
141  height: parent.height - Kirigami.Units.largeSpacing
142  anchors.centerIn: parent
143 
144  radius: Kirigami.Units.smallSpacing
145  color: control.pressed ? pressedColor : (control.checked || hoverHandler.hovered ? hoverSelectColor : "transparent")
146 
147  border.color: control.checked ? checkedBorderColor : (control.pressed ? pressedBorderColor : color)
148  border.width: 1
149 
150  Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
151  Behavior on border.color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
152  }
153  }
154 
155  contentItem: GridLayout {
156  id: gridLayout
157  columnSpacing: 0
158  rowSpacing: (label.visible && label.lineCount > 1) ? 0 : control.spacing
159 
160  // if this is a row or a column
161  columns: control.display !== T.AbstractButton.TextBesideIcon ? 1 : 2
162 
163  property real verticalMargins: (control.display === T.AbstractButton.TextBesideIcon) ? Kirigami.Units.largeSpacing : 0
164 
165  Kirigami.Icon {
166  id: icon
167  source: control.icon.name || control.icon.source
168  isMask: control.recolorIcon
169  visible: control.icon.name !== '' && control.icon.source !== '' && control.display !== T.AbstractButton.TextOnly
170  color: control.icon.color
171 
172  Layout.topMargin: gridLayout.verticalMargins
173  Layout.bottomMargin: gridLayout.verticalMargins
174  Layout.leftMargin: (control.display === T.AbstractButton.TextBesideIcon) ? Kirigami.Units.gridUnit : 0
175  Layout.rightMargin: (control.display === T.AbstractButton.TextBesideIcon) ? Kirigami.Units.gridUnit : 0
176 
177  Layout.alignment: {
178  if (control.display === T.AbstractButton.TextBesideIcon) {
179  // row layout
180  return Qt.AlignVCenter | Qt.AlignRight;
181  } else {
182  // column layout
183  return Qt.AlignHCenter | ((!label.visible || label.lineCount > 1) ? Qt.AlignVCenter : Qt.AlignBottom);
184  }
185  }
186  implicitHeight: source ? control.icon.height : 0
187  implicitWidth: source ? control.icon.width : 0
188 
189  Behavior on color { ColorAnimation {} }
190  Behavior on opacity { NumberAnimation {} }
191  }
192  QQC2.Label {
193  id: label
194  Kirigami.MnemonicData.enabled: control.enabled && control.visible
195  Kirigami.MnemonicData.controlType: Kirigami.MnemonicData.MenuItem
196  Kirigami.MnemonicData.label: control.text
197 
198  text: Kirigami.MnemonicData.richTextLabel
199  horizontalAlignment: (control.display === T.AbstractButton.TextBesideIcon) ? Text.AlignLeft : Text.AlignHCenter
200 
201  visible: control.display !== T.AbstractButton.IconOnly
202  wrapMode: Text.Wrap
203  elide: Text.ElideMiddle
204  color: control.checked ? control.highlightForegroundColor : control.foregroundColor
205 
206  font.bold: control.checked
207  font.family: Kirigami.Theme.smallFont.family
208  font.pointSize: {
209  if (control.display === T.AbstractButton.TextBesideIcon) {
210  // row layout
211  return Kirigami.Theme.defaultFont.pointSize;
212  } else {
213  // column layout
214  return icon.visible ? Kirigami.Theme.smallFont.pointSize : Kirigami.Theme.defaultFont.pointSize * 1.20; // 1.20 is equivalent to level 2 heading
215  }
216  }
217 
218  Behavior on color { ColorAnimation {} }
219  Behavior on opacity { NumberAnimation {} }
220 
221  Layout.topMargin: gridLayout.verticalMargins
222  Layout.bottomMargin: gridLayout.verticalMargins
223 
224  Layout.alignment: {
225  if (control.display === T.AbstractButton.TextBesideIcon) {
226  // row layout
227  return Qt.AlignVCenter | Qt.AlignLeft;
228  } else {
229  // column layout
230  return icon.visible ? Qt.AlignHCenter | Qt.AlignTop : Qt.AlignCenter;
231  }
232  }
233 
234  // Work around bold text changing implicit size
235  Layout.preferredWidth: boldMetrics.implicitWidth
236  Layout.preferredHeight: boldMetrics.implicitHeight * label.lineCount
237  Layout.fillWidth: true
238 
239  QQC2.Label {
240  id: boldMetrics
241  visible: false
242  text: parent.text
243  font.bold: true
244  font.family: Kirigami.Theme.smallFont.family
245  font.pointSize: Kirigami.Theme.smallFont.pointSize
246  horizontalAlignment: Text.AlignHCenter
247  wrapMode: QQC2.Label.Wrap
248  elide: Text.ElideMiddle
249  }
250  }
251  }
252 }
KStandardShortcut::label
QString label(StandardShortcut id)
This file is part of the KDE documentation.
Documentation copyright © 1996-2023 The KDE developers.
Generated on Sun Jan 29 2023 04:11:03 by doxygen 1.8.17 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.