Skip to content
This repository
Browse code

ENHANCEMENT: Implemented help text for form fields.

The title attribute is extracted from form fields and displayed inline
below the field.
  • Loading branch information...
commit d9c7bb8eb92ac6b1cf9d09018c65fa0ae7dc0316 1 parent 4348309
Andrew Short authored June 13, 2012 chillu committed June 13, 2012
1  admin/code/LeftAndMain.php
@@ -285,6 +285,7 @@ function init() {
285 285
 					FRAMEWORK_ADMIN_DIR . '/javascript/LeftAndMain.AddForm.js',
286 286
 					FRAMEWORK_ADMIN_DIR . '/javascript/LeftAndMain.Preview.js',
287 287
 					FRAMEWORK_ADMIN_DIR . '/javascript/LeftAndMain.BatchActions.js',
  288
+					FRAMEWORK_ADMIN_DIR . '/javascript/LeftAndMain.FieldHelp.js',
288 289
 				),
289 290
 				Requirements::add_i18n_javascript(FRAMEWORK_DIR . '/javascript/lang', true, true),
290 291
 				Requirements::add_i18n_javascript(FRAMEWORK_ADMIN_DIR . '/javascript/lang', true, true)
4  admin/css/screen.css
@@ -148,12 +148,14 @@ form.nostyle input.text, form.nostyle textarea, form.nostyle select, form.nostyl
148 148
 .field:last-child { border-bottom: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
149 149
 .field:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }
150 150
 .field.nolabel .middleColumn { margin-left: 0; }
  151
+.field.nolabel .help { margin-left: 0; }
151 152
 .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; }
152 153
 .field label.right { cursor: pointer; }
153 154
 .field .middleColumn { margin-left: 184px; }
154 155
 .field span.readonly { padding-top: 8px; line-height: 16px; display: block; }
155  
-.field .help { color: #777777; font-style: italic; padding-top: 1em; }
  156
+.field .help { clear: both; color: #777777; display: block; font-style: italic; margin: 4px 0 0 184px; }
156 157
 .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; }
  158
+.field input.text .help, .field textarea .help, .field select .help, .field .TreeDropdownField .help { max-width: 512px; }
157 159
 .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%); }
158 160
 .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; }
159 161
 .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
... ...
@@ -0,0 +1,25 @@
  1
+(function($) {
  2
+	$.entwine('ss', function($) {
  3
+		/**
  4
+		 * Takes form fields with a title attribute, extracts it, and displays
  5
+		 * it as inline help text below the field.
  6
+		 */
  7
+		$(".cms form .field .middleColumn > [title]").entwine({
  8
+			onmatch: function() {
  9
+				var title = this.prop("title");
  10
+
  11
+				if(title && title.length) {
  12
+					var span = $("<span></span>", {
  13
+						"class": "help",
  14
+						"text":  title
  15
+					});
  16
+
  17
+					this.closest(".field").append(span);
  18
+					this.removeProp("title");
  19
+				}
  20
+
  21
+				this._super();
  22
+			}
  23
+		});
  24
+	});
  25
+}(jQuery));
14  admin/scss/_forms.scss
@@ -42,7 +42,10 @@ form.nostyle {
42 42
 	&.nolabel {
43 43
 		.middleColumn {
44 44
 			margin-left: 0;
45  
-		}	
  45
+		}
  46
+		.help {
  47
+			margin-left: 0;
  48
+		}
46 49
 	}
47 50
 	
48 51
 	label {
@@ -75,9 +78,11 @@ form.nostyle {
75 78
 	// Additional help text to clarify the field intent,
76 79
 	// displayed alongside the field (rather than in a tooltip)
77 80
 	.help {
  81
+		clear: both;
78 82
 		color: lighten($color-text, 20%);
  83
+		display: block;
79 84
 		font-style: italic;
80  
-		padding-top: 1em;
  85
+		margin: $grid-y/2 0 0 $grid-x*23;
81 86
 	}
82 87
 	
83 88
 	input.text,
@@ -87,9 +92,12 @@ form.nostyle {
87 92
 		width: 100%;
88 93
 		max-width: $grid-x * 64;
89 94
 		@include box-sizing(border-box);
  95
+
  96
+		.help {
  97
+			max-width: $grid-x * 64;
  98
+		}
90 99
 	}
91 100
 
92  
-	
93 101
 	input.text, 
94 102
 	textarea,
95 103
 	.TreeDropdownField {

0 notes on commit d9c7bb8

Please sign in to comment.
Something went wrong with that request. Please try again.