diff options
| -rw-r--r-- | include/nav.php | 17 | ||||
| -rw-r--r-- | view/js/main.js | 26 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 28 | ||||
| -rwxr-xr-x | view/tpl/nav.tpl | 14 | ||||
| -rw-r--r-- | view/tpl/nav_header.tpl | 49 |
5 files changed, 51 insertions, 83 deletions
diff --git a/include/nav.php b/include/nav.php index c59aaae37..70faec598 100644 --- a/include/nav.php +++ b/include/nav.php @@ -143,19 +143,17 @@ EOT; if((App::$module != 'home') && (! (local_channel()))) $nav['home'] = array($homelink, t('Home'), "", t('Home Page'),'home_nav_btn'); - if((App::$config['system']['register_policy'] == REGISTER_OPEN) && (! local_channel()) && (! remote_channel())) $nav['register'] = array('register',t('Register'), "", t('Create an account'),'register_nav_btn'); - $help_url = z_root() . '/help?f=&cmd=' . App::$cmd; - if(! get_config('system','hide_help')) { + $help_url = z_root() . '/help?f=&cmd=' . App::$cmd; $context_help = ''; $enable_context_help = ((intval(get_config('system','enable_context_help')) === 1 || get_config('system','enable_context_help') === false) ? true : false); if($enable_context_help === true) { require_once('include/help.php'); $context_help = load_context_help(); - //direct directly to /help if $context_help is empty - this can be removed once we have context help for all modules + //point directly to /help if $context_help is empty - this can be removed once we have context help for all modules $enable_context_help = (($context_help) ? true : false); } $nav['help'] = array($help_url, t('Help'), "", t('Help and documentation'), 'help_nav_btn', $context_help, $enable_context_help); @@ -166,7 +164,6 @@ EOT; $nav['search'] = array('search', t('Search'), "", t('Search site @name, #tag, ?docs, content')); - $nav['directory'] = array('directory', t('Directory'), "", t('Channel Directory'),'directory_nav_btn'); @@ -240,16 +237,10 @@ $powered_by = ''; // $powered_by = '<strong>red<img class="smiley" src="' . z_root() . '/images/rm-16.png" alt="r#" />matrix</strong>'; - $tpl = get_markup_template('nav_header.tpl'); - - App::$page['htmlhead'] .= replace_macros($tpl, array( - '$enable_context_help' => $enable_context_help - )); - $tpl = get_markup_template('nav.tpl'); App::$page['nav'] .= replace_macros($tpl, array( - '$baseurl' => z_root(), + '$baseurl' => z_root(), '$sitelocation' => $sitelocation, '$nav' => $x['nav'], '$banner' => $banner, @@ -260,7 +251,7 @@ $powered_by = ''; '$powered_by' => $powered_by, '$help' => t('@name, #tag, ?doc, content'), '$pleasewait' => t('Please wait...') - )); + )); call_hooks('page_header', App::$page['nav']); } diff --git a/view/js/main.js b/view/js/main.js index 2813b3b19..748853939 100644 --- a/view/js/main.js +++ b/view/js/main.js @@ -443,6 +443,32 @@ function NavUpdate() { timer = setTimeout(NavUpdate, updateInterval); } +function contextualHelp() { + var container = $("#contextual-help-content"); + + if(container.hasClass('contextual-help-content-open')) { + container.removeClass('contextual-help-content-open'); + $('main').css('top', '') + } + else { + container.addClass('contextual-help-content-open'); + var mainTop = container.outerHeight(true); + $('main').css('top', mainTop + 'px'); + } +} + +function contextualHelpFocus(target, openSidePanel) { + if (openSidePanel) { + $("main").addClass('region_1-on'); // Open the side panel to highlight element + } + else { + $("main").removeClass('region_1-on'); + } + $('html,body').animate({ scrollTop: $(target).offset().top - $('nav').outerHeight(true) - $('#contextual-help-content').outerHeight(true)}, 'slow'); + for (i = 0; i < 3; i++) { + $(target).fadeTo('slow', 0.1).fadeTo('slow', 1.0); + } +} function updatePageItems(mode, data) { diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 5b8729111..bd5df5e63 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -201,29 +201,26 @@ header #banner #logo-text { } /* contextual help */ -.help-content { - background: $comment_item_colour; - color: $font_colour; +.contextual-help-content { + display: none; + +} + +.contextual-help-content-open { + display: block; position: fixed; - top: -50%; - left: 0px; - width: 100%; + top: 51px; max-height: 50%; + background: $comment_item_colour; padding: 20px; - /*transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);*/ - border-bottom: #CCC 1px solid; + border-bottom: #ccc 1px solid; overflow: auto; -} - -.help-content-open { - top: 51px; -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); box-shadow: 0px 3px 3px rgba(0,0,0,0.2); - /*transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);*/ } -.help-content dd { +.contextual-help-content dd { margin-bottom: 1em; } /* contextual help end */ @@ -1703,10 +1700,9 @@ nav .badge.mail-update:hover { #expand-aside, #expand-tabs, -#help_nav_btn_collapsed { +#context-help-btn { color: $nav_active_icon_colour; padding: 7px 10px; - text-decoration: none; } .nav-tabs.nav-justified { diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl index 2a6af3f6a..ca52fe066 100755 --- a/view/tpl/nav.tpl +++ b/view/tpl/nav.tpl @@ -12,9 +12,9 @@ <i class="icon-circle-arrow-right" id="expand-aside-icon"></i> </button> {{if $nav.help.6}} - <a class="navbar-toggle" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" id="{{$nav.help.4}}_collapsed"{{if $nav.help.6}} onclick="return false;"{{/if}}> + <button id="context-help-btn"class="navbar-toggle" type="button" onclick="contextualHelp(); return false;"> <i class="icon-question-sign"></i> - </a> + </button> {{/if}} {{if $userinfo}} <img class="dropdown-toggle fakelink" data-toggle="dropdown" id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"><span class="caret" id="usermenu-caret"></span> @@ -36,6 +36,10 @@ <li role="presentation" class="divider"></li> <li role="presentation"><a href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" role="menuitem" id="{{$nav.admin.4}}">{{$nav.admin.1}}</a></li> {{/if}} + {{if $nav.help}} + <li role="presentation" class="divider"></li> + <li role="presentation"><a href="{{$nav.help.0}}" title="{{$nav.help.3}}" role="menuitem" id="{{$nav.help.4}}">{{$nav.help.1}}</a></li> + {{/if}} {{if $nav.logout}} <li role="presentation" class="divider"></li> <li role="presentation"><a href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" role="menuitem" id="{{$nav.logout.4}}">{{$nav.logout.1}}</a></li> @@ -194,15 +198,15 @@ {{if $nav.help}} <li class="{{$sel.help}}{{if $nav.help.6}} hidden-xs{{/if}}"> - <a class="{{$nav.help.2}}" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" id="{{$nav.help.4}}"{{if $nav.help.6}} onclick="return false;"{{/if}}>{{if $nav.help.6}}<i class="icon-question-sign"></i>{{else}}<i class="icon-question"></i>{{/if}}</a> + <a class="{{$nav.help.2}}" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}" id="{{$nav.help.4}}"{{if $nav.help.6}} onclick="contextualHelp(); return false;"{{/if}}>{{if $nav.help.6}}<i class="icon-question-sign"></i>{{else}}<i class="icon-question"></i>{{/if}}</a> </li> {{/if}} </ul> </div> </div> {{if $nav.help.6}} - <div id="help-content" class="help-content"> + <div id="contextual-help-content" class="contextual-help-content"> {{$nav.help.5}} - <p class="pull-right"><a href="{{$nav.help.0}}">Click here for more documentation...</a></p> + <button type="button" class="close pull-right" onclick="contextualHelp();">×</button> </div> {{/if}} diff --git a/view/tpl/nav_header.tpl b/view/tpl/nav_header.tpl deleted file mode 100644 index 27713b55b..000000000 --- a/view/tpl/nav_header.tpl +++ /dev/null @@ -1,49 +0,0 @@ -<script> - /* contextual help */ - {{if $enable_context_help}} - $('.help-content').css('top', '-' + $('#help-content').height() + 'px') - $(document).mouseup(function (e) - { - e.preventDefault; - - 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')) - || - ( - ($('#help_nav_btn, #help_nav_btn_collapsed').is(e.target) || $('#help_nav_btn, #help_nav_btn_collapsed').has(e.target).length !== 0) - && container.hasClass('help-content-open') - )) { - container.removeClass('help-content-open'); - $('main').removeClass('help-content-open'); - $('main').css('top', '') - } - else if (($('#help_nav_btn, #help_nav_btn_collapsed').is(e.target) || $('#help_nav_btn, #help_nav_btn_collapsed').has(e.target).length !== 0) - && !container.hasClass('help-content-open')) { - $('#help-content').addClass('help-content-open'); - $('main').removeClass('help-content-open'); - var mainTop = $('#navbar-collapse-1').height(); - if ($('#navbar-collapse-1').outerHeight(true) < $('#help-content').height()) { - mainTop = $('#help-content').outerHeight(true); - } - - $('main').css('top', mainTop + 'px'); - } - - }); - {{/if}} - var contextualHelpFocus = function (target, openSidePanel) { - if (openSidePanel) { - $("main").addClass('region_1-on'); // Open the side panel to highlight element - } else { - $("main").removeClass('region_1-on'); - } - // Animate the page scroll to the element and then pulse the element to direct attention - $('html,body').animate({scrollTop: $(target).offset().top - $('#navbar-collapse-1').height() - $('#help-content').height() - 50}, 'slow'); - for (i = 0; i < 3; i++) { - $(target).fadeTo('slow', 0.1).fadeTo('slow', 1.0); - } - } -</script> |