Merge pull request #380 from git-marijus/dev

instead of radio buttons use select to choose between public and custom selection

3 files changed, 72 insertions, 61 deletions

diff --git a/include/acl_selectors.php b/include/acl_selectors.php
index ce0a32798..136f8aa50 100644
--- a/include/acl_selectors.php
+++ b/include/acl_selectors.php
@@ -271,7 +271,8 @@ function populate_acl($defaults = null,$show_jotnets = true, $emptyACL_descripti
 		'$showall'         => $showall_caption,
 		'$showallOrigin'   => $showall_origin,
 		'$showallIcon'     => $showall_icon,
-		'$showlimited'     => t("Limit access:"),
+		'$select_label'    => t('Who can see this'),
+		'$showlimited'     => t('Custom selection'),
 		'$showlimitedDesc' => t('Select "Show" to allow viewing. "Don\'t show" lets you override and limit the scope of "Show".'),
 		'$show'	           => t("Show"),
 		'$hide'	           => t("Don't show"),
diff --git a/view/js/acl.js b/view/js/acl.js
index 162ada764..a04cf9d86 100644
--- a/view/js/acl.js
+++ b/view/js/acl.js
@@ -11,30 +11,44 @@ function ACL(backend_url, preset) {
 	that.deny_cid  = (preset[2] || []);
 	that.deny_gid  = (preset[3] || []);
 	that.group_uids = [];
-	that.nw = 4; //items per row. should be calulated from #acl-list.width
 
+	that.info         = $("#acl-info");
+	that.list         = $("#acl-list");
 	that.list_content = $("#acl-list-content");
 	that.item_tpl     = unescape($(".acl-list-item[rel=acl-template]").html());
 	that.showall      = $("#acl-showall");
 	that.showlimited  = $("#acl-showlimited");
+	that.acl_select   = $("#acl-select");
+
+	that.preset = preset;
+	that.self = [];
 
 	// set the initial ACL lists in case the enclosing form gets submitted before the ajax loader completes. 
 	that.on_submit();
 
-	if (preset.length === 0) that.showall.removeClass("btn-default").addClass("btn-warning");
-
 	/*events*/
 
 	$(document).ready(function() {
-			that.showall.click(that.on_showall);
-			that.showlimited.click(that.on_showlimited);
-			$(document).on('click','.acl-button-show',that.on_button_show);
-			$(document).on('click','.acl-button-hide',that.on_button_hide);
-			$("#acl-search").keypress(that.on_search);
-
-			/* startup! */
-			that.get(0,15000);
-			that.on_submit();
+
+		that.acl_select.change(function(event) {
+			var option = that.acl_select.val();
+
+			if(option == 'option1') { // public
+				that.on_showall(event);
+			}
+
+			if(option == 'option2') { // restricted
+				that.on_showlimited(event);
+			}
+		});
+
+		$(document).on('click','.acl-button-show',that.on_button_show);
+		$(document).on('click','.acl-button-hide',that.on_button_hide);
+		$("#acl-search").keypress(that.on_search);
+
+		/* startup! */
+		that.get(0,15000);
+		that.on_submit();
 	});
 }
 
@@ -73,15 +87,9 @@ ACL.prototype.on_search = function(event) {
 };
 
 ACL.prototype.on_showall = function(event) {
-
 	// preventDefault() isn't called here as we want state changes from update_view() to be applied to the radiobutton
 	event.stopPropagation();
 
-	if (that.showall.hasClass("btn-warning")) {
-		return false;
-	}
-	that.showall.removeClass("btn-default").addClass("btn-warning");
-
 	that.allow_cid = [];
 	that.allow_gid = [];
 	that.deny_cid  = [];
@@ -94,11 +102,22 @@ ACL.prototype.on_showall = function(event) {
 };
 
 ACL.prototype.on_showlimited = function(event) {
-	// Prevent the radiobutton from being selected, as the showlimited radiobutton
-	// option is selected only by selecting show or hide options on channels or groups.
-	event.preventDefault();
+	// preventDefault() isn't called here as we want state changes from update_view() to be applied to the radiobutton
 	event.stopPropagation();
-	return false;
+
+	if(that.preset[0].length === 0 && that.preset[1].length === 0 && that.preset[2].length === 0 && that.preset[3].length === 0) {
+		that.preset[0] = [that.self[0]];
+	}
+
+	that.allow_cid = (that.preset[0] || []);
+	that.allow_gid = (that.preset[1] || []);
+	that.deny_cid  = (that.preset[2] || []);
+	that.deny_gid  = (that.preset[3] || []);
+
+	that.update_view();
+	that.on_submit();
+
+	return true; // return true so that state changes from update_view() will be applied
 }
 
 ACL.prototype.on_selectall = function(event) {
@@ -199,29 +218,26 @@ ACL.prototype.set_deny = function(itemid) {
 	that.update_view();
 };
 
-ACL.prototype.update_radiobuttons = function(isPublic) {
-
-	that.showall.prop('checked', isPublic);
-	that.showlimited.prop('checked', !isPublic);
-	that.showlimited.prop('disabled', isPublic);
+ACL.prototype.update_select = function(isPublic) {
+	that.showall.prop('selected', isPublic);
+	that.showlimited.prop('selected', !isPublic);
 };
 
 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) {
-			// btn-warning indicates that the permissions are public, it was chosen because
-			// that.showall used to be a normal button, which btn-warning is a bootstrap style for.
-			that.showall.removeClass("btn-default").addClass("btn-warning");
-			that.update_radiobuttons(true);
-
-			/* jot acl */
-			$('#jot-perms-icon, #dialog-perms-icon').removeClass('fa-lock').addClass('fa-unlock');
-			$('#jot-public').show();
-			$('.profile-jot-net input').attr('disabled', false);
+	if (that.allow_gid.length === 0 && that.allow_cid.length === 0 && that.deny_gid.length === 0 && that.deny_cid.length === 0) {
+		that.list.hide(); //hide acl-list
+		that.info.show(); //show acl-info
+		that.update_select(true);
+
+		/* jot acl */
+		$('#jot-perms-icon, #dialog-perms-icon').removeClass('fa-lock').addClass('fa-unlock');
+		$('#jot-public').show();
+		$('.profile-jot-net input').attr('disabled', false);
 
 	} else {
-		that.showall.removeClass("btn-warning").addClass("btn-default");
-		that.update_radiobuttons(false);
+		that.list.show(); //show acl-list
+		that.info.hide(); //hide acl-info
+		that.update_select(false);
 
 		/* jot acl */
 		$('#jot-perms-icon, #dialog-perms-icon').removeClass('fa-unlock').addClass('fa-lock');
@@ -300,12 +316,11 @@ ACL.prototype.get = function(start, count, search) {
 };
 
 ACL.prototype.populate = function(data) {
-	var height = Math.ceil(data.items.length / that.nw) * 42;
-	that.list_content.height(height);
 	$(data.items).each(function(){
 		html = "<div class='acl-list-item {4} {7} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>";
 		html = html.format(this.photo, this.name, this.type, this.xid, '', this.self, this.link, this.taggable);
 		if (this.uids !== undefined) that.group_uids[this.xid] = this.uids;
+		if (this.self === 'abook-self') that.self[0] = this.xid;
 		//console.log(html);
 		that.list_content.append(html);
 	});
diff --git a/view/tpl/acl_selector.tpl b/view/tpl/acl_selector.tpl
index 0e9562157..b30669f9a 100755
--- a/view/tpl/acl_selector.tpl
+++ b/view/tpl/acl_selector.tpl
@@ -12,6 +12,18 @@
 				{{if $aclModalDesc}}
 				<div id="acl-dialog-description" class="section-content-info-wrapper">{{$aclModalDesc}}</div>
 				{{/if}}
+				<label for="acl-select">{{$select_label}}</label>
+				<select id="acl-select" name="optionsRadios" class="form-control form-group">
+					<option id="acl-showall" value="option1" selected>{{$showall}}</option>
+					<option id="acl-showlimited" value="option2">{{$showlimited}}</option>
+				</select>
+
+				{{if $showallOrigin}}
+				<div id="acl-info" class="form-group">
+					<i class="fa fa-info-circle"></i>&nbsp;{{$showallOrigin}}
+				</div>
+				{{/if}}
+
 				{{if $jotnets}}
 				<div class="jotnets-wrapper" role="tab" id="jotnets-wrapper">
 					<a data-toggle="collapse" class="btn btn-block btn-default" href="#jotnets-collapse" aria-expanded="false" aria-controls="jotnets-collapse">{{$jnetModalTitle}} <span class="caret"></span></a>
@@ -21,25 +33,8 @@
 					<div class="clear"></div>
 				</div>
 				{{/if}}
+
 				<div id="acl-wrapper">
-					<div id="acl-radiowrapper-showall" class="radio">
-						<label>
-							<input id="acl-showall" type="radio" name="optionsRadios" value="option1" checked>
-							{{if $showallIcon}}
-							<i class="fa {{$showallIcon}}"></i>
-							{{/if}}
-							<span id="acl-showall-caption">{{$showall}}</span>
-						</label>
-						{{if $showallOrigin}}
-						&nbsp;<a id="acl-info-icon" role="button" tabindex="0" class="fa fa-info-circle" data-trigger="focus" data-toggle="popover" data-placement="top" data-content="{{$showallOrigin}}"></a>
-						{{/if}}
-					</div>
-					<div id="acl-radiowrapper-showlimited" class="radio">
-						<label>
-							<input id="acl-showlimited" type="radio" name="optionsRadios" style="readonly" value="option2">
-							<span id=acl-showlimited-caption>{{$showlimited}}</span>
-						</label>
-					</div>
 					<div id="acl-list">
 						<div id="acl-search-wrapper">
 							<input type="text" id="acl-search" placeholder="&#xf002; {{$search}}">