Changeset View
Changeset View
Standalone View
Standalone View
src/controls/GlobalDrawer.qml
| Show All 11 Lines | |||||
| 12 | * GNU Library General Public License for more details | 12 | * GNU Library General Public License for more details | ||
| 13 | * | 13 | * | ||
| 14 | * You should have received a copy of the GNU Library General Public | 14 | * You should have received a copy of the GNU Library General Public | ||
| 15 | * License along with this program; if not, write to the | 15 | * License along with this program; if not, write to the | ||
| 16 | * Free Software Foundation, Inc., | 16 | * Free Software Foundation, Inc., | ||
| 17 | * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | 17 | * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | ||
| 18 | */ | 18 | */ | ||
| 19 | 19 | | |||
| 20 | import QtQuick 2.6 | 20 | import QtQuick 2.12 | ||
| 21 | import QtQuick.Templates 2.0 as T2 | 21 | import QtQuick.Templates 2.0 as T2 | ||
| 22 | import QtQuick.Controls 2.0 as QQC2 | 22 | import QtQuick.Controls 2.2 as QQC2 | ||
| 23 | import QtQuick.Layouts 1.2 | 23 | import QtQuick.Layouts 1.2 | ||
| 24 | import QtGraphicalEffects 1.0 | 24 | import QtGraphicalEffects 1.0 | ||
| 25 | import org.kde.kirigami 2.4 | 25 | import org.kde.kirigami 2.4 | ||
| 26 | 26 | | |||
| 27 | import "private" | 27 | import "private" | ||
| 28 | import "templates/private" | 28 | import "templates/private" | ||
| 29 | 29 | | |||
| 30 | /** | 30 | /** | ||
| ▲ Show 20 Lines • Show All 96 Lines • ▼ Show 20 Line(s) | 67 | OverlayDrawer { | |||
| 127 | * ] | 127 | * ] | ||
| 128 | * } | 128 | * } | ||
| 129 | * [...] | 129 | * [...] | ||
| 130 | * } | 130 | * } | ||
| 131 | * @endcode | 131 | * @endcode | ||
| 132 | */ | 132 | */ | ||
| 133 | property list<QtObject> actions | 133 | property list<QtObject> actions | ||
| 134 | 134 | | |||
| 135 | //TODO | ||||
| 136 | property Item header | ||||
| 137 | | ||||
| 138 | property bool bannerVisible: Settings.isMobile | ||||
| 135 | /** | 139 | /** | ||
| 136 | * content: list<Item> default property | 140 | * content: list<Item> default property | ||
| 137 | * Any random Item can be instantiated inside the drawer and | 141 | * Any random Item can be instantiated inside the drawer and | ||
| 138 | * will be displayed underneath the actions list. | 142 | * will be displayed underneath the actions list. | ||
| 139 | * | 143 | * | ||
| 140 | * Example usage: | 144 | * Example usage: | ||
| 141 | * @code | 145 | * @code | ||
| 142 | * import org.kde.kirigami 2.4 as Kirigami | 146 | * import org.kde.kirigami 2.4 as Kirigami | ||
| ▲ Show 20 Lines • Show All 54 Lines • ▼ Show 20 Line(s) | |||||
| 197 | * at the top will be hidden (default false). | 201 | * at the top will be hidden (default false). | ||
| 198 | * If you want to keep some items visible and some invisible, set this to | 202 | * If you want to keep some items visible and some invisible, set this to | ||
| 199 | * false and control the visibility/opacity of individual items, | 203 | * false and control the visibility/opacity of individual items, | ||
| 200 | * binded to the collapsed property | 204 | * binded to the collapsed property | ||
| 201 | * @since 2.5 | 205 | * @since 2.5 | ||
| 202 | */ | 206 | */ | ||
| 203 | property bool showTopContentWhenCollapsed: false | 207 | property bool showTopContentWhenCollapsed: false | ||
| 204 | 208 | | |||
| 209 | //TODO | ||||
| 210 | property bool showHeaderWhenCollapsed: false | ||||
| 211 | | ||||
| 205 | /** | 212 | /** | ||
| 206 | * resetMenuOnTriggered: bool | 213 | * resetMenuOnTriggered: bool | ||
| 207 | * | 214 | * | ||
| 208 | * On the actions menu, whenever a leaf action is triggered, the menu | 215 | * On the actions menu, whenever a leaf action is triggered, the menu | ||
| 209 | * will reset to its parent. | 216 | * will reset to its parent. | ||
| 210 | */ | 217 | */ | ||
| 211 | property bool resetMenuOnTriggered: true | 218 | property bool resetMenuOnTriggered: true | ||
| 212 | 219 | | |||
| Show All 21 Lines | |||||
| 234 | */ | 241 | */ | ||
| 235 | function resetMenu() { | 242 | function resetMenu() { | ||
| 236 | stackView.pop(stackView.get(0, T2.StackView.DontLoad)); | 243 | stackView.pop(stackView.get(0, T2.StackView.DontLoad)); | ||
| 237 | if (root.modal) { | 244 | if (root.modal) { | ||
| 238 | root.drawerOpen = false; | 245 | root.drawerOpen = false; | ||
| 239 | } | 246 | } | ||
| 240 | } | 247 | } | ||
| 241 | 248 | | |||
| 242 | rightPadding: !Settings.isMobile && mainFlickable.contentHeight > mainFlickable.height ? Units.gridUnit : Units.smallSpacing | 249 | //rightPadding: !Settings.isMobile && mainFlickable.contentHeight > mainFlickable.height ? Units.gridUnit : Units.smallSpacing | ||
| 250 | | ||||
| 251 | onHeaderChanged: { | ||||
| 252 | if (header) { | ||||
| 253 | header.parent = headerContainer | ||||
| 254 | header.Layout.fillWidth = true; | ||||
| 255 | } | ||||
| 256 | } | ||||
| 243 | 257 | | |||
| 244 | contentItem: ScrollView { | 258 | contentItem: QQC2.ScrollView { | ||
| 245 | id: scrollView | 259 | id: scrollView | ||
| 246 | //ensure the attached property exists | 260 | //ensure the attached property exists | ||
| 247 | Theme.inherit: true | 261 | Theme.inherit: true | ||
| 248 | anchors.fill: parent | 262 | anchors.fill: parent | ||
| 249 | implicitWidth: Math.min (Units.gridUnit * 20, root.parent.width * 0.8) | 263 | implicitWidth: Math.min (Units.gridUnit * 20, root.parent.width * 0.8) | ||
| 250 | horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff | 264 | QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff | ||
| 265 | QQC2.ScrollBar.vertical.anchors { | ||||
| 266 | top: scrollView.top | ||||
| 267 | bottom: scrollView.bottom | ||||
| 268 | topMargin: headerParent.height + headerParent.y | ||||
| 269 | } | ||||
| 251 | 270 | | |||
| 252 | Flickable { | 271 | Flickable { | ||
| 253 | id: mainFlickable | 272 | id: mainFlickable | ||
| 254 | contentWidth: width | 273 | contentWidth: width | ||
| 255 | contentHeight: mainColumn.Layout.minimumHeight | 274 | contentHeight: mainColumn.Layout.minimumHeight | ||
| 275 | topMargin: headerParent.height | ||||
| 256 | 276 | | |||
| 257 | ColumnLayout { | 277 | ColumnLayout { | ||
| 258 | id: mainColumn | 278 | id: headerParent | ||
| 259 | width: mainFlickable.width | 279 | parent: mainFlickable | ||
| 280 | anchors { | ||||
| 281 | left: parent.left | ||||
| 282 | right: parent.right | ||||
| 283 | } | ||||
| 260 | spacing: 0 | 284 | spacing: 0 | ||
| 261 | height: Math.max(root.height, Layout.minimumHeight) | 285 | y: bannerImage.visible ? Math.max(headerContainer.height, -mainFlickable.contentY) - height : 0 | ||
| 262 | | ||||
| 263 | //TODO: cable visible of bannerimage | | |||
| 264 | Item { | | |||
| 265 | implicitHeight: root.collapsible | | |||
| 266 | ? Math.max(collapseButton.height + Units.smallSpacing, bannerImage.Layout.preferredHeight) | | |||
| 267 | : bannerImage.Layout.preferredHeight | | |||
| 268 | 286 | | |||
| 269 | Layout.fillWidth: true | 287 | Layout.fillWidth: true | ||
| 270 | visible: !bannerImage.empty || root.collapsible | 288 | //visible: !bannerImage.empty || root.collapsible | ||
| 271 | 289 | | |||
| 272 | BannerImage { | 290 | BannerImage { | ||
| 273 | id: bannerImage | 291 | id: bannerImage | ||
| 274 | anchors.fill: parent | 292 | | ||
| 293 | | ||||
| 294 | visible: !bannerImage.empty && opacity > 0 && root.bannerVisible | ||||
| 275 | opacity: !root.collapsed | 295 | opacity: !root.collapsed | ||
| 276 | fillMode: Image.PreserveAspectCrop | 296 | fillMode: Image.PreserveAspectCrop | ||
| 277 | 297 | | |||
| 278 | Behavior on opacity { | 298 | Behavior on opacity { | ||
| 279 | OpacityAnimator { | 299 | OpacityAnimator { | ||
| 280 | duration: Units.longDuration | 300 | duration: Units.longDuration | ||
| 281 | easing.type: Easing.InOutQuad | 301 | easing.type: Easing.InOutQuad | ||
| 282 | } | 302 | } | ||
| 283 | } | 303 | } | ||
| 284 | leftPadding: root.collapsible ? collapseButton.width + Units.smallSpacing*2 : topPadding | 304 | //leftPadding: root.collapsible ? collapseButton.width + Units.smallSpacing*2 : topPadding | ||
| 285 | MouseArea { | 305 | MouseArea { | ||
| 286 | anchors.fill: parent | 306 | anchors.fill: parent | ||
| 287 | onClicked: root.bannerClicked() | 307 | onClicked: root.bannerClicked() | ||
| 288 | } | 308 | } | ||
| 289 | EdgeShadow { | 309 | EdgeShadow { | ||
| 290 | edge: Qt.BottomEdge | 310 | edge: Qt.BottomEdge | ||
| 291 | visible: bannerImageSource != "" | 311 | visible: bannerImageSource != "" | ||
| 292 | anchors { | 312 | anchors { | ||
| 293 | left: parent.left | 313 | left: parent.left | ||
| 294 | right: parent.right | 314 | right: parent.right | ||
| 295 | bottom: parent.top | 315 | bottom: parent.top | ||
| 296 | } | 316 | } | ||
| 297 | } | 317 | } | ||
| 298 | } | 318 | } | ||
| 299 | PrivateActionToolButton { | 319 | RowLayout { | ||
| 300 | id: collapseButton | 320 | id: headerContainer | ||
| 301 | readonly property bool noTitle: (!root.title || root.title.length===0) && (!root.titleIcon || root.title.length===0) | 321 | Theme.inherit: false | ||
| 302 | anchors { | 322 | Theme.colorSet: Theme.Window | ||
| 303 | top: parent.top | 323 | | ||
| 304 | left: parent.left | 324 | Layout.fillWidth: true | ||
| 305 | topMargin: root.collapsed || noTitle ? 0 : Units.smallSpacing + Units.iconSizes.large/2 - height/2 | 325 | visible: contentItem && opacity > 0 | ||
ratijas: What is this contentItem referring to? I'm looking into a bug that header does not collapse… | |||||
ratijas: Fixed in https://invent.kde.org/frameworks/kirigami/-/merge_requests/1002 | |||||
| 306 | leftMargin: root.collapsed || noTitle ? 0 : Units.smallSpacing | 326 | Layout.preferredHeight: implicitHeight * opacity | ||
| 307 | Behavior on leftMargin { | 327 | opacity: !root.collapsed || showHeaderWhenCollapsed | ||
| 328 | Behavior on opacity { | ||||
| 329 | //not an animator as is binded | ||||
| 308 | NumberAnimation { | 330 | NumberAnimation { | ||
| 309 | duration: Units.longDuration | 331 | duration: Units.longDuration | ||
| 310 | easing.type: Easing.InOutQuad | 332 | easing.type: Easing.InOutQuad | ||
| 311 | } | 333 | } | ||
| 312 | } | 334 | } | ||
| 313 | Behavior on topMargin { | | |||
| 314 | NumberAnimation { | | |||
| 315 | duration: Units.longDuration | | |||
| 316 | easing.type: Easing.InOutQuad | | |||
| 317 | } | | |||
| 318 | } | 335 | } | ||
| 319 | } | 336 | } | ||
| 320 | 337 | | |||
| 321 | width: Units.iconSizes.smallMedium + Units.largeSpacing * 2 | | |||
| 322 | height: width | | |||
| 323 | | ||||
| 324 | Behavior on y { | | |||
| 325 | YAnimator { | | |||
| 326 | duration: Units.longDuration | | |||
| 327 | easing.type: Easing.InOutQuad | | |||
| 328 | } | | |||
| 329 | } | | |||
| 330 | 338 | | |||
| 331 | visible: root.collapsible | 339 | ColumnLayout { | ||
| 332 | kirigamiAction: Action { | 340 | id: mainColumn | ||
| 333 | icon.name: "application-menu" | 341 | width: mainFlickable.width | ||
| 334 | checkable: true | 342 | spacing: 0 | ||
| 335 | checked: !root.collapsed | 343 | height: Math.max(root.height - headerParent.height, Layout.minimumHeight) | ||
| 336 | onCheckedChanged: root.collapsed = !checked | | |||
| 337 | } | | |||
| 338 | } | | |||
| 339 | } | | |||
| 340 | 344 | | |||
| 341 | ColumnLayout { | 345 | ColumnLayout { | ||
| 342 | id: topContent | 346 | id: topContent | ||
| 343 | spacing: 0 | 347 | spacing: 0 | ||
| 344 | Layout.alignment: Qt.AlignHCenter | 348 | Layout.alignment: Qt.AlignHCenter | ||
| 345 | Layout.leftMargin: root.leftPadding | 349 | Layout.leftMargin: root.leftPadding | ||
| 346 | Layout.rightMargin: root.rightPadding | 350 | Layout.rightMargin: root.rightPadding | ||
| 347 | Layout.bottomMargin: Units.smallSpacing | 351 | Layout.bottomMargin: Units.smallSpacing | ||
| ▲ Show 20 Lines • Show All 139 Lines • Show Last 20 Lines | |||||
What is this contentItem referring to? I'm looking into a bug that header does not collapse when the custom header Item is set to be invisible (search field in Discover).