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

abose · abose · commit 40ad8e9341f2 · 2015-10-15T16:51:23.000+05:30
[New feature] Add flip-view and close buttons to pane-headers
diff --git a/src/htmlContent/pane.html b/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>
diff --git a/src/nls/root/strings.js b/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"
 });
diff --git a/src/styles/brackets.less b/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 {
diff --git a/src/styles/images/flip-view-icons-dark.svg b/src/styles/images/flip-view-icons-dark.svg
@@ -0,0 +1,67 @@
+<svg
+   xmlns:svg="https://www.w3.org/2000/svg"
+   xmlns="https://www.w3.org/2000/svg"
+   version="1.1"
+   height="65"
+   width="13">
+  <g
+     id="g3383">
+    <path
+       style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 9.010922,4.6415518 -5,0 2.4921429,-3 2.5078571,3 z"
+       id="Fill-3" />
+    <path
+       style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 6.9916215,2.5793407 -1,0 0,6.4442021 1,0"
+       id="Fill-5" />
+    <path
+       style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:1"
+       id="path12"
+       d="m 0.01923122,0.02354276 0,11.00000024 12.99999978,0 0,-11.00000024 -12.99999978,0 z m 0.99999998,1.00000004 0,9.0000002 10.9999998,0 0,-9.0000002 -10.9999998,0 z" />
+  </g>
+  <g
+     id="g3368">
+    <path
+       style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:1"
+       id="path3397"
+       d="m 5.0238171,57.01534 0,5 -2.9999995,-2.492143 2.9999995,-2.507857 z" />
+    <path
+       style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:1"
+       id="path3399"
+       d="m 4.0238171,59.01534 0,1 7.0000009,0 0,-1" />
+    <path
+       style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 0.01923077,54.01534 0,11 13.00000123,0 0,-11 -13.00000123,0 z m 1.00000003,1 0,9 11.0000012,0 0,-9 -11.0000012,0 z"
+       id="path3401" />
+  </g>
+  <g
+     id="g3378">
+    <path
+       style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 7.923872,21.270134 0,5 3,-2.492143 -3,-2.507857 z"
+       id="Fill-3-5" />
+    <path
+       style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 8.923872,23.270134 0,1 -7,0 0,-1"
+       id="Fill-5-9" />
+    <path
+       id="path12-2"
+       d="m 0.03962227,18.029462 0,10.999999 13.00000073,0 0,-10.999999 -13.00000073,0 z m 1.00000003,1 0,8.999999 11.0000007,0 0,-8.999999 -11.0000006,0 z"
+       style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:1" />
+  </g>
+  <g
+     id="g3373">
+    <path
+       style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 0.03962227,36.033962 0,11.000001 13.00000073,0 0,-11.000001 -13.00000073,0 z m 1.00000003,1 0,9.000001 11.0000007,0 0,-9.000001 -11.0000006,0 z"
+       id="path3401-1" />
+    <path
+       style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 9.0059934,42.385946 -5.0000066,0 2.492143,3 2.5078636,-3 z"
+       id="Fill-3-0" />
+    <path
+       style="fill:#cccccc;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 6.9457499,44.448157 -1,0 0,-6.444202 1,0"
+       id="Fill-5-6" />
+  </g>
+</svg>
diff --git a/src/styles/images/flip-view-icons-hover.svg b/src/styles/images/flip-view-icons-hover.svg
@@ -0,0 +1,67 @@
+<svg
+   xmlns:svg="https://www.w3.org/2000/svg"
+   xmlns="https://www.w3.org/2000/svg"
+   version="1.1"
+   height="65"
+   width="13">
+  <g
+     id="g3383">
+    <path
+       style="fill:#a0a0a0;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 9.010922,4.6415518 -5,0 2.4921429,-3 2.5078571,3 z"
+       id="Fill-3" />
+    <path
+       style="fill:#a0a0a0;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 6.9916215,2.5793407 -1,0 0,6.4442021 1,0"
+       id="Fill-5" />
+    <path
+       style="fill:#a0a0a0;fill-rule:evenodd;stroke:none;stroke-width:1"
+       id="path12"
+       d="m 0.01923122,0.02354276 0,11.00000024 12.99999978,0 0,-11.00000024 -12.99999978,0 z m 0.99999998,1.00000004 0,9.0000002 10.9999998,0 0,-9.0000002 -10.9999998,0 z" />
+  </g>
+  <g
+     id="g3368">
+    <path
+       style="fill:#a0a0a0;fill-rule:evenodd;stroke:none;stroke-width:1"
+       id="path3397"
+       d="m 5.0238171,57.01534 0,5 -2.9999995,-2.492143 2.9999995,-2.507857 z" />
+    <path
+       style="fill:#a0a0a0;fill-rule:evenodd;stroke:none;stroke-width:1"
+       id="path3399"
+       d="m 4.0238171,59.01534 0,1 7.0000009,0 0,-1" />
+    <path
+       style="fill:#a0a0a0;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 0.01923077,54.01534 0,11 13.00000123,0 0,-11 -13.00000123,0 z m 1.00000003,1 0,9 11.0000012,0 0,-9 -11.0000012,0 z"
+       id="path3401" />
+  </g>
+  <g
+     id="g3378">
+    <path
+       style="fill:#a0a0a0;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 7.923872,21.270134 0,5 3,-2.492143 -3,-2.507857 z"
+       id="Fill-3-5" />
+    <path
+       style="fill:#a0a0a0;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 8.923872,23.270134 0,1 -7,0 0,-1"
+       id="Fill-5-9" />
+    <path
+       id="path12-2"
+       d="m 0.03962227,18.029462 0,10.999999 13.00000073,0 0,-10.999999 -13.00000073,0 z m 1.00000003,1 0,8.999999 11.0000007,0 0,-8.999999 -11.0000006,0 z"
+       style="fill:#a0a0a0;fill-rule:evenodd;stroke:none;stroke-width:1" />
+  </g>
+  <g
+     id="g3373">
+    <path
+       style="fill:#a0a0a0;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 0.03962227,36.033962 0,11.000001 13.00000073,0 0,-11.000001 -13.00000073,0 z m 1.00000003,1 0,9.000001 11.0000007,0 0,-9.000001 -11.0000006,0 z"
+       id="path3401-1" />
+    <path
+       style="fill:#a0a0a0;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 9.0059934,42.385946 -5.0000066,0 2.492143,3 2.5078636,-3 z"
+       id="Fill-3-0" />
+    <path
+       style="fill:#a0a0a0;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 6.9457499,44.448157 -1,0 0,-6.444202 1,0"
+       id="Fill-5-6" />
+  </g>
+</svg>
diff --git a/src/styles/images/flip-view-icons.svg b/src/styles/images/flip-view-icons.svg
@@ -0,0 +1,67 @@
+<svg
+   xmlns:svg="https://www.w3.org/2000/svg"
+   xmlns="https://www.w3.org/2000/svg"
+   version="1.1"
+   height="65"
+   width="13">
+  <g
+     id="g3383">
+    <path
+       style="fill:#6c7478;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 9.010922,4.6415518 -5,0 2.4921429,-3 2.5078571,3 z"
+       id="Fill-3" />
+    <path
+       style="fill:#6c7478;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 6.9916215,2.5793407 -1,0 0,6.4442021 1,0"
+       id="Fill-5" />
+    <path
+       style="fill:#6c7478;fill-rule:evenodd;stroke:none;stroke-width:1"
+       id="path12"
+       d="m 0.01923122,0.02354276 0,11.00000024 12.99999978,0 0,-11.00000024 -12.99999978,0 z m 0.99999998,1.00000004 0,9.0000002 10.9999998,0 0,-9.0000002 -10.9999998,0 z" />
+  </g>
+  <g
+     id="g3368">
+    <path
+       style="fill:#6c7478;fill-rule:evenodd;stroke:none;stroke-width:1"
+       id="path3397"
+       d="m 5.0238171,57.01534 0,5 -2.9999995,-2.492143 2.9999995,-2.507857 z" />
+    <path
+       style="fill:#6c7478;fill-rule:evenodd;stroke:none;stroke-width:1"
+       id="path3399"
+       d="m 4.0238171,59.01534 0,1 7.0000009,0 0,-1" />
+    <path
+       style="fill:#6c7478;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 0.01923077,54.01534 0,11 13.00000123,0 0,-11 -13.00000123,0 z m 1.00000003,1 0,9 11.0000012,0 0,-9 -11.0000012,0 z"
+       id="path3401" />
+  </g>
+  <g
+     id="g3378">
+    <path
+       style="fill:#6c7478;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 7.923872,21.270134 0,5 3,-2.492143 -3,-2.507857 z"
+       id="Fill-3-5" />
+    <path
+       style="fill:#6c7478;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 8.923872,23.270134 0,1 -7,0 0,-1"
+       id="Fill-5-9" />
+    <path
+       id="path12-2"
+       d="m 0.03962227,18.029462 0,10.999999 13.00000073,0 0,-10.999999 -13.00000073,0 z m 1.00000003,1 0,8.999999 11.0000007,0 0,-8.999999 -11.0000006,0 z"
+       style="fill:#6c7478;fill-rule:evenodd;stroke:none;stroke-width:1" />
+  </g>
+  <g
+     id="g3373">
+    <path
+       style="fill:#6c7478;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 0.03962227,36.033962 0,11.000001 13.00000073,0 0,-11.000001 -13.00000073,0 z m 1.00000003,1 0,9.000001 11.0000007,0 0,-9.000001 -11.0000006,0 z"
+       id="path3401-1" />
+    <path
+       style="fill:#6c7478;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 9.0059934,42.385946 -5.0000066,0 2.492143,3 2.5078636,-3 z"
+       id="Fill-3-0" />
+    <path
+       style="fill:#6c7478;fill-rule:evenodd;stroke:none;stroke-width:1"
+       d="m 6.9457499,44.448157 -1,0 0,-6.444202 1,0"
+       id="Fill-5-6" />
+  </g>
+</svg>
diff --git a/src/view/Pane.js b/src/view/Pane.js
diff --git a/test/spec/MainViewManager-test.js b/test/spec/MainViewManager-test.js
