bootstrapify aclselector

13 files changed, 123 insertions, 160 deletions

diff --git a/include/acl_selectors.php b/include/acl_selectors.php
index 749ca75eb..6ce4c3f9b 100644
--- a/include/acl_selectors.php
+++ b/include/acl_selectors.php
@@ -230,15 +230,21 @@ function populate_acl($defaults = null,$unused = false) {
 		array_walk($deny_gid,'fixacl');
 	}
 	
+	$jotnets = '';
+	call_hooks('jot_networks', $jotnets);
+
 	$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"),
+		'$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),
+		'$jotnets' => $jotnets,
+		'$aclModalTitle' => t('Permissions'),
+		'$aclModalDismiss' => t('Close')
 	));
 	
 	
diff --git a/include/conversation.php b/include/conversation.php
index 9ffa1e77a..541da1d9b 100644
--- a/include/conversation.php
+++ b/include/conversation.php
@@ -1153,7 +1153,7 @@ function status_editor($a,$x,$popup=false) {
 		'$encrypt' => t('Encrypt text'),
 		'$cipher' => $cipher,
 		'$expiryModalOK' => t('OK'),
-		'$expiryModalCANCEL' => t('Cancel'),
+		'$expiryModalCANCEL' => t('Cancel')
 	));
 
 
diff --git a/mod/chat.php b/mod/chat.php
index 88f456422..bf6eed57c 100644
--- a/mod/chat.php
+++ b/mod/chat.php
@@ -203,6 +203,7 @@ function chat_content(&$a) {
 		$o = replace_macros(get_markup_template('chatroom_new.tpl'),array(
 			'$header' => t('New Chatroom'),
 			'$name' => array('room_name',t('Chatroom Name'),'', ''),
+			'$permissions' =>  t('Permissions'),
 			'$acl' => populate_acl($channel_acl),
 			'$submit' => t('Submit')
 		));
@@ -228,4 +229,4 @@ function chat_content(&$a) {
  
 	return $o;
 
-}
\ No newline at end of file
+}
diff --git a/view/js/acl.js b/view/js/acl.js
index 308e65131..28e47011f 100644
--- a/view/js/acl.js
+++ b/view/js/acl.js
@@ -17,7 +17,7 @@ function ACL(backend_url, preset){
 	that.item_tpl = unescape($(".acl-list-item[rel=acl-template]").html());
 	that.showall = $("#acl-showall");
 
-	if (preset.length==0) that.showall.addClass("selected");
+	if (preset.length==0) that.showall.removeClass("btn-default").addClass("btn-warning");
 	
 	/*events*/
 
@@ -70,10 +70,10 @@ ACL.prototype.on_showall = function(event){
 	event.preventDefault()
 	event.stopPropagation();
 	
-	if (that.showall.hasClass("selected")){
+	if (that.showall.hasClass("btn-warning")){
 		return false;
 	}
-	that.showall.addClass("selected");
+	that.showall.removeClass("btn-default").addClass("btn-warning");
 	
 	that.allow_cid = [];
 	that.allow_gid = [];
@@ -164,7 +164,7 @@ ACL.prototype.set_deny = function(itemid){
 ACL.prototype.update_view = 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");
+			that.showall.removeClass("btn-default").addClass("btn-warning");
 			/* jot acl */
 				$('#jot-perms-icon').removeClass('icon-lock').addClass('icon-unlock');
 				$('#jot-public').show();
@@ -174,7 +174,7 @@ ACL.prototype.update_view = function(){
 				}
 			
 	} else {
-			that.showall.removeClass("selected");
+			that.showall.removeClass("btn-warning").addClass("btn-default");
 			/* jot acl */
 				$('#jot-perms-icon').removeClass('icon-unlock').addClass('icon-lock');
 				$('#jot-public').hide();
@@ -190,20 +190,20 @@ ACL.prototype.update_view = function(){
 		type = itemid[0];
 		id 	 = itemid.substr(1);
 		
-		btshow = $(this).children(".acl-button-show").removeClass("selected");
-		bthide = $(this).children(".acl-button-hide").removeClass("selected");	
+		btshow = $(this).children(".acl-button-show").removeClass("btn-success").addClass("btn-default");
+		bthide = $(this).children(".acl-button-hide").removeClass("btn-danger").addClass("btn-default");
 		
 		switch(type){
 			case "g":
 				var uclass = "";
 				if (that.allow_gid.indexOf(id)>=0){
-					btshow.addClass("selected");
-					bthide.removeClass("selected");
+					btshow.removeClass("btn-default").addClass("btn-success");
+					bthide.removeClass("btn-danger").addClass("btn-default");
 					uclass="groupshow";
 				}
 				if (that.deny_gid.indexOf(id)>=0){
-					btshow.removeClass("selected");
-					bthide.addClass("selected");
+					btshow.removeClass("btn-success").addClass("btn-default");
+					bthide.removeClass("btn-default").addClass("btn-danger");
 					uclass="grouphide";
 				}
 				
@@ -223,12 +223,12 @@ ACL.prototype.update_view = function(){
 				break;
 			case "c":
 				if (that.allow_cid.indexOf(id)>=0){
-					btshow.addClass("selected");
-					bthide.removeClass("selected");
+					btshow.removeClass("btn-default").addClass("btn-success");
+					bthide.removeClass("btn-danger").addClass("btn-default");
 				}
 				if (that.deny_cid.indexOf(id)>=0){
-					btshow.removeClass("selected");
-					bthide.addClass("selected");
+					btshow.removeClass("btn-success").addClass("btn-default");
+					bthide.removeClass("btn-default").addClass("btn-danger");
 				}			
 		}
 		
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 2b4314fdb..2138f05ca 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1521,7 +1521,7 @@ header {
   right: 43%;
   margin: 0px;
   padding: 0px;
-  z-index: 1400;
+  z-index: 1040;
   color: #fff;
 }
 
@@ -1552,101 +1552,73 @@ header {
 	clear: both;
 }
 
-#acl-wrapper {
-	width: 690px;
-	float:left;
-}
-
 #acl-search {
-	float:right;
-	background: #ffffff url("../../../../images/search_18.png") no-repeat right center;
-	padding-right:20px;
+	margin-top: 20px;
+	padding: 8px;
+	border: 1px solid #ccc;
+	width: 100%;
 }
-#acl-showall {
-	float: left;
-	display: block;
-	width: auto;
-	height: 26px;
-	background-color: #cccccc;
-	background-image: url("../../../../images/show_all_off.png");
-	background-position: 7px 7px;
-	background-repeat: no-repeat;
-	padding: 7px 5px 0px 30px;
-	-webkit-border-radius: $radiuspx;
-	-moz-border-radius: $radiuspx;
-	border-radius: $radiuspx;
-	color: #999999;
+
+#acl-search::-webkit-input-placeholder {
+	font-family: FontAwesome;
 }
-#acl-showall.selected {
-	color: #000000;
-	background-color: #ff9900;
-	background-image: url("../../../../images/show_all_on.png");
+
+#acl-search::-moz-placeholder {
+	font-family: FontAwesome;
 }
 
 #acl-list {
-	height: 210px;
+	display: block;
 	border: 1px solid #cccccc;
-	clear: both;
-	margin-top: 30px;
 	overflow: auto;
+	clear: both;
+	min-height: 62px;
+	margin-top: 20px;
+	padding: 10px 10px 0px 0px;
+	-webkit-border-radius: $radiuspx ;
+	-moz-border-radius: $radiuspx;
+	border-radius: $radiuspx;
 }
-#acl-list-content {
-	
-}
+
 .acl-list-item {
-	display: block;
-	width: 150px;
-	height: 30px;
+	width: calc(50% - 10px);
 	border: 1px solid #cccccc;
-	margin: 5px;
+	margin: 0px 0px 10px 10px;
+	padding: 5px;
 	float: left;
+	-webkit-border-radius: $radiuspx ;
+	-moz-border-radius: $radiuspx;
+	border-radius: $radiuspx;
 }
+
 .acl-list-item img{
-	width:22px;
-	height: 22px;
+	width: 40px;
+	height: 40px;
 	float: left;
-	margin: 4px;
+	margin-right: 5px;
+	-webkit-border-radius: $radiuspx ;
+	-moz-border-radius: $radiuspx;
+	border-radius: $radiuspx;
 }
+
 .acl-list-item.taggable {
 	background-color: #ddddff;
 }
 
-.acl-list-item p { height: 12px; font-size: 10px; margin: 0px; overflow: hidden;}
-.acl-list-item a { 
-	font-size: 8px;
-	display: block;
-	width: 40px;
-	height: 10px;
-	float: left;
-	color: #999999;
-	background-color: #cccccc;
-	background-position: 3px 3px;
-	background-repeat: no-repeat;
-	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-list-item p {
+	font-size: $font_size;
+	margin: 0px;
+	overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
-.acl-button-show { background-image: url("../../../../images/show_off.png"); }
-.acl-button-hide { background-image: url("../../../../images/hide_off.png"); }
 
-.acl-button-show.selected {
-	color: #000000;
-	background-color: #9ade00;
-	background-image: url("../../../../images/show_on.png");
-}
-.acl-button-hide.selected {
-	color: #000000;
-	background-color: #ff4141;
-	background-image: url("../../../../images/hide_on.png");
+.acl-button-show,
+.acl-button-hide {
+	float: right;
+	margin-left: 5px;
 }
-.acl-list-item.groupshow { border-color: #9ade00; }
-.acl-list-item.grouphide { border-color: #ff4141; }
 
 .contact-block-content {
 	margin-top: 8px;
@@ -2284,4 +2256,8 @@ blockquote {
 		width: 32px !important;
 		height: 32px !important;
 	}
+
+	.acl-list-item {
+		width: calc(100% - 10px);
+	}
 }
diff --git a/view/tpl/acl_selector.tpl b/view/tpl/acl_selector.tpl
index d869562e2..c98350843 100755
--- a/view/tpl/acl_selector.tpl
+++ b/view/tpl/acl_selector.tpl
@@ -1,18 +1,34 @@
-<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'></a>
-	<a href="#" class='acl-button-hide'></a>
-</div>
+<div class="modal" id="aclModal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+				<h4 class="modal-title">{{$aclModalTitle}}</h4>
+			</div>
+			<div class="modal-body">
+				<div id="acl-wrapper">
+					<button id="acl-showall" class="btn btn-block btn-default"><i class="icon-globe"></i> {{$showall}}</button>
+					<input type="text" id="acl-search" placeholder="&#xf002;">
+					<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>
+					<button class="acl-button-hide btn btn-xs btn-default"><i class="icon-remove"></i> {{$hide}}</button>
+					<button class="acl-button-show btn btn-xs btn-default"><i class="icon-ok"></i> {{$show}}</button>
+				</div>
+				{{if $jotnets}}
+				{{$jotnets}}
+				{{/if}}
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-default" data-dismiss="modal">{{$aclModalDismiss}}</button>
+			</div>
+		</div><!-- /.modal-content -->
+	</div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
 
 <script>
 $(document).ready(function() {
diff --git a/view/tpl/chatroom_new.tpl b/view/tpl/chatroom_new.tpl
index 86eadb132..287f95cc0 100644
--- a/view/tpl/chatroom_new.tpl
+++ b/view/tpl/chatroom_new.tpl
@@ -2,10 +2,11 @@
 
 <form action="chat" method="post" >
 {{include file="field_input.tpl" field=$name}}
-<br />
-<br />
+<button class="btn btn-default btn-xs" data-toggle="modal" data-target="#aclModal" onclick="return false;">{{$permissions}}</button>
 {{$acl}}
 <div class="clear"></div>
+<br />
+<br />
 <input type="submit" name="submit" value="{{$submit}}" />
 </form>
 
diff --git a/view/tpl/jot-header.tpl b/view/tpl/jot-header.tpl
index 25a7912ad..27b081b57 100755
--- a/view/tpl/jot-header.tpl
+++ b/view/tpl/jot-header.tpl
@@ -86,11 +86,7 @@ function initEditor(cb){
 		});
 
 		editor = true;
-		// setup acl popup
-		  $("a#jot-perms-icon").colorbox({ 
-				  'inline' : true, 
-				  'transition' : 'elastic' 
-			});
+
 	} else {
 		if (typeof cb!="undefined") cb();
 	}
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index e1b8dc906..c4fdba0f5 100755
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -11,6 +11,7 @@
 		<input type="hidden" name="post_id" value="{{$post_id}}" />
 		<input type="hidden" name="webpage" value="{{$webpage}}" />
 		<input type="hidden" name="preview" id="jot-preview" value="0" />
+		{{if $showacl}}{{$acl}}{{/if}}
 		{{$mimeselect}}
 		{{$layoutselect}}
 		{{if $id_select}}
@@ -75,7 +76,9 @@
 			</div>
 			<div id="profile-jot-submit-right" class="btn-group pull-right">
 				{{if $showacl}}
-				<a href="#profile-jot-acl-wrapper" class="btn btn-default btn-sm jot-icons icon-{{$lockstate}}" id="jot-perms-icon" title="{{$permset}}"></a>{{$bang}}
+				<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#aclModal" title="{{$permset}}" onclick="return false;">
+					<i id="jot-perms-icon" class="icon-{{$lockstate}} jot-icons">{{$bang}}</i>
+				</button>
 				{{/if}}
 				{{if $preview}}
 				<button class="btn btn-default btn-sm" onclick="preview_post();return false;" title="{{$preview}}">
@@ -88,13 +91,6 @@
 			<div id="profile-jot-plugin-wrapper">
 				{{$jotplugins}}
 			</div>
-			<div style="display: none;">
-				<div id="profile-jot-acl-wrapper" style="width:auto;height:auto;overflow:auto;">
-					{{$acl}}
-					<hr style="clear:both"/>
-					{{$jotnets}}
-				</div>
-			</div>
 		</div>
 		<div id="profile-jot-text-loading"></div>
 		<div id="profile-jot-end" class="clear"></div>
diff --git a/view/tpl/mitemedit.tpl b/view/tpl/mitemedit.tpl
index 8f13f80c9..482005e44 100644
--- a/view/tpl/mitemedit.tpl
+++ b/view/tpl/mitemedit.tpl
@@ -16,18 +16,9 @@
 {{include file="field_checkbox.tpl" field=$newwin}}
 
 <div id="settings-default-perms" class="settings-default-perms" >
-	<a href="#profile-jot-acl-wrapper" id="settings-default-perms-menu" >{{$permissions}} {{$permdesc}}</a>
+	<button class="btn btn-default btn-xs" data-toggle="modal" data-target="#aclModal" onclick="return false;">{{$permissions}}</button>
+	{{$aclselect}}
 	<div id="settings-default-perms-menu-end"></div>
-
-	<div id="settings-default-perms-select" style="display: none; margin-bottom: 20px" >
-	
-	<div style="display: none;">
-		<div id="profile-jot-acl-wrapper" style="width:auto;height:auto;overflow:auto;">
-			{{$aclselect}}
-		</div>
-	</div>
-
-	</div>
 </div>
 <br/>
 <div id="settings-default-perms-end"></div>
diff --git a/view/tpl/photo_view.tpl b/view/tpl/photo_view.tpl
index 067073b23..01f135522 100755
--- a/view/tpl/photo_view.tpl
+++ b/view/tpl/photo_view.tpl
@@ -54,15 +54,9 @@
 
 	<div id="settings-default-perms" class="settings-default-perms" >
 		<span id="jot-perms-icon" class="{{$edit.lockstate}}" ></span>
-		<a href="#profile-jot-acl-wrapper" id="settings-default-perms-menu" >{{$edit.permissions}}</a>
+		<button class="btn btn-default btn-xs" data-toggle="modal" data-target="#aclModal" onclick="return false;">{{$edit.permissions}}</button>
+		{{$edit.aclselect}}
 		<div id="settings-default-perms-menu-end"></div>
-		<div id="settings-default-perms-select" style="display: none; margin-bottom: 20px" >
-			<div style="display: none;">    
-				<div id="profile-jot-acl-wrapper" style="width:auto;height:auto;overflow:auto;">
-					{{$edit.aclselect}}     
-				</div>
-			</div>
-		</div>
 	</div>                                                                                  
 	<br/>
 	<div id="settings-default-perms-end"></div>
diff --git a/view/tpl/photos_upload.tpl b/view/tpl/photos_upload.tpl
index 1ab80d346..62591c648 100755
--- a/view/tpl/photos_upload.tpl
+++ b/view/tpl/photos_upload.tpl
@@ -25,16 +25,11 @@
 
 	<div id="photos-upload-perms" class="photos-upload-perms" >
 		<span id="jot-perms-icon" class="icon-{{$lockstate}}" ></span>
-		<a href="#photos-upload-permissions-wrapper" id="photos-upload-perms-menu" class="button" />{{$permissions}}</a>
+		<button class="btn btn-default btn-xs" data-toggle="modal" data-target="#aclModal" onclick="return false;">{{$permissions}}</button>
 	</div>
+	{{$aclselect}}
 	<div id="photos-upload-perms-end"></div>
 
-	<div style="display: none;">
-		<div id="photos-upload-permissions-wrapper">
-			{{$aclselect}}
-		</div>
-	</div>
-
 	<div id="photos-upload-spacer"></div>
 
 	{{$uploader}}
diff --git a/view/tpl/settings.tpl b/view/tpl/settings.tpl
index acea86015..accd8f106 100755
--- a/view/tpl/settings.tpl
+++ b/view/tpl/settings.tpl
@@ -34,7 +34,7 @@
 </ul>
 
 
-<button type="button" class="btn btn-xs btn-warning" data-toggle="collapse" data-target="#settings-permissions-wrapper">{{$lbl_p2macro}}</button>
+<button type="button" class="btn btn-xs btn-default" data-toggle="collapse" data-target="#settings-permissions-wrapper">{{$lbl_p2macro}}</button>
 
 
 
@@ -73,18 +73,9 @@
 </div>
 
 <div id="settings-default-perms" class="settings-default-perms" >
-	<a href="#profile-jot-acl-wrapper" id="settings-default-perms-menu" >{{$permissions}} {{$permdesc}}</a>
+	<button class="btn btn-default btn-xs" data-toggle="modal" data-target="#aclModal" onclick="return false;">{{$permissions}}</button>
+	{{$aclselect}}
 	<div id="settings-default-perms-menu-end"></div>
-
-	<div id="settings-default-perms-select" style="display: none; margin-bottom: 20px" >
-	
-	<div style="display: none;">
-		<div id="profile-jot-acl-wrapper" style="width:auto;height:auto;overflow:auto;">
-			{{$aclselect}}
-		</div>
-	</div>
-
-	</div>
 </div>
 <br/>
 <div id="settings-default-perms-end"></div>