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

src/htmlContent/pane.html

@@ -1,5 +1,9 @@
 <div id="{{id}}" class="view-pane">
-    <div class="pane-header"></div>
+    <div class="pane-header">
+        <div class="pane-header-text"></div>
+        <div class="pane-header-flipview-btn flipview-icon-none"></div>
+        <div class="pane-header-close-btn file-status-icon can-close"></div>
+    </div>
     <div class="pane-content">
         <div class="not-editor"></div>
     </div>

src/nls/root/strings.js

@@ -461,7 +461,10 @@ define({
     "BASEURL_ERROR_HASH_DISALLOWED"        : "The base URL can't contain hashes like \"{0}\".",
     "BASEURL_ERROR_INVALID_CHAR"           : "Special characters like '{0}' must be %-encoded.",
     "BASEURL_ERROR_UNKNOWN_ERROR"          : "Unknown error parsing Base URL",
+
+    //Strings for Pane.js
     "EMPTY_VIEW_HEADER"                    : "<em>Open a file while this pane has focus</em>",
+    "FLIPVIEW_BTN_TOOLTIP"                 : "Flip this view to {0} pane",
 
     // Strings for themes-settings.html and themes-general.html
     "CURRENT_THEME"                        : "Current Theme",
@@ -767,6 +770,8 @@ define({
     "DESCRIPTION_FONT_SMOOTHING"                     : "Mac-only: \"subpixel-antialiased\" to enable sub-pixel antialiasing or \"antialiased\" for gray scale antialiasing",
     "DESCRIPTION_OPEN_PREFS_IN_SPLIT_VIEW"           : "false to disable opening preferences file in split view",
     "DESCRIPTION_OPEN_USER_PREFS_IN_SECOND_PANE"     : "false to open user preferences file in left/top pane",
+    "DESCRIPTION_MERGE_PANES_WHEN_LAST_FILE_CLOSED"  : "true to collapse panes after the last file from the pane is closed via pane header close button",
+    "DESCRIPTION_SHOW_PANE_HEADER_BUTTONS"           : "Toggle when to show the close and flip-view buttons on the header.",
     "DEFAULT_PREFERENCES_JSON_HEADER_COMMENT"        : "/*\n * This is a read-only file with the preferences supported\n * by {APP_NAME}.\n * Use this file as a reference to modify your preferences\n * file \"brackets.json\" opened in the other pane.\n * For more information on how to use preferences inside\n * {APP_NAME}, refer to the web page at https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#preferences\n */",
     "DEFAULT_PREFERENCES_JSON_DEFAULT"               : "Default"
 });

src/styles/brackets.less

@@ -486,12 +486,97 @@ a, img {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-
+
+        &-text {
+            display: inline;
+        }
+
         .dark & {
             background-color: #1d1f21; // not using a variable on purpose.
             border-bottom-color: rgba(255, 255, 255, 0.05);
         }
+
+        &-flipview-btn {
+            position: relative;
+            display: none;
+            top: 0px;
+            padding-top: 2px;
+            padding-right: 4px;
+            padding-left: 4px;
+            margin-left: 0;
+            margin-bottom: 0;
+            .sprite-icon(0, 0, 13px, 13px, "images/flip-view-icons.svg");
+            background-origin: content-box;
+            -webkit-transform: translateZ(0); // forces GPU mode for better filter rendering on retina
+            transform: translateZ(0); // future proofing
+            -webkit-filter: drop-shadow(0 1px 0 rgba(0,0,0,0.36));
+            filter: drop-shadow(0 1px 0 rgba(0,0,0,0.36));
+            z-index: 1;
+            vertical-align: middle;
+
+            &:hover {
+                background-image: url("images/flip-view-icons-hover.svg")
+            }
+
+            &.flipview-icon-none {
+                display: none;
+            }
+
+            &.flipview-icon-top {
+                background-position: center 1px;
+            }
+
+            &.flipview-icon-right {
+                background-position: center -18px;
+            }
+
+            &.flipview-icon-bottom {
+                background-position: center -35px;
+            }
+
+            &.flipview-icon-left {
+                background-position: center -54px;
+            }
+        }
+
+        &-close-btn {
+            position: relative;
+            display: none;
+            height: 16px;
+            width: 16px;
+            float: right;
+            margin-top: -2px;
+
+            &:before {
+                color: rgba(0, 0, 0, 0.5);
+            }
+
+            &:hover:before {
+                color: rgba(0, 0, 0, 0.8);
+            }
+
+            .dark & {
+                &:before {
+                    color: rgba(255, 255, 255, 0.5);
+                }
+
+                &:hover:before {
+                    color: rgba(255, 255, 255, 0.8);
+                }
+            }
+        }
+
+        &:hover, &.always-show-header-buttons {
+            > .pane-header-flipview-btn:not(.flipview-icon-none) {
+                display: inline-block;
+            }
+
+            > .pane-header-close-btn {
+                display: inline;
+            }
+        }
     }
+
     .active-pane {
 
         .pane-header {
@@ -755,6 +840,7 @@ a, img {
     -webkit-filter: drop-shadow(0 1px 0 rgba(0,0,0,0.36));
     z-index: 1;
 }
+
 .splitview-icon-none {
     background-position: center 1px;
 }
@@ -765,6 +851,8 @@ a, img {
     background-position: center -41px;
 }
 
+
+
 // Show splitview icons on the button's dropdown menu too
 #splitview-menu ul.dropdown-menu > li {
     .menu-name::before {