Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[sailfish-browser] Use a press and hold scheme in tab list to switch … #959

Open
wants to merge 1 commit into
base: next
Choose a base branch
from
+71 −26
Open

[sailfish-browser] Use a press and hold scheme in tab list to switch … #959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 57 additions & 7 deletions apps/browser/qml/pages/components/TabGridView.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
rainemak marked this conversation as resolved.
Show resolved Hide resolved
readonly property real _tabScale: housekeeping ? 0.9 : 1.0
property bool housekeeping

signal hide
signal enterNewTabUrl
Expand Down Expand Up @@ -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 {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This Rectangle & Image & MouseArea should really be an Rectangle & IconButton. IconButton will handle highlighting of the icon. The background Rectangle can be pretty much like already declared (small remark below).

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good advice, thanks. I'm using an IconButton as done before in TabItem.qml.

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)
}
}
}
}

Expand All @@ -90,7 +140,7 @@ SilicaGridView {
z: -1
width: tabGridView.width
height: tabGridView.height
onClicked: hide()
onClicked: tabGridView.housekeeping = false
}
]

Expand Down
33 changes: 14 additions & 19 deletions apps/browser/qml/pages/components/TabItem.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,23 @@ 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)
// In direction so that we can break this binding when closing a tab
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 {
Expand All @@ -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: [
Expand Down Expand Up @@ -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
}
Expand All @@ -119,20 +123,16 @@ BackgroundItem {
top: parent.top
verticalCenter: iconHeader.verticalCenter
}
visible: root.showClose
icon.color: Theme.primaryColor
icon.highlightColor: root.highlightColor
icon.highlighted: down
icon.anchors.horizontalCenterOffset: Theme.paddingMedium

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()
}
}
}
Expand All @@ -152,11 +152,6 @@ BackgroundItem {
Behavior on opacity { FadeAnimation {} }

}
},
Timer {
id: removeTimer
interval: 16
onTriggered: view.closeTab(index)
}
]
}