Context Navigation

← Previous Changeset
Next Changeset →

Changeset 13362

Timestamp:

04/21/08 01:31:34 (7 months ago)

Author:

bill

Message:

CSS fixes for TextArea? and TextBox? disabled and focused modes:

make disabled TextBox? based widgets (like ComboBox?) have gray text, to disambiguate them from enabled states (fixes #6574).

same for TextArea? and SimpleTextArea?. Exception is TextArea? on FF2, which is difficult because of the iframe (fixes #6087).

make TextArea/SimpleTextArea? indicate focus with darker border, just like TextBox? based widgets (fixes #6470). Note that for TextArea? widget, _focused and _blurred where bad names for private methods, since they conflict w/the state variables used by FormWidget:setStateClass().

!strict

Location:

dijit/trunk

Files:

: 3 removed
: 10 modified

form/Textarea.js (modified) (3 diffs)
tests/form/test_SimpleTextarea.html (modified) (1 diff)
tests/form/test_Textarea.html (modified) (1 diff)
themes/dijit.css (modified) (1 diff)
themes/nihilo/form/Common.css (modified) (1 diff)
themes/nihilo/form/Textarea.css (deleted)
themes/nihilo/nihilo.css (modified) (1 diff)
themes/soria/form/Common.css (modified) (2 diffs)
themes/soria/form/Textarea.css (deleted)
themes/soria/soria.css (modified) (1 diff)
themes/tundra/form/Common.css (modified) (3 diffs)
themes/tundra/form/TextArea.css (deleted)
themes/tundra/tundra.css (modified) (1 diff)

Legend:

: Unmodified
: Added
: Removed

dijit/trunk/form/Textarea.js

r13335	r13362
25	25
26	26	templateString: (dojo.isIE \|\| dojo.isSafari \|\| dojo.isFF) ?
27		((dojo.isIE \|\| dojo.isSafari \|\| dojo.isFF >= 3) ? '<fieldset id="${id}" class="dijitInline ~~dijitInputField dijitTextArea~~" dojoAttachPoint="styleNode" waiRole="presentation"><div dojoAttachPoint="editNode,focusNode,eventNode" dojoAttachEvent="onpaste:_changing,oncut:_changing" waiRole="textarea" style="text-decoration:none;display:block;overflow:auto;" contentEditable="true"></div>'
	27	((dojo.isIE \|\| dojo.isSafari \|\| dojo.isFF >= 3) ? '<fieldset id="${id}" class="dijitInline" dojoAttachPoint="styleNode" waiRole="presentation"><div dojoAttachPoint="editNode,focusNode,eventNode" dojoAttachEvent="onpaste:_changing,oncut:_changing" waiRole="textarea" style="text-decoration:none;display:block;overflow:auto;" contentEditable="true"></div>'
28	28	: '<span id="${id}" class="dijitReset">'+
29	29	'<iframe src="javascript:<html><head><title>${_iframeEditTitle}</title></head><body><script>var _postCreate=window.frameElement?window.frameElement.postCreate:null;if(_postCreate)_postCreate();</script></body></html>"'+
30		' dojoAttachPoint="iframe,styleNode~~" dojoAttachEvent="onblur:_onIframeBlur" class="dijitInline dijitInputField dijitTextArea~~"></iframe>')
	30	' dojoAttachPoint="iframe,styleNode,stateNode" dojoAttachEvent="onblur:_onIframeBlur" class="dijitInline dijitInputField"></iframe>')
31	31	+ '<textarea name="${name}" value="${value}" dojoAttachPoint="formValueNode" style="display:none;"></textarea>'
32	32	+ ((dojo.isIE \|\| dojo.isSafari \|\| dojo.isFF >= 3) ? '</fieldset>':'</span>')
33		: '<textarea id="${id}" name="${name}" value="${value}" dojoAttachPoint="formValueNode,editNode,focusNode,styleNode" class="dijitInputField dijitTextArea">'+dojo.isFF+'</textarea>',
	33	: '<textarea id="${id}" name="${name}" value="${value}" dojoAttachPoint="formValueNode,editNode,focusNode,styleNode">'+dojo.isFF+'</textarea>',
	34
	35	baseClass: "dijitTextArea",
34	36
35	37	setAttribute: function(/String/ attr, /anything/ value){
…	…
185	187	this.connect(this.eventNode, "keypress", this._onKeyPress);
186	188	this.connect(this.eventNode, "mousemove", this._changed);
187		this.connect(this.eventNode, "focus", this._focused);
188		this.connect(this.eventNode, "blur", this._blurred);
	189	this.connect(this.eventNode, "focus", this._focusedEventNode);
	190	this.connect(this.eventNode, "blur", this._blurredEventNode);
189	191	}
190	192	if(this.editNode){
…	…
195	197
196	198	// event handlers, you can over-ride these in your own subclasses
197		_focused: function(e){
198		dojo.addClass(this.iframe\|\|this.domNode, "dijitInputFieldFocused");
	199	_focusedEventNode: function(e){
	200	// note: this is needed when we have an iframe
	201	this._focused = true;
	202	this._setStateClass();
199	203	this._changed(e);
200	204	},
201	205
202		_blurred: function(e){
203		dojo.removeClass(this.iframe\|\|this.domNode, "dijitInputFieldFocused");
	206	_blurredEventNode: function(e){
	207	// note: this is needed when we have an iframe
	208	this._focused = false;
	209	this._setStateClass();
204	210	this._changed(e, true);
205	211	},

dijit/trunk/tests/form/test_SimpleTextarea.html

r12941	r13362
43	43
44	44	<div id="container" dojoType="dijit.layout.BorderContainer" style="width:500px; height:400px; border: inset gray 3px;">
45		<textarea name="t~~extAreaN3~~" dojoType="dijit.form.SimpleTextarea" region="top" splitter="true" style="height: 100px;">
	45	<textarea name="top" dojoType="dijit.form.SimpleTextarea" region="top" splitter="true" style="height: 100px;">
46	46	This is just some text in the top region.
47	47	</textarea>
48		<textarea name="~~textAreaN3~~" dojoType="dijit.form.SimpleTextarea" region="left" splitter="true" style="width: 200px;">
	48	<textarea name="left" dojoType="dijit.form.SimpleTextarea" region="left" splitter="true" style="width: 200px;">
49	49	This is just some text in the left region.
50	50	</textarea>
51		<textarea name="~~textAreaN3~~" dojoType="dijit.form.SimpleTextarea" region="center">
	51	<textarea name="center" dojoType="dijit.form.SimpleTextarea" region="center">
52	52	This is just some text in the center region.
53	53	</textarea>
54		<textarea name="~~textAreaN3~~" dojoType="dijit.form.SimpleTextarea" region="right" splitter="true" style="width: 200px;">
55		This is just some text in the ~~lef~~t region.
	54	<textarea name="right" dojoType="dijit.form.SimpleTextarea" region="right" splitter="true" style="width: 200px;">
	55	This is just some text in the right region.
56	56	</textarea>
57		<textarea name="~~textAreaN3~~" dojoType="dijit.form.SimpleTextarea" region="bottom" splitter="true" style="height: 100px;">
58		This is just some text in the ~~left~~ region.
	57	<textarea name="bottom" dojoType="dijit.form.SimpleTextarea" region="bottom" splitter="true" style="height: 100px;">
	58	This is just some text in the bottom region.
59	59	</textarea>
60	60	</div>
	61
	62	<script>
	63	function setAttr(attr, value){
	64	dijit.registry.byClass('dijit.form.SimpleTextarea').forEach(function(widget){ widget.setAttribute(attr, value);});
	65	}
	66	</script>
	67	<input type="button" onclick="setAttr('readOnly', false);" value="Remove readOnly">
	68	<input type="button" onclick="setAttr('readOnly', false);" value="Set readOnly">
	69	<input type="button" onclick="setAttr('disabled', true);" value="Disable">
	70	<input type="button" onclick="setAttr('disabled', false);" value="Enable">
61	71	</body>
62	72	</html>

dijit/trunk/tests/form/test_Textarea.html

r12703	r13362
48	48	onChange:<textarea id="ocSimple" readOnly>not fired yet!</textarea>
49	49	<br>
50		<input type="button" onclick="dijit.byId('simple').setAttribute('readOnly',false);" value="Remove readOnly">
51		<input type="button" onclick="dijit.byId('simple').setAttribute('readOnly',true);" value="Set readOnly">
52		<input type="button" onclick="dijit.byId('simple').setAttribute('disabled',true);" value="Disable">
53		<input type="button" onclick="dijit.byId('simple').setAttribute('disabled',false);" value="Enable">
	50	<script>
	51	function setAttr(attr, value){
	52	dijit.registry.byClass('dijit.form.Textarea').forEach(function(widget){ widget.setAttribute(attr, value);});
	53	}
	54	</script>
	55	<input type="button" onclick="setAttr('readOnly', false);" value="Remove readOnly">
	56	<input type="button" onclick="setAttr('readOnly', false);" value="Set readOnly">
	57	<input type="button" onclick="setAttr('disabled', true);" value="Disable">
	58	<input type="button" onclick="setAttr('disabled', false);" value="Enable">
54	59	<br>
55	60	<textarea dojoType="dijit.form.Textarea" name="largeTextArea">

dijit/trunk/themes/dijit.css

r13355	r13362
360	360	.dijitTextBoxFocused,
361	361	.dijitComboBoxFocused,
362		.dijitSpinnerFocused {
	362	.dijitSpinnerFocused,
	363	.dijitTextAreaFocused {
363	364	/* should we display focus like we do on other browsers, or use the safari standard focus indicator?? */
364	365	outline: auto 5px -webkit-focus-ring-color;
	366	}
	367	.dijitTextAreaFocused div {
	368	/* prevent dotted border on FF3 */
	369	outline: none !important;
365	370	}
366	371

dijit/trunk/themes/nihilo/form/Common.css

r13288	r13362
43	43	}
44	44
	45	.nihilo .dijitTextBoxDisabled,
	46	.nihilo .dijitComboBoxDisabled,
	47	.nihilo .dijitSpinnerDisabled,
	48	.nihilo .dijitTextAreaDisabled {
	49	color: gray;
	50	}
	51
45	52	.nihilo .dijitTextBoxFocused,
46	53	.nihilo .dijitComboBoxFocused,
47		.nihilo .dijitSpinnerFocused {
	54	.nihilo .dijitSpinnerFocused,
	55	.nihilo .dijitTextAreaFocused {
48	56	/* input field when focused (ie: typing affects it) */
49	57	border-color:#b3b3b3;

dijit/trunk/themes/nihilo/nihilo.css

r13266	r13362
27	27	@import url("form/Checkbox.css");
28	28	@import url("form/RadioButton.css");
29		~~@import url("form/Textarea.css");~~
30	29	@import url("form/Slider.css");
31	30	@import url("Tree.css");

dijit/trunk/themes/soria/form/Common.css

r13288	r13362
33	33	}
34	34
	35	.soria .dijitTextBoxDisabled,
	36	.soria .dijitComboBoxDisabled,
	37	.soria .dijitSpinnerDisabled,
	38	.soria .dijitTextAreaDisabled {
	39	color: gray;
	40	}
	41
35	42	.soria .dijitComboBox .dijitButtonNode {
36	43	padding: 0 0.2em;
…	…
45	52	.soria .dijitTextBoxFocused,
46	53	.soria .dijitComboBoxFocused,
47		.soria .dijitSpinnerFocused {
	54	.soria .dijitSpinnerFocused,
	55	.soria .dijitTextAreaFocused {
48	56	/* input field when focused (ie: typing affects it) */
49	57	border-color:#406b9b;

dijit/trunk/themes/soria/soria.css

r13266	r13362
27	27	@import url("form/Checkbox.css");
28	28	@import url("form/RadioButton.css");
29		~~@import url("form/Textarea.css");~~
30	29	@import url("form/Slider.css");
31	30	@import url("Tree.css");

dijit/trunk/themes/tundra/form/Common.css

r13332	r13362
21	21	.tundra .dijitComboBox,
22	22	.tundra .dijitSpinner,
	23	.tundra .dijitTextArea,
23	24	.tundra .dijitInlineEditor input {
24	25	/* For all except dijit.form.NumberSpinner: the actual input element.
25		For TextBox, ComboBox, Spinner: the ~~table~~ that contains the input.
	26	For TextBox, ComboBox, Spinner: the div that contains the input.
26	27	Otherwise the actual input element.
27	28	*/
…	…
30	31	border:1px solid #b3b3b3;
31	32	line-height: normal;
	33	}
	34
	35	.tundra .dijitTextBoxDisabled,
	36	.tundra .dijitComboBoxDisabled,
	37	.tundra .dijitSpinnerDisabled,
	38	.tundra .dijitTextAreaDisabled {
	39	color: gray;
32	40	}
33	41
…	…
43	51	.tundra .dijitTextBoxFocused,
44	52	.tundra .dijitComboBoxFocused,
45		.tundra .dijitSpinnerFocused {
	53	.tundra .dijitSpinnerFocused,
	54	.tundra .dijitTextAreaFocused {
46	55	/* input field when focused (ie: typing affects it) */
47	56	border-color:#406b9b;

dijit/trunk/themes/tundra/tundra.css

r13266	r13362
25	25	@import url("form/Checkbox.css");
26	26	@import url("form/RadioButton.css");
27		~~@import url("form/TextArea.css");~~
28	27	@import url("form/Slider.css");
29	28	@import url("Tree.css");

Context Navigation

Changeset 13362

Legend:

Download in other formats: