Merge pull request #12636 from adobe/marcel/rework-tree-selection

zaggino · web-flow · commit 271943a80beb · 2016-08-16T16:38:04.000+10:00
Rework how file selection is shown
diff --git a/src/project/FileTreeView.js b/src/project/FileTreeView.js
@@ -827,16 +827,10 @@ define(function (require, exports, module) {
                 width = selectionViewInfo.get("width"),
                 scrollWidth = selectionViewInfo.get("scrollWidth");
 
-            // Avoid endless horizontal scrolling
-            if (left + width > scrollWidth) {
-                left = scrollWidth - width;
-            }
-
             return DOM.div({
                 style: {
                     overflow: "auto",
                     left: left,
-                    width: width,
                     display: this.props.visible ? "block" : "none"
                 },
                 className: this.props.className
diff --git a/src/project/ProjectManager.js b/src/project/ProjectManager.js
@@ -1163,7 +1163,7 @@ define(function (require, exports, module) {
      */
     function _setFileTreeSelectionWidth(width) {
         model.setSelectionWidth(width);
-        _renderTree();
+        _renderTreeSync();
     }
 
     // Initialize variables and listeners that depend on the HTML DOM
diff --git a/src/project/SidebarView.js b/src/project/SidebarView.js
@@ -186,27 +186,17 @@ define(function (require, exports, module) {
         $projectFilesContainer    = $sidebar.find("#project-files-container");
         $workingSetViewsContainer = $sidebar.find("#working-set-list-container");
 
-        function _resizeSidebarSelection() {
-            var $element;
-            $sidebar.find(".sidebar-selection").each(function (index, element) {
-                $element = $(element);
-                $element.width($element.parent()[0].scrollWidth);
-            });
-        }
-
         // init
         $sidebar.on("panelResizeStart", function (evt, width) {
             $sidebar.find(".sidebar-selection-extension").css("display", "none");
             $sidebar.find(".scroller-shadow").css("display", "none");
         });
 
         $sidebar.on("panelResizeUpdate", function (evt, width) {
-            $sidebar.find(".sidebar-selection").width(width);
             ProjectManager._setFileTreeSelectionWidth(width);
         });
 
         $sidebar.on("panelResizeEnd", function (evt, width) {
-            _resizeSidebarSelection();
             $sidebar.find(".sidebar-selection-extension").css("display", "block").css("left", width);
             $sidebar.find(".scroller-shadow").css("display", "block");
             $projectFilesContainer.triggerHandler("scroll");
@@ -219,7 +209,6 @@ define(function (require, exports, module) {
 
         $sidebar.on("panelExpanded", function (evt, width) {
             WorkingSetView.refresh();
-            _resizeSidebarSelection();
             $sidebar.find(".scroller-shadow").css("display", "block");
             $sidebar.find(".sidebar-selection-extension").css("left", width);
             $projectFilesContainer.triggerHandler("scroll");
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -968,6 +968,7 @@ a, img {
     border-bottom: 1px solid @bc-highlight;
     box-sizing: border-box;
     height: 23px;
+    width: 100%;
     position: absolute;
 }
 
@@ -998,6 +999,7 @@ a, img {
     box-sizing: border-box;
     position: absolute;
     height: 23px;
+    width: 100%;
 }
 
 //Initially start with the open files hidden, they will get show as files are added
diff --git a/src/utils/ViewUtils.js b/src/utils/ViewUtils.js
@@ -255,9 +255,6 @@ define(function (require, exports, module) {
                 // list item position is relative to scroller
                 var selectionMarkerTop = $listItem.offset().top - $scrollerElement.offset().top + $scrollerElement.get(0).scrollTop;
 
-                // force selection width to match scroller
-                $selectionMarker.width($scrollerElement.get(0).scrollWidth);
-
                 // move the selectionMarker position to align with the list item
                 $selectionMarker.css("top", selectionMarkerTop);
                 $selectionMarker.show();

Original file line number	Diff line number	Diff line change
`@@ -1163,7 +1163,7 @@ define(function (require, exports, module) {`
`1163`	`1163`	`*/`
`1164`	`1164`	`function _setFileTreeSelectionWidth(width) {`
`1165`	`1165`	`model.setSelectionWidth(width);`
`1166`		`- _renderTree();`
	`1166`	`+ _renderTreeSync();`
`1167`	`1167`	`}`
`1168`	`1168`
`1169`	`1169`	`// Initialize variables and listeners that depend on the HTML DOM`
Original file line number	Diff line number	Diff line change
`@@ -968,6 +968,7 @@ a, img {`
`968`	`968`	`border-bottom: 1px solid @bc-highlight;`
`969`	`969`	`box-sizing: border-box;`
`970`	`970`	`height: 23px;`
	`971`	`+ width: 100%;`
`971`	`972`	`position: absolute;`
`972`	`973`	`}`
`973`	`974`
`@@ -998,6 +999,7 @@ a, img {`
`998`	`999`	`box-sizing: border-box;`
`999`	`1000`	`position: absolute;`
`1000`	`1001`	`height: 23px;`
	`1002`	`+ width: 100%;`
`1001`	`1003`	`}`
`1002`	`1004`
`1003`	`1005`	`//Initially start with the open files hidden, they will get show as files are added`