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 <fernando.ascencio.cama@ericsson.com>
eclipse-theia · Jul 5, 2023 · a26e9f1 · a26e9f1
1 parent 21fa2ec
commit a26e9f1
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
@@ -445,6 +445,10 @@ export class ScmTreeWidget extends TreeWidget {
         return super.getPaddingLeft(node, props);
     }
 
+    protected override getDepthPadding(depth: number): number {
+        return super.getDepthPadding(depth) + 5;
+    }
+
     protected isCurrentThemeLight(): boolean {
         const type = this.themeService.getCurrentTheme().type;
         return type.toLocaleLowerCase().includes('light');

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 {
@@ -206,7 +205,6 @@
 
 .t-siw-search-container .resultContainer {
   height: 100%;
-  margin-left: 13px;
 }
 
 .t-siw-search-container .result {