github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-table.hbs (about) 1 {{#freestyle-usage "table-simple" title="Table"}} 2 {{#list-table source=shortList as |t|}} 3 {{#t.head}} 4 <th>Name</th> 5 <th>Language</th> 6 <th>Description</th> 7 {{/t.head}} 8 {{#t.body key="model.name" as |row|}} 9 <tr> 10 <td>{{row.model.name}}</td> 11 <td>{{row.model.lang}}</td> 12 <td>{{row.model.desc}}</td> 13 </tr> 14 {{/t.body}} 15 {{/list-table}} 16 {{/freestyle-usage}} 17 {{#freestyle-annotation}} 18 <p>Tables have airy designs with a minimal amount of borders. This maximizes their utility.</p> 19 {{/freestyle-annotation}} 20 21 {{#freestyle-usage "table-search" title="Table Search"}} 22 <div class="boxed-section"> 23 <div class="boxed-section-head"> 24 Table Name 25 {{search-box 26 searchTerm=(mut searchTerm) 27 placeholder="Search..." 28 class="is-inline pull-right" 29 inputClass="is-compact"}} 30 </div> 31 <div class="boxed-section-body {{if filteredShortList.length "is-full-bleed"}}"> 32 {{#if filteredShortList.length}} 33 {{#list-table source=filteredShortList as |t|}} 34 {{#t.head}} 35 <th>Name</th> 36 <th>Language</th> 37 <th>Description</th> 38 {{/t.head}} 39 {{#t.body key="model.name" as |row|}} 40 <tr> 41 <td>{{row.model.name}}</td> 42 <td>{{row.model.lang}}</td> 43 <td>{{row.model.desc}}</td> 44 </tr> 45 {{/t.body}} 46 {{/list-table}} 47 {{else}} 48 <div class="empty-message"> 49 <h3 class="empty-message-headline">No Matches</h3> 50 <p class="empty-message-body">No products match your query.</p> 51 </div> 52 {{/if}} 53 </div> 54 </div> 55 {{/freestyle-usage}} 56 {{#freestyle-annotation}} 57 <p>Tables compose with boxed-section and boxed-section composes with search box.</p> 58 {{/freestyle-annotation}} 59 60 {{#freestyle-usage "table-sortable-columns" title="Table Sortable Columns"}} 61 {{#list-table 62 source=sortedShortList 63 sortProperty=sortProperty 64 sortDescending=sortDescending as |t|}} 65 {{#t.head}} 66 {{#t.sort-by prop="name"}}Name{{/t.sort-by}} 67 {{#t.sort-by prop="lang" class="is-2"}}Language{{/t.sort-by}} 68 <th>Description</th> 69 {{/t.head}} 70 {{#t.body key="model.name" as |row|}} 71 <tr> 72 <td>{{row.model.name}}</td> 73 <td>{{row.model.lang}}</td> 74 <td>{{row.model.desc}}</td> 75 </tr> 76 {{/t.body}} 77 {{/list-table}} 78 {{/freestyle-usage}} 79 {{#freestyle-annotation}} 80 <p>The list-table component provides a <code>sort-by</code> contextual component for building <code>link-to</code> components with the appropriate query params.</p> 81 <p>This leaves the component stateless, relying on data to be passed down and sending actions back up via the router (via link-to).</p> 82 {{/freestyle-annotation}} 83 84 {{#freestyle-usage "table-multi-row" title="Table Multi-row"}} 85 {{#list-table 86 source=sortedShortList 87 sortProperty=sortProperty 88 sortDescending=sortDescending 89 class="is-striped" as |t|}} 90 {{#t.head}} 91 {{#t.sort-by prop="name"}}Name{{/t.sort-by}} 92 {{#t.sort-by prop="lang"}}Language{{/t.sort-by}} 93 {{/t.head}} 94 {{#t.body key="model.name" as |row|}} 95 <tr> 96 <td>{{row.model.name}}</td> 97 <td>{{row.model.lang}}</td> 98 </tr> 99 <tr> 100 <td colspan="2">{{row.model.desc}}</td> 101 </tr> 102 {{/t.body}} 103 {{/list-table}} 104 {{/freestyle-usage}} 105 {{#freestyle-annotation}} 106 <p>THe list-table component attempts to be as flexible as possible. For this reason, <code>t.body</code> does not provide the typical <code>tr</code> element. It's sometimes desired to have multiple elements per record.</p> 107 {{/freestyle-annotation}} 108 109 {{#freestyle-usage "table-pagination" title="Table Pagination"}} 110 {{#list-pagination source=longList size=5 page=currentPage as |p|}} 111 {{#list-table source=p.list class="with-foot" as |t|}} 112 {{#t.head}} 113 <th class="is-1">Rank</th> 114 <th>City</th> 115 <th>State</th> 116 <th>Population</th> 117 <th>Growth</th> 118 {{/t.head}} 119 {{#t.body key="model.rank" as |row|}} 120 <tr> 121 <td>{{row.model.rank}}</td> 122 <td>{{row.model.city}}</td> 123 <td>{{row.model.state}}</td> 124 <td>{{row.model.population}}</td> 125 <td>{{format-percentage row.model.growth total=1}}</td> 126 </tr> 127 {{/t.body}} 128 {{/list-table}} 129 <div class="table-foot"> 130 <nav class="pagination"> 131 <span class="bumper-left">U.S. City population and growth from 2000-2013</span> 132 <div class="pagination-numbers"> 133 {{p.startsAt}}–{{p.endsAt}} of {{longList.length}} 134 </div> 135 {{#p.prev class="pagination-previous"}} < {{/p.prev}} 136 {{#p.next class="pagination-next"}} > {{/p.next}} 137 <ul class="pagination-list"></ul> 138 </nav> 139 </div> 140 {{/list-pagination}} 141 {{/freestyle-usage}} 142 {{#freestyle-annotation}} 143 <p>Pagination works like sorting: using <code>link-to</code>s to set a query param.</p> 144 <p>Pagination, like Table, is a minimal design. Only a next and previous button are available. The current place in the set of pages is tracked by showing which slice of items is currently shown.</p> 145 <p>The pagination component exposes first and last components (for jumping to the beginning and end of a list) as well as pageLinks for generating links around the current page.</p> 146 {{/freestyle-annotation}} 147 148 {{#freestyle-usage "table-row-links" title="Table Row Links"}} 149 {{#list-table source=shortList as |t|}} 150 {{#t.head}} 151 <th>Name</th> 152 <th>Language</th> 153 <th>Description</th> 154 {{/t.head}} 155 {{#t.body key="model.name" as |row|}} 156 <tr class="is-interactive"> 157 <td><a href="#" class="is-primary">{{row.model.name}}</a></td> 158 <td>{{row.model.lang}}</td> 159 <td>{{row.model.desc}}</td> 160 </tr> 161 {{/t.body}} 162 {{/list-table}} 163 {{/freestyle-usage}} 164 {{#freestyle-annotation}} 165 <p>It is common for tables to act as lists of links, (e.g., clients list all allocations, each row links to the allocation detail). The helper class <code>is-interactive</code> on the <code>tr</code> makes table rows have a pointer cursor. The helper class <code>is-primary</code> on the <code>a</code> element in a table row makes the link bold and black instead of blue. This makes the link stand out less, since the entire row is a link.</p> 166 <p>A few rules for using table row links:</p> 167 <ol> 168 <li>The <code>is-primary</code> cell should always be the first cell</li> 169 <li>The <code>is-primary</code> cell should always contain a link to the destination in the form of an <code>a</code> element. This is to support opening a link in a new tab.</li> 170 <li>The full row should transition to the destination on click. This is to improve the usability of a table by creating a larger click area.</li> 171 </ol> 172 {{/freestyle-annotation}} 173 174 {{#freestyle-usage "table-cell-links" title="Table Cell Links"}} 175 {{#list-table source=shortList as |t|}} 176 {{#t.head}} 177 <th>Name</th> 178 <th>Language</th> 179 <th>Description</th> 180 {{/t.head}} 181 {{#t.body key="model.name" as |row|}} 182 <tr> 183 <td><a href={{row.model.link}}>{{row.model.name}}</a></td> 184 <td>{{row.model.lang}}</td> 185 <td>{{row.model.desc}}</td> 186 </tr> 187 {{/t.body}} 188 {{/list-table}} 189 {{/freestyle-usage}} 190 {{#freestyle-annotation}} 191 <p>Links in table cells are just links.</p> 192 {{/freestyle-annotation}} 193 194 {{#freestyle-usage "table-cell-decorations" title="Table Cell Decorations"}} 195 {{#list-table source=shortList as |t|}} 196 {{#t.head}} 197 <th>Name</th> 198 <th>Language</th> 199 <th>Description</th> 200 {{/t.head}} 201 {{#t.body key="model.name" as |row|}} 202 <tr> 203 <td><a href={{row.model.link}}>{{row.model.name}}</a></td> 204 <td class="nowrap"> 205 <span class="color-swatch 206 {{if (eq row.model.lang "ruby") "swatch-6"}} 207 {{if (eq row.model.lang "golang") "swatch-5"}}" /> 208 {{row.model.lang}} 209 </td> 210 <td>{{row.model.desc}}</td> 211 </tr> 212 {{/t.body}} 213 {{/list-table}} 214 {{/freestyle-usage}} 215 {{#freestyle-annotation}} 216 <p>Small icons and accents of color make tables easier to scan.</p> 217 {{/freestyle-annotation}} 218 219 {{#freestyle-usage "table-cell-icons" title="Table Cell Icons"}} 220 {{#list-pagination source=longList size=5 page=currentPage as |p|}} 221 {{#list-table source=p.list class="with-foot" as |t|}} 222 {{#t.head}} 223 <th class="is-narrow"></th> 224 <th class="is-1">Rank</th> 225 <th>City</th> 226 <th>State</th> 227 <th>Population</th> 228 <th>Growth</th> 229 {{/t.head}} 230 {{#t.body key="model.rank" as |row|}} 231 <tr> 232 <td class="is-narrow"> 233 {{#if (lt row.model.growth 0)}} 234 {{x-icon "warning" class="is-warning"}} 235 {{/if}} 236 </td> 237 <td>{{row.model.rank}}</td> 238 <td>{{row.model.city}}</td> 239 <td>{{row.model.state}}</td> 240 <td>{{row.model.population}}</td> 241 <td>{{format-percentage row.model.growth total=1}}</td> 242 </tr> 243 {{/t.body}} 244 {{/list-table}} 245 <div class="table-foot"> 246 <nav class="pagination"> 247 <span class="bumper-left">U.S. City population and growth from 2000-2013. Cities with negative growth denoted.</span> 248 <div class="pagination-numbers"> 249 {{p.startsAt}}–{{p.endsAt}} of {{longList.length}} 250 </div> 251 {{#p.prev class="pagination-previous"}} < {{/p.prev}} 252 {{#p.next class="pagination-next"}} > {{/p.next}} 253 <ul class="pagination-list"></ul> 254 </nav> 255 </div> 256 {{/list-pagination}} 257 {{/freestyle-usage}}