From 546a2b654acad03fa2c218613a30fa3e88f8a76a Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Fri, 17 May 2013 16:09:52 -0400
Subject: [PATCH] Improve style of security tab of category modal
---
.../modal/edit_category.js.handlebars | 24 +++++++++++--------
.../stylesheets/application/modal.css.scss | 16 +++++++++++++
.../stylesheets/components/badges.css.scss | 16 ++++++++++++-
3 files changed, 45 insertions(+), 11 deletions(-)
diff --git a/app/assets/javascripts/discourse/templates/modal/edit_category.js.handlebars b/app/assets/javascripts/discourse/templates/modal/edit_category.js.handlebars
index 8969e1c51..e8c5a58a6 100644
--- a/app/assets/javascripts/discourse/templates/modal/edit_category.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/modal/edit_category.js.handlebars
@@ -62,20 +62,24 @@
{{#unless is_uncategorized}}
<div {{bindAttr class=":modal-tab :options-tab view.securitySelected::invisible"}}>
<section class='field'>
- <label>{{i18n category.security}}</label>
<label>
- {{view Ember.Checkbox checkedBinding="secure"}}
- {{i18n category.is_secure}}
+ {{view Ember.Checkbox checkedBinding="secure"}}
+ {{i18n category.is_secure}}
</label>
{{#if secure}}
- <div>
- {{i18n category.allowed_groups}}
- {{#each groups}}
- {{this}} <a {{action removeGroup this target="view"}}>x</a>
- {{/each}}
+ <div class="secure-category-options">
+ <label>{{i18n category.allowed_groups}}</label>
+ <ul class="badge-list">
+ {{#each groups}}
+ <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>
- {{view Ember.Select contentBinding="availableGroups" valueBinding="view.selectedGroup"}}
- <button {{action addGroup target="view"}}>{{i18n category.add_group}}</button>
{{/if}}
</section>
</div>
diff --git a/app/assets/stylesheets/application/modal.css.scss b/app/assets/stylesheets/application/modal.css.scss
index f4b6d2822..d0eb5cf0b 100644
--- a/app/assets/stylesheets/application/modal.css.scss
+++ b/app/assets/stylesheets/application/modal.css.scss
@@ -201,6 +201,22 @@
&.small .modal-body {
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 {
diff --git a/app/assets/stylesheets/components/badges.css.scss b/app/assets/stylesheets/components/badges.css.scss
index 67fd02409..829b306a7 100644
--- a/app/assets/stylesheets/components/badges.css.scss
+++ b/app/assets/stylesheets/components/badges.css.scss
@@ -75,4 +75,18 @@
&[href] {
color: $badge-posts-color;
}
-}
\ No newline at end of file
+}
+
+// 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));
+}