Improve style of security tab of category modal

This commit is contained in:
Neil Lalonde 2013-05-17 16:09:52 -04:00
parent 191d454589
commit 546a2b654a
3 changed files with 45 additions and 11 deletions

View File

@ -62,20 +62,24 @@
{{#unless is_uncategorized}} {{#unless is_uncategorized}}
<div {{bindAttr class=":modal-tab :options-tab view.securitySelected::invisible"}}> <div {{bindAttr class=":modal-tab :options-tab view.securitySelected::invisible"}}>
<section class='field'> <section class='field'>
<label>{{i18n category.security}}</label>
<label> <label>
{{view Ember.Checkbox checkedBinding="secure"}} {{view Ember.Checkbox checkedBinding="secure"}}
{{i18n category.is_secure}} {{i18n category.is_secure}}
</label> </label>
{{#if secure}} {{#if secure}}
<div> <div class="secure-category-options">
{{i18n category.allowed_groups}} <label>{{i18n category.allowed_groups}}</label>
{{#each groups}} <ul class="badge-list">
{{this}} <a {{action removeGroup this target="view"}}>x</a> {{#each groups}}
{{/each}} <li class="badge-group">
{{this}}
<a {{action removeGroup this target="view"}}><i class="icon icon-remove-sign"></i></a>
</li>
{{/each}}
</ul>
{{view Ember.Select contentBinding="availableGroups" valueBinding="view.selectedGroup"}}
<button {{action addGroup target="view"}} class="btn btn-small">{{i18n category.add_group}}</button>
</div> </div>
{{view Ember.Select contentBinding="availableGroups" valueBinding="view.selectedGroup"}}
<button {{action addGroup target="view"}}>{{i18n category.add_group}}</button>
{{/if}} {{/if}}
</section> </section>
</div> </div>

View File

@ -201,6 +201,22 @@
&.small .modal-body { &.small .modal-body {
height: 290px; height: 290px;
} }
.secure-category-options {
margin: 10px 0 0 16px;
.badge-list {
margin: 10px 0;
li {
margin: 0 4px 8px 0;
a {
color: #888;
cursor: pointer;
}
a:hover {
color: $black;
}
}
}
}
} }
.modal-tab { .modal-tab {

View File

@ -75,4 +75,18 @@
&[href] { &[href] {
color: $badge-posts-color; color: $badge-posts-color;
} }
} }
// Group badge
// --------------------------------------------------
.badge-group {
@extend %badge;
padding: 3px 2px 3px 8px;
color: $black;
text-shadow: 0 1px 0 rgba($white, 0.2);
background-color: #ddd;
border-color: #aaa;
font-size: 12px;
@include box-shadow(inset 0 1px 0 rgba($white, 0.52));
}