OLD | NEW |
1 <!-- The <ignore-summary-sk> custom element declaration. | 1 <!-- The <ignore-summary-sk> custom element declaration. |
2 | 2 |
3 Displays a summary of an ignore rule. | 3 Displays a summary of an ignore rule. |
4 | 4 |
5 Attributes: | 5 Attributes: |
6 None. | 6 None. |
7 | 7 |
8 Events: | 8 Events: |
9 'delete' | 9 'delete' |
10 The element will produce a 'deleted' event when the delete button is | 10 The element will produce a 'deleted' event when the delete button is |
11 pressed. The id of the deleted ignore rule will be included in | 11 pressed. The id of the deleted ignore rule will be included in |
12 e.detail. | 12 e.detail. |
13 | 13 |
14 'edit' | 14 'edit' |
15 The element will produce an 'edit' event when the edit button is | 15 The element will produce an 'edit' event when the edit button is |
16 pressed. The state of the ignore rule will be included in e.detail. | 16 pressed. The state of the ignore rule will be included in e.detail. |
17 | 17 |
18 Methods: | 18 Methods: |
19 None. | 19 None. |
20 | 20 |
21 --> | 21 --> |
22 | 22 |
23 <link rel="import" href="bower_components/iron-icons/iron-icons.html"> | 23 <link rel="import" href="bower_components/iron-icons/iron-icons.html"> |
24 <link rel="import" href="bower_components/paper-button/paper-button.html"> | 24 <link rel="import" href="bower_components/paper-button/paper-button.html"> |
25 | 25 |
26 <link rel="import" href="shared-styles.html"> | 26 <link rel="import" href="shared-styles.html"> |
27 | 27 |
28 <dom-module id="ignore-summary-sk"> | 28 <dom-module id="ignore-summary-sk"> |
29 <template> | 29 <template> |
30 <style include="shared-styles"> | 30 <style include="shared-styles"> |
31 div, | 31 div, |
32 pre { | 32 pre { |
33 display: inline-block; | 33 display: inline-block; |
34 margin: 0 0.5em 0 0; | 34 margin: 0 0.5em 0 0; |
35 font-family: monospace; | 35 font-family: monospace; |
36 } | 36 } |
37 #name { | 37 #name { |
38 width: 15em; | 38 width: 18em; |
39 color: #D95F02; | 39 color: #D95F02; |
40 } | 40 } |
41 #updatedBy { | 41 #updatedBy { |
42 width: 15em; | 42 width: 18em; |
43 color: #D95F02; | 43 color: #D95F02; |
44 } | 44 } |
45 #query { | 45 #query { |
46 width: 20em; | 46 width: 20em; |
47 overflow: auto; | 47 overflow: auto; |
48 color: #1B9E77; | 48 color: #1B9E77; |
49 word-wrap: break-word; | 49 word-wrap: break-word; |
50 vertical-align: middle; | 50 vertical-align: middle; |
51 } | 51 } |
52 #note { | 52 #note { |
53 width: 20em; | 53 width: 20em; |
54 overflow: auto; | 54 overflow: auto; |
55 color: #66A61E; | 55 color: #66A61E; |
56 word-wrap: break-word; | 56 word-wrap: break-word; |
57 vertical-align: middle; | 57 vertical-align: middle; |
58 } | 58 } |
59 #expires { | 59 #expires { |
60 width: 10em; | 60 width: 5em; |
61 color: #7570B3; | 61 color: #7570B3; |
62 } | 62 } |
63 #count { | 63 #count { |
64 width: 6em; | 64 width: 8em; |
65 color: #A6761D; | 65 color: #A6761D; |
66 } | 66 } |
67 paper-button { | 67 paper-button { |
68 min-width: 2em; | 68 min-width: 2em; |
69 } | 69 } |
70 </style> | 70 </style> |
71 <div id="name">{{value.name}}</div> | 71 <div id="name">{{value.name}}</div> |
72 <div id="expires">{{_humanDiffDate(value.expires)}}</div> | 72 <div id="expires">{{_humanDiffDate(value.expires)}}</div> |
73 <div id="updatedBy">{{value.updatedBy}}</div> | 73 <div id="updatedBy">{{value.updatedBy}}</div> |
74 <pre id="query"><a href$="{{_queryHref(value.query)}}">{{_splitAmp(value.que
ry)}}</a></pre> | 74 <pre id="query"><a href$="{{_queryHref(value.query)}}">{{_splitAmp(value.que
ry)}}</a></pre> |
75 <div id="note">{{value.note}}</div> | 75 <div id="note">{{value.note}}</div> |
76 <div id="count">{{value.count}}</div> | 76 <div id="count">{{value.exclusiveCount}} / {{value.count}}</div> |
77 <paper-button id="edit" title="Edit"><iron-icon icon="create"></iron-icon></
paper-button> | 77 <paper-button id="edit" title="Edit"><iron-icon icon="create"></iron-icon></
paper-button> |
78 <paper-button id="delete" title="Delete"><iron-icon icon="delete"></iron-ico
n></paper-button> | 78 <paper-button id="delete" title="Delete"><iron-icon icon="delete"></iron-ico
n></paper-button> |
79 </template> | 79 </template> |
80 <script> | 80 <script> |
81 (function () { | 81 (function () { |
82 Polymer({ | 82 Polymer({ |
83 is: 'ignore-summary-sk', | 83 is: 'ignore-summary-sk', |
84 | 84 |
85 properties: { | 85 properties: { |
86 value: { | 86 value: { |
87 type: Object, | 87 type: Object, |
88 value: function () { return {}; } | 88 value: function () { return {}; } |
89 } | 89 } |
90 }, | 90 }, |
91 | 91 |
92 ready: function () { | 92 ready: function () { |
93 this.listen(this.$.edit, 'click', "_handleEditClick"); | 93 this.listen(this.$.edit, 'click', "_handleEditClick"); |
94 this.listen(this.$.delete, 'click', "_handleDeleteClick"); | 94 this.listen(this.$.delete, 'click', "_handleDeleteClick"); |
95 }, | 95 }, |
96 | 96 |
97 _handleEditClick: function() { | 97 _handleEditClick: function() { |
98 this.fire('edit', this.value); | 98 this.fire('edit', this.value); |
99 }, | 99 }, |
100 | 100 |
101 _handleDeleteClick: function() { | 101 _handleDeleteClick: function() { |
102 this.fire('delete', this.value); | 102 this.fire('delete', this.value); |
103 }, | 103 }, |
104 | 104 |
105 // Make an alias to split by ampersand. | 105 // Make an alias to split by ampersand. |
106 _splitAmp: sk.query.splitAmp, | 106 _splitAmp: sk.query.splitAmp, |
107 | 107 |
108 _humanDiffDate: function (s) { | 108 _humanDiffDate: function (s) { |
109 var ms = Date.parse(s); | 109 var ms = Date.parse(s); |
110 return ms < Date.now() ? 'Expired' : sk.human.diffDate(s); | 110 return ms < Date.now() ? 'Expired' : sk.human.diffDate(s); |
111 }, | 111 }, |
112 | 112 |
113 _queryHref: function (query) { | 113 _queryHref: function (query) { |
114 return '/list?include=true&query=' + encodeURIComponent(query); | 114 return '/list?include=true&query=' + encodeURIComponent(query); |
115 } | 115 } |
116 }); | 116 }); |
117 }()); | 117 }()); |
118 </script> | 118 </script> |
119 </dom-module> | 119 </dom-module> |
120 | |
OLD | NEW |