Update Open Editors widget UI

eclipse-theia · Apr 13, 2022 · bb856a2 · bb856a2
1 parent 07dcfbd
commit bb856a2
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/packages/core/src/browser/style/tree.css b/packages/core/src/browser/style/tree.css
@@ -92,6 +92,8 @@
 .theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected {
     background: var(--theia-list-activeSelectionBackground);
     color: var(--theia-list-activeSelectionForeground) !important;
+    outline: 1px solid var(--theia-focusBorder);
+    outline-offset: -1px;
 }
 
 .theia-Tree:focus .theia-TreeNode.theia-mod-selected .theia-TreeNodeTail,

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,
@@ -117,7 +118,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);
     }
 
@@ -196,11 +197,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>);
     }
@@ -224,7 +225,7 @@ export class OpenEditorsWidget extends FileTreeWidget {
     protected override handleClickEvent(node: OpenEditorNode | undefined, event: React.MouseEvent<HTMLElement>): void {
         if (OpenEditorNode.is(node)) {
             const { widget } = node;
-            this.applicationShell.activateWidget(widget.id);
+            this.applicationShell.revealWidget(widget.id);
         }
         super.handleClickEvent(node, event);
     }

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;
 }