]> git.mxchange.org Git - friendica.git/commitdiff
New jot acl selector
authorFabio Comuni <fabrix.xm@gmail.com>
Tue, 19 Jul 2011 14:17:58 +0000 (16:17 +0200)
committerFabio Comuni <fabrix.xm@gmail.com>
Tue, 19 Jul 2011 14:17:58 +0000 (16:17 +0200)
images/default-group-mm.jpg.png [new file with mode: 0644]
images/search_18.png [new file with mode: 0644]
include/acl.js [new file with mode: 0644]
include/acl_selectors.php
include/main.js
mod/acl.php [new file with mode: 0644]
view/acl_selector.tpl [new file with mode: 0644]
view/head.tpl
view/jot-header.tpl
view/theme/duepuntozero/style.css
view/theme/loozah/style.css

diff --git a/images/default-group-mm.jpg.png b/images/default-group-mm.jpg.png
new file mode 100644 (file)
index 0000000..bfc8b33
Binary files /dev/null and b/images/default-group-mm.jpg.png differ
diff --git a/images/search_18.png b/images/search_18.png
new file mode 100644 (file)
index 0000000..5397396
Binary files /dev/null and b/images/search_18.png differ
diff --git a/include/acl.js b/include/acl.js
new file mode 100644 (file)
index 0000000..41b9b19
--- /dev/null
@@ -0,0 +1,236 @@
+function ACL(backend_url, preset){
+       that = this;
+       
+       that.url = backend_url;
+       
+       that.kp_timer = null;
+       
+       if (preset==undefined) preset = [];
+       that.allow_cid = (preset[0] || []);
+       that.allow_gid = (preset[1] || []);
+       that.deny_cid  = (preset[2] || []);
+       that.deny_gid  = (preset[3] || []);
+       that.group_uids = [];
+       that.nw = 5; that.nh = 5;
+       
+       that.list_content = $("#acl-list-content");
+       that.item_tpl = unescape($(".acl-list-item[rel=acl-template]").html());
+       that.showall = $("#acl-showall");
+
+       if (preset.length==0) that.showall.addClass("selected");
+       
+       /*events*/
+       that.showall.click(that.on_showall);
+       $(".acl-button-show").live('click', that.on_button_show);
+       $(".acl-button-hide").live('click', that.on_button_hide);
+       $("#acl-search").keypress(that.on_search);
+       $("#acl-wrapper").parents("form").submit(that.on_submit);
+       
+       /* startup! */
+       that.get(0,100);
+}
+
+ACL.prototype.on_submit = function(){
+       aclfileds = $("#acl-fields").html("");
+       $(that.allow_gid).each(function(i,v){
+               aclfileds.append("<input type='hidden' name='group_allow[]' value='"+v+"'>");
+       });
+       $(that.allow_cid).each(function(i,v){
+               aclfileds.append("<input type='hidden' name='contact_allow[]' value='"+v+"'>");
+       });
+       $(that.deny_gid).each(function(i,v){
+               aclfileds.append("<input type='hidden' name='group_deny[]' value='"+v+"'>");
+       });
+       $(that.deny_cid).each(function(i,v){
+               aclfileds.append("<input type='hidden' name='contact_deny[]' value='"+v+"'>");
+       });     
+}
+
+ACL.prototype.search = function(){
+       var srcstr = $("#acl-search").val();
+       that.list_content.html("");
+       that.get(0,100, srcstr);
+}
+
+ACL.prototype.on_search = function(event){
+       if (that.kp_timer) clearTimeout(that.kp_timer);
+       that.kp_timer = setTimeout( that.search, 1000);
+}
+
+ACL.prototype.on_showall = function(event){
+       event.stopPropagation();
+       if (that.showall.hasClass("selected")){
+               return false;
+       }
+       that.showall.addClass("selected");
+       
+       that.allow_cid = [];
+       that.allow_gid = [];
+       that.deny_cid  = [];
+       that.deny_gid  = [];
+       
+       that.updateview();
+       
+       return false;
+}
+
+ACL.prototype.on_button_show = function(event){
+       event.stopPropagation();
+
+       /*that.showall.removeClass("selected");
+       $(this).siblings(".acl-button-hide").removeClass("selected");
+       $(this).toggleClass("selected");*/
+
+       that.set_allow($(this).parent().attr('id'));
+
+       return false;
+}
+ACL.prototype.on_button_hide = function(event){
+       event.stopPropagation();
+
+       /*that.showall.removeClass("selected");
+       $(this).siblings(".acl-button-show").removeClass("selected");
+       $(this).toggleClass("selected");*/
+
+       that.set_deny($(this).parent().attr('id'));
+
+       return false;
+}
+
+ACL.prototype.set_allow = function(itemid){
+       type = itemid[0];
+       id       = parseInt(itemid.substr(1));
+       switch(type){
+               case "g":
+                       if (that.allow_gid.indexOf(id)<0){
+                               that.allow_gid.push(id)
+                       }else {
+                               that.allow_gid.remove(id);
+                       }
+                       if (that.deny_gid.indexOf(id)>=0) that.deny_gid.remove(id);
+                       break;
+               case "c":
+                       if (that.allow_cid.indexOf(id)<0){
+                               that.allow_cid.push(id)
+                       } else {
+                               that.allow_cid.remove(id);
+                       }
+                       if (that.deny_cid.indexOf(id)>=0) that.deny_cid.remove(id);                     
+                       break;
+       }
+       that.updateview();
+}
+
+ACL.prototype.set_deny = function(itemid){
+       type = itemid[0];
+       id       = parseInt(itemid.substr(1));
+       switch(type){
+               case "g":
+                       if (that.deny_gid.indexOf(id)<0){
+                               that.deny_gid.push(id)
+                       } else {
+                               that.deny_gid.remove(id);
+                       }
+                       if (that.allow_gid.indexOf(id)>=0) that.allow_gid.remove(id);
+                       break;
+               case "c":
+                       if (that.deny_cid.indexOf(id)<0){
+                               that.deny_cid.push(id)
+                       } else {
+                               that.deny_cid.remove(id);
+                       }
+                       if (that.allow_cid.indexOf(id)>=0) that.allow_cid.remove(id);
+                       break;
+       }
+       that.updateview();
+}
+
+ACL.prototype.updateview = function(){
+       if (that.allow_gid.length==0 && that.allow_cid.length==0 &&
+               that.deny_gid.length==0 && that.deny_cid.length==0){
+                       that.showall.addClass("selected");
+                       /* jot acl */
+                               $('#jot-perms-icon').removeClass('lock').addClass('unlock');
+                               $('#jot-public').show();
+                               $('.profile-jot-net input').attr('disabled', false);                    
+                       
+       } else {
+                       that.showall.removeClass("selected");
+                       /* jot acl */
+                               $('#jot-perms-icon').removeClass('unlock').addClass('lock');
+                               $('#jot-public').hide();
+                               $('.profile-jot-net input').attr('disabled', 'disabled');                       
+       }
+       
+       $("#acl-list-content .acl-list-item").each(function(){
+               itemid = $(this).attr('id');
+               type = itemid[0];
+               id       = parseInt(itemid.substr(1));
+               
+               btshow = $(this).children(".acl-button-show").removeClass("selected");
+               bthide = $(this).children(".acl-button-hide").removeClass("selected");  
+               
+               switch(type){
+                       case "g":
+                               var uclass = "";
+                               if (that.allow_gid.indexOf(id)>=0){
+                                       btshow.addClass("selected");
+                                       bthide.removeClass("selected");
+                                       uclass="groupshow";
+                               }
+                               if (that.deny_gid.indexOf(id)>=0){
+                                       btshow.removeClass("selected");
+                                       bthide.addClass("selected");
+                                       uclass="grouphide";
+                               }
+                               
+                               $(that.group_uids[id]).each(function(i,v){
+                                       $("#c"+v).removeClass("groupshow grouphide").addClass(uclass);
+                               });
+                               
+                               break;
+                       case "c":
+                               if (that.allow_cid.indexOf(id)>=0){
+                                       btshow.addClass("selected");
+                                       bthide.removeClass("selected");
+                               }
+                               if (that.deny_cid.indexOf(id)>=0){
+                                       btshow.removeClass("selected");
+                                       bthide.addClass("selected");
+                               }                       
+               }
+               
+       });
+       
+}
+
+
+ACL.prototype.get = function(start,count, search){
+       var postdata = {
+               start:start,
+               count:count,
+               search:search,
+       }
+       
+       $.ajax({
+               type:'POST',
+               url: that.url,
+               data: postdata,
+               dataType: 'json',
+               success:that.populate
+       });
+}
+
+ACL.prototype.populate = function(data){
+       var height = Math.ceil(data.tot / that.nw) * 42;
+       that.list_content.height(height);
+       $(data.items).each(function(){
+               html = "<div class='acl-list-item {4} {5}' id='{2}{3}'>"+that.item_tpl+"</div>";
+               html = html.format( this.photo, this.name, this.type, this.id, '', this.network );
+               if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
+               //console.log(html);
+               that.list_content.append(html);
+       });
+       that.updateview();
+}
+
index c3e26082e3eb498f1c1a88d0fbeef724a1c86398..99de67d6499dd73422d3ebf7827d43a3ee74ab63 100644 (file)
@@ -239,7 +239,7 @@ function populate_acl($user = null,$celeb = false) {
                array_walk($deny_gid,'fixacl');
        }
 
-       $o = '';
+       /*$o = '';
        $o .= '<div id="acl-wrapper">';
        $o .= '<div id="acl-permit-outer-wrapper">';
        $o .= '<div id="acl-permit-text">' . t('Visible To:') . '</div><div id="jot-public">' . t('everybody') . '</div>';
@@ -272,7 +272,20 @@ function populate_acl($user = null,$celeb = false) {
        $o .= '<div id="acl-deny-end"></div>' . "\r\n";
        $o .= '</div>';
        $o .= '</div>' . "\r\n";
-       $o .= '<div id="acl-wrapper-end"></div>' . "\r\n";
+       $o .= '<div id="acl-wrapper-end"></div>' . "\r\n";*/
+       
+       $tpl = get_markup_template("acl_selector.tpl");
+       $o = replace_macros($tpl, array(
+               '$showall'=> t("Visible to everybody"),
+               '$show'          => t("show"),
+               '$hide'          => t("don't show"),
+               '$allowcid' => json_encode($allow_cid),
+               '$allowgid' => json_encode($allow_gid),
+               '$denycid' => json_encode($deny_cid),
+               '$denygid' => json_encode($deny_gid),
+       ));
+       
+       
        return $o;
 
 }
index 896c611d5c162d9f552115cda894fa7ae4234bcc..040e9695e0b7a82f6ced8d69527d2a0be220de53 100644 (file)
                        //console.log(id);
                });
                
+               /* setup field_richtext */
+               setupFieldRichtext();
+               
                /* load tinyMCE if needed and setup field_richtext */
-               if(typeof tinyMCE == "undefined") {
+               /*if(typeof tinyMCE == "undefined") {
                        window.tinyMCEPreInit = {
                                suffix:"",
                                base: baseurl+"/library/tinymce/jscripts/tiny_mce/",
@@ -62,8 +65,8 @@
                        };
                        $.getScript(baseurl     +"/library/tinymce/jscripts/tiny_mce/tiny_mce_src.js", setupFieldRichtext);
                } else {
-                       setupFieldRichtext();
-               }
+               }*/
+               
                
                
                /* nav update event  */
@@ -364,7 +367,6 @@ function setupFieldRichtext(){
        });
 }
 
-
 /** 
  * sprintf in javascript 
  *     "{0} and {1}".format('zero','uno'); 
@@ -377,3 +379,10 @@ String.prototype.format = function() {
     }
     return formatted;
 };
+// Array Remove
+Array.prototype.remove = function(item) {
+  to=undefined; from=this.indexOf(item);
+  var rest = this.slice((to || from) + 1 || this.length);
+  this.length = from < 0 ? this.length + from : from;
+  return this.push.apply(this, rest);
+};
diff --git a/mod/acl.php b/mod/acl.php
new file mode 100644 (file)
index 0000000..352c487
--- /dev/null
@@ -0,0 +1,94 @@
+<?php
+/* ACL selector json backend */
+require_once("include/acl_selectors.php");
+
+function acl_init(&$a){
+       if(!local_user())
+               return "";
+
+
+       $start = (x($_POST,'start')?$_POST['start']:0);
+       $count = (x($_POST,'count')?$_POST['count']:100);
+       $search = (x($_POST,'search')?$_POST['search']:"");
+
+       if ($search!=""){
+               $sql_extra = "AND `name` LIKE '%%".dbesc($search)."%%'";
+       }
+       
+       // count groups and contacts
+       $r = q("SELECT COUNT(`id`) AS g FROM `group` WHERE `deleted` = 0 AND `uid` = %d $sql_extra",
+               intval(local_user())
+       );
+       $group_count = (int)$r[0]['g'];
+       $r = q("SELECT COUNT(`id`) AS c FROM `contact` 
+                       WHERE `uid` = %d AND `self` = 0 
+                         AND `blocked` = 0 AND `pending` = 0 
+                         AND `notify` != '' $sql_extra" ,
+               intval(local_user())
+       );
+       $contact_count = (int)$r[0]['c'];
+       
+       $tot = $group_count+$contact_count;
+       
+       $groups = array();
+       $contacts = array();
+       
+       $r = q("SELECT `group`.`id`, `group`.`name`, GROUP_CONCAT(DISTINCT `group_member`.`contact-id` SEPARATOR ',') as uids
+                       FROM `group`,`group_member` 
+                       WHERE `group`.`deleted` = 0 AND `group`.`uid` = %d 
+                               AND `group_member`.`gid`=`group`.`id`
+                               $sql_extra
+                       GROUP BY `group`.`id`
+                       ORDER BY `group`.`name` 
+                       LIMIT %d,%d",
+               intval(local_user()),
+               intval($start),
+               intval($count)
+       );
+
+       
+       foreach($r as $g){
+               $groups[] = array(
+                       "type"  => "g",
+                       "photo" => "images/default-group-mm.jpg",
+                       "name"  => $g['name'],
+                       "id"    => intval($g['id']),
+                       "uids"  => array_map("intval", explode(",",$g['uids']))
+               );
+       }
+       
+       
+       $r = q("SELECT `id`, `name`, `micro`, `network` FROM `contact` 
+               WHERE `uid` = %d AND `self` = 0 AND `blocked` = 0 AND `pending` = 0 AND `notify` != ''
+               $sql_extra
+               ORDER BY `name` ASC ",
+               intval(local_user())
+       );
+       foreach($r as $g){
+               $contacts[] = array(
+                       "type"  => "c",
+                       "photo" => $g['micro'],
+                       "name"  => $g['name'],
+                       "id"    => intval($g['id']),
+                       "network" => $g['network']
+               );
+       }
+               
+       
+       
+       
+       $items = array_merge($groups, $contacts);
+       
+       $o = array(
+               'tot'   => $tot,
+               'start' => $start,
+               'count' => $count,
+               'items' => $items,
+       );
+       
+       echo json_encode($o);
+
+       killme();
+}
+
+
diff --git a/view/acl_selector.tpl b/view/acl_selector.tpl
new file mode 100644 (file)
index 0000000..3379f57
--- /dev/null
@@ -0,0 +1,24 @@
+<div id="acl-wrapper">
+       <input id="acl-search">
+       <a href="#" id="acl-showall">$showall</a>
+       <div id="acl-list">
+               <div id="acl-list-content">
+               </div>
+       </div>
+       <span id="acl-fields"></span>
+</div>
+
+<div class="acl-list-item" rel="acl-template" style="display:none">
+       <img src="{0}"><p>{1}</p>
+       <a href="#" class='acl-button-show'>$show</a>
+       <a href="#" class='acl-button-hide'>$hide</a>
+</div>
+
+<script>
+$(function(){
+       acl = new ACL(
+               baseurl+"/acl",
+               [$allowcid,$allowgid,$denycid,$denygid]
+       );
+});
+</script>
index ff66997e7c4877ff9a30ac52b87fa8f1bf670c43..f26e41b514c048c247e2669942b3dd8c24a2fb7d 100644 (file)
@@ -12,6 +12,8 @@
 <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
 <script type="text/javascript" src="$baseurl/include/jquery.js" ></script>
+<script type="text/javascript" src="$baseurl/library/tinymce/jscripts/tiny_mce/tiny_mce_src.js" ></script>
+<script type="text/javascript" src="$baseurl/include/acl.js" ></script>
 <script type="text/javascript" src="$baseurl/include/main.js" ></script>
 <script>
 
index d7a429512582d8b9a4b786edd6703709a6caf8ec..5e598e05e8001061c770999ea6fb4bfa9656b51e 100644 (file)
@@ -1,5 +1,4 @@
 
-<script language="javascript" type="text/javascript" src="$baseurl/library/tinymce/jscripts/tiny_mce/tiny_mce_src.js"></script>
 <script language="javascript" type="text/javascript">
 
 var editor;
@@ -91,7 +90,7 @@ tinyMCE.init({
                        }
                );
 
-               $('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() {
+               /*$('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() {
                        var selstr;
                        $('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() {
                                selstr = $(this).text();
@@ -105,7 +104,7 @@ tinyMCE.init({
                                $('.profile-jot-net input').attr('disabled', false);
                        }
 
-               }).trigger('change');
+               }).trigger('change');*/
 
        });
 
index 78a0bff5bedbe0a9cdec194adc056fe12a87ad8d..314fb5e754a602deeb890284757b828e2bd9104f 100644 (file)
@@ -1483,89 +1483,111 @@ input#dfrn-url {
        width: 180px;
 }
 
-.comment-edit-text-empty {
-       color: gray;
-       height: 30px;
-       width: 175px;
-       overflow: auto;
-       margin-bottom: 10px;
+/** acl **/
+#profile-jot-acl-wrapper{
+       overflow:hidden;
+       height: 100%;
 }
 
-.comment-edit-text-full {
-       color: black;
-       height: 150px;
-       width: 350px;
-       overflow: auto;
+#acl-wrapper {
+       width: 805px;
+       float:left;
 }
-
-#group-new-submit-wrapper {
-       margin-top: 30px;
+#acl-search {
+       float:right;
+       background: #ffffff url("../../../images/search_18.png") no-repeat right center;
+       padding-right:20px;
 }
-
-#acl-allow-group-label,
-#acl-allow-contact-label,
-#acl-deny-group-label,
-#acl-deny-contact-label {
+#acl-showall {
+       float: left;
        display: block;
+       width: auto;
+       height: 18px;
+       background-color: #cccccc;
+       padding: 7px 5px 0px 30px;
+       -webkit-border-radius: 5px ;
+       -moz-border-radius: 5px;
+       border-radius: 5px;
+       color: #999999;
+}
+#acl-showall.selected {
+       color: #000000;
+       background-color: #ff9900;
 }
 
-#acl-permit-text {
-       margin-top: 10px;
+#acl-list {
+       width: 805px;
+       height: 210px;
+       border: 1px solid #cccccc;
+       clear: both;
+       margin-top: 30px;
+}
+#acl-list-content {
+       overflow: auto;
+}
+.acl-list-item {
+       display: block;
+       width: 150px;
+       height: 30px;
+       border: 1px solid #cccccc;
+       margin: 5px;
        float: left;
 }
-
-#acl-deny-text {
-       margin-top: 10px;
+.acl-list-item img{
+       width:22px;
+       height: 22px;
+       float: left;
+       margin: 4px;
 }
-
-#jot-public {
+.acl-list-item p { font-size: 10px; margin: 0px; padding: 2px 0px 1px; }
+.acl-list-item a { 
+       font-size: 8px;
+       display: block;
+       width: 40px;
+       height: 10px;
        float: left;
-       margin-top: 10px;
-       margin-left: 15px;
-       color: #FF0000;
+       color: #999999;
+       background-color: #cccccc;
+       margin-right: 5px;
+       -webkit-border-radius: 2px ;
+       -moz-border-radius: 2px;
+       border-radius: 2px;
+       padding-left: 15px;
 }
-
-#acl-permit-text-end {
-       clear: both;
+#acl-wrapper a:hover {
+       text-decoration: none;
+       color:#000000;
 }
-
-#acl-allow-group-label,
-#acl-allow-contact-label,
-#acl-deny-group-label,
-#acl-deny-contact-label {
-       margin-top: 5px;
-       margin-bottom: 5px;
+.acl-button-show.selected {
+       color: #000000;
+       background-color: #9ade00;
 }
-
-
-#group_allow_wrapper,
-#group_deny_wrapper {
-       float: left;
-       width: 100px;
-       margin-right: 10px;
+.acl-button-hide.selected {
+       color: #000000;
+       background-color: #ff4141;
 }
+.acl-list-item.groupshow { border-color: #9ade00; }
+.acl-list-item.grouphide { border-color: #ff4141; }
+/** /acl **/
 
-#contact_allow_wrapper,
-#contact_deny_wrapper {
-       float: left;
-       width: 150px;
-       margin-right: 10px;
-}
 
-#acl-allow-end,
-#acl-deny-end {
-       clear: both;
+.comment-edit-text-empty {
+       color: gray;
+       height: 30px;
+       width: 175px;
+       overflow: auto;
+       margin-bottom: 10px;
 }
-#acl-permit-outer-wrapper,
-#acl-deny-outer-wrapper {
-       padding: 10px;
-       margin-top: 10px;
-       border: 2px solid #BBBBBB;
-       float: left;
+
+.comment-edit-text-full {
+       color: black;
+       height: 150px;
+       width: 350px;
+       overflow: auto;
 }
 
-#acl-wrapper-end {
-       clear: both;
+#group-new-submit-wrapper {
+       margin-top: 30px;
 }
 
 #group-edit-name-label {
index 11ccab8ff9746d67f70f717ef6f4b02997658b25..016b9d837bafa4b65f54394f9c6eadc22de40b72 100644 (file)
@@ -1561,74 +1561,95 @@ padding: 5px 10px 0px;
        overflow: auto;
 }
 
-#group-new-submit-wrapper {
-       margin-top: 30px;
+/** acl **/
+#profile-jot-acl-wrapper{
+       overflow:hidden;
+       height: 100%;
 }
 
-#acl-allow-group-label,
-#acl-allow-contact-label,
-#acl-deny-group-label,
-#acl-deny-contact-label {
-       display: block;
+#acl-wrapper {
+       width: 805px;
+       float:left;
 }
-
-#acl-permit-text {
-    margin-top: 10px;
-    float: left;
+#acl-search {
+       float:right;
+       background: #ffffff url("../../../images/search_18.png") no-repeat right center;
+       padding-right:20px;
 }
-
-#acl-deny-text {
-    margin-top: 10px;
+#acl-showall {
+       float: left;
+       display: block;
+       width: auto;
+       height: 20px;
+       background-color: #cccccc;
+       padding: 5px 5px 0px 30px;
+       -webkit-border-radius: 5px ;
+       -moz-border-radius: 5px;
+       border-radius: 5px;
+       color: #999999;
 }
-
-#jot-public {
-    float: left;
-    margin-top: 10px;
-    margin-left: 15px;
-    color: #FF0000;
+#acl-showall.selected {
+       color: #000000;
+       background-color: #ff9900;
 }
 
-#acl-permit-text-end {
-    clear: both;
+#acl-list {
+       width: 805px;
+       height: 210px;
+       border: 1px solid #cccccc;
+       clear: both;
+       margin-top: 30px;
 }
-
-#acl-allow-group-label,
-#acl-allow-contact-label,
-#acl-deny-group-label,
-#acl-deny-contact-label {
-       margin-top: 5px;
-       margin-bottom: 5px;
+#acl-list-content {
+       overflow: auto;
 }
-
-
-#group_allow_wrapper,
-#group_deny_wrapper {
+.acl-list-item {
+       display: block;
+       width: 150px;
+       height: 30px;
+       border: 1px solid #cccccc;
+       margin: 5px;
        float: left;
-       width: 100px;
-       margin-right: 10px;
 }
-
-#contact_allow_wrapper,
-#contact_deny_wrapper {
+.acl-list-item img{
+       width:22px;
+       height: 22px;
        float: left;
-       width: 150px;
-       margin-right: 10px;
-}
-
-#acl-allow-end,
-#acl-deny-end {
-       clear: both;
+       margin: 4px;
 }
-#acl-permit-outer-wrapper,
-#acl-deny-outer-wrapper {
-       padding: 10px;
-       margin-top: 10px;
-       border: 2px solid #BBBBBB;
+.acl-list-item p { font-size: 10px; margin: 0px; padding: 2px 0px 1px; }
+.acl-list-item a { 
+       font-size: 8px;
+       display: block;
+       width: 40px;
+       height: 10px;
        float: left;
+       color: #999999;
+       background-color: #cccccc;
+       margin-right: 5px;
+       -webkit-border-radius: 2px ;
+       -moz-border-radius: 2px;
+       border-radius: 2px;
+       padding-left: 15px;
+}
+#acl-wrapper a:hover {
+       text-decoration: none;
+       color:#000000;
+}
+.acl-button-show.selected {
+       color: #000000;
+       background-color: #9ade00;
+}
+.acl-button-hide.selected {
+       color: #000000;
+       background-color: #ff4141;
 }
+.acl-list-item.groupshow { border-color: #9ade00; }
+.acl-list-item.grouphide { border-color: #ff4141; }
+/** /acl **/
 
-#acl-wrapper-end {
-       clear: both;
+#group-new-submit-wrapper {
+       margin-top: 30px;
 }
 
 #group-edit-name-label {