Removed app links. Added clear search button

uqlibrary · May 12, 2016 · f47da60 · f47da60
1 parent 2098919
commit f47da60
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 82 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -15,6 +15,7 @@
 <uqlibrary-toolbar
     header-title='Application Name'
     enable-search='true'
+    enable-search-clear='true'
     enable-menu='true'
     app-links='[{"label": "Switch back", "action": "#"}, {"label": "Help", "url": "#"}, {"label": "Feedback", "url": "#"}]'
     search-placeholder-text="Search for something"></uqlibrary-toolbar>

diff --git a/elements/uqlibrary-toolbar.html b/elements/uqlibrary-toolbar.html
@@ -42,24 +42,13 @@
 
         <div class="title uqlibrary-app-title">[[headerTitle]]</div>
 
+        <template is="dom-if" if="{{enableSearchClear}}">
+          <paper-icon-button id="clearSearchButton" icon="clear" title="Clear search" aria-label="Clear search" on-tap="_clearSearch"></paper-icon-button>
+        </template>
+
         <template is="dom-if" if="{{enableSearch}}">
           <paper-icon-button on-tap="_showSearch" icon="search" id="searchButton" title="show search" aria-label="show search" alt="search icon"></paper-icon-button>
         </template>
-
-        <template is="dom-if" if="{{_hasAppLinks(appLinks)}}">
-
-          <paper-menu-button horizontal-offset="-310" horizontal-align="left" vertical-align="top" vertical-offset="40">
-            <paper-icon-button id="actionsButton" icon="more-vert" class="dropdown-trigger" title="show more options" aria-label="show more options" alt="actions icon"></paper-icon-button>
-            <paper-listbox id="listActions" on-iron-activate="_actionSelected" class="dropdown-content"
-                           no-auto-focus="true" aria-label="Select action item" title="Select action item">
-              <template is="dom-repeat" items="[[appLinks]]" as="link">
-                <paper-item role="menuitem">[[link.label]]</paper-item>
-              </template>
-
-            </paper-listbox>
-          </paper-menu-button>
-
-        </template>
       </template>
 
       <template is="dom-if" if="{{_searchInProgress}}">

diff --git a/elements/uqlibrary-toolbar.js b/elements/uqlibrary-toolbar.js
@@ -1,63 +1,52 @@
 Polymer({
   is: 'uqlibrary-toolbar',
   properties: {
-
-    /*
-    * A list of items to be displayed in more actions menu
-    * item.label is displayed
-    * */
-    appLinks: {
-      type: Array,
-      value: function () {
-        return [];
-      }
-    },
-
     /*
     * Flag to enable/disable search bar
     * */
     enableSearch: {
       type: Object
     },
-
+    /**
+     * Whether to show the "Clear Search" button
+     */
+    enableSearchClear: {
+      type: Object,
+      value: false
+    },
     /*
     * Flag to enable/disable menu button
     * */
     enableMenu: {
       type: Object
     },
-
     /*
     * String to display on toolbar
     * */
     headerTitle: {
       type: String
     },
-
     /*
      * Autosuggestion property to display in drop down
      * */
     itemLabel: {
       type: String,
       value: 'name'
     },
-
     /*
      * Default text in search input field
      * */
     searchPlaceholderText: {
       type: String,
       value: 'Search...'
     },
-
     /*
      * Search term keyword
      * */
     searchTerm: {
       type: String,
       notify: true
     },
-
     /*
      * A list of suggestions to be displayed when user types in keyword
      * */
@@ -67,14 +56,11 @@ Polymer({
         return [];
       }
     },
-
     _searchInProgress: {
       type: Boolean,
       value: false
     }
-
   },
-
   _showSearch: function() {
     if (this._searchInProgress === false)
       this._searchInProgress = true;
@@ -83,12 +69,10 @@ Polymer({
       this.$$('#asi').$.inputKeyword.focus();
     }, 5);
   },
-
   _hideSearch: function() {
     if (this._searchInProgress === true)
       this._searchInProgress = false;
   },
-
   _searchActivated: function(e) {
     this._hideSearch();
 
@@ -102,16 +86,13 @@ Polymer({
 
     this.fire("uqlibrary-toolbar-search-submitted", searchObject );
   },
-
   _actionSelected: function(e) {
     this.fire('uqlibrary-toolbar-link-clicked', this.appLinks[e.detail.selected]);
   },
-
   _menuActivated: function () {
     this.fire('uqlibrary-toolbar-menu-clicked');
   },
-
-  _hasAppLinks: function (appLinks) {
-    return appLinks.length > 0;
+  _clearSearch: function () {
+    this.fire('uqlibrary-toolbar-clear-search-clicked');
   }
 });
diff --git a/test/uqlibrary-toolbar-test.html b/test/uqlibrary-toolbar-test.html
@@ -58,50 +58,11 @@
         var searchIcon = element.querySelector('#searchButton');
         expect(searchIcon).to.be.null;
 
-        // app links, not returns true even without applinks, just says the icon is there
-        var appLinksIcon = element.querySelector('#actionsButton');
-        expect(appLinksIcon).to.be.null;
-
         done();
 
       });
     });
 
-    test('should display search/app links toolbar items', function (done) {
-      flush(function () {
-
-        element.enableSearch = true;
-        element.appLinks =[{"label": "Switch back", "action": "#"}, {"label": "Help", "url": "#"}, {"label": "Feedback", "url": "#"}];
-
-        setTimeout(function () {
-
-          // menu icon
-          var menuIcon = element.querySelector('#hamburgerMenuIcon');
-          expect(menuIcon).not.to.be.null;
-          expect(menuIcon).to.be.visible;
-
-          // search icon
-          var searchIcon = element.querySelector('#searchButton');
-          expect(searchIcon).not.to.be.null;
-          expect(searchIcon).to.be.visible;
-
-          // app links, not returns true even without applinks, just says the icon is there
-          var appLinksIcon = element.querySelector('#actionsButton');
-          expect(appLinksIcon).not.to.be.null;
-          expect(appLinksIcon).to.be.visible;
-
-          // app links, not returns true even without applinks, just says the icon is there
-          var toolbarTitle = element.querySelector('.title');
-          expect(toolbarTitle).not.to.be.null;
-          expect(toolbarTitle).to.be.visible;
-          expect(toolbarTitle.innerHTML).to.equal('Application Name');
-          console.log(toolbarTitle.innerHTML);
-
-          done();
-        }, 10);
-
-      });
-    });
 
     test('should display search input when search button is tapped', function (done) {