acl: acl_selector.tpl and some styling to the acl

css/style.css

@@ -110,7 +110,7 @@ iframe, img {
 
 .btn-default {
     background: #ededed;
-    color: #7a7a7a!important;
+    color: #7a7a7a;
 }
 .btn-sm {
     padding: 4px 8px;
@@ -941,10 +941,15 @@ section #jotOpen {
 }
 
 /* ACL */
+/*#jot-modal-body {
+    height: auto;
+    max-height: calc(100vh - 130px);
+    overflow-y: hidden;
+}*/
 #acl-search {
     margin-top: 20px;
-    padding: 8px;
-    border: 1px solid #ccc;
+    /*padding: 8px;*/
+    /*border: 1px solid #ccc;*/
     width: 100%;
 }
 #acl-list {
@@ -959,6 +964,11 @@ section #jotOpen {
     -moz-border-radius: 4px;
     border-radius: 4px;
 }
+#acl-list-content {
+    overflow-y: auto;
+    max-height: calc(100vh - 330px);
+    height: auto !important;
+}
 .acl-list-item {
     width: 48%;
     width: calc(50% - 10px);
@@ -991,7 +1001,22 @@ section #jotOpen {
 .acl-list-item.grouphide {
     background-color: #E68364;
 }
-
+.acl-button-show, .acl-button-hide {
+    float: right;
+    margin-left: 5px;
+}
+#acl-showall.selected {
+    background-color: #4CAF50;
+    color: #fff;
+}
+.acl-button-show.selected {
+    background-color: #4CAF50;
+    color: #fff;
+}
+.acl-button-hide.selected {
+    background-color: #F44336;
+    color: #fff;
+}
 
 /*
 /* Stream

templates/acl_selector.tpl

@@ -0,0 +1,42 @@
+
+<div id="acl-wrapper">
+	<button id="acl-showall" class="btn btn-block btn-default"><i class="fa fa-globe"></i> {{$showall}}</button>
+	<div class="form-group form-group-search">
+	<input type="text" id="acl-search" class="form-control form-search">
+	</div>
+	<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 data-src="{0}"><p>{1}</p>
+	<button class='acl-button-hide btn btn-sm btn-default'>{{$hide}}</button>
+	<button class='acl-button-show btn btn-sm btn-default'>{{$show}}</button>
+</div>
+
+{{if $networks}}
+<hr style="clear:both"/>
+<div class="form-group">
+	<label for="profile-jot-email" id="profile-jot-email-label">{{$emailcc}}</label>
+	<input type="text" name="emailcc" id="profile-jot-email" class="form-control" title="{{$emtitle|escape:'html'}}" />
+</div>
+<div id="profile-jot-email-end"></div>
+
+{{if $jotnets}}
+{{$jotnets}}
+{{/if}}{{/if}}
+
+<script>
+$(document).ready(function() {
+	if(typeof acl=="undefined"){
+		acl = new ACL(
+			baseurl+"/acl",
+			[ {{$allowcid}},{{$allowgid}},{{$denycid}},{{$denygid}} ],
+			{{$features.aclautomention}},
+			{{if $APP->is_mobile}}true{{else}}false{{/if}}
+		);
+	}
+});
+</script>