Refine permissions dialog UI

3 files changed, 104 insertions, 17 deletions

diff --git a/view/js/acl.js b/view/js/acl.js
index be215fc91..162ada764 100644
--- a/view/js/acl.js
+++ b/view/js/acl.js
@@ -14,8 +14,9 @@ function ACL(backend_url, preset) {
 	that.nw = 4; //items per row. should be calulated from #acl-list.width
 
 	that.list_content = $("#acl-list-content");
-	that.item_tpl = unescape($(".acl-list-item[rel=acl-template]").html());
-	that.showall = $("#acl-showall");
+	that.item_tpl     = unescape($(".acl-list-item[rel=acl-template]").html());
+	that.showall      = $("#acl-showall");
+	that.showlimited  = $("#acl-showlimited");
 
 	// set the initial ACL lists in case the enclosing form gets submitted before the ajax loader completes. 
 	that.on_submit();
@@ -26,6 +27,7 @@ function ACL(backend_url, preset) {
 
 	$(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);
@@ -71,7 +73,8 @@ ACL.prototype.on_search = function(event) {
 };
 
 ACL.prototype.on_showall = function(event) {
-	event.preventDefault();
+
+	// 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")) {
@@ -87,9 +90,17 @@ ACL.prototype.on_showall = function(event) {
 	that.update_view();
 	that.on_submit();
 
-	return false;
+	return true; // return true so that state changes from update_view() will be applied
 };
 
+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();
+	event.stopPropagation();
+	return false;
+}
+
 ACL.prototype.on_selectall = function(event) {
 	event.preventDefault();
 	event.stopPropagation();
@@ -188,18 +199,32 @@ 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_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').removeClass('fa-lock').addClass('fa-unlock');
+			$('#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);
+
 		/* jot acl */
-		$('#jot-perms-icon').removeClass('fa-unlock').addClass('fa-lock');
+		$('#jot-perms-icon, #dialog-perms-icon').removeClass('fa-unlock').addClass('fa-lock');
 		$('#jot-public').hide();
 		$('.profile-jot-net input').attr('disabled', 'disabled');
 
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 58f216029..4dd3488e5 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -912,19 +912,43 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 	clear: both;
 }
 
+.modal-header .contextual-help-tool {
+	/* Mostly duplicating ".modal-header .close" and ".close" layout settings from bootstrap */
+	float: right;
+	font-size: 21px;
+	padding: 0;
+	margin-top: -4px;
+	margin-right: 15px;
+	line-height: 1;
+}
+
 #acl-search {
-	margin-top: 20px;
-	padding: 8px;
+	padding: 4px;
 	border: 1px solid #ccc;
-	width: 100%;
+	width: 90%; /* fallback if browser does not support calc() */
+	width: calc(100% - 10px);
+	margin: 0px 0px 10px 10px;
 }
 
 #acl-search::-webkit-input-placeholder {
-	font-family: FontAwesome;
+	/* non-fontawesome fonts set a fallback for text parts of the placeholder*/
+	font-family: FontAwesome, sans-serif, arial, freesans;
 }
 
 #acl-search::-moz-placeholder {
-	font-family: FontAwesome;
+	/* non-fontawesome fonts set a fallback for text parts of the placeholder*/
+	font-family: FontAwesome, sans-serif, arial, freesans;
+}
+
+#acl-dialog-description {
+	font-size: 90%;
+	color: #888;
+}
+#acl-showlimited-description {
+	font-size: 90%;
+	color: #888;
+	margin-left: 10px;
+	margin-bottom: 4px;
 }
 
 #acl-list {
@@ -933,11 +957,11 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 	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;
+	background-color: rgb(238,238,238);
 }
 
 #jotnets-wrapper, #jotnets-collapse {
@@ -957,6 +981,7 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 	-webkit-border-radius: $radiuspx ;
 	-moz-border-radius: $radiuspx;
 	border-radius: $radiuspx;
+	background-color: white;
 }
 
 .acl-list-item.grouphide {
@@ -995,6 +1020,26 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 	margin-left: 5px;
 }
 
+#acl-showlimited-caption,
+#acl-showall-caption {
+	font-size: 115%;
+}
+
+#acl-radiowrapper-showall {
+	margin-bottom: 20px;
+}
+#acl-radiowrapper-showlimited {
+	margin-bottom: 0;
+}
+
+#acl-showall + i {
+	font-size: 140%;
+}
+
+#acl-showall-caption {
+	margin-left: 0.35em;
+}
+
 .contact-block-content {
 	margin-top: 10px;
 }
diff --git a/view/tpl/acl_selector.tpl b/view/tpl/acl_selector.tpl
index e57fdba12..49d90cd3e 100755
--- a/view/tpl/acl_selector.tpl
+++ b/view/tpl/acl_selector.tpl
@@ -3,9 +3,13 @@
 		<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>
+				{{if $helpUrl}}
+				<a type="button" target="hubzilla-help" href="{{$helpUrl}}" class="contextual-help-tool" title="Help and documentation"><i class="fa fa-question-circle-o"></i></a>
+				{{/if}}
+				<h4 class="modal-title"><i id="dialog-perms-icon" class="fa fa-fw"></i> {{$aclModalTitle}}</h4>
 			</div>
 			<div class="modal-body">
+				<div id="acl-dialog-description">{{$aclModalDesc}}</div>
 				{{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>
@@ -16,11 +20,24 @@
 				</div>
 				{{/if}}
 				<div id="acl-wrapper">
-					<button id="acl-showall" class="btn btn-block btn-default"><i class="fa fa-globe"></i> {{$showall}}</button>
-					<input type="text" id="acl-search" placeholder="&#xf002;">
-					<div id="acl-list">
-						<div id="acl-list-content"></div>
+					<div id="acl-radiowrapper-showall" class="radio">
+					  <label>
+					    <input id="acl-showall" type="radio" name="optionsRadios" value="option1" checked>
+					    <i class="fa fa-globe"></i><span id=acl-showall-caption>{{$showall}}</span>
+					  </label>
+					</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 id="acl-list">
+							<input type="text" id="acl-search" placeholder="&#xf002; {{$search}}">
+							<div id=acl-showlimited-description>{{$showlimitedDesc}}</div>
+							<div id="acl-list-content"></div>
+						</div>
 					</div>
+
 					<span id="acl-fields"></span>
 				</div>