TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add icon badges to lists

This commit is contained in:
Samuel Georges 2016-09-30 10:36:10 +10:00
parent 757221dfaf
commit 3c7968161a
3 changed files with 112 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
modules/system/assets/ui/docs/list.md
View File

@ -213,7 +213,7 @@ It might be fun to include a status column!
<tr>
<td>
<span class="oc-icon-circle text-success">
Pending
Approved
</span>
</td>
<td>The sun is shining</td>
@ -230,6 +230,60 @@ It might be fun to include a status column!
</table>
</div>
### Badge column
You can also include an icon badge inside a column.
<div class="control-list">
<table class="table data">
<thead>
<tr>
<th style="width: 150px"><span>Status</span></th>
<th class="active sort-asc"><a href="/">Title</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="list-badge badge-info">
<i class="icon-info"></i>
</span>
Draft
</td>
<td>Welcome to October</td>
</tr>
<tr>
<td>
<span class="list-badge badge-warning">
<i class="icon-exclamation"></i>
</span>
Pending
</td>
<td>What a wonderful day</td>
</tr>
<tr>
<td>
<span class="list-badge badge-success">
<i class="icon-check"></i>
</span>
Approved
</td>
<td>The sun is shining</td>
</tr>
<tr>
<td>
<span class="list-badge badge-danger">
<i class="icon-times"></i>
</span>
Cancelled
</td>
<td>The weather is sweet here</td>
</tr>
</tbody>
</table>
</div>
### Linking rows
You may link an entire row by adding the `data-control="rowlink"` attribute to the table element. The first table data (TD) column with an anchor will be used to link the entire row. To bypass this behavior, simply add the `nolink` class to the column.

50
modules/system/assets/ui/less/list.less
View File

@ -284,6 +284,52 @@ table.table.data {
text-align: center;
}
//
// Labels
//
.list-badge {
display: inline-block;
position: relative;
top: -1px;
margin: 0 5px 0 0;
padding: 1px 0 0 0;
font-size: 10px;
width: 15px;
height: 15px;
text-align: center;
border-radius: @border-radius-base;
color: #fff;
&.badge-default {
background: @gray-light;
}
&.badge-primary {
background: @brand-primary;
}
&.badge-success {
background: @brand-success;
}
&.badge-info {
background: @brand-info;
}
&.badge-warning {
background: @brand-warning;
}
&.badge-danger {
background: @brand-danger;
}
}
//
// Checkbox
//
.list-checkbox {
width: 52px;
vertical-align: top;
@ -312,6 +358,10 @@ table.table.data {
padding: 18px 0 0 @padding-standard;
}
//
// Trees
//
.list-tree {
width: 10px;
padding: 0;

7
modules/system/assets/ui/storm.css
View File

@ -2612,6 +2612,13 @@ table.table.data.no-active-indicator tbody tr td:first-child{border-left:none}
table.table.data tfoot a{color:#666666;text-decoration:none}
table.table.data tfoot td,table.table.data tfoot th{border-color:#d4d8da;padding:10px 15px}
table.table.data th.list-cell-type-switch,table.table.data td.list-cell-type-switch{text-align:center}
table.table.data .list-badge{display:inline-block;position:relative;top:-1px;margin:0 5px 0 0;padding:1px 0 0 0;font-size:10px;width:15px;height:15px;text-align:center;border-radius:3px;color:#fff}
table.table.data .list-badge.badge-default{background:#999999}
table.table.data .list-badge.badge-primary{background:#34495e}
table.table.data .list-badge.badge-success{background:#31ac5f}
table.table.data .list-badge.badge-info{background:#5bc0de}
table.table.data .list-badge.badge-warning{background:#f0ad4e}
table.table.data .list-badge.badge-danger{background:#ab2a1c}
table.table.data .list-checkbox{width:52px;vertical-align:top;border-right:1px solid #eeeeee}
table.table.data .list-checkbox .checkbox{margin:0;min-height:0}
table.table.data .list-checkbox .custom-checkbox{position:relative;top:-14px;left:-2px}