Permalink
Browse files

ENHANCEMENT: Implemented help text for form fields.

The title attribute is extracted from form fields and displayed inline
below the field.
  • Loading branch information...
ajshort authored and chillu committed Jun 13, 2012
1 parent 4348309 commit d9c7bb8eb92ac6b1cf9d09018c65fa0ae7dc0316
Showing with 40 additions and 4 deletions.
  1. +1 −0 admin/code/LeftAndMain.php
  2. +3 −1 admin/css/screen.css
  3. +25 −0 admin/javascript/LeftAndMain.FieldHelp.js
  4. +11 −3 admin/scss/_forms.scss
@@ -285,6 +285,7 @@ function init() {
FRAMEWORK_ADMIN_DIR . '/javascript/LeftAndMain.AddForm.js',
FRAMEWORK_ADMIN_DIR . '/javascript/LeftAndMain.Preview.js',
FRAMEWORK_ADMIN_DIR . '/javascript/LeftAndMain.BatchActions.js',
+ FRAMEWORK_ADMIN_DIR . '/javascript/LeftAndMain.FieldHelp.js',
),
Requirements::add_i18n_javascript(FRAMEWORK_DIR . '/javascript/lang', true, true),
Requirements::add_i18n_javascript(FRAMEWORK_ADMIN_DIR . '/javascript/lang', true, true)
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -0,0 +1,25 @@
+(function($) {
+ $.entwine('ss', function($) {
+ /**
+ * Takes form fields with a title attribute, extracts it, and displays
+ * it as inline help text below the field.
+ */
+ $(".cms form .field .middleColumn > [title]").entwine({
+ onmatch: function() {
+ var title = this.prop("title");
+
+ if(title && title.length) {
+ var span = $("<span></span>", {
+ "class": "help",
+ "text": title
+ });
+
+ this.closest(".field").append(span);
+ this.removeProp("title");
+ }
+
+ this._super();
+ }
+ });
+ });
+}(jQuery));
View
@@ -42,7 +42,10 @@ form.nostyle {
&.nolabel {
.middleColumn {
margin-left: 0;
- }
+ }
+ .help {
+ margin-left: 0;
+ }
}
label {
@@ -75,9 +78,11 @@ form.nostyle {
// Additional help text to clarify the field intent,
// displayed alongside the field (rather than in a tooltip)
.help {
+ clear: both;
color: lighten($color-text, 20%);
+ display: block;
font-style: italic;
- padding-top: 1em;
+ margin: $grid-y/2 0 0 $grid-x*23;
}
input.text,
@@ -87,9 +92,12 @@ form.nostyle {
width: 100%;
max-width: $grid-x * 64;
@include box-sizing(border-box);
+
+ .help {
+ max-width: $grid-x * 64;
+ }
}
-
input.text,
textarea,
.TreeDropdownField {

0 comments on commit d9c7bb8

Please sign in to comment.