Merge pull request #366 from Treer/permissions

Refining the Permission settings dialog

7 files changed, 170 insertions, 25 deletions

diff --git a/Zotlabs/Module/Channel.php b/Zotlabs/Module/Channel.php
index 36f13e775..d0c6d83d8 100644
--- a/Zotlabs/Module/Channel.php
+++ b/Zotlabs/Module/Channel.php
@@ -126,13 +126,21 @@ function get($update = 0, $load = false) {
 
 		if($perms['post_wall']) {
 
+			// I'm trying to make two points in this description text - warn about finality of wall
+			// post permissions, and try to clear up confusion that these permissions set who is
+			// *shown* the post, istead of who is able to see the post, i.e. make it clear that clicking
+			// the "Show"  button on a group does not post it to the feed of people in that group, it
+			// mearly allows those people to view the post if they are viewing/following this channel.
+			$aclDesc = t('Post permissions <b>cannot be changed</b> after a post is sent.</br />These permissions set who is allowed to view the post.');
+			$aclContextHelpCmd = 'acl_dialog_post';
+
 			$x = array(
 				'is_owner' => $is_owner,
 				'allow_location' => ((($is_owner || $observer) && (intval(get_pconfig(\App::$profile['profile_uid'],'system','use_browser_location')))) ? true : false),
 				'default_location' => (($is_owner) ? \App::$profile['channel_location'] : ''),
 				'nickname' => \App::$profile['channel_address'],
 				'lockstate' => (((strlen(\App::$profile['channel_allow_cid'])) || (strlen(\App::$profile['channel_allow_gid'])) || (strlen(\App::$profile['channel_deny_cid'])) || (strlen(\App::$profile['channel_deny_gid']))) ? 'lock' : 'unlock'),
-				'acl' => (($is_owner) ? populate_acl($channel_acl,true,((\App::$profile['channel_r_stream'] & PERMS_PUBLIC) ? t('Public') : '')) : ''),
+				'acl' => (($is_owner) ? populate_acl($channel_acl,true,((\App::$profile['channel_r_stream'] & PERMS_PUBLIC) ? t('Public') : ''), $aclDesc, $aclContextHelpCmd) : ''),
 				'showacl' => (($is_owner) ? 'yes' : ''),
 				'bang' => '',
 				'visitor' => (($is_owner || $observer) ? true : false),
diff --git a/Zotlabs/Module/Network.php b/Zotlabs/Module/Network.php
index 77353da05..e4b936dc2 100644
--- a/Zotlabs/Module/Network.php
+++ b/Zotlabs/Module/Network.php
@@ -154,6 +154,14 @@ class Network extends \Zotlabs\Web\Controller {
 			}
 	
 			nav_set_selected('network');
+
+			// I'm trying to make two points in this description text - warn about finality of wall
+			// post permissions, and try to clear up confusion that these permissions set who is
+			// *shown* the post, istead of who is able to see the post, i.e. make it clear that clicking
+			// the "Show"  button on a group does not post it to the feed of people in that group, it
+			// mearly allows those people to view the post if they are viewing/following this channel.
+			$aclDesc = t('Post permissions <b>cannot be changed</b> after a post is sent.</br />These permissions set who is allowed to view the post.');
+			$aclContextHelpCmd = 'acl_dialog_post';
 	
 			$channel_acl = array(
 				'allow_cid' => $channel['channel_allow_cid'], 
@@ -161,7 +169,7 @@ class Network extends \Zotlabs\Web\Controller {
 				'deny_cid'  => $channel['channel_deny_cid'], 
 				'deny_gid'  => $channel['channel_deny_gid']
 			); 
-	
+
 			$private_editing = ((($group || $cid) && (! intval($_GET['pf']))) ? true : false);
 	
 			$x = array(
@@ -170,7 +178,7 @@ class Network extends \Zotlabs\Web\Controller {
 				'default_location' => $channel['channel_location'],
 				'nickname'         => $channel['channel_address'],
 				'lockstate'        => (($private_editing || $channel['channel_allow_cid'] || $channel['channel_allow_gid'] || $channel['channel_deny_cid'] || $channel['channel_deny_gid']) ? 'lock' : 'unlock'),
-				'acl'              => populate_acl((($private_editing) ? $def_acl : $channel_acl), true, (($channel['channel_r_stream'] & PERMS_PUBLIC) ? t('Public') : '')),
+				'acl'              => populate_acl((($private_editing) ? $def_acl : $channel_acl), true, (($channel['channel_r_stream'] & PERMS_PUBLIC) ? t('Public') : ''), $aclDesc, $aclContextHelpCmd),
 				'bang'             => (($private_editing) ? '!' : ''),
 				'visitor'          => true,
 				'profile_uid'      => local_channel(),
diff --git a/doc/acl_dialog_post.html b/doc/acl_dialog_post.html
new file mode 100644
index 000000000..19c366419
--- /dev/null
+++ b/doc/acl_dialog_post.html
@@ -0,0 +1,13 @@
+<!-- Network and channel posts cannot change their permissions after being sent, this help
+     file is for items of that nature. Files and photos etc should use a different help file. -->
+
+<h2>Post Permissions</h2>
+
+<p>Sometimes called Access Control List, or ACL, the permissions set who is able to see your new post.</p>
+
+<p>Pressing the ACL button (<i class="fa fa-lock"></i> or <i class="fa fa-unlock"></i>) beside the Submit button will display a dialog in which you can select what channels and/or privacy groups can see the post. You can also select who is explicitly denied access. For example, say you are planning a surprise party for a friend. You can send an invitation post to everyone in your <b>Friends</b> group <i>except</i> the friend you are surprising. In this case you "Show" the <b>Friends</b> group but "Don't show" that one person.
+
+<h3>Why can't I edit a post's permissions after I saved it?</h3>
+
+<p>You are able to change permissons to your files, photos and the likes, but not to posts after you have saved them. The main reason is: Once you have saved a post it is being distributed either to the public channel and from there to other Hubzilla servers or to those you intended it to go. Just like you cannot reclaim something you gave to another person, you cannot change permissions to Hubzilla posts. We would need to track everywhere your posting goes, keep track of everyone you allowed to see it and then keep track of from whom to delete it.</p>
+<p>If a posting is public this is even harder, as the Hubzilla is a global network and there is no way to follow a post, let alone reclaim it reliably. Other networks that may receive your post have no reliable way to delete or reclaim the post.</p>
\ No newline at end of file
diff --git a/include/acl_selectors.php b/include/acl_selectors.php
index 92f9436a2..584a70142 100644
--- a/include/acl_selectors.php
+++ b/include/acl_selectors.php
@@ -210,12 +210,24 @@ function fixacl(&$item) {
 	$item = str_replace(array('<','>'),array('',''),$item);
 }
 
-function populate_acl($defaults = null,$show_jotnets = true, $showall = '') {
+/**
+* Builds a modal dialog for editing permissions, using acl_selector.tpl as the template.
+*
+* @param array $default Optional access control list for the initial state of the dialog.
+* @param boolean $show_jotnets Whether plugins for federated networks should be included in the permissions dialog
+* @param string $showall_caption An optional caption to describe the scope of an unrestricted post. e.g. "Public"
+* @param string $dialog_description Optional message to include at the top of the dialog. E.g. "Warning: Post permissions cannot be changed once sent".
+* @param string $context_help Allows the dialog to present a help icon. E.g. "acl_dialog_post"
+* @param boolean $readonly Not implemented yet. When implemented, the dialog will use acl_readonly.tpl instead, so that permissions may be viewed for posts that can no longer have their permissions changed.
+*
+* @return string html modal dialog build from acl_selector.tpl
+*/
+function populate_acl($defaults = null,$show_jotnets = true, $showall_caption = '', $dialog_description = '', $context_help = '', $readonly = false) {
 
 	$allow_cid = $allow_gid = $deny_cid = $deny_gid = false;
 
-	if(! $showall)
-		$showall = t('Visible to your default audience');
+	if(! $showall_caption)
+		$showall_caption = t('Visible to your default audience');
 
 	if(is_array($defaults)) {
 		$allow_cid = ((strlen($defaults['allow_cid'])) 
@@ -239,9 +251,12 @@ function populate_acl($defaults = null,$show_jotnets = true, $showall = '') {
 
 	$tpl = get_markup_template("acl_selector.tpl");
 	$o = replace_macros($tpl, array(
-		'$showall'         => $showall,
+		'$showall'         => $showall_caption,
+		'$showlimited'     => t("Limit access:"),
+		'$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"),
+		'$search'          => t("Search"),
 		'$allowcid'        => json_encode($allow_cid),
 		'$allowgid'        => json_encode($allow_gid),
 		'$denycid'         => json_encode($deny_cid),
@@ -249,7 +264,9 @@ function populate_acl($defaults = null,$show_jotnets = true, $showall = '') {
 		'$jnetModalTitle'  => t('Other networks and post services'),
 		'$jotnets'         => $jotnets,
 		'$aclModalTitle'   => t('Permissions'),
-		'$aclModalDismiss' => t('Close')
+		'$aclModalDesc'    => $dialog_description,
+		'$aclModalDismiss' => t('Close'),
+		'$helpUrl'         => (($context_help == '') ? '' : (z_root() . '/help/' . $context_help))
 	));
 
 	return $o;
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..48d93025b 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -912,19 +912,52 @@ 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;
+}
+
+#aclModal .modal-body {
+	padding-top: 10px;
+}
+
+#acl-dialog-description {
+	font-size: 90%;
+	color: #888;
+	padding-bottom: 4px;
+}
+#acl-dialog-description b {
+	color: black;
+}
+
+#acl-showlimited-description {
+	font-size: 90%;
+	color: #888;
+	margin-left: 10px;
+	margin-bottom: 4px;
 }
 
 #acl-list {
@@ -933,11 +966,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 +990,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 +1029,27 @@ 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-top: 20px;
+	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..a3fe73d0c 100755
--- a/view/tpl/acl_selector.tpl
+++ b/view/tpl/acl_selector.tpl
@@ -3,9 +3,15 @@
 		<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"></i></a>
+				{{/if}}
+				<h4 class="modal-title"><i id="dialog-perms-icon" class="fa fa-fw"></i> {{$aclModalTitle}}</h4>
 			</div>
 			<div class="modal-body">
+				{{if $aclModalDesc}}
+					<div id="acl-dialog-description">{{$aclModalDesc}}</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>
@@ -16,11 +22,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>