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

add checkboxes and radios

Browse source
This commit is contained in:
Felix Niklas 2015-05-26 09:41:20 +02:00
parent e7ebb87e37
commit 32eb025645
7 changed files with 41 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/javascripts/app/views/generic/radio.jst.eco
View file

@ -1,5 +1,9 @@
<div class="<%= @attribute.class %>">
<% for row in @attribute.options: %>
<label><input type="radio" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %>> <%= row.name %> <% if row.note: %>- <%= row.note %><% end %></label>
<label>
<input type="radio" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %>> <%= row.name %> <% if row.note: %>- <%= row.note %><% end %>
<svg class="icon-radio"><use xlink:href="#icon-radio" /></svg>
<svg class="icon-radio-checked"><use xlink:href="#icon-radio-checked" /></svg>
</label>
<% end %>
</div>

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

@ -3,9 +3,10 @@
<tr>
<% if @checkbox: %>
<th style="width: 40px" class="no-padding">
<label class="input-replacement centered">
<label class="input-replacement">
<input type="checkbox" value="" name="bulk_all"/>
<span class="white checkbox icon"></span>
<svg class="icon-checkbox icon-unchecked"><use xlink:href="#icon-checkbox" /></svg>
<svg class="icon-checkbox-checked icon-checked"><use xlink:href="#icon-checkbox-checked" /></svg>
</label>
</th>
<% end %>
@ -41,7 +42,8 @@
<td class="no-padding">
<label class="input-replacement">
<input type="checkbox" value="<%= object.id %>" name="bulk"/>
<span class="checkbox icon"></span>
<svg class="icon-checkbox icon-unchecked"><use xlink:href="#icon-checkbox" /></svg>
<svg class="icon-checkbox-checked icon-checked"><use xlink:href="#icon-checkbox-checked" /></svg>
</label>
</td>
<% end %>
@ -49,7 +51,8 @@
<td class="no-padding">
<label class="input-replacement">
<input type="radio" value="<%= object.id %>" name="radio"/>
<span class="radio icon"></span>
<svg class="icon-radio icon-unchecked"><use xlink:href="#icon-radio" /></svg>
<svg class="icon-radio-checked icon-checked"><use xlink:href="#icon-radio-checked" /></svg>
</label>
</td>
<% end %>

2
app/assets/stylesheets/svg-dimensions.css
View file

@ -1 +1 @@
.icon-arrow-down { width: 13px; height: 7px; } .icon-arrow-left { width: 7px; height: 13px; } .icon-arrow-right { width: 7px; height: 13px; } .icon-arrow-up { width: 13px; height: 7px; } .icon-checkbox-checked { width: 10px; height: 10px; } .icon-checkbox { width: 10px; height: 10px; } .icon-checkmark { width: 16px; height: 14px; } .icon-clock { width: 16px; height: 16px; } .icon-close { width: 13px; height: 13px; } .icon-cloud { width: 16px; height: 16px; } .icon-cog { width: 20px; height: 20px; } .icon-dashboard { width: 24px; height: 24px; } .icon-diagonal-cross { width: 13px; height: 13px; } .icon-download { width: 14px; height: 13px; } .icon-email { width: 17px; height: 17px; } .icon-facebook { width: 17px; height: 17px; } .icon-group { width: 24px; height: 24px; } .icon-important { width: 16px; height: 16px; } .icon-in-process { width: 64px; height: 64px; } .icon-list { width: 16px; height: 16px; } .icon-loading { width: 16px; height: 16px; } .icon-lock-open { width: 16px; height: 16px; } .icon-lock { width: 16px; height: 16px; } .icon-logo { width: 42px; height: 36px; } .icon-long-arrow-right { width: 11px; height: 11px; } .icon-magnifier { width: 15px; height: 15px; } .icon-marker { width: 17px; height: 19px; } .icon-message { width: 24px; height: 24px; } .icon-mood-bad { width: 60px; height: 59px; } .icon-mood-good { width: 60px; height: 59px; } .icon-mood-ok { width: 60px; height: 59px; } .icon-mood-super-bad { width: 60px; height: 59px; } .icon-mood-supergood { width: 60px; height: 59px; } .icon-note { width: 17px; height: 16px; } .icon-one-ticket { width: 48px; height: 10px; } .icon-organization { width: 16px; height: 16px; } .icon-outbound-calls { width: 17px; height: 17px; } .icon-overviews { width: 24px; height: 24px; } .icon-package { width: 16px; height: 16px; } .icon-paperclip { width: 31px; height: 28px; } .icon-pen { width: 16px; height: 16px; } .icon-person { width: 24px; height: 24px; } .icon-phone { width: 17px; height: 17px; } .icon-plus { width: 20px; height: 20px; } .icon-priority-modified-inner-circle { width: 16px; height: 16px; } .icon-priority-modified-outer-circle { width: 16px; height: 16px; } .icon-priority { width: 16px; height: 16px; } .icon-received-calls { width: 17px; height: 17px; } .icon-reopening { width: 68px; height: 47px; } .icon-reply-all { width: 16px; height: 16px; } .icon-reply { width: 16px; height: 16px; } .icon-signout { width: 15px; height: 19px; } .icon-split { width: 16px; height: 16px; } .icon-stopwatch { width: 77px; height: 83px; } .icon-switchView { width: 19px; height: 18px; } .icon-team { width: 16px; height: 16px; } .icon-templates { width: 24px; height: 24px; } .icon-tools { width: 24px; height: 24px; } .icon-total-tickets { width: 48px; height: 83px; } .icon-twitter { width: 17px; height: 17px; } .icon-user { width: 16px; height: 16px; }
.icon-arrow-down { width: 13px; height: 7px; } .icon-arrow-left { width: 7px; height: 13px; } .icon-arrow-right { width: 7px; height: 13px; } .icon-arrow-up { width: 13px; height: 7px; } .icon-checkbox-checked { width: 10px; height: 10px; } .icon-checkbox { width: 10px; height: 10px; } .icon-checkmark { width: 16px; height: 14px; } .icon-clock { width: 16px; height: 16px; } .icon-close { width: 13px; height: 13px; } .icon-cloud { width: 16px; height: 16px; } .icon-cog { width: 20px; height: 20px; } .icon-dashboard { width: 24px; height: 24px; } .icon-diagonal-cross { width: 13px; height: 13px; } .icon-download { width: 14px; height: 13px; } .icon-email { width: 17px; height: 17px; } .icon-facebook { width: 17px; height: 17px; } .icon-group { width: 24px; height: 24px; } .icon-important { width: 16px; height: 16px; } .icon-in-process { width: 64px; height: 64px; } .icon-list { width: 16px; height: 16px; } .icon-loading { width: 16px; height: 16px; } .icon-lock-open { width: 16px; height: 16px; } .icon-lock { width: 16px; height: 16px; } .icon-logo { width: 42px; height: 36px; } .icon-long-arrow-right { width: 11px; height: 11px; } .icon-magnifier { width: 15px; height: 15px; } .icon-marker { width: 17px; height: 19px; } .icon-message { width: 24px; height: 24px; } .icon-mood-bad { width: 60px; height: 59px; } .icon-mood-good { width: 60px; height: 59px; } .icon-mood-ok { width: 60px; height: 59px; } .icon-mood-super-bad { width: 60px; height: 59px; } .icon-mood-supergood { width: 60px; height: 59px; } .icon-note { width: 17px; height: 16px; } .icon-one-ticket { width: 48px; height: 10px; } .icon-organization { width: 16px; height: 16px; } .icon-outbound-calls { width: 17px; height: 17px; } .icon-overviews { width: 24px; height: 24px; } .icon-package { width: 16px; height: 16px; } .icon-paperclip { width: 31px; height: 28px; } .icon-pen { width: 16px; height: 16px; } .icon-person { width: 24px; height: 24px; } .icon-phone { width: 17px; height: 17px; } .icon-plus { width: 20px; height: 20px; } .icon-priority-modified-inner-circle { width: 16px; height: 16px; } .icon-priority-modified-outer-circle { width: 16px; height: 16px; } .icon-priority { width: 16px; height: 16px; } .icon-radio-checked { width: 11px; height: 11px; } .icon-radio { width: 11px; height: 11px; } .icon-received-calls { width: 17px; height: 17px; } .icon-reopening { width: 68px; height: 47px; } .icon-reply-all { width: 16px; height: 16px; } .icon-reply { width: 16px; height: 16px; } .icon-signout { width: 15px; height: 19px; } .icon-split { width: 16px; height: 16px; } .icon-stopwatch { width: 77px; height: 83px; } .icon-switchView { width: 19px; height: 18px; } .icon-team { width: 16px; height: 16px; } .icon-templates { width: 24px; height: 24px; } .icon-tools { width: 24px; height: 24px; } .icon-total-tickets { width: 48px; height: 83px; } .icon-twitter { width: 17px; height: 17px; } .icon-user { width: 16px; height: 16px; }

4
app/assets/stylesheets/zammad.css.scss
View file

@ -507,7 +507,9 @@ table {
justify-content: center;
}
.input-replacement input {
.input-replacement input,
.input-replacement input:not(:checked) ~ .icon-checked,
.input-replacement input:checked ~ .icon-unchecked {
display: none;
}

2
public/assets/images/icons.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 37 KiB

12
public/assets/images/icons/radio-checked.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
<title>radio-checked</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="radio-checked" sketch:type="MSArtboardGroup" fill="#000000">
<path d="M11,5.5 C11,2.46243387 8.53756613,0 5.5,0 C2.46243387,0 0,2.46243387 0,5.5 C0,8.53756613 2.46243387,11 5.5,11 C8.53756613,11 11,8.53756613 11,5.5 L11,5.5 Z M0.932708535,5.51604187 C0.932708535,2.98473676 2.98473676,0.932708535 5.51604187,0.932708535 C8.04734697,0.932708535 10.0993752,2.98473676 10.0993752,5.51604187 C10.0993752,8.04734697 8.04734697,10.0993752 5.51604187,10.0993752 C2.98473676,10.0993752 0.932708535,8.04734697 0.932708535,5.51604187 L0.932708535,5.51604187 Z M5.49188096,7.33333333 C6.50440301,7.33333333 7.3252143,6.51252204 7.3252143,5.5 C7.3252143,4.48747796 6.50440301,3.66666667 5.49188096,3.66666667 C4.47935893,3.66666667 3.65854763,4.48747796 3.65854763,5.5 C3.65854763,6.51252204 4.47935893,7.33333333 5.49188096,7.33333333 L5.49188096,7.33333333 Z" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

12
public/assets/images/icons/radio.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
<title>radio</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="radio" sketch:type="MSArtboardGroup" fill="#CBCBCB">
<path d="M11,5.5 C11,2.46243342 8.53756567,0 5.5,0 C2.46243342,0 0,2.46243342 0,5.5 C0,8.53756567 2.46243342,11 5.5,11 C8.53756567,11 11,8.53756567 11,5.5 L11,5.5 Z M0.932708333,5.51604167 C0.932708333,2.98473633 2.98473633,0.932708333 5.51604167,0.932708333 C8.047347,0.932708333 10.099375,2.98473633 10.099375,5.51604167 C10.099375,8.047347 8.047347,10.099375 5.51604167,10.099375 C2.98473633,10.099375 0.932708333,8.047347 0.932708333,5.51604167 L0.932708333,5.51604167 Z" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB