styling: TreeWidget Node display change

This commit changes how nodes are displayed to bring the selected node display in line with VS Code Signed-Off-By: FernandoAscencio <[email protected]>
eclipse-theia · Jun 30, 2023 · 95528a2 · 95528a2
1 parent 5bccaf2
commit 95528a2
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/packages/scm/src/browser/scm-tree-widget.tsx b/packages/scm/src/browser/scm-tree-widget.tsx
@@ -436,6 +436,10 @@ export class ScmTreeWidget extends TreeWidget {
         return super.getPaddingLeft(node, props);
     }
 
+    protected override getDepthPadding(depth: number): number {
+        return super.getDepthPadding(depth) + 5;
+    }
+
     protected override needsExpansionTogglePadding(node: TreeNode): boolean {
         const theme = this.iconThemeService.getDefinition(this.iconThemeService.current);
         if (theme && (theme.hidesExplorerArrows || (theme.hasFileIcons && !theme.hasFolderIcons))) {

diff --git a/packages/scm/src/browser/style/index.css b/packages/scm/src/browser/style/index.css
@@ -19,18 +19,14 @@
     font-size: var(--theia-ui-font-size1);
     max-height: calc(100% - var(--theia-border-width));
     position: relative;
+    padding: 5px 5px 0px 19px;
 }
 
 .theia-scm {
-    padding: 5px;
     box-sizing: border-box;
     height: 100%;
 }
 
-.theia-side-panel .theia-scm {
-    padding-left: 19px;
-}
-
 .groups-outer-container:focus {
     outline: 0;
     box-shadow: none;

diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
@@ -718,6 +718,10 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
         };
     }
 
+    protected override getDepthPadding(depth: number): number {
+        return super.getDepthPadding(depth) + 5;
+    }
+
     protected override renderCaption(node: TreeNode, props: NodeProps): React.ReactNode {
         if (SearchInWorkspaceRootFolderNode.is(node)) {
             return this.renderRootFolderNode(node);

diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
@@ -23,7 +23,7 @@
 }
 
 .t-siw-search-container {
-    padding: 5px ;
+    padding: 0px 1px ;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -52,8 +52,7 @@
 }
 
 .t-siw-search-container .searchHeader {
-    width: 100%;
-    margin-bottom:  10px;
+    padding: 5px 5px 15px 2px;
 }
 
 .t-siw-search-container .searchHeader .controls.button-container {
@@ -195,7 +194,6 @@
 
 .t-siw-search-container .resultContainer {
     height: 100%;
-    margin-left: 13px;
 }
 
 .t-siw-search-container .result {