Update Open Editors widget UI (eclipse-theia#10940)

eclipsesource · Jun 2, 2022 · 9b1f414 · 9b1f414
1 parent a6f438c
commit 9b1f414
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/packages/navigator/src/browser/open-editors-widget/navigator-open-editors-tree-model.ts b/packages/navigator/src/browser/open-editors-widget/navigator-open-editors-tree-model.ts
@@ -30,7 +30,7 @@ import {
 } from '@theia/core/lib/browser';
 import { WorkspaceService } from '@theia/workspace/lib/browser';
 import debounce = require('@theia/core/shared/lodash.debounce');
-import { DisposableCollection } from '@theia/core/lib/common';
+import { DisposableCollection, nls } from '@theia/core/lib/common';
 import { FileStat } from '@theia/filesystem/lib/common/files';
 
 export interface OpenEditorNode extends FileStatNode {
@@ -157,7 +157,7 @@ export class OpenEditorsModel extends FileTreeModel {
         if (mainTabBars.length > 1) {
             mainTabBars.forEach((tabbar, index) => {
                 const groupNumber = index + 1;
-                const newCaption = `GROUP ${groupNumber}`;
+                const newCaption = nls.localizeByDefault('Group {0}', groupNumber);
                 const groupNode = {
                     parent: undefined,
                     id: `${OpenEditorsModel.GROUP_NODE_ID_PREFIX}:${groupNumber}`,

diff --git a/packages/navigator/src/browser/open-editors-widget/navigator-open-editors-widget.tsx b/packages/navigator/src/browser/open-editors-widget/navigator-open-editors-widget.tsx
@@ -18,6 +18,7 @@ import * as React from '@theia/core/shared/react';
 import { injectable, interfaces, Container, postConstruct, inject } from '@theia/core/shared/inversify';
 import {
     ApplicationShell,
+    codicon,
     ContextMenuRenderer,
     defaultTreeProps,
     NavigatableWidget,
@@ -46,6 +47,7 @@ export const OPEN_EDITORS_PROPS: TreeProps = {
     ...defaultTreeProps,
     virtualized: false,
     contextMenuPath: OPEN_EDITORS_CONTEXT_MENU,
+    leftPadding: 22
 };
 
 export interface OpenEditorsNodeRow extends TreeWidget.NodeRow {
@@ -120,7 +122,7 @@ export class OpenEditorsWidget extends FileTreeWidget {
             {this.renderCaptionAffixes(node, props, 'captionSuffixes')}
             {this.renderTailDecorations(node, props)}
             {(this.isGroupNode(node) || this.isAreaNode(node)) && this.renderInteractables(node, props)}
-        </div >;
+        </div>;
         return React.createElement('div', attributes, content);
     }
 
@@ -229,11 +231,11 @@ export class OpenEditorsWidget extends FileTreeWidget {
         return (
             <div className='open-editors-prefix-icon-container'>
                 <div data-id={node.id}
-                    className='open-editors-prefix-icon dirty codicon codicon-circle-filled'
+                    className={`open-editors-prefix-icon dirty ${codicon('circle-filled', true)}`}
                 />
                 <div data-id={node.id}
                     onClick={this.closeEditor}
-                    className='open-editors-prefix-icon close codicon codicon-close'
+                    className={`open-editors-prefix-icon close ${codicon('close', true)}`}
                 />
             </div>);
     }
@@ -270,4 +272,11 @@ export class OpenEditorsWidget extends FileTreeWidget {
             this.applicationShell.activateWidget(node.widget.id);
         }
     }
+
+    protected override getPaddingLeft(node: TreeNode): number {
+        if (node.id.startsWith(OpenEditorsModel.AREA_NODE_ID_PREFIX)) {
+            return 0;
+        }
+        return this.props.leftPadding;
+    }
 }
diff --git a/packages/navigator/src/browser/open-editors-widget/open-editors.css b/packages/navigator/src/browser/open-editors-widget/open-editors.css
@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 :root {
-    --theia-open-editors-icon-width: 16px;
+    --theia-open-editors-icon-width: 20px;
 }
 
 .theia-open-editors-widget .theia-caption-suffix {
@@ -40,6 +40,7 @@
     display: none;
 }
 
+.theia-open-editors-widget .open-editors-node-row:not(.dirty) .theia-mod-selected .open-editors-prefix-icon.close,
 .theia-open-editors-widget .open-editors-node-row:hover .open-editors-prefix-icon.close {
     display: block;
 }