From 4f2d15c5905f414eea2c752769f47da98c0aff7d Mon Sep 17 00:00:00 2001 From: Damien Caliste Date: Wed, 8 Dec 2021 09:34:05 +0100 Subject: [PATCH] [sailfish-browser] Use a press and hold scheme in tab list to switch to close mode. --- .../qml/pages/components/TabGridView.qml | 64 +++++++++++++++++-- apps/browser/qml/pages/components/TabItem.qml | 33 ++++------ 2 files changed, 71 insertions(+), 26 deletions(-) diff --git a/apps/browser/qml/pages/components/TabGridView.qml b/apps/browser/qml/pages/components/TabGridView.qml index 5f9eb583a422..a1d8fd9bd99a 100644 --- a/apps/browser/qml/pages/components/TabGridView.qml +++ b/apps/browser/qml/pages/components/TabGridView.qml @@ -28,6 +28,8 @@ SilicaGridView { : parent.width < 2 * parent.height ? parent.width <= height ? 1 : 2 : 3 readonly property real thumbnailWidth: (parent.width - Theme.horizontalPageMargin * 2 - (Theme.paddingLarge * (columns - 1))) / columns + readonly property real _tabScale: housekeeping ? 0.9 : 1.0 + property bool housekeeping signal hide signal enterNewTabUrl @@ -66,21 +68,69 @@ SilicaGridView { cellWidth: thumbnailWidth + Theme.paddingLarge cellHeight: thumbnailHeight + Theme.paddingLarge - delegate: TabItem { - id: tabItem + delegate: Item { + id: item - enabled: !closingAllTabs - opacity: enabled ? 1.0 : 0.0 + opacity: !closingAllTabs ? 1.0 : 0.0 Behavior on opacity { FadeAnimator {}} width: thumbnailWidth height: thumbnailHeight + scale: tabGridView._tabScale + Behavior on scale { SmoothedAnimation {duration: 200; velocity: -1} } + GridView.onAdd: AddAnimation { - target: tabItem + target: item } GridView.onRemove: RemoveAnimation { - target: tabItem + target: item + } + + TabItem { + id: tabItem + anchors.fill: parent + enabled: !closingAllTabs + showClose: !tabGridView.housekeeping + + onClicked: { + if (tabGridView.housekeeping) { + tabGridView.housekeeping = false + } else { + activateTab(index) + } + } + onPressAndHold: tabGridView.housekeeping = true + onCloseClicked: closeTab(index) + } + Rectangle { + color: Theme.colorScheme === Theme.LightOnDark + ? closeButton.down ? Theme.highlightColor : Theme.primaryColor + : closeButton.down ? Theme.highlightDimmerColor : Theme.highlightBackgroundColor + width: Theme.iconSizeMedium + height: width + radius: width / 2. + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.bottom + opacity: tabGridView.housekeeping ? 1.0 : 0.0 + visible: opacity > 0. + Behavior on opacity { FadeAnimation { } } + + IconButton { + id: closeButton + anchors.centerIn: parent + icon.color: Theme.colorScheme === Theme.LightOnDark + ? Theme.highlightBackgroundColor : Theme.lightPrimaryColor + icon.highlightColor: Theme.colorScheme === Theme.LightOnDark + ? Theme.highlightDimmerColor : Theme.darkSecondaryColor + icon.highlighted: down + icon.source: "image://theme/icon-close-app" + enabled: !closingAllTabs && tabGridView.housekeeping + onClicked: { + tabItem.markClosed() + closeTab(index) + } + } } } @@ -90,7 +140,7 @@ SilicaGridView { z: -1 width: tabGridView.width height: tabGridView.height - onClicked: hide() + onClicked: tabGridView.housekeeping = false } ] diff --git a/apps/browser/qml/pages/components/TabItem.qml b/apps/browser/qml/pages/components/TabItem.qml index 8f475995cc57..af7ab7e0a939 100644 --- a/apps/browser/qml/pages/components/TabItem.qml +++ b/apps/browser/qml/pages/components/TabItem.qml @@ -17,9 +17,7 @@ import Sailfish.Silica 1.0 BackgroundItem { id: root - // Expose GridView for all items - property Item view: GridView.view - property bool destroying + property bool showClose: true property color highlightColor: Theme.colorScheme == Theme.LightOnDark ? Theme.highlightColor : Theme.highlightFromColor(Theme.highlightColor, Theme.LightOnDark) @@ -27,7 +25,15 @@ BackgroundItem { implicitWidth: width implicitHeight: height - enabled: !destroying + signal closeClicked() + + function markClosed() { + // Break binding, so that texture size would not change when + // closing tab (animating height). + implicitHeight = height + implicitWidth = width + enabled = false + } layer.enabled: true layer.effect: OpacityMask { @@ -44,8 +50,6 @@ BackgroundItem { contentItem.width: root.implicitWidth contentItem.height: root.implicitHeight - onClicked: view.activateTab(index) - // contentItem is hidden so this cannot be children of the contentItem. // So, making them as siblings of the contentItem. data: [ @@ -100,7 +104,7 @@ BackgroundItem { anchors { left: iconHeader.right leftMargin: Theme.paddingMedium - right: close.left + right: root.showClose ? close.left : root.right rightMargin: Theme.paddingMedium verticalCenter: iconHeader.verticalCenter } @@ -119,6 +123,7 @@ BackgroundItem { top: parent.top verticalCenter: iconHeader.verticalCenter } + visible: root.showClose icon.color: Theme.primaryColor icon.highlightColor: root.highlightColor icon.highlighted: down @@ -126,13 +131,8 @@ BackgroundItem { icon.source: "image://theme/icon-s-clear-opaque-cross" onClicked: { - // Break binding, so that texture size would not change when - // closing tab (animating height). - root.implicitHeight = root.height - root.implicitWidth = root.width - - destroying = true - removeTimer.running = true + markClosed() + closeClicked() } } } @@ -152,11 +152,6 @@ BackgroundItem { Behavior on opacity { FadeAnimation {} } } - }, - Timer { - id: removeTimer - interval: 16 - onTriggered: view.closeTab(index) } ] }