GH-1479: Added the first cut of the serach box.

Signed-off-by: Akos Kitta <[email protected]>
eclipse-theia · Mar 14, 2018 · 9226575 · 9226575
1 parent b417a79
commit 9226575
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 6 deletions.
diff --git a/packages/navigator/src/browser/navigator-search.ts b/packages/navigator/src/browser/navigator-search.ts
@@ -53,7 +53,7 @@ export namespace FileNavigatorSearch {
          * The default throttle option.
          */
         export const DEFAULT: ThrottleOptions = {
-            delay: 300
+            delay: 50
         };
 
     }
@@ -75,10 +75,10 @@ export namespace FileNavigatorSearch {
             this.disposables.push(this.emitter);
         }
 
-        update(input: string | undefined): void {
+        update(input: string | undefined): string | undefined {
             if (input === undefined) {
                 this.reset();
-                return;
+                return undefined;
             }
             this.clearTimer();
             if (this.state) {
@@ -87,6 +87,7 @@ export namespace FileNavigatorSearch {
                 this.state = input;
             }
             this.timer = window.setTimeout(() => this.fireChanged(this.state), this.options.delay);
+            return this.state;
         }
 
         get onChanged(): Event<string | undefined> {

diff --git a/packages/navigator/src/browser/navigator-widget.ts b/packages/navigator/src/browser/navigator-widget.ts
@@ -10,7 +10,7 @@ import { h } from "@phosphor/virtualdom/lib";
 import { Message } from "@phosphor/messaging";
 import URI from "@theia/core/lib/common/uri";
 import { SelectionService, CommandService } from '@theia/core/lib/common';
-import { ContextMenuRenderer, TreeProps, TreeModel, TreeNode, LabelProvider, KeyCode } from '@theia/core/lib/browser';
+import { ContextMenuRenderer, TreeProps, TreeModel, TreeNode, LabelProvider, KeyCode, Widget, BaseWidget } from '@theia/core/lib/browser';
 import { FileTreeWidget, DirNode } from "@theia/filesystem/lib/browser";
 import { WorkspaceService, WorkspaceCommands } from '@theia/workspace/lib/browser';
 import { FileNavigatorModel } from "./navigator-model";
@@ -25,6 +25,7 @@ export const CLASS = 'theia-Files';
 export class FileNavigatorWidget extends FileTreeWidget {
 
     protected readonly disposables = new DisposableCollection();
+    protected searchBox: SearchBox;
 
     constructor(
         @inject(TreeProps) readonly props: TreeProps,
@@ -96,11 +97,14 @@ export class FileNavigatorWidget extends FileTreeWidget {
         this.addKeyListener(this.node, (keyCode: KeyCode) => true, e => {
             const keyCode = KeyCode.createKeyCode(e);
             if (KeyCode.PRINTABLE(keyCode)) {
-                this.throttle.update(e.key);
+                this.searchBox.updateData(this.throttle.update(e.key));
             } else {
-                this.throttle.update(undefined);
+                this.searchBox.updateData(this.throttle.update(undefined));
             }
         });
+        this.searchBox = new SearchBox(this.node);
+        this.disposables.push(this.searchBox);
+        this.searchBox.hide();
     }
 
     protected handleCopy(event: ClipboardEvent): void {
@@ -136,3 +140,37 @@ export class FileNavigatorWidget extends FileTreeWidget {
     }
 
 }
+
+export class SearchBox extends BaseWidget {
+
+    protected contentNode: HTMLDivElement;
+    protected hidden: boolean;
+
+    constructor(host: HTMLElement) {
+        super();
+        this.addClass(SearchBox.Styles.SEARCH_BOX_CLASS);
+        this.contentNode = document.createElement('div');
+        this.contentNode.innerHTML = 'Search for:';
+        this.node.appendChild(this.contentNode);
+        Widget.attach(this, host);
+        this.hide();
+        this.update();
+    }
+
+    updateData(data: string | undefined): void {
+        if (data === undefined) {
+            this.hide();
+            return;
+        }
+        this.show();
+        this.contentNode.innerHTML = `Search for: ${data}`;
+        this.update();
+    }
+
+}
+
+export namespace SearchBox {
+    export namespace Styles {
+        export const SEARCH_BOX_CLASS = 'theia-search-box';
+    }
+}
diff --git a/packages/navigator/src/browser/style/index.css b/packages/navigator/src/browser/style/index.css
@@ -9,6 +9,7 @@
     font-size: var(--theia-ui-font-size1);
     color: var(--theia-ui-font-color1);
     margin: 5px;
+    position: relative;
 }
 
 .theia-navigator-container .open-workspace-button-container {
@@ -29,4 +30,20 @@
     padding-top: 4px;
     padding-bottom: 4px;
     width: 100%;
+}
+
+.theia-search-box {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    border: 1px solid var(--theia-border-color1);
+    background-color: var(--theia-layout-color3);
+}
+
+.theia-search-box .no-match {
+    color: var(--theia-error-color0);
+}
+
+.theia-search-box .hidden {
+    display: none;
 }