Designed DOM of search input (input #133).

codex-team · Feb 13, 2018 · fb35b87 · fb35b87
1 parent 4c3343d
commit fb35b87
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git a/public/build/bundle.css b/public/build/bundle.css
diff --git a/public/build/bundle.js b/public/build/bundle.js
diff --git a/public/javascripts/searcher.js b/public/javascripts/searcher.js
@@ -7,6 +7,10 @@ export default class Searcher {
    * @constructor
    */
   constructor() {
+    /**
+     * DOM tree of class
+     * @type {Object}
+     */
     this.DOM = {
       input: document.getElementsByClassName('searcher__input')[0],
       foldersContainer: document.getElementsByName('js-folders-container')[0],
@@ -16,6 +20,12 @@ export default class Searcher {
       }
     };
 
+    /**
+     * Default value in the search input form
+     * @type {String}
+     */
+    this.defaultInputValue = 'Search';
+
     /**
      * Where to search
      * @type {Array}
@@ -28,6 +38,12 @@ export default class Searcher {
      */
     this.found = [];
 
+    this.DOM.input.addEventListener('focus', () => {
+      if (this.DOM.input.value == this.defaultInputValue) {
+        this.DOM.input.value = '';
+      }
+    });
+
     this.DOM.input.addEventListener('keyup', () => {
       this.search(this.DOM.input.value);
     });

diff --git a/public/stylesheets/components/searcher.css b/public/stylesheets/components/searcher.css
@@ -1,7 +1,11 @@
 .searcher {
 
     &__input {
-
+        background: none;
+    }
+
+    &__input:focus {
+        outline: none;
     }
 
 }
diff --git a/src/views/aside.pug b/src/views/aside.pug
@@ -16,8 +16,7 @@
             //-
             //- Search
             //-
-            .searcher
-                input.searcher__input
+            input.searcher__input.add-note-button(value="Search")
 
             //-
             //- Scrollable zone