Override navbar help button to open contextual help panel. Contextual help for mail written.

doc/context/admin/security/help.html

@@ -0,0 +1,3 @@
+<h3>Security Settings</h3>
+<p>This page contains various administrator settings related to security.</p>
+<p>To save any changes you make to these settings, you must press the Submit button.</p>

doc/context/mail/combined/help.html

@@ -0,0 +1,10 @@
+<dl class="dl-horizontal">
+  <dt>General</dt>
+  <dd>The messages displayed in private mail are visible only to you and the single recipient. </dd>
+  <dt>Combined View</dt>
+  <dd>Complete conversations can be viewed in a continuous thread by selecting <b>Combined View</b>. Available conversations are displayed beneath the menu in the side panel.</dd>
+  <dt>Inbox/Outbox</dt>
+  <dd>Individual sent messages are viewed by selecting <b>Outbox</b>, and incoming messages are viewed using the <b>Inbox</b> filter.</dd>
+  <dt>New Message</dt>
+  <dd>Individual messages have delivery reports that can be viewed using the drop-down menu. Messages can also be recalled from the same menu, which can prevent the recipient from viewing the message <i>if they have not already read it</i>.</dd>
+</dl>

doc/context/mail/help.html

@@ -0,0 +1,10 @@
+<dl class="dl-horizontal">
+  <dt>General</dt>
+  <dd>The messages displayed in private mail are visible only to you and the single recipient. </dd>
+  <dt>Combined View</dt>
+  <dd>Complete conversations can be viewed in a continuous thread by selecting <b>Combined View</b>. Available conversations are displayed beneath the menu in the side panel.</dd>
+  <dt>Inbox/Outbox</dt>
+  <dd>Individual sent messages are viewed by selecting <b>Outbox</b>, and incoming messages are viewed using the <b>Inbox</b> filter.</dd>
+  <dt>New Message</dt>
+  <dd>Individual messages have delivery reports that can be viewed using the drop-down menu. Messages can also be recalled from the same menu, which can prevent the recipient from viewing the message <i>if they have not already read it</i>.</dd>
+</dl>

doc/context/mail/inbox/help.html

@@ -0,0 +1,10 @@
+<dl class="dl-horizontal">
+  <dt>General</dt>
+  <dd>The messages displayed in private mail are visible only to you and the single recipient. </dd>
+  <dt>Combined View</dt>
+  <dd>Complete conversations can be viewed in a continuous thread by selecting <b>Combined View</b>. Available conversations are displayed beneath the menu in the side panel.</dd>
+  <dt>Inbox/Outbox</dt>
+  <dd>Individual sent messages are viewed by selecting <b>Outbox</b>, and incoming messages are viewed using the <b>Inbox</b> filter.</dd>
+  <dt>New Message</dt>
+  <dd>Individual messages have delivery reports that can be viewed using the drop-down menu. Messages can also be recalled from the same menu, which can prevent the recipient from viewing the message <i>if they have not already read it</i>.</dd>
+</dl>

doc/context/mail/new/help.html

@@ -0,0 +1,10 @@
+<dl class="dl-horizontal">
+  <dt>General</dt>
+  <dd>The messages displayed in private mail are visible only to you and the single recipient. </dd>
+  <dt>Combined View</dt>
+  <dd>Complete conversations can be viewed in a continuous thread by selecting <b>Combined View</b>. Available conversations are displayed beneath the menu in the side panel.</dd>
+  <dt>Inbox/Outbox</dt>
+  <dd>Individual sent messages are viewed by selecting <b>Outbox</b>, and incoming messages are viewed using the <b>Inbox</b> filter.</dd>
+  <dt>New Message</dt>
+  <dd>Individual messages have delivery reports that can be viewed using the drop-down menu. Messages can also be recalled from the same menu, which can prevent the recipient from viewing the message <i>if they have not already read it</i>.</dd>
+</dl>

doc/context/mail/outbox/help.html

@@ -0,0 +1,10 @@
+<dl class="dl-horizontal">
+  <dt>General</dt>
+  <dd>The messages displayed in private mail are visible only to you and the single recipient. </dd>
+  <dt>Combined View</dt>
+  <dd>Complete conversations can be viewed in a continuous thread by selecting <b>Combined View</b>. Available conversations are displayed beneath the menu in the side panel.</dd>
+  <dt>Inbox/Outbox</dt>
+  <dd>Individual sent messages are viewed by selecting <b>Outbox</b>, and incoming messages are viewed using the <b>Inbox</b> filter.</dd>
+  <dt>New Message</dt>
+  <dd>Individual messages have delivery reports that can be viewed using the drop-down menu. Messages can also be recalled from the same menu, which can prevent the recipient from viewing the message <i>if they have not already read it</i>.</dd>
+</dl>

include/nav.php

@@ -151,9 +151,14 @@ EOT;
 
 	$help_url = z_root() . '/help?f=&cmd=' . $a->cmd;
 
-	if(! get_config('system','hide_help'))
+	if(! get_config('system','hide_help')) {
-		$nav['help'] = array($help_url, t('Help'), "", t('Help and documentation'),'help_nav_btn');
+		require_once('mod/help.php');
-
+		$context_help = load_doc_file('doc/context/' . $a->cmd . '/help.html');
+		if (! $context_help) {
+			$context_help = '';
+		}
+		$nav['help'] = array($help_url, t('Help'), "", t('Help and documentation'),'help_nav_btn',$context_help);
+	}
 
 	if(! UNO)
 		$nav['apps'] = array('apps', t('Apps'), "", t('Applications, utilities, links, games'),'apps_nav_btn');

view/tpl/nav.tpl

@@ -1,4 +1,44 @@
-	<div class="container-fluid">
+<script>
+    $(document).mouseup(function (e)
+    {
+        var container = $("#help-content");
+
+        if (!container.is(e.target) // if the target of the click isn't the container...
+                && container.has(e.target).length === 0 // ... nor a descendant of the container
+                && container.hasClass('help-content-open'))
+        {
+            container.removeClass('help-content-open');
+        }
+    });
+</script>
+<style>
+.help-content {
+	background: rgba(255, 255, 255, 0.9);
+	color: #333333;
+	position: fixed;
+	top: 50px;
+	left: -80%;
+	width: 80%;
+	padding: 20px;
+	transition: left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
+	overflow: hidden;
+	box-sizing: border-box;
+	border: #CCC thin solid;
+}
+
+.help-content-open {
+	left: 0px;
+	-moz-box-shadow: 3px 3px 3px #ccc;
+	-webkit-box-shadow: 3px 3px 3px #ccc;
+	box-shadow: 3px 3px 3px #ccc;
+}
+
+.help-content dd {
+    margin-bottom: 1em;
+}
+</style>
+
+<div class="container-fluid">
 		<div class="navbar-header">
 			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
 				<span class="icon-bar"></span>
@@ -189,8 +229,13 @@
 
 			{{if $nav.help}}
 				<li class="{{$sel.help}}">
-					<a class="{{$nav.help.2}}" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" id="{{$nav.help.4}}"><i class="icon-question"></i></a>
+					<a class="{{$nav.help.2}}" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" id="{{$nav.help.4}}" onclick="$('#help-content').toggleClass('help-content-open'); return false;"><i class="icon-question"></i></a>
 				</li>
+                                
+			<div id="help-content" class="help-content">
+                            {{$nav.help.5}}
+                            <p class="pull-right"><a href="{{$nav.help.0}}">Click here for more documentation...</a></p>
+			</div>
 			{{/if}}
 			</ul>
 		</div>