tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 12:05:37 +00:00
Code Issues Projects Releases Wiki Activity

ENHANCEMENT: Implemented help text for form fields.

Browse Source 
The title attribute is extracted from form fields and displayed inline
below the field.
This commit is contained in:
Andrew Short 2012-06-13 19:59:25 +10:00 committed by Ingo Schommer
parent 43483090b4
commit d9c7bb8eb9
4 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
admin/code/LeftAndMain.php
View File

@ -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)

4
admin/css/screen.css
View File

@ -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; }

25
admin/javascript/LeftAndMain.FieldHelp.js Normal file
View File

@ -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));

14
admin/scss/_forms.scss
View File

@ -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 {