#14 added clear button to the serach field, no logic yet

alan-null · May 30, 2016 · b562e54 · b562e54
1 parent a2ce080
commit b562e54
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 4 deletions.
diff --git a/app/images/ic_close_black_24dp_1x.png b/app/images/ic_close_black_24dp_1x.png
diff --git a/app/images/ic_close_black_24dp_2x.png b/app/images/ic_close_black_24dp_2x.png
diff --git a/app/manifest.json b/app/manifest.json
@@ -52,6 +52,7 @@
     "scripts/popup.js",
     "styles/main.css",
     "scripts/sc_ext-common.js",
-    "scripts/fuzzy.min.js"
+    "scripts/fuzzy.min.js",
+    "images/ic_close_black_24dp_1x.png"
   ]
 }
diff --git a/app/scripts.ts/sc_ext.ts b/app/scripts.ts/sc_ext.ts
@@ -196,7 +196,7 @@ namespace SitecoreExtensions.Modules.FieldSearch {
             return SitecoreExtensions.Context.Location() == Location.ContentEditor;
         };
 
-        private createTextBox(text: string, callback: { (e: KeyboardEvent): any }): HTMLInputElement {
+        private createTextBox(text: string): HTMLInputElement {
             var input = HTMLHelpers.createElement<HTMLInputElement>('input', {
                 id: 'scextFieldSearch',
                 type: 'text',
@@ -209,6 +209,20 @@ namespace SitecoreExtensions.Modules.FieldSearch {
 
             return input;
         };
+
+        private createClearButton(text: string): HTMLSpanElement {
+            // var iconUrl = chrome.extension.getURL("images/myimage.png");
+            var closeButton = HTMLHelpers.createElement<HTMLSpanElement>('span', {
+                class: 'sc-ext-fieldSearchClear',
+                // style: "url('" + iconUrl + "')  0 -690px;"
+            });
+            var data = this;
+            closeButton.onclick = (e: MouseEvent) => {
+                data.clearSearch(e);
+            };
+
+            return closeButton;
+        };
 
         private castToArray(list) : Element[] {
             return Array.prototype.slice.call(list);
@@ -284,6 +298,10 @@ namespace SitecoreExtensions.Modules.FieldSearch {
                 this.toggleSections(false);
             }
         };
+
+        clearSearch(e: MouseEvent) : void {
+
+        }
 
         addTreeNodeHandlers(className: string): void {
             var nodes = document.getElementsByClassName(className);
@@ -297,10 +315,18 @@ namespace SitecoreExtensions.Modules.FieldSearch {
         }
 
         private insertSearchField(): void {
-            var txbSearch = this.createTextBox('Collapse', this.doSearch)
+            var txbSearch = this.createTextBox('Collapse')
+            var spanClear = this.createClearButton('XXX');
+
+            var span = HTMLHelpers.createElement<HTMLSpanElement>('span', {
+                class: 'sc-ext-searchFieldContainer'
+            });
+
+            span.appendChild(txbSearch);
+            span.appendChild(spanClear);
 
             var controlsTab = document.querySelector('.scEditorTabControlsTab5');
-            controlsTab.insertBefore(txbSearch, controlsTab.firstChild);
+            controlsTab.insertBefore(span, controlsTab.firstChild);
         };
 
         private searchFieldExists(): boolean {

diff --git a/app/styles.sass/fieldSearch.scss b/app/styles.sass/fieldSearch.scss
@@ -8,3 +8,23 @@
     }
 }
 
+
+span.sc-ext-searchFieldContainer {
+    position: relative;
+
+    span.sc-ext-fieldSearchClear {
+        position: absolute;
+        display: block;
+        top: 0px;
+        right: 20px;
+        width: 16px;
+        height: 16px;
+        // background-image:url('chrome-extension://__MSG_@@extension_id__/images/ic_close_black_24dp_1x.png') 0 -690px;
+        background: url('chrome-extension://__MSG_@@extension_id__/images/ic_close_black_24dp_1x.png') -5px -5px;
+        cursor: pointer;
+    }
+
+    input {
+        padding-right: 16px;
+    }
+}