[New feature] Add flip-view and close buttons to pane-headers #11749

petetnt · 2015-09-27T13:45:15Z

This new feature improves the Splitscreen UX by adding buttons to panel headers that allow user to quickly flip the current view to another pane. It's not a complete solution, but another alternative to dragging the files over to another panel which can be a bit cumbersome, as evidenced in #11308, #11448, #11345 and others.

When Split View is enabled, arrow buttons are added to the panel that indicate flipping

Clicking such button flips the view to the other panel, revealing the last used file in the pane it was flipped from

If there's no files open in the new other pane, the button obviously isn't there

This of course works in vertical split mode too:

The first commit doesn't include unit tests because Jasmine Spec Runner won't work for whatever reason: while I am looking at that issue, any feedback, improvements or questions are welcome.

~~edit: Build failed because the API rate limit exceeded~~

edit: 2
The panes now contain a close buttons too as similar to what @zaggino suggested.

Clicking the x closes the file, or prompts for confirmation if a file is dirty. If pane contains no files, the close button collapses the views by setting the layout scheme to 1x1

zaggino · 2015-09-27T22:02:24Z

Love it, gave me an idea -> X mark in the corner to close split view quickly (one click instead of two), would solve my #11746 problem.

le717 · 2015-09-28T01:48:05Z

src/view/Pane.js

@@ -159,17 +159,33 @@ define(function (require, exports, module) {
        EventDispatcher     = require("utils/EventDispatcher"),
        FileSystem          = require("filesystem/FileSystem"),
        InMemoryFile        = require("document/InMemoryFile"),
+        //WorkingSetView      = require("project/WorkingSetView"),


Forget to remove a line?

petetnt · 2015-09-28T05:34:29Z

@zaggino yeah that is an great idea to me!

…-buttons

petetnt · 2015-10-06T18:27:23Z

Added an unit test

petetnt · 2015-10-11T10:56:46Z

The panes now contain a close buttons too as similar to what @zaggino suggested.

Clicking the x closes the file, or prompts for confirmation if a file is dirty. If pane contains no files, the close button collapses the views by setting the layout scheme to 1x1

zaggino · 2015-10-12T04:47:50Z

few comments:

i like how the close highlights when hovered, can you make the same with the arrows? right now arrow icon doesn't highlight but some weird border around it highlights
the icons doesn't have to be there all the time, maybe they can appear only when I hover over the title area? (i mean the .pane-header element)
when i click close icon on the last file in the right panel, it doesn't close but i have to click again to close the empty panel? <- this actually might be a feature, not a problem, just saying
if i have one file in the left panel and one file in the right panel, when i close the left file and then close the left pane, the right file disappears (it works fine closing the right panel, left file stays open)

petetnt · 2015-10-12T05:26:33Z

Thanks for the comments @zaggino. I'll look into those asap, esp. 4), not sure what's up with that 🔨 It seems that getCurrentlyViewedFile() returns the file in the active pane and just clicking on the x doesn't active the pane itself -> wrong file closes.

I was putting some behavior for 2) and 3) behind some prefs: hover, always and off for the panel buttons (default being hover) and something like CLOSE_PANE_AFTER_LAST for the panes:

zaggino · 2015-10-12T06:24:37Z

Ah right, I didn't read the code before testing this so I didn't knew about the various preferences. But show on hover seems to be reasonable default.

petetnt · 2015-10-12T07:47:46Z

@zaggino You didn't miss anything, the prefs haven't been implemented yet :)

zaggino · 2015-10-12T11:50:59Z

Ah right, keep the work coming then, it'd be great to see this in 1.6 :)

petetnt · 2015-10-12T19:26:45Z

Made additions and modifications according to @zaggino 's comments

Unified hover styles for the flip view buttons
Added preferences for showing the buttons and collapsing the pane after last file is closed
Fixed bug where close button would close the wrong file if the panel was not active

sprintr · 2015-10-12T20:49:02Z

src/view/Pane.js

+    // Define showPaneHeaderButtons, which controls when to show close and flip-view buttons
+    // on the header. Possible values "hover", "always" and "never"
+    PreferencesManager.definePreference("pane.showPaneHeaderButtons", "string", "hover", {
+        description: Strings.DESCRIPTION_SHOW_PANE_HEADER_BUTTONS


You seems to have forgotten to add "hover" "always" "never" to values array here so it can be shown in the hints.

Thanks @sprintr , fixed that.

…commentary

abose · 2015-10-15T07:40:19Z

@petetnt I can't see the close button when i tested this out. Do I need to do something more to enable close butoon?

petetnt · 2015-10-15T07:45:27Z

@abose good catch, the close button is there but you cannot see it when you are using a light theme such as Brackets default. Didn't test it out on a lighter theme after adding the close button, will fix asap

petetnt · 2015-10-15T07:59:26Z

@abose It's now fixed 🔨

abose · 2015-10-15T09:49:32Z

works now 😎

When a pane is empty, the flip button seems to be confused.

petetnt · 2015-10-15T09:59:11Z

@abose fixed that regression (nitpicky CSS inheriting 🚒).

abose · 2015-10-15T10:41:34Z

Thanks for this feature @petetnt .
All unit/integration tests passing. LGTM.
When this is ok to be merged, Please remove the [review] tag from the title.

petetnt · 2015-10-15T10:51:07Z

Ready to be merged as far as I am concerned unless others have something else to add.

[New feature] Add flip-view and close buttons to pane-headers

abose · 2015-10-15T11:21:26Z

Thanks @zaggino @sprintr @le717 for reviewing.
Merging.

petetnt · 2015-10-15T11:32:35Z

🎆 🎉 👍

zaggino · 2015-10-15T11:37:44Z

cool stuff, nice work @petetnt ;)

arctwelve · 2016-01-20T22:37:20Z

@petetnt Congrats on the new feature.

Add flip-view buttons to panel headers

b2ddf06

le717 reviewed Sep 28, 2015
View reviewed changes

Remove commented out line, add non-vendor prefixed filter

8a8d343

abose added this to the Release 1.6 milestone Sep 28, 2015

abose added the medium priority label Sep 29, 2015

petetnt added 3 commits October 4, 2015 17:16

Merge remote-tracking branch 'upstream/master' into petetnt/flip-view…

fe6c0df

…-buttons

Merge remote-tracking branch 'upstream/master' into petetnt/flip-view…

ac4ec57

…-buttons

Added unit test

11905f4

Added close button for split view panes

58e30c2

petetnt changed the title ~~[REVIEW][New feature] Add flip-view buttons to pane-headers~~ [REVIEW][New feature] Add flip-view and close buttons to pane-headers Oct 11, 2015

Modify button styles, add preferences, fix close button bug

cb7fa06

sprintr reviewed Oct 12, 2015
View reviewed changes

Add possible values for the pane header button pref, remove unneeded …

443aeb1

…commentary

Ensure that header close button is visible on lighter themes

3ef3b19

Fix regression with .flipview-icon-none caused by the 'always'-pref

750d2bd

petetnt changed the title ~~[REVIEW][New feature] Add flip-view and close buttons to pane-headers~~ [New feature] Add flip-view and close buttons to pane-headers Oct 15, 2015

abose added a commit that referenced this pull request Oct 15, 2015

Merge pull request #11749 from petetnt/petetnt/flip-view-buttons

40ad8e9

[New feature] Add flip-view and close buttons to pane-headers

abose merged commit 40ad8e9 into adobe:master Oct 15, 2015

petetnt deleted the petetnt/flip-view-buttons branch October 15, 2015 11:32

petetnt mentioned this pull request Oct 15, 2015

Split View (Same Document) #11820

Merged

2 tasks

adriennn mentioned this pull request Jan 29, 2016

Weird issue when closing tabs #12162

Closed

petetnt mentioned this pull request Feb 16, 2017

feature: close split view automatically #11746

Closed

This was referenced Aug 30, 2021

[CLOSED] [New feature] Add flip-view and close buttons to pane-headers brackets-archive/bracketsIssues#10168

Open

[CLOSED] Weird issue when closing tabs brackets-archive/bracketsIssues#10459

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[New feature] Add flip-view and close buttons to pane-headers #11749

[New feature] Add flip-view and close buttons to pane-headers #11749

petetnt commented Sep 27, 2015

zaggino commented Sep 27, 2015

le717 Sep 28, 2015

petetnt commented Sep 28, 2015

petetnt commented Oct 6, 2015

petetnt commented Oct 11, 2015

zaggino commented Oct 12, 2015

petetnt commented Oct 12, 2015

zaggino commented Oct 12, 2015

petetnt commented Oct 12, 2015

zaggino commented Oct 12, 2015

petetnt commented Oct 12, 2015

sprintr Oct 12, 2015

petetnt Oct 13, 2015

abose commented Oct 15, 2015

petetnt commented Oct 15, 2015

petetnt commented Oct 15, 2015

abose commented Oct 15, 2015

petetnt commented Oct 15, 2015

abose commented Oct 15, 2015

petetnt commented Oct 15, 2015

abose commented Oct 15, 2015

petetnt commented Oct 15, 2015

zaggino commented Oct 15, 2015

arctwelve commented Jan 20, 2016

[New feature] Add flip-view and close buttons to pane-headers #11749

[New feature] Add flip-view and close buttons to pane-headers #11749

Conversation

petetnt commented Sep 27, 2015

zaggino commented Sep 27, 2015

le717 Sep 28, 2015

Choose a reason for hiding this comment

petetnt commented Sep 28, 2015

petetnt commented Oct 6, 2015

petetnt commented Oct 11, 2015

zaggino commented Oct 12, 2015

petetnt commented Oct 12, 2015

zaggino commented Oct 12, 2015

petetnt commented Oct 12, 2015

zaggino commented Oct 12, 2015

petetnt commented Oct 12, 2015

sprintr Oct 12, 2015

Choose a reason for hiding this comment

petetnt Oct 13, 2015

Choose a reason for hiding this comment

abose commented Oct 15, 2015

petetnt commented Oct 15, 2015

petetnt commented Oct 15, 2015

abose commented Oct 15, 2015

petetnt commented Oct 15, 2015

abose commented Oct 15, 2015

petetnt commented Oct 15, 2015

abose commented Oct 15, 2015

petetnt commented Oct 15, 2015

zaggino commented Oct 15, 2015

arctwelve commented Jan 20, 2016