Opened 9 years ago

Closed 6 years ago

#11303 closed defect (fixed)

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

Reported by: florentvaldelievre Owned by: dante
Priority: high Milestone: 1.9
Component: DojoX Form Version: 1.5.0rc1
Keywords: CSS path claro image button_back_full.png textBox_back.png Cc: bill
Blocked By: Blocking:

Description (last modified by bill)

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

Change History (18)

comment:1 Changed 9 years ago by Douglas Hays

Component: GeneralDijit - LnF
Owner: changed from anonymous to Julie Santilli

comment:2 Changed 9 years ago by dante

Owner: changed from Julie Santilli to dante
Status: newassigned

comment:3 Changed 9 years ago by bill

Milestone: 1.51.6

1.5 is released, moving remaining tickets to 1.6

comment:4 Changed 9 years ago by bill

Component: Dijit - LnFDojoX Form

comment:5 Changed 9 years ago by dante

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

comment:6 Changed 9 years ago by 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?

comment:7 Changed 8 years ago by dante

Milestone: 1.61.7

comment:8 Changed 7 years ago by Douglas Hays

Cc: mikeb added

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/

comment:9 Changed 7 years ago by Douglas Hays

Summary: FileInput.css has some wrong CSS images path for Claro themedojox/form has some wrong CSS images path for Claro theme

comment:10 Changed 7 years ago by bill

#15697 is a duplicate of this ticket.

comment:11 Changed 7 years ago by Colin Snover

Milestone: 1.82.0

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

comment:12 Changed 6 years ago by Douglas Hays

Cc: mikeb removed

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

background-image: url('../../../dijit/themes/claro/form/images/textBox_back.png');
Last edited 6 years ago by Douglas Hays (previous) (diff)

comment:13 Changed 6 years ago by 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.

comment:14 Changed 6 years ago by Douglas Hays

Cc: bill added

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

comment:15 Changed 6 years ago by 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.)

comment:16 Changed 6 years ago by Douglas Hays

In [31006]:

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

comment:17 Changed 6 years ago by bill

Description: modified (diff)
Milestone: 2.01.9

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.

comment:18 Changed 6 years ago by bill

Resolution: fixed
Status: assignedclosed

In [31009]:

fix gradient of FileInput?, fixes #11303

Note: See TracTickets for help on using tickets.