| <!-- The <query-chooser-sk> custom element declaration. |
| |
| Displays the current value for a selection along with an edit button |
| that pops up a query-sk dialog to change the selection. |
| |
| Attributes: |
| query - The underlying query-sk element. |
| whitelist - A list of keys for params that should always be shown. |
| |
| Events: |
| See query-sk. |
| |
| Methods: |
| None. |
| --> |
| <link rel="stylesheet" href="/res/common/css/md.css"> |
| <link rel=import href="query.html"> |
| |
| <dom-module id="query-chooser-sk"> |
| <style> |
| query-summary-sk { |
| display: block; |
| } |
| |
| #dialog { |
| display: none; |
| padding: 2em; |
| border: solid lightgray 1px; |
| } |
| |
| #dialog.display { |
| display: block; |
| } |
| |
| #edit { |
| margin: 0; |
| } |
| |
| :host { |
| display: block; |
| padding: 1em; |
| } |
| </style> |
| <template> |
| <div id="dialog"> |
| <query-sk id=query whitelist="{{whitelist}}"></query-sk> |
| <div class=buttons> |
| <button id=close class=action>Close</button> |
| </div> |
| </div> |
| <query-summary-sk id=summary></query-summary-sk> |
| <button class=raised id=edit>Edit</button> |
| </template> |
| </dom-module> |
| |
| <script> |
| Polymer({ |
| is: "query-chooser-sk", |
| |
| properties: { |
| whitelist: { |
| type: Array, |
| value: function() { |
| return [ |
| 'name', |
| 'bench_type', |
| 'os', |
| 'source_type', |
| 'scale', |
| 'extra_config', |
| 'config', |
| 'arch', |
| 'sub_result' |
| ]; |
| }, |
| reflectToAttribute: true |
| }, |
| }, |
| |
| listeners: { |
| "edit.tap": "_editTap", |
| "close.tap": "_closeTap", |
| "query.query-change": "_queryChanged", |
| }, |
| |
| _queryChanged: function(e) { |
| this.$.summary.selection = e.detail; |
| }, |
| |
| _editTap: function() { |
| this.$.dialog.classList.add('display'); |
| }, |
| |
| _closeTap: function() { |
| this.$.dialog.classList.remove('display'); |
| }, |
| |
| ready: function() { |
| this.query = this.$.query; |
| }, |
| }); |
| </script> |