Initial concept of help tips in the admin panel

include/i18n/en_US/help/tips/settings.system.yaml

+#
+# This is popup help messages for the Admin Panel -> Settings -> System page
+#
+# Fields:
+# title - Shown in bold at the top of the popover window
+# content - The body of the help popover
+#
+# The key names such as 'helpdesk_name' should not be translated as they
+# must match the HTML #ids put into the page template.
+#
+---
+helpdesk_status:
+    title: Helpdesk Status
+    content: |
+        Enables the client portal and the staff interface. If this option is
+        disabled, then only staff marked as <b>Admins</b> will be able to
+        access the helpdesk.
+
+helpdesk_url:
+    title: Helpdesk URL
+    content: |
+        This URL is the base of your osTicket installation. It is used in
+        email communication to direct end users back to your helpdesk.

include/i18n/en_US/help/tips/staff.yaml

+#
+# This is popup help messages for the Admin Panel -> Staff
+#
+# Fields:
+# title - Shown in bold at the top of the popover window
+# content - The body of the help popover
+#
+# The key names such as 'helpdesk_name' should not be translated as they
+# must match the HTML #ids put into the page template.
+#
+---
+signature:
+    title: Staff Signature Line
+    content: |
+        Create staff’s signature for response to tickets. This signature
+        will appear as an option at the bottom of a ticket response
+
+type:
+    title: Account Type
+    content: |
+        Admins have the privilege of accessing the Admin Panel. Staff only
+        have access to manage tickets and the knowledge base
+
+group:
+    title: Assigned Group
+    content: |
+        Group membership defines the staff’s role in the system. Visit the
+        group management page to define what access this staff has to the
+        help desk
+
+notes:
+    title: Internal Notes
+    content: |
+        Place internal notes regarding staff; notes are only visible to
+        staff whose account type is Admin

include/staff/settings-system.inc.php

@@ -24,13 +24,16 @@ $gmtime = Misc::gmtime();
                 <input type="radio" name="isonline"  value="1"   <?php echo $config['isonline']?'checked="checked"':''; ?> /><b>Online</b> (Active)
                 <input type="radio" name="isonline"  value="0"   <?php echo !$config['isonline']?'checked="checked"':''; ?> /><b>Offline</b> (Disabled)
                 &nbsp;<font class="error">&nbsp;<?php echo $config['isoffline']?'osTicket offline':''; ?></font>
+                <i class="help-tip icon-question-sign" href="#helpdesk_status"></i>
             </td>
         </tr>
         <tr>
             <td width="220" class="required">Helpdesk URL:</td>
             <td>
                 <input type="text" size="40" name="helpdesk_url" value="<?php echo $config['helpdesk_url']; ?>">
-                &nbsp;<font class="error">*&nbsp;<?php echo $errors['helpdesk_url']; ?></font></td>
+                &nbsp;<font class="error">*&nbsp;<?php echo $errors['helpdesk_url']; ?></font>
+                <i class="help-tip icon-question-sign" href="#helpdesk_url"></i>
+        </td>
         </tr>
         <tr>
             <td width="220" class="required">Helpdesk Name/Title:</td>

scp/ajax.php

@@ -76,7 +76,11 @@ $dispatcher = patterns('',
         url_post('^(?P<namespace>[\w.]+)$', 'createDraft'),
         url_get('^images/browse$', 'getFileList')
     )),
-    url_post('^/upgrader', array('ajax.upgrader.php:UpgraderAjaxAPI', 'upgrade'))
+    url_post('^/upgrader', array('ajax.upgrader.php:UpgraderAjaxAPI', 'upgrade')),
+    url('^/help/', patterns('ajax.tips.php:HelpTipAjaxAPI',
+        url_get('tips/(?P<namespace>[\w_.]+)$', 'getTipsJson'),
+        url_get('(?P<lang>\w{2}_\w{2})?/tips/(?P<namespace>[\w_.]+)$', 'getTipsForLangJson')
+    ))
 );
 
 # Call the respective function

scp/css/scp.css

@@ -960,7 +960,7 @@ h2 .reload {
     height:auto !important;
     height:20px;
     min-height:20px;
-    padding:10px 5px 5px 5px;
+    padding:10px;
     border:1px solid #666;
     background:#fff;
     -moz-border-radius:5px;
@@ -973,8 +973,7 @@ h2 .reload {
     position:absolute;
     top:0;
     left:-1px;
-    width:auto !important;
-    width:300px;
+    min-width:300px;
 }
 
 .tip_content hr {
@@ -1061,6 +1060,22 @@ h2 .reload {
     line-height:24px;
 }
 
+.tip_content h1 {
+    font-size: 13pt;
+    margin-top: 0;
+    margin-bottom: 0.5em;
+    padding-bottom: 0.2em;
+    border-bottom: 1px solid #ddd;
+}
+
+i.help-tip {
+    color: #aaa;
+}
+i.help-tip:hover {
+    color: black;
+    cursor: pointer;
+}
+
 /* Knowledgebase */
 /* Knowledgebase */
 #kb {

scp/js/tips.js

-jQuery(function($) {
-    var tip_timer = 0;
-    var tips = $('.tip');
-    for(i=0;i<tips.length;i++) {
-        tips[i].rel = 'tip-' + i;
-    }
-
+jQuery(function() {
     var showtip = function (url, elem,xoffset) {
 
             var pos = elem.offset();
@@ -28,28 +22,100 @@ jQuery(function($) {
             $('.' + elem.data('id') + ' .tip_shadow').css({
                 "height":$('.' + elem.data('id')).height() + 5
             });
-    };
+    },
+    getHelpTips = (function() {
+        var dfd = $.Deferred(),
+            requested = false,
+            namespace = $('meta[name=tip-namespace]').attr('content');
+        return function() {
+            if (namespace && dfd.state() != 'resolved' && !requested)
+                requested = $.ajax({
+                    url: "ajax.php/help/tips/" + namespace,
+                    dataType: 'json',
+                    success: function (json_config) {
+                        dfd.resolve(json_config);
+                    }
+                });
+            return dfd;
+        }
+    })();
 
     //Generic tip.
-    $('.tip').live('click mouseover', function(e) {
+    $('.tip')
+    .each(function(i, e) {
+        e.rel = 'tip-' + i;
+    })
+    .live('click mouseover', function(e) {
         e.preventDefault();
         var id = this.rel;
         var elem = $(this);
-    
+
         elem.data('id',id);
         elem.data('timer',0);
-        if($('.' + id).length == 0) {
-            if(e.type=='mouseover') {
-                 /* wait about 1 sec - before showing the tip - mouseout kills the timeout*/
-                 elem.data('timer',setTimeout(function() { showtip('ajax.php/content/'+elem.attr('href'),elem);},750))
-            }else{
+        if ($('.' + id).length == 0) {
+            if (e.type=='mouseover') {
+                // wait about 1 sec - before showing the tip - mouseout kills
+                // the timeout
+                elem.data('timer',setTimeout(function() {
+                    showtip('ajax.php/content/'+elem.attr('href'),elem);i
+                },750));
+            } else {
                 showtip('ajax.php/content/'+elem.attr('href'),elem);
             }
         }
-    }).live('mouseout', function(e) {
+    })
+    .live('mouseout', function(e) {
         clearTimeout($(this).data('timer'));
     });
 
+    $('.help-tip')
+    .live('mouseover click', function(e) {
+        e.preventDefault();
+
+        var elem = $(this),
+            pos = elem.offset(),
+            y_pos = pos.top - 12,
+            x_pos = pos.left + elem.width() + 20,
+            tip_arrow = $('<img>')
+                .attr('src', './images/tip_arrow.png')
+                .addClass('tip_arrow'),
+            tip_box = $('<div>')
+                .addClass('tip_box'),
+            tip_content = $('<div>')
+                .append('<a href="#" class="tip_close">x</a>')
+                .addClass('tip_content'),
+            the_tip = tip_box
+                .append(tip_arrow)
+                .append(tip_content)
+                .css({
+                    "top":y_pos + "px",
+                    "left":x_pos + "px"
+                }),
+            tip_timer = setTimeout(function() {
+                $('.tip_box').remove();
+                $('body').append(the_tip.hide().fadeIn());
+            }, 500);
+
+        elem.live('mouseout', function() {
+            clearTimeout(tip_timer);
+        });
+
+        getHelpTips().then(function(tips) {
+            var section = tips[elem.attr('href').substr(1)];
+            if (!section) {
+                elem.remove();
+                clearTimeout(tip_timer);
+                return;
+            }
+            tip_content.append(
+                $('<h1>').append(section.title))
+                .append(section.content);
+        });
+        $('.tip_shadow', the_tip).css({
+            "height":the_tip.height() + 5
+        });
+    });
+
     //faq preview tip
     $('.previewfaq').live('mouseover', function(e) {
         e.preventDefault();
@@ -83,7 +149,7 @@ jQuery(function($) {
         var url = 'ajax.php/tickets/'+vars[1]+'/preview';
         var id='t'+vars[1];
         var xoffset = 80;
-        
+
 
         elem.data('id',id);
         elem.data('timer',0);
@@ -99,9 +165,8 @@ jQuery(function($) {
         clearTimeout($(this).data('timer'));
     });
 
-
-
-    $('body').delegate('.tip_close', 'click', function(e) {
+    $('body')
+    .delegate('.tip_close', 'click', function(e) {
         e.preventDefault();
         $(this).parent().parent().remove();
     });

scp/settings.php

@@ -16,24 +16,37 @@
 require('admin.inc.php');
 $errors=array();
 $settingOptions=array(
-                'system' => 'System Settings',
-                'tickets' => 'Ticket Settings and Options',
-                'emails' => 'Email Settings',
-                'pages' => 'Site Pages',
-                'kb' => 'Knowledgebase Settings',
-                'autoresp' => 'Autoresponder Settings',
-                'alerts' => 'Alerts and Notices Settings');
+    'system' =>
+        array('System Settings', 'settings.system'),
+    'tickets' =>
+        array('Ticket Settings and Options', 'settings.ticket'),
+    'emails' =>
+        array('Email Settings', 'settings.email'),
+    'pages' =>
+        array('Site Pages', 'settings.pages'),
+    'kb' =>
+        array('Knowledgebase Settings', 'settings.kb'),
+    'autoresp' =>
+        array('Autoresponder Settings', 'settings.autoresponder'),
+    'alerts' =>
+        array('Alerts and Notices Settings', 'settings.alerts'),
+);
 //Handle a POST.
-if($_POST && !$errors) {
+$target=($_REQUEST['t'] && $settingOptions[$_REQUEST['t']])?$_REQUEST['t']:'system';
+$page = false;
+if (isset($settingOptions[$target]))
+    $page = $settingOptions[$target];
+
+if($page && $_POST && !$errors) {
     if($cfg && $cfg->updateSettings($_POST,$errors)) {
-        $msg=Format::htmlchars($settingOptions[$_POST['t']]).' Updated Successfully';
+        $msg=Format::htmlchars($page[0]).' Updated Successfully';
     } elseif(!$errors['err']) {
         $errors['err']='Unable to update settings - correct errors below and try again';
     }
 }
 
-$target=($_REQUEST['t'] && $settingOptions[$_REQUEST['t']])?$_REQUEST['t']:'system';
 $config=($errors && $_POST)?Format::input($_POST):Format::htmlchars($cfg->getConfigInfo());
+$ost->addExtraHeader('<meta name="tip-namespace" content="'.$page[1].'" />');
 
 $nav->setTabActive('settings', ('settings.php?t='.$target));
 require_once(STAFFINC_DIR.'header.inc.php');