add enter key event handler and focus style to open button in navigator

Signed-off-by: kpge <gekangping@126.com>
eclipse-theia · Sep 11, 2019 · c9a6216 · c9a6216
1 parent 57be198
commit c9a6216
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 19 deletions.
diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css
@@ -130,17 +130,14 @@ button.theia-button, .theia-button {
     min-width: 65px;
     outline: none;
     cursor: pointer;
-    padding-left: 9px;
-    padding-right: 9px;
-    padding-top: 4px;
-    padding-bottom: 4px;
+    padding: 4px 9px;
     margin-left: calc(var(--theia-ui-padding)*2);
     border-radius: 1px;
     box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 1px -2px rgba(0, 0, 0, 0.12);
     transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-button.theia-button:hover, .theia-button:hover {
+button.theia-button:hover, .theia-button:hover, .theia-button:focus {
   background-color: var(--theia-ui-button-color-hover);
 }
 

diff --git a/packages/navigator/src/browser/navigator-contribution.ts b/packages/navigator/src/browser/navigator-contribution.ts
@@ -188,6 +188,8 @@ export class FileNavigatorContribution extends AbstractViewContribution<FileNavi
             isVisible: () => true
         });
         registry.registerCommand(FileNavigatorCommands.TOGGLE_AUTO_REVEAL, {
+            isEnabled: widget => this.withWidget(widget, () => this.workspaceService.opened),
+            isVisible: widget => this.withWidget(widget, () => this.workspaceService.opened),
             execute: () => {
                 const autoReveal = !this.fileNavigatorPreferences['explorer.autoReveal'];
                 this.preferenceService.set('explorer.autoReveal', autoReveal, PreferenceScope.User);

diff --git a/packages/navigator/src/browser/navigator-widget.tsx b/packages/navigator/src/browser/navigator-widget.tsx
@@ -18,7 +18,7 @@ import { injectable, inject, postConstruct } from 'inversify';
 import { Message } from '@phosphor/messaging';
 import URI from '@theia/core/lib/common/uri';
 import { CommandService, SelectionService } from '@theia/core/lib/common';
-import { CommonCommands, CorePreferences, LabelProvider, ViewContainerTitleOptions } from '@theia/core/lib/browser';
+import { CommonCommands, CorePreferences, LabelProvider, ViewContainerTitleOptions, Key } from '@theia/core/lib/browser';
 import {
     ContextMenuRenderer, ExpandableTreeNode,
     TreeProps, TreeModel, TreeNode,
@@ -215,6 +215,11 @@ export class FileNavigatorWidget extends FileTreeWidget {
         this.commandService.executeCommand(WorkspaceCommands.OPEN_FOLDER.id);
     }
 
+    protected readonly keyUpHandler = (e: React.KeyboardEvent) => {
+        if (Key.ENTER.keyCode === e.keyCode) {
+            (e.target as HTMLElement).click();
+        }
+    }
     /**
      * Instead of rendering the file resources from the workspace, we render a placeholder
      * button when the workspace root is not yet set.
@@ -223,11 +228,13 @@ export class FileNavigatorWidget extends FileTreeWidget {
         let openButton;
 
         if (this.canOpenWorkspaceFileAndFolder) {
-            openButton = <button className='open-workspace-button' title='Select a folder or a workspace-file to open as your workspace' onClick={this.openWorkspace}>
+            openButton = <button className='theia-button open-workspace-button' title='Select a folder or a workspace-file to open as your workspace'
+                onClick={this.openWorkspace} onKeyUp={this.keyUpHandler}>
                 Open Workspace
             </button>;
         } else {
-            openButton = <button className='open-workspace-button' title='Select a folder as your workspace root' onClick={this.openFolder}>
+            openButton = <button className='theia-button open-workspace-button' title='Select a folder as your workspace root' onClick={this.openFolder}
+                onKeyUp={this.keyUpHandler}>
                 Open Folder
             </button>;
         }

diff --git a/packages/navigator/src/browser/style/index.css b/packages/navigator/src/browser/style/index.css
@@ -38,18 +38,9 @@
 }
 
 .p-Widget .open-workspace-button {
-    border: 1px solid var(--theia-border-color1);
-    color: var(--theia-ui-font-color1);
-    font-size: var(--theia-ui-font-size1);
-    border-radius: 0;
-    background-color: var(--theia-accent-color3);
-    outline: none;
-    cursor: pointer;
-    padding-left: 12px;
-    padding-right: 12px;
-    padding-top: 4px;
-    padding-bottom: 4px;
+    padding: 4px 12px;
     width: calc(100% - var(--theia-ui-padding)*4);
+    margin-left: 0;
 }
 
 .navigator-tab-icon {