Skip to content

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

Open
dcaliste wants to merge 1 commit intosailfishos:nextfrom
dcaliste:close
Open

[sailfish-browser] Use a press and hold scheme in tab list to switch …#959
dcaliste wants to merge 1 commit intosailfishos:nextfrom
dcaliste:close

Conversation

@dcaliste
Copy link
Copy Markdown

@dcaliste dcaliste commented Dec 8, 2021

…to close mode.

Coming from a discussion in the forum (https://forum.sailfishos.org/t/browser-redesign-in-sailfish-4-2-feedback-thread/7867/78 and later posts), it was proposed to use a press and hold behaviour to activate a close tab mode in the tab list view. Like in the home screen (Lipstick switcher).

I've investigated the possibility and created a PR to test the idea. It's using the same metrics (animation duration, scaling factor...) than in the Lipstick switcher.

Here is a screen shot :
close

Entering this mode would allow later to implement a tab reordering capability, like in the Lipstick switcher.

@rainemak or @jpetrell , what do you think ?

PS : @rainemak , I've removed the timer in TabItem.qml that you added in 2014 commit bab0801 when the tabs were using shader effects and textures. I think it's safe to remove it now that we're using images. Do you agree ?

Copy link
Copy Markdown
Member

@rainemak rainemak left a comment

Choose a reason for hiding this comment

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

Almost there I'd say. Like discussed during the community meeting, people have gotten used to the close button that can be found from the toolbar menu. That's my favorite as well.

Maybe the biggest concern that I have is whether this actually improves situation or not but I'll to elaborate a way that should render good end results. I think we should leave close icon still to the TabItem header (where it was, at least for time being) as that would be a bit quicker way to close. Then this PR & commit would be more about introducing a housekeeping mode for tabs where closing is first action and re-organizing tab order could be implemented later.

Comment thread apps/browser/qml/pages/components/TabGridView.qml
enabled: !closingAllTabs

onClicked: {
if (tabGridView._tabScale == 1.0) {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
if (tabGridView._tabScale == 1.0) {
if (tabGridView.housekeeping) {
tabGridView.housekeeping = false
} else {
activateTab(index)
}

Usually reading positive conditions are more readable than going through negative (if not housekeeping). Hence, I'd change order as well.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Yep, I've changed all use of _tabScale to use housekeeping instead and reverse order when necessary to avoid negative in tests.

}
onPressAndHold: tabGridView._tabScale = 0.9
}
Rectangle {
Copy link
Copy Markdown
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
Copy Markdown
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.

radius: width / 2.
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.bottom
opacity: tabGridView._tabScale < 1.0 ? 1.0 : 0.0
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
opacity: tabGridView._tabScale < 1.0 ? 1.0 : 0.0
opacity: tabGridView.housekeeping ? 0.0 : 1.0

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Done.

MouseArea {
id: mouseArea
anchors.fill: parent
enabled: !closingAllTabs && tabGridView._tabScale < 1.0
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This enabled would be then enabling of the IconButton.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Moved to it.

implicitHeight: height

enabled: !destroying
function closing() {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
function closing() {
function closing() {

Closing is a state/status whereas function name should be describing what this function does (verb). I would not call this "close" either as this is not really closing anything. That said, I'd propose "markClosed" as this is changing TabItem to itself final state.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Ok, I've changed the name for your suggestion.

@dcaliste dcaliste force-pushed the close branch 2 times, most recently from 48f097f to 4111f54 Compare July 8, 2022 13:52
@dcaliste
Copy link
Copy Markdown
Author

dcaliste commented Jul 8, 2022

Thank you @rainemak for your review and suggestions. I've updated the PR accordingly.

I'm a bit wondering though : do you prefer to have this code to TabItem.qml ? If so, I can do, no problem.

@rainemak
Copy link
Copy Markdown
Member

I guess rebase went wrong, maybe you rebased from master instead of next.

@dcaliste
Copy link
Copy Markdown
Author

Oops, stupid me. Corrected, now based on next, and not anymore 55 commit to push ;-)

color: down || activeTab ? root.highlightColor : Theme.primaryColor
}

IconButton {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I'd keep this close button as well until housekeeping mode has also re-organizing tabs functionality.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Ok, thanks. I understand your point now. I'll update the PR after my vacations are over, second half of August.

@dcaliste
Copy link
Copy Markdown
Author

It's now rebased with all remarks addressed (if I didn't missed any) and the close icon back on TabItem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants