Merge pull request #216 from greezybacon/issue/i18n-typos

tips: Auto-flip pop-over and fix a few typos

Reviewed-By: Peter Rotich <peter@osticket.com>

include/i18n/en_US/help/tips/forms.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
+# links - List of links shows below the content
+#   title - Link title
+#   href - href of link (links starting with / are translated to the
+#       helpdesk installation path)
+#
+# The key names such as 'helpdesk_name' should not be translated as they
+# must match the HTML #ids put into the page template.
+#
+---
+form_title:
+    title: Form Headline
+    content: >
+        This title text is shown in a gray box above the form fields
+
+form_instructions:
+    title: Form Instructions
+    content: >
+        You can add extra instructions which will help guide the user into
+        the context of the form fields and possibly highlight required data.
+
+field_sort:
+    title: Field Display Position
+    content: >
+        Click on the up-and-down arrow icon and drag the field row to sort
+        within this form. Sorting preference does not take effect until the
+        form is saved.
+
+field_label:
+    title: Field Label
+    content: >
+        This label is shown as the prompt for this field. Typically, a
+        short-answer field would be rendered like this one:<br>
+        <strong>Label:</strong>&nbsp; <input type="text">
+
+field_type:
+    title: Field Content Type
+    content: >
+        This is used to define the type of input expected from the user. You
+        can select from short and long answer, phone number, date and time,
+        checkbox, drop-down list, or a custom list selection.
+    links:
+      - title: Custom Lists
+        href: /scp/lists.php
+
+field_internal:
+    title: Field Visibility
+    content: >
+        Fields marked internal are hidden from your clients. Use internal
+        fields to track things which only your staff need to access.
+
+field_required:
+    title: Data Requirement
+    content: >
+        Forms that have required fields must have valid data before the form
+        can be saved. If checked, forms cannot be submitted or saved until all
+        required fields are satisfied.<br>
+        <br>
+        Internal fields can only be required of staff members, since they
+        are hidden from clients.
+
+field_variable:
+    title: Field Automation
+    content: >
+        The field data will be available to email and page templates via the
+        name used in this column. For instance, fields on the common ticket
+        form are available via <code>%{ticket.variable}</code>, where
+        <strong>variable</strong> is the name used in this column.<br>
+        <br>
+        <em>Company information is available via
+        <code>%{company.variable}</code> and user information is available
+        via <code>%{ticket.user.variable}</code></em>
+
+field_delete:
+    title: Remote this Field
+    content: >
+        Check and save the form to remove a field from this form.<br>
+        <br>
+        <em>Deleting a field does not remove previously entered data for the
+        field on completed forms. For instance, if a previously submitted
+        ticket has data for a field, deleting the field from this form will
+        not remove the data on the ticket.</em>

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

@@ -65,15 +65,16 @@ name_format:
     title: Default Name Format
     content: >
         Formatting technique used to format names throughout the system.
-        Email templates will use the format for names of no other format is
+        Email templates will use the format for names if no other format is
         specified in the place holder.
 
 # Authentication settings
 password_reset:
     title: Password Expiration Policy
     content: >
-        Sets the requirement for how often (in months) staff will be
-        required to reset their password.
+        Sets how often (in months) staff members will be required to change
+        their password. If disabled (set to "No expiration"), passwords will
+        not expire.
 
 # Date and time options
 date_and_time:

include/staff/dynamic-form.inc.php

@@ -31,16 +31,19 @@ $info=Format::htmlchars(($errors && $_POST)?$_POST:$info);
             </th>
         </tr>
     </thead>
-    <tbody>
+    <tbody style="vertical-align:top">
         <tr>
             <td width="180" class="required">Title:</td>
             <td><input type="text" name="title" size="40" value="<?php
-                echo $info['title']; ?>"/></td>
+                echo $info['title']; ?>"/>
+                <i class="help-tip icon-question-sign" href="#form_title"></i>
+            </td>
         </tr>
         <tr>
             <td width="180">Instructions:</td>
             <td><textarea name="instructions" rows="3" cols="40"><?php
                 echo $info['instructions']; ?></textarea>
+                <i class="help-tip icon-question-sign" href="#form_instructions"></i>
             </td>
         </tr>
     </tbody>
@@ -90,13 +93,20 @@ $info=Format::htmlchars(($errors && $_POST)?$_POST:$info);
             </th>
         </tr>
         <tr>
-            <th>Sort</th>
-            <th>Label</th>
-            <th>Type</th>
-            <th>Internal</th>
-            <th>Required</th>
-            <th>Variable</th>
-            <th>Delete</th>
+            <th nowrap>Sort
+                <i class="help-tip icon-question-sign" href="#field_sort"></i></th>
+            <th nowrap>Label
+                <i class="help-tip icon-question-sign" href="#field_label"></i></th>
+            <th nowrap>Type
+                <i class="help-tip icon-question-sign" href="#field_type"></i></th>
+            <th nowrap>Internal
+                <i class="help-tip icon-question-sign" href="#field_internal"></i></th>
+            <th nowrap>Required
+                <i class="help-tip icon-question-sign" href="#field_required"></i></th>
+            <th nowrap>Variable
+                <i class="help-tip icon-question-sign" href="#field_variable"></i></th>
+            <th nowrap>Delete
+                <i class="help-tip icon-question-sign" href="#field_delete"></i></th>
         </tr>
     </thead>
     <tbody class="sortable-rows" data-sort="sort-">
@@ -115,7 +125,7 @@ $info=Format::htmlchars(($errors && $_POST)?$_POST:$info);
                 <font class="error"><?php
                     if ($ferrors['label']) echo '<br/>'; echo $ferrors['label']; ?>
             </td>
-            <td><select name="type-<?php echo $id; ?>" <?php
+            <td nowrap><select name="type-<?php echo $id; ?>" <?php
                 if (!$fi->isChangeable()) echo 'disabled="disabled"'; ?>>
                 <?php foreach (FormField::allTypes() as $group=>$types) {
                         ?><optgroup label="<?php echo Format::htmlchars($group); ?>"><?php

include/staff/settings-system.inc.php

@@ -123,10 +123,10 @@ $gmtime = Misc::gmtime();
                 <em><b>Authentication Settings</b></em>
             </th>
         </tr>
-        <tr><td>Password Change Policy:</th>
+        <tr><td>Password Expiration Policy:</th>
             <td>
                 <select name="passwd_reset_period">
-                   <option value="0"> &mdash; None &mdash;</option>
+                   <option value="0"> &mdash; No expiration &mdash;</option>
                   <?php
                     for ($i = 1; $i <= 12; $i++) {
                         echo sprintf('<option value="%d" %s>%s%s</option>',

scp/css/scp.css

@@ -962,6 +962,21 @@ h2 .reload {
     z-index:700;
 }
 
+.tip_box.right .tip_arrow {
+    top: 5px;
+    right: -12px;
+    left: auto;
+}
+
+.flip-x {
+    -moz-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+    filter: FlipH;
+    -ms-filter: "FlipH";
+}
+
 .tip_content {
     height:auto !important;
     height:20px;
@@ -1086,6 +1101,7 @@ h2 .reload {
 }
 
 i.help-tip {
+    vertical-align: inherit;
     color: #aaa;
 }
 i.help-tip:hover {

scp/forms.php

@@ -113,6 +113,7 @@ $page='dynamic-forms.inc.php';
 if($form || ($_REQUEST['a'] && !strcasecmp($_REQUEST['a'],'add')))
     $page='dynamic-form.inc.php';
 
+$ost->addExtraHeader('<meta name="tip-namespace" content="forms" />');
 $nav->setTabActive('manage');
 require(STAFFINC_DIR.'header.inc.php');
 require(STAFFINC_DIR.$page);

scp/js/tips.js

@@ -74,8 +74,8 @@ jQuery(function() {
 
         var elem = $(this),
             pos = elem.offset(),
-            y_pos = pos.top - 12,
-            x_pos = pos.left + elem.width() + 20,
+            y_pos = pos.top - 8,
+            x_pos = pos.left + elem.width() + 16,
             tip_arrow = $('<img>')
                 .attr('src', './images/tip_arrow.png')
                 .addClass('tip_arrow'),
@@ -85,8 +85,7 @@ jQuery(function() {
                 .append('<a href="#" class="tip_close"><i class="icon-remove-circle"></i></a>')
                 .addClass('tip_content'),
             the_tip = tip_box
-                .append(tip_arrow)
-                .append(tip_content)
+                .append(tip_content.append(tip_arrow))
                 .css({
                     "top":y_pos + "px",
                     "left":x_pos + "px"
@@ -94,6 +93,12 @@ jQuery(function() {
             tip_timer = setTimeout(function() {
                 $('.tip_box').remove();
                 $('body').append(the_tip.hide().fadeIn());
+                console.log($(window).width(), tip_content.width(), the_tip.position())
+                if ($(window).width() < tip_content.outerWidth() + the_tip.position().left) {
+                    the_tip.css({'left':x_pos-tip_content.outerWidth()-40+'px'});
+                    tip_box.addClass('right');
+                    tip_arrow.addClass('flip-x');
+                }
             }, 500);
 
         elem.live('mouseout', function() {