A filter UI for permission select. with Harry's JS

app/assets/javascripts/inc/permission-checkbox.js

@@ -1,5 +1,5 @@
 $(document).ready(function() {
-	$('.check[checked="checked"]').parents(".checkbox").addClass("checked");
+	$('.check[checked="checked"]').parents(".checkbox").addClass("checked")
 	$(".checkbox").click(function(){
 		if($(this).children(".check").attr("checked")){
 			// uncheck
@@ -11,4 +11,10 @@ $(document).ready(function() {
 			$(this).addClass("checked");
 		}
 	});
+	$(".checkbox").popover({
+		trigger: 'hover',
+		placement: 'bottom',
+		delay: { show: 100, hide: 300 },
+	});
+	//$(".checkbox").popover('toggle');
 });

app/assets/stylesheets/inc/permission-checkbox.css

@@ -1,53 +0,0 @@
-.checkblock {
-	display: inline-block;
-	float: left;
-	width: 200px;
-}
-.check[type="checkbox"]{
-	display:none;
-}
-.checkbox{
-	padding:5px;
-	margin:5px;
-	display: inline-block;
-	color:#777777;
-	text-shadow: 0 1px 0px rgba(255,255,255,.4);
-	border-radius: 3px;
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	height: 30px;
-	position: relative;
-	cursor: pointer;
-	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
-	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
-	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-.checkbox .check-icon {
-	display: none;
-	position: absolute;
-	width: 22px;
-	height: 22px;
-	border-radius: 11px;
-	background-color: #d0f311;
-	right: -5px;
-    top: -5px;
-    box-shadow: 0px 0px 5px rgba(0,0,0,.05);
-}
-.checkbox .check-icon i {
-	margin: 1px 0 0 3px;
-}
-.checkbox .member-name {
-	line-height: 30px;
-	padding: 0 10px;
-}
-img.member-img {
-    display: inline-block;
-    float: left;
-    max-width: 30px;
-}
-.checked .check-icon {
-	display: block;
-}

vendor/built_in_modules/announcement/app/views/panel/announcement/back_end/fact_checks/_privilege_user.html.erb

@@ -1,11 +1,14 @@
-<%= content_tag :div ,:id => "users_checkbox_ary", do -%>
+<%= content_tag :div ,:id => "users_checkbox_ary",:class => 'clear' do -%>
 <% sys_users = User.all -%>
 	<% sys_users.each do |user| -%>
 	
 			<div class="checkblock">
-				<div class="checkbox clear">
+				
+				<% user.sub_roles.each do |sr| %>
+					<div class="for_unit" style="display:none;"> <%= sr.key %></div>
+				<% end %>
+				<%= content_tag :div,:data=>{'original-title'=>t('announcement.bulletin.fact_check_setting_window_title'),:content => "#{user.sub_roles.collect{|sr| sr.key}.join(',')}"},:class=>"checkbox clear" do %>
 					<div class="check-icon">
-						<i class="icons-check-2 icons-white"></i>
 					</div>
 					<div class='member-avatar'>
 						<% if user.avatar? %>
@@ -16,7 +19,7 @@
 					</div>
 					<%= label_tag "lab-user-#{user.id}", (user.name rescue ''),:class=>"member-name",:id=>nil -%>
 					<%= check_box_tag "[users][#{user.id}]", 'true',users.include?(user),:class => "check"   -%>
-				</div>
+				<%end -%>
 			</div>
 
 	<% end -%>

vendor/built_in_modules/announcement/app/views/panel/announcement/back_end/fact_checks/setting.html.erb

@@ -2,7 +2,9 @@
 	<%= stylesheet_link_tag "inc/permission-checkbox"  %>
 <% end %>
 <% content_for :page_specific_javascript do %>
+	<%= javascript_include_tag "bootstrap"  %>
 	<%= javascript_include_tag "inc/permission-checkbox"  %>
+	<%= javascript_include_tag "inc/search"  %>
 <% end %>
 <%#= label_tag :fact_check_setting, t("announcement.bulletin.fact_check_setting") %>
 <%= form_tag('', :remote => true)  %>
@@ -12,6 +14,7 @@
             <div class="form-search" style="margin: 5px 10px;">
                 <%= label_tag :category, t("announcement.bulletin.category") %>
                 <%= select_tag "category_id", options_from_collection_for_select(@bulletin_categorys, "id", "key") %>
+								<%= search_field_tag 'user_filter' %>
             </div>
         </li>
     </ul>
@@ -27,6 +30,9 @@
 </div>
 
 <script type="text/javascript" charset="utf-8">
+var availableTags = [];
+$(function() {
+
 	$('#category_id').change(function() {
 	  $(this).parents('form').submit();
 	});

vendor/built_in_modules/announcement/config/locales/en.yml

@@ -42,6 +42,8 @@ en:
       fact_check_not_pass_reason: 'Reason'
       fact_check_pending: 'Pending'
       fact_check_pass: 'Pass'
+      fact_check_setting_window_title: 'Unit'
+      
   # admin:
   #     action: Action
   #     add_language: Add language

vendor/built_in_modules/announcement/config/locales/zh_tw.yml

@@ -37,7 +37,7 @@ zh_tw:
       fact_check_not_pass: '不通過'
       fact_check_pass: '通過'
       fact_check_not_pass_reason: '不通過原因'
-      
+      fact_check_setting_window_title: '單位'
 #  admin:
 #    action: 行動
 #    add_language: 新增語言