From d9c7bb8eb92ac6b1cf9d09018c65fa0ae7dc0316 Mon Sep 17 00:00:00 2001 From: Andrew Short Date: Wed, 13 Jun 2012 19:59:25 +1000 Subject: [PATCH] ENHANCEMENT: Implemented help text for form fields. The title attribute is extracted from form fields and displayed inline below the field. --- admin/code/LeftAndMain.php | 1 + admin/css/screen.css | 4 +++- admin/javascript/LeftAndMain.FieldHelp.js | 25 +++++++++++++++++++++++ admin/scss/_forms.scss | 14 ++++++++++--- 4 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 admin/javascript/LeftAndMain.FieldHelp.js diff --git a/admin/code/LeftAndMain.php b/admin/code/LeftAndMain.php index c6367610d..38b2bb21f 100644 --- a/admin/code/LeftAndMain.php +++ b/admin/code/LeftAndMain.php @@ -285,6 +285,7 @@ class LeftAndMain extends Controller implements PermissionProvider { 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) diff --git a/admin/css/screen.css b/admin/css/screen.css index 26c09f2dc..0a148458b 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -148,12 +148,14 @@ form.nostyle input.text, form.nostyle textarea, form.nostyle select, form.nostyl .field:last-child { border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .field:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .field.nolabel .middleColumn { margin-left: 0; } +.field.nolabel .help { margin-left: 0; } .field label.left { float: left; display: block; width: 176px; padding: 8px 8px 8px 0; line-height: 16px; font-weight: bold; text-shadow: 1px 1px 0 white; } .field label.right { cursor: pointer; } .field .middleColumn { margin-left: 184px; } .field span.readonly { padding-top: 8px; line-height: 16px; display: block; } -.field .help { color: #777777; font-style: italic; padding-top: 1em; } +.field .help { clear: both; color: #777777; display: block; font-style: italic; margin: 4px 0 0 184px; } .field input.text, .field textarea, .field select, .field .TreeDropdownField { width: 100%; max-width: 512px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } +.field input.text .help, .field textarea .help, .field select .help, .field .TreeDropdownField .help { max-width: 512px; } .field input.text, .field textarea, .field .TreeDropdownField { background: #fff; border: 1px solid #b3b3b3; padding: 7px 7px; line-height: 16px; margin: 0; outline: none; -webkit-transition: 0.2s box-shadow ease-in; -moz-transition: 0.2s box-shadow ease-in; -ms-transition: 0.2s box-shadow ease-in; -o-transition: 0.2s box-shadow ease-in; transition: 0.2s box-shadow ease-in; -webkit-transition: 0.2s border ease-in; -moz-transition: 0.2s border ease-in; -ms-transition: 0.2s border ease-in; -o-transition: 0.2s border ease-in; transition: 0.2s border ease-in; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eaeaea), color-stop(10%, #ffffff)); background-image: -webkit-linear-gradient(#eaeaea, #ffffff 10%); background-image: -moz-linear-gradient(#eaeaea, #ffffff 10%); background-image: -o-linear-gradient(#eaeaea, #ffffff 10%); background-image: -ms-linear-gradient(#eaeaea, #ffffff 10%); background-image: linear-gradient(#eaeaea, #ffffff 10%); } .field input.text:focus, .field textarea:focus, .field .TreeDropdownField:focus { border: 1px solid #9a9a9a; border-top-color: gray; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; } .field input[disabled], .field input.disabled, .field textarea[disabled], .field textarea.disabled, .field select[disabled], .field select.disabled { color: #777777; background: #efefef; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JjYmNiYyIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZWZlZmVmIi8+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiY2JjYmMiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bcbcbc), color-stop(10%, #efefef), color-stop(90%, #ffffff), color-stop(100%, #bcbcbc)); background-image: -webkit-linear-gradient(#bcbcbc, #efefef 10%, #ffffff 90%, #bcbcbc); background-image: -moz-linear-gradient(#bcbcbc, #efefef 10%, #ffffff 90%, #bcbcbc); background-image: -o-linear-gradient(#bcbcbc, #efefef 10%, #ffffff 90%, #bcbcbc); background-image: -ms-linear-gradient(#bcbcbc, #efefef 10%, #ffffff 90%, #bcbcbc); background-image: linear-gradient(#bcbcbc, #efefef 10%, #ffffff 90%, #bcbcbc); border: 1px solid #b3b3b3; } diff --git a/admin/javascript/LeftAndMain.FieldHelp.js b/admin/javascript/LeftAndMain.FieldHelp.js new file mode 100644 index 000000000..21174b9f5 --- /dev/null +++ b/admin/javascript/LeftAndMain.FieldHelp.js @@ -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 = $("", { + "class": "help", + "text": title + }); + + this.closest(".field").append(span); + this.removeProp("title"); + } + + this._super(); + } + }); + }); +}(jQuery)); diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index 3f2eeb83e..c3b83392e 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -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 {