discover/qml/CarouselMaximizedViewContent.qml

0001 /*
0002  *   SPDX-FileCopyrightText: 2023 ivan tkachenko <me@ratijas.tk>
0003  *
0004  *   SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick
0008 import QtQuick.Controls as QQC2
0009 import QtQuick.Layouts
0010 import QtQuick.Templates as T
0011 import org.kde.kirigami as Kirigami
0012 import org.kde.kirigamiaddons.components as KirigamiComponents
0013 import org.kde.discover
0014
0015 Item {
0016     id: root
0017
0018     required property CarouselAbstractMaximizedView host
0019
0020     readonly property real edgeMargin: Kirigami.Units.gridUnit
0021
0022     readonly property real windowControlButtonsCollapsedMargin: host.toggleModeAvailable
0023         ? Math.round(edgeMargin / 2) : edgeMargin
0024
0025     Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
0026     Kirigami.Theme.inherit: false
0027
0028     RowLayout {
0029         z: 2
0030         anchors.top: parent.top
0031         anchors.right: parent.right
0032         spacing: 0
0033
0034         KirigamiComponents.FloatingButton {
0035             Kirigami.Theme.inherit: true
0036
0037             text: {
0038                 switch (root.host.mode) {
0039                 case CarouselMaximizedViewController.Mode.FullScreen:
0040                     return i18nc("@action:button", "Switch to Overlay");
0041                 case CarouselMaximizedViewController.Mode.Overlay:
0042                     return i18nc("@action:button", "Switch to Full Screen");
0043                 }
0044                 return "";
0045             }
0046             icon.name: {
0047                 switch (root.host.mode) {
0048                 case CarouselMaximizedViewController.Mode.FullScreen:
0049                     return "window-restore-symbolic";
0050                 case CarouselMaximizedViewController.Mode.Overlay:
0051                     return "window-maximize-symbolic";
0052                 }
0053                 return "";
0054             }
0055             display: T.AbstractButton.IconOnly
0056             focusPolicy: Qt.NoFocus
0057             radius: Infinity
0058
0059             margins: root.edgeMargin
0060             leftMargin: !mirrored ? margins : windowControlButtonsCollapsedMargin
0061             rightMargin: mirrored ? margins : windowControlButtonsCollapsedMargin
0062
0063             visible: root.host.toggleModeAvailable
0064
0065             QQC2.ToolTip.text: text
0066             QQC2.ToolTip.visible: (Kirigami.Settings.tabletMode ? pressed : hovered) && text !== ""
0067             QQC2.ToolTip.delay: Kirigami.Settings.tabletMode ? Qt.styleHints.mousePressAndHoldInterval : Kirigami.Units.toolTipDelay
0068
0069             onClicked: root.host.toggleMode()
0070         }
0071
0072         KirigamiComponents.FloatingButton {
0073             Kirigami.Theme.inherit: true
0074
0075             text: i18nc("@action:button Close overlay/window/popup with carousel of screenshots", "Close")
0076             icon.name: "window-close-symbolic"
0077             display: T.AbstractButton.IconOnly
0078             focusPolicy: Qt.NoFocus
0079             radius: Infinity
0080
0081             margins: root.edgeMargin
0082             leftMargin: mirrored ? margins : windowControlButtonsCollapsedMargin
0083             rightMargin: !mirrored ? margins : windowControlButtonsCollapsedMargin
0084
0085             QQC2.ToolTip.text: text
0086             QQC2.ToolTip.visible: (Kirigami.Settings.tabletMode ? pressed : hovered) && text !== ""
0087             QQC2.ToolTip.delay: Kirigami.Settings.tabletMode ? Qt.styleHints.mousePressAndHoldInterval : Kirigami.Units.toolTipDelay
0088
0089             onClicked: root.host.close(true);
0090         }
0091     }
0092
0093     Keys.forwardTo: view
0094
0095     ColumnLayout {
0096         z: 1
0097         anchors.fill: parent
0098         spacing: 0
0099
0100         ListView {
0101             id: view
0102
0103             Layout.fillWidth: true
0104             Layout.fillHeight: true
0105
0106             keyNavigationEnabled: true
0107             interactive: true
0108
0109             clip: true
0110             pixelAligned: true
0111             orientation: ListView.Horizontal
0112             snapMode: ListView.SnapToItem
0113             highlightRangeMode: ListView.StrictlyEnforceRange
0114
0115             displayMarginBeginning: root.edgeMargin
0116             displayMarginEnd: root.edgeMargin
0117
0118             preferredHighlightBegin: currentItem ? Math.round((width - currentItem.width) / 2) : 0
0119             preferredHighlightEnd: currentItem ? preferredHighlightBegin + currentItem.width : 0
0120
0121             highlightMoveDuration: Kirigami.Units.longDuration
0122             highlightResizeDuration: Kirigami.Units.longDuration
0123
0124             spacing: Kirigami.Units.gridUnit
0125             cacheBuffer: 10000
0126
0127             Component.onCompleted: {
0128                 // HACK: Layout polish loop detected for QQuickColumnLayout. Aborting after two iterations.
0129                 //
0130                 // That error leads to ListView content being initially mis-positioned.
0131                 // So, let's fire a callback exactly after two event loop iterations.
0132                 Qt.callLater(() => {
0133                     Qt.callLater(() => {
0134                         // Set current index without animations
0135                         const backup = highlightMoveDuration;
0136                         highlightMoveDuration = 0;
0137
0138                         model = Qt.binding(() => root.host.model);
0139                         currentIndex = Qt.binding(() => root.host.currentIndex);
0140                         currentIndexChanged.connect(() => root.host.currentIndex = currentIndex);
0141                         // Autoplay current video when view is first opened.
0142                         currentItem?.play();
0143
0144                         highlightMoveDuration = backup;
0145                     });
0146                 });
0147             }
0148
0149             delegate: CarouselDelegate {
0150                 z: 1
0151                 loadLargeImage: true
0152                 onActivated: {
0153                     if (root.host.currentIndex === index) {
0154                         root.host.close(true);
0155                     } else {
0156                         root.host.currentIndex = index;
0157                     }
0158                 }
0159             }
0160
0161             CarouselNavigationButtonsListViewAdapter {
0162                 LayoutMirroring.enabled: root.LayoutMirroring.enabled
0163
0164                 view: view
0165                 edgeMargin: root.edgeMargin
0166             }
0167
0168             TapHandler {
0169                 onTapped: {
0170                     root.host.close(true);
0171                 }
0172             }
0173         }
0174
0175         CarouselPageIndicator {
0176             id: pageIndicator
0177
0178             Layout.fillWidth: true
0179             topPadding: Kirigami.Units.largeSpacing * 3
0180             bottomPadding: Kirigami.Units.largeSpacing * 3
0181
0182             focusPolicy: Qt.NoFocus
0183             interactive: true
0184             count: carouselModel.count
0185             visible: count > 1
0186
0187             function bindCurrentIndex() {
0188                 currentIndex = Qt.binding(() => root.host.currentIndex);
0189             }
0190
0191             onCurrentIndexChanged: {
0192                 root.host.currentIndex = currentIndex;
0193             }
0194         }
0195     }
0196 }