Kirigami2

CategorizedSettings.qml
1 /*
2  * SPDX-FileCopyrightText: 2020 Tobias Fella <[email protected]>
3  * SPDX-FileCopyrightText: 2021 Carl Schwan <[email protected]>
4  * SPDX-FileCopyrightText: 2021 Felipe Kinoshita <[email protected]>
5  * SPDX-FileCopyrightText: 2021 Marco Martin <[email protected]>
6  *
7  * SPDX-License-Identifier: LGPL-2.0-or-later
8  */
9 
10 import QtQuick 2.15
11 import QtQuick.Controls 2.15 as QQC2
12 import QtQuick.Layouts 1.15
13 import org.kde.kirigami 2.11 as Kirigami
14 
15 /**
16  * A container for setting actions showing them in a list view and displaying
17  * the actual page next to it.
18  *
19  * @since 5.86
20  * @since org.kde.kirigami 2.18
21  * @inherit kde::org::kirigami::PageRow
22  */
23 Kirigami.PageRow {
24  id: pageSettingStack
25 
26  property list<Kirigami.PagePoolAction> actions
27  property alias stack: pageSettingStack
28  property Kirigami.PagePool pool: Kirigami.PagePool {}
29 
30  readonly property string title: pageSettingStack.depth < 2 ? qsTr("Settings") : qsTr("Settings — %1").arg(pageSettingStack.get(1).title)
31 
32  property bool completed: false
33 
34  bottomPadding: 0
35  leftPadding: 0
36  rightPadding: 0
37  topPadding: 0
38 
39  // With this, we get the longest word's width
40  TextMetrics {
41  id: maxWordMetrics
42  }
43  columnView.columnWidth: {
44  if(!pageSettingStack.completed || actions.length === 0) {
45  return Kirigami.Units.gridUnit * 6 // we return the min width if the component isn't completed
46  }
47  let maxWordWidth = 0;
48  for (let i = 0; i < actions.length; i++) {
49  const words = actions[i].text.split(" ");
50 
51  for (let j = 0; j < words.length; j++) {
52  maxWordMetrics.text = words[j]
53  const currWordWidth = Math.ceil(maxWordMetrics.advanceWidth)
54  if (currWordWidth > maxWordWidth) {
55  maxWordWidth = currWordWidth
56  }
57  }
58  }
59 
60  // fix words getting wrapped weirdly when the vertical scrollbar is shown
61  const vScrollBarWidth = initialPage.contentItem.QQC2.ScrollBar.vertical.width;
62 
63  // sum maximum word width, ListView's delegate spacing, and vertical scrollbar width
64  const calcWidth = maxWordWidth + Kirigami.Units.smallSpacing * 6 + vScrollBarWidth;
65  const minWidth = Kirigami.Units.gridUnit * 6;
66  const maxWidth = Kirigami.Units.gridUnit * 8.5;
67 
68  return Math.max(minWidth, Math.min(calcWidth, maxWidth));
69  }
70  globalToolBar.showNavigationButtons: Kirigami.ApplicationHeaderStyle.NoNavigationButtons
71  globalToolBar.style: Kirigami.Settings.isMobile ? Kirigami.ApplicationHeaderStyle.Breadcrumb : Kirigami.ApplicationHeaderStyle.None
72 
73  signal backRequested(var event)
74  onBackRequested: event => {
75  if (pageSettingStack.depth > 1 && !pageSettingStack.wideMode && pageSettingStack.currentIndex !== 0) {
76  event.accepted = true;
77  pageSettingStack.pop();
78  }
79  }
80  onWidthChanged: {
81  if (pageSettingStack.depth < 2 && pageSettingStack.width >= Kirigami.Units.gridUnit * 40) {
82  actions[0].trigger();
83  }
84  }
85 
86  initialPage: Kirigami.ScrollablePage {
87  title: qsTr("Settings")
88  bottomPadding: 0
89  leftPadding: 0
90  rightPadding: 0
91  topPadding: 0
92  Kirigami.Theme.colorSet: Kirigami.Theme.View
93  ListView {
94  id: listview
95  Component.onCompleted: if (pageSettingStack.width >= Kirigami.Units.gridUnit * 40) {
96  actions[0].trigger();
97  } else {
98  if (count > 0) {
99  listview.currentIndex = 0;
100  } else {
101  listview.currentIndex = -1;
102  }
103  }
104  model: pageSettingStack.actions
105  delegate: pageSettingStack.wideMode ? desktopStyle : mobileStyle
106  }
107  }
108 
109  Component {
110  id: desktopStyle
111 
112  QQC2.ItemDelegate {
113  width: parent && parent.width > 0 ? parent.width : implicitWidth
114  implicitWidth: contentItem.implicitWidth + Kirigami.Units.smallSpacing * 4
115  implicitHeight: contentItem.implicitHeight + Kirigami.Units.smallSpacing * 2
116 
117  padding: Kirigami.Units.smallSpacing
118 
119  action: modelData
120  highlighted: listview.currentIndex === index
121  onClicked: listview.currentIndex = index
122  contentItem: ColumnLayout {
123  spacing: Kirigami.Units.smallSpacing
124 
125  Kirigami.Icon {
126  Layout.alignment: Qt.AlignHCenter
127  Layout.preferredWidth: Kirigami.Units.iconSizes.medium
128  Layout.preferredHeight: width
129  source: modelData.icon.name
130  }
131 
132  QQC2.Label {
133  Layout.fillWidth: true
134  Layout.leftMargin: Kirigami.Units.smallSpacing
135  Layout.rightMargin: Kirigami.Units.smallSpacing
136  text: modelData.text
137  wrapMode: Text.Wrap
138  color: highlighted ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor
139  horizontalAlignment: Text.AlignHCenter
140  }
141  }
142 
143  }
144  }
145 
146  Component {
147  id: mobileStyle
148 
149  Kirigami.BasicListItem {
150  action: modelData
151  onClicked: {
152  listview.currentIndex = index;
153  }
154  }
155  }
156 
157  Component.onCompleted: {
158  pageSettingStack.completed = true;
159  }
160 }
161 
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.