| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 2 Copyright 2016 The LUCI Authors. All rights reserved. | |
| 3 Use of this source code is governed under the Apache License, Version 2.0 | |
| 4 that can be found in the LICENSE file. | |
| 5 | |
| 6 This in an HTML Import-able file that contains the definition | |
| 7 of the following elements: | |
| 8 | |
| 9 <sort-toggle> | |
| 10 | |
| 11 Sort-toggle is a small ui widget that can be tapped to change the way | |
| 12 something is sorted. The preferred way to use this is to have multipe | |
| 13 of them created in dom-repeat. The parent then listens to the | |
| 14 sort_change event and sets the current property on all the sort-toggles | |
| 15 to keep them up to date. | |
| 16 | |
| 17 Only one sort-toggle will be active in this way. | |
| 18 | |
| 19 Properties: | |
| 20 // input | |
| 21 current: Object, the current sort-toggle that should be active. Is | |
| 22 The same format as the event.detail Object. | |
| 23 name: String, the name of the thing being sorted. To be used in the | |
| 24 fired event. | |
| 25 | |
| 26 // output | |
| 27 direction: String, the direction of the sorting. "asc", "", "desc" for | |
| 28 ascending/nothing/descending. | |
| 29 | |
| 30 | |
| 31 | |
| 32 Methods: | |
| 33 None. | |
| 34 | |
| 35 Events: | |
| 36 sort_change: when a user has tapped this element. The details includes | |
| 37 name and direction. | |
| 38 --> | |
| 39 | |
| 40 <link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html"> | |
| 41 | |
| 42 <dom-module id="sort-toggle"> | |
| 43 <template> | |
| 44 <style> | |
| 45 :host { | |
| 46 display: inline-block; | |
| 47 position: relative; | |
| 48 min-width: 20px; | |
| 49 min-height: 16px; | |
| 50 vertical-align: middle; | |
| 51 } | |
| 52 iron-icon { | |
| 53 position: absolute; | |
| 54 left: 0; | |
| 55 cursor: pointer; | |
| 56 } | |
| 57 .hidden { | |
| 58 visibility: hidden; | |
| 59 } | |
| 60 </style> | |
| 61 | |
| 62 <span on-click="toggle"> | |
| 63 <iron-icon | |
| 64 style="top:0" | |
| 65 class$="[[_hidden(direction,'asc')]]" | |
| 66 icon="icons:arrow-drop-down"> | |
| 67 </iron-icon> | |
| 68 <iron-icon | |
| 69 style="bottom:0" | |
| 70 class$="[[_hidden(direction,'desc')]]" | |
| 71 icon="icons:arrow-drop-up"> | |
| 72 </iron-icon> | |
| 73 </span> | |
| 74 | |
| 75 </template> | |
| 76 <script> | |
| 77 Polymer({ | |
| 78 is: "sort-toggle", | |
| 79 | |
| 80 properties: { | |
| 81 current: { | |
| 82 type: Object, | |
| 83 observer: "_resetSort", | |
| 84 }, | |
| 85 name: { | |
| 86 type: String, | |
| 87 observer: "_resetSort", | |
| 88 }, | |
| 89 | |
| 90 direction: { | |
| 91 type: String, | |
| 92 value: "", | |
| 93 notify: true, | |
| 94 }, | |
| 95 }, | |
| 96 | |
| 97 toggle: function() { | |
| 98 if (this.direction === "asc") { | |
| 99 this.set("direction", "desc"); | |
| 100 } else { | |
| 101 this.set("direction", "asc"); | |
| 102 } | |
| 103 this.fire("sort_change", {direction: this.direction, name: this.name}); | |
| 104 }, | |
| 105 | |
| 106 _hidden: function(num, compare) { | |
| 107 if (num === compare) { | |
| 108 return "hidden"; | |
| 109 } | |
| 110 return ""; | |
| 111 }, | |
| 112 | |
| 113 _resetSort: function() { | |
| 114 // Because of how Polymer inserts and moves elements around, we need to | |
| 115 // update the direction value if the name changes so the ascending sort | |
| 116 // by "os" doesn't become the ascending sort by "gpu" if a column gets | |
| 117 // added before "os", for example. Additionally, this makes sure that | |
| 118 // only one sort-toggle is active at a given time. | |
| 119 if (this.current && this.current.name === this.name) { | |
| 120 this.set("direction", this.current.direction); | |
| 121 } else { | |
| 122 this.set("direction", ""); | |
| 123 } | |
| 124 }, | |
| 125 }); | |
| 126 </script> | |
| 127 </dom-module> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2408743002:
Move elements/ to ui/ (Closed)
