Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

table: add checkbox and checkbox

Browse source
This commit is contained in:
Felix Niklas 2014-07-23 22:56:59 +02:00
parent 2da12c0c14
commit fb564d21b8
4 changed files with 83 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/assets/images/sprite.svg
View file

@ -93,7 +93,12 @@
<path d="M85.5,10 L48,10 L58,3 L95.5,3 L85.5,10 Z" id="Shape-copy" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M85.5,8 L48,8 L58,0 L95.5,0 L85.5,8 Z" id="Shape-copy" fill="#38AE6A" sketch:type="MSShapeGroup"></path>
</g>
<path d="M6.9,309.9 L2,305 L6.9,300" id="Shape" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M9,300 L13.9,304.9 L9,309.9" id="Shape" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M6.9,309.9 L2,305 L6.9,300" id="left-arrow" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M9,300 L13.9,304.9 L9,309.9" id="right-arrow" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>
<path d="M16.5,299.5 L25.5,299.5 L25.5,308.5 L16.5,308.5 L16.5,299.5 Z" id="checkbox" stroke="#CBCBCB" sketch:type="MSShapeGroup"></path>
<g id="checkbox-checked" sketch:type="MSLayerGroup" transform="translate(26.000000, 300.000000)">
<path d="M0.5,-0.5 L9.5,-0.5 L9.5,8.5 L0.5,8.5 L0.5,-0.5 Z" id="checkbox" stroke="#000000" sketch:type="MSShapeGroup"></path>
<path d="M3.79999999,4.89999999 L2.09999999,3.39999999 L1.39999999,4.09999999 L4.29999999,7.59999999 C4.79999999,6.09999999 6.39999999,3.19999999 8.29999999,1.09999999 L8.09999999,0.499999993 C5.99999999,1.99999999 4.39999999,3.89999999 3.79999999,4.89999999 Z" id="Shape" fill="#1A1A1A" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 41 KiB

8
app/assets/javascripts/app/views/dashboard/ticket.jst.eco
View file

@ -13,8 +13,8 @@
<span class="left arrow icon"></span>
</a>
<% else: %>
<a class="inactive centered" href="#" data-id="<%= @start_page %>" data-type="page">
<span class="inactive left arrow icon"></span>
<a class="disabled centered" href="#" data-id="<%= @start_page %>" data-type="page">
<span class="disabled left arrow icon"></span>
</a>
<% end %>
</li>
@ -26,8 +26,8 @@
<span class="right arrow icon"></span>
</a>
<% else: %>
<a class="centered" href="#" data-id="<%= @start_page %>" data-type="page">
<span class="right arrow icon"></span>
<a class="disabled centered" href="#" data-id="<%= @start_page %>" data-type="page">
<span class="disabled right arrow icon"></span>
</a>
</li>
<% end %>

20
app/assets/javascripts/app/views/generic/table.jst.eco
View file

@ -2,11 +2,17 @@
<thead>
<tr>
<% if @checkbox: %>
<th style="width: 22px"><input type="checkbox" value="" name="bulk_all"/></th>
<th style="width: 40px" class="no-padding">
<label class="checkbox-replacement centered">
<input type="checkbox" value="" name="bulk_all"/>
<span class="white checkbox icon"></span>
</label>
</th>
<% end %>
<% if @radio: %>
<th style="width: 22px"></th>
<% end %>
<th style="width: 28px"></th>
<% for item in @header: %>
<th <% if item.style: %>style="<%= item.style %>"<% end %>><%- @T( item.display ) %></th>
<% end %>
@ -38,10 +44,18 @@
<% end %>
<% end %>
<% position++ %>
<tr class="item <% if object.active is false: %>not-active<% end %>" data-id="<%= object.id %>" data-position="<%= position %>" >
<tr class="item <% if object.active is false: %>not-active<% end %> level-1" data-id="<%= object.id %>" data-position="<%= position %>" >
<% if @checkbox: %>
<td><input type="checkbox" value="<%= object.id %>" name="bulk"/></td>
<td class="no-padding">
<label class="checkbox-replacement centered">
<input type="checkbox" value="<%= object.id %>" name="bulk"/>
<span class="checkbox icon"></span>
</label>
</td>
<% end %>
<td class="status">
<span class="priority icon"></span>
</td>
<% if @radio: %>
<td><input type="radio" value="<%= object.id %>" name="radio"/></td>
<% end %>

65
app/assets/stylesheets/zzz.css.erb
View file

@ -44,8 +44,9 @@ table {
white-space: nowrap;
}
.table > thead:first-child > tr:first-child > th,
.table > thead > tr > th {
padding: 12px 9px 9px;
padding: 12px 9px 10px;
border-bottom: none;
border-top: 1px solid #ececec;
background: #f0f1f2;
@ -54,12 +55,40 @@ table {
font-size: 12px;
text-transform: uppercase;
}
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 9px;
border-top-color: #f2f2f2;
.table > tbody > tr > td {
padding: 10px 9px 9px;
border: none;
box-shadow: 0 1px rgba(0,0,0,.02) inset;
}
.table > tbody > tr:first-child > td {
box-shadow: none;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background: rgba(0,8,14,.015);
}
.table > thead:first-child > tr:first-child > th.no-padding,
.table > thead > tr > th.no-padding,
.table > tbody > tr > td.no-padding {
padding: 0;
}
.table .checkbox-replacement {
padding: 0;
margin: 0;
height: 38px;
}
.table .checkbox-replacement input[type=checkbox] {
display: none;
}
.table .priority.icon:after {
background: #f8f9fa;
}
.table .table-cell {
@ -540,7 +569,7 @@ label {
}
.page-header-title {
margin-bottom: 20px;
margin-bottom: 15px;
}
.page-header-meta {
@ -1053,8 +1082,8 @@ ol.tabs li {
opacity: .39;
}
.inactive.left.arrow.icon,
.inactive.right.arrow.icon {
.disabled.left.arrow.icon,
.disabled.right.arrow.icon {
opacity: .23;
}
@ -1066,6 +1095,22 @@ ol.tabs li {
background-position: -8px -299px;
}
.checkbox.icon {
min-height: 0; /* overwriting bootstrap */
margin: 0; /* overwriting bootstrap */
width: 10px;
height: 10px;
background-position: -16px -299px;
}
.white.checkbox.icon {
background-color: white;
}
:checked + .checkbox.icon {
background-position: -26px -299px;
}
/*
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs