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

Common style for radios & checkboxes

Browse source
This commit is contained in:
Felix Niklas 2019-03-25 13:58:52 +01:00 committed by Martin Edenhofer
parent d998f36f11
commit eb9767278d
6 changed files with 82 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/javascripts/app/views/generic/checkbox.jst.eco
View file

@ -1,10 +1,11 @@
<div class="<%= @attribute.class %> checkbox"> <div class="<%= @attribute.class %> checkbox">
<% for row in @attribute.options: %> <% for row in @attribute.options: %>
<label class="inline-label checkbox-replacement"> <label class="checkbox-replacement<%= ' is-disabled' if row.disabled %>">
<input type="checkbox" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %>/> <input type="checkbox" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %> <%= row.disabled %>>
<%- @Icon('checkbox', 'icon-unchecked') %> <%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %> <%- @Icon('checkbox-checked', 'icon-checked') %>
<span class="label-text"><%= row.name %> <% if row.note: %>- <span class="help-text"><%- @T(row.note) %></span><% end %></span> <span class="label-text"><%= row.name %></span>
<% if row.note: %><span class="help-text"><%- @T(row.note) %></span><% end %>
</label> </label>
<% end %> <% end %>
</div> </div>

8
app/assets/javascripts/app/views/generic/permission.jst.eco
View file

@ -5,15 +5,17 @@
<input type="checkbox" value="<%= permission.id %>" name="permission_ids" <% if _.contains(@params.permission_ids, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %> data-permission-name="<%= permission.name %>"/> <input type="checkbox" value="<%= permission.id %>" name="permission_ids" <% if _.contains(@params.permission_ids, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %> data-permission-name="<%= permission.name %>"/>
<%- @Icon('checkbox', 'icon-unchecked') %> <%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %> <%- @Icon('checkbox-checked', 'icon-checked') %>
<span class="label-text"><%= permission.displayName() %> - <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span></span> <span class="label-text"><%= permission.displayName() %></span>
<span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span>
</label> </label>
<% else: %> <% else: %>
<div style="padding-left: 20px;" class="js-subPermissionList"> <div class="checkbox-child js-subPermissionList">
<label class="inline-label checkbox-replacement"> <label class="inline-label checkbox-replacement">
<input type="checkbox" value="<%= permission.id %>" name="permission_ids" <% if _.contains(@params.permission_ids, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %> data-permission-name="<%= permission.name %>"/> <input type="checkbox" value="<%= permission.id %>" name="permission_ids" <% if _.contains(@params.permission_ids, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %> data-permission-name="<%= permission.name %>"/>
<%- @Icon('checkbox', 'icon-unchecked') %> <%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %> <%- @Icon('checkbox-checked', 'icon-checked') %>
<span class="label-text"><%= permission.displayName().replace(/^.+?\./, '') %> - <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span></span> <span class="label-text"><%= permission.displayName().replace(/^.+?\./, '') %></span>
<span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span>
</label> </label>
<% if _.contains(permission.preferences.plugin, 'groups'): %> <% if _.contains(permission.preferences.plugin, 'groups'): %>
<div style="padding-left: 18px; padding-top: 10px;" class="js-groupList <% if @hideGroups: %>js-groupListHide hidden<% end %>"> <div style="padding-left: 18px; padding-top: 10px;" class="js-groupList <% if @hideGroups: %>js-groupListHide hidden<% end %>">

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

@ -1,9 +1,11 @@
<div class="<%= @attribute.class %>"> <div class="<%= @attribute.class %> radio radio--list">
<% for row in @attribute.options: %> <% for row in @attribute.options: %>
<label> <label class="inline-label radio-replacement<%= ' is-disabled' if row.disabled %>">
<input type="radio" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %>> <%= row.name %> <% if row.note: %>- <%- @T(row.note) %><% end %> <input type="radio" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %> <%= row.disabled %>>
<%- @Icon('radio') %> <%- @Icon('radio', 'icon-unchecked') %>
<%- @Icon('radio-checked') %> <%- @Icon('radio-checked', 'icon-checked') %>
<span class="label-text"><%- @T(row.name) %></span>
<% if row.note: %><span class="help-text"><%- @T(row.note) %></span><% end %>
</label> </label>
<% end %> <% end %>
</div> </div>

3
app/assets/javascripts/app/views/generic/user_permission.jst.eco
View file

@ -4,7 +4,8 @@
<input type="checkbox" value="<%= role.id %>" name="role_ids" <% if @rolesSelected[role.id]: %>checked<% end %>/> <input type="checkbox" value="<%= role.id %>" name="role_ids" <% if @rolesSelected[role.id]: %>checked<% end %>/>
<%- @Icon('checkbox', 'icon-unchecked') %> <%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %> <%- @Icon('checkbox-checked', 'icon-checked') %>
<span class="label-text"><%- @T(role.displayName()) %> <% if role.note: %>- <span class="help-text"><%- @T(role.note) %></span><% end %></span> <span class="label-text"><%- @T(role.displayName()) %></span>
<% if role.note: %><span class="help-text"><%- @T(role.note) %></span><% end %>
</label> </label>
<% end %> <% end %>
<div class="js-groups"></div> <div class="js-groups"></div>

8
app/assets/javascripts/app/views/profile/token_access_create.jst.eco
View file

@ -20,15 +20,17 @@
<input type="checkbox" value="<%= permission.name %>" name="permission" <% if @params && _.contains(@params.permissions, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %>/> <input type="checkbox" value="<%= permission.name %>" name="permission" <% if @params && _.contains(@params.permissions, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %>/>
<%- @Icon('checkbox', 'icon-unchecked') %> <%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %> <%- @Icon('checkbox-checked', 'icon-checked') %>
<span class="label-text"><%= permission.name %> - <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span></span> <span class="label-text"><%= permission.name %></span>
<span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span>
</label> </label>
<% else: %> <% else: %>
<div style="padding-left: 20px;" class="js-subPermissionList"> <div class="checkbox-child js-subPermissionList">
<label class="inline-label checkbox-replacement"> <label class="inline-label checkbox-replacement">
<input type="checkbox" value="<%= permission.name %>" name="permission" <% if @params && _.contains(@params.permissions, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %>/> <input type="checkbox" value="<%= permission.name %>" name="permission" <% if @params && _.contains(@params.permissions, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %>/>
<%- @Icon('checkbox', 'icon-unchecked') %> <%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %> <%- @Icon('checkbox-checked', 'icon-checked') %>
<span class="label-text"><%= permission.name.replace(/^.+?\./, '') %> - <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span></span></span> <span class="label-text"><%= permission.name.replace(/^.+?\./, '') %></span>
<span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span>
</label> </label>
</div> </div>
<% end %> <% end %>

94
app/assets/stylesheets/zammad.scss
View file

@ -1080,27 +1080,15 @@ th.align-right {
vertical-align: middle; vertical-align: middle;
} }
.checkbox-list {
list-style: none;
margin-bottom: 15px;
padding: 3px 12px;
font-size: 14px;
line-height: 25px;
color: hsl(60,1%,34%);
background: white;
border: 1px solid hsl(0, 0%, 90%);
border-radius: 3px;
}
.checkbox-replacement, .checkbox-replacement,
.radio-replacement { .radio-replacement {
padding: 0; padding: 0;
margin: 0; margin: 0;
@extend .u-clickable;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
@extend %clickable;
.icon-checked { .icon-checked {
color: black; color: black;
@ -1327,7 +1315,6 @@ h5 {
} }
label, label,
.checkbox.form-group label,
.label { .label {
text-transform: uppercase; text-transform: uppercase;
color: hsl(198,19%,72%); color: hsl(198,19%,72%);
@ -1372,7 +1359,6 @@ table {
.label-text { .label-text {
@include bidi-style(margin-left, 3px, margin-right, 0); @include bidi-style(margin-left, 3px, margin-right, 0);
@extend %clickable;
} }
.label-success, .label-success,
@ -1657,7 +1643,8 @@ input[type=date],
input[type=url], input[type=url],
textarea, textarea,
.form-control, .form-control,
.checkbox.form-group .checkbox { .form-group .checkbox,
.form-group .radio {
display: block; display: block;
padding: 7px 12px; padding: 7px 12px;
width: 100%; width: 100%;
@ -6931,31 +6918,64 @@ footer {
} }
} }
.checkbox.form-group .checkbox {
margin-top: 0;
margin-bottom: 15px;
height: auto;
padding-top: 3px;
padding-bottom: 3px;
background: hsl(210,17%,98%);
}
.checkbox.form-group label {
padding: 0 2px;
cursor: default;
}
.checkbox, .checkbox,
.radio { .radio {
&.form-group .controls label { font-size: 14px;
padding: 2px 0; padding: 0 6px;
font: inherit;
font-size: 13px; .form-group & {
margin-bottom: 0; padding: 0 6px;
list-style: none;
height: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
border: none;
}
.checkbox-replacement {
display: inline-block;
}
label {
padding-left: 0;
min-height: 0;
}
> label,
&-child {
margin-top: 5px;
font-family: inherit;
font-size: 14px;
color: inherit; color: inherit;
text-transform: inherit; text-transform: inherit;
letter-spacing: 0; letter-spacing: 0;
@extend .u-clickable; line-height: 1.2;
&:first-child {
margin-top: 0;
}
&.is-disabled {
cursor: default;
touch-action: default;
span {
opacity: .33;
}
}
}
&-child {
padding-left: 20px;
}
.help-text {
display: table;
color: hsl(0,0%,60%);
margin-left: 18px;
font-size: .92em;
margin-bottom: 3px;
} }
} }
@ -7965,7 +7985,7 @@ output {
background: white; background: white;
table-layout: auto; table-layout: auto;
margin-bottom: 20px; margin-bottom: 20px;
word-break: break-all; word-break: break-word;
word-wrap: break-word; word-wrap: break-word;
&.is-invalid { &.is-invalid {