dojox/form has some wrong CSS images path for Claro theme

[florentvaldelievre]

Hi, i found a bug when trying to apply Claro theme to our multiple file uploader widget :

dojo-release-1.5.0rc1-src/dojox/form/resources/FileInput.css

/* Claro */
.claro .dijitProgressOverlay {
	border:1px solid #769dc0;
	background-color:#769dc0; 
}
.claro .dijitFakeInput input {
	border: 1px solid #bcc8dd;
	background-color: #fff;
	background-repeat: repeat-x;
	background-position: top left;
	background-image:url("../../../dijit/themes/claro/images/textBox_back.png");
	line-height:normal;
	padding:0.2em 0.3em;
}

.claro .dijitFileInputButton,
.claro .dijitFileInputText {
	background-image: url("../../../dijit/themes/claro/form/images/button_back_full.png");
	background-position: center top;
	background-repeat: repeat-x;
	background-color: #cde3f6;
	border: 1px solid #799ab7;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	box-shadow:0px 1px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}

../../../dijit/themes/claro/images/textBox_back.png It should be : ../../../dijit/themes/claro/form/images/textBox_back.png

And

../../../dijit/themes/claro/form/images/button_back_full.png

This file does not exist in any folder: I had to download it manually and add it in dojo release

Cheers

[bill]

1.5 is released, moving remaining tickets to 1.6

[dante]

(In [22509]) refs #11303 - found one image. not sure where the other went, or what it's for exactly

[marcompile]

It seems the whole claro CSS for FileInput? is inconsistent.

If you compare:

​http://svn.dojotoolkit.org/src/dojox/trunk/form/resources/FileInput.css

with:

​http://svn.dojotoolkit.org/src/dijit/trunk/themes/claro/form/Button.css

you will see some differences in the button style:

background-color: #cde3f6; border: 1px solid #799ab7;

Also, the ​http://svn.dojotoolkit.org/src/dojox/trunk/form/resources/FileInput.html template uses Buttons and TextInputs? that are different from the real buttons and inputs specified in ​http://svn.dojotoolkit.org/src/dijit/trunk/form/templates/Button.html for instance.

So the button include <span class="dijitReset dijitInline dijitButtonText" id="${id}_label" dojoAttachPoint="containerNode"></span> that is not present in the FileInput?, and this causes alignment and spacing issues.

Also there is a similar issue with the input that shows the filename the user selected. The rendered widget is much different from the other TextInput?.

I am wondering why does this claro CSS button styling should be specified again on the FileInput? and why don't the components inside the FileInput? don't use the original CSS styles defined already?

[Douglas Hays]

Also dijit/themes/soria/buttonDisabled.png is referenced but it should be dijit/themes/soria/images/buttonDisabled.png

dojox/form/resources/TriStateCheckBox.css: background-image: url('../images/checkmarkNoBorder.png');
dojox/form/resources/TriStateCheckBox.css: background-image: url('../images/checkmarkNoBorder.gif');
seem to reference nonexistent files but they do exist in dijit/themes/claro/images/

[bill]

#15697 is a duplicate of this ticket.

[Colin Snover]

1.8 has been tagged; moving all outstanding tickets to next major release milestone.

[Douglas Hays]

dojox/form/resources/CheckedMultiSelect.css also contains a non-existent file reference:

background-image: url('../../../dijit/themes/claro/form/images/textBox_back.png');

[Douglas Hays]

Hover rules referencing textBox_back.png could possibly be changed to:

  background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
  background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
  background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
  background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);

based on a similar change to claro/form/Common.css between 1.7 and 1.8.

[Douglas Hays]

bill, [27469] removed textBox_back.png but replacement gradients weren't added to dojox/form CSS files as part of the change.

[bill]

The change you suggested above looks good to me. (Opera rules are questionable since they are in the process of changing their engine to webkit, but I'm fine with either way.)

[Douglas Hays]

In [31006]:

Refs #11303. Replace dojox/form background-image references from textBox_back.png to linear-gradient to be consistent with dijit.

[bill]

By the way, when I converted dijit to use linear-gradient instead of a background image, I thought the gradient (from the original textBox_back.png) was almost imperceptible. That's why I didn't leave a backup image file for older versions of IE.

[bill]

In [31009]:

fix gradient of FileInput?, fixes #11303