Redmine

I've tested the patch and it looks really great with all the fields having the same style. Very professional.
I've also found a flaw on big screens. Because the caret image is percenutally positioned its distance to the right border varies between fields of different length.

This issue is easy to fix with the calc function of CSS. Perhaps the same style should be applied to the jumpbox, too.

select {
  background: #fff url(../images/arrow_down.png) no-repeat calc( 100% - 7px) 50%;
}

The styles look clean and modern. It would be great if the change is delivered in 4.1.0.

But I found some small issues.

1. The hight of the rows is too tall if the row has a checkbox

The height of rows in the issues table and the spent time table will be taller than other tables. I think the height of the issues and spent time table should be the same with other tables for the consistency of UI.

[Issues table without the patch]

[Issues table with the patch]

[Trackers table with the patch]

2. The button color is gray in Firefox

Bernhard Rohloff wrote:

This issue is easy to fix with the calc function of CSS. Perhaps the same style should be applied to the jumpbox, too.

Go MAEDA wrote:

1. The hight of the rows is too tall if the row has a checkbox

2. The button color is gray in Firefox

Thank you for testing the patch. I've fixed all 3 in the attached patch.

Thank you for updating the patch. It looks REALLY good to me.
Setting the target version to 4.1.0.

Committed the patch. Thank you for improving Redmine.

I found another flaw in the implementation.
Head over to administration > settings and look for protocol and wiki history compression.
The select fields are too small and there is not enough padding on the right hand side to show the caret icon correctly.

Hold on! Everything's fine. My testing environment was using the alternate theme so it's not related to Marius' patch.

Please commit the below small change in order to remove some unnecessary padding.

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index dbafe14..e347f64 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -460,7 +460,7 @@ select {
   background: #fff url(../images/arrow_down.png) no-repeat calc( 100% - 7px) 50%;
   padding-right: 20px;
 }
-input[type="file"] {border: 0;}
+input[type="file"] {border: 0; padding-left: 0; padding-right: 0;}
 input[type="submit"] {-webkit-appearance: button; cursor: pointer; background-color: #fff;}
 select[multiple=multiple] {background: #fff; padding-right: initial; height: auto;}
 fieldset {border: 1px solid #e4e4e4; margin:0; min-width: inherit;}

Marius BALTEANU wrote:

Please commit the below small change in order to remove some unnecessary padding.

[...]

Confirmed and committed the fix. Thank you.

Committed the fix for issue #31358.

I have reported an issue regarding this change as #31371.

We also should set the color of the fields background and font to provide a consistent style on dark themed desktops, too.

If you edit an issue on a GTK desktop with Advaita-dark theme for example it looks like this:

Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css  (Revision 18164)
+++ public/stylesheets/application.css  (Arbeitskopie)
@@ -450,7 +450,7 @@

 form {display: inline;}
 input, select {vertical-align: middle; margin-top: 1px; margin-bottom: 1px; height: 24px; padding: 0 7px;}
-input, select, textarea {border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}
+input, select, textarea { color: #333; background-color: #fff; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}
 select {
   -webkit-appearance: none;
   -moz-appearance: none;

Committed the patch in #31147#note-22. Thanks.

One more fix for an issue introduced by r18177:

vagrant@jessie:/vagrant/project/redmine$ git diff
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 03fd814..c4b138f 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -464,7 +464,7 @@ select {
   background-position: calc(100% - 7px) 50%;
   padding-right: 20px;
 }
-input[type="file"] {border: 0; padding-left: 0; padding-right: 0;}
+input[type="file"] {border: 0; padding-left: 0; padding-right: 0; background-color: initial; }
 input[type="submit"] {
   -webkit-appearance: button;
   cursor: pointer;

Marius BALTEANU wrote:

One more fix for an issue introduced by r18177:

[...]

Confirmed.

Committed the fix #31147#note-27 in r18186.

We should make the disabled fields more obvious using the below patch:

Mariuss-MacBook-Pro:redmine mariusbalteanu$ git diff
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 95f857074..026e30013 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -522,6 +522,11 @@ textarea:focus, textarea:active {
   outline: none;
 }

+input:disabled, select:disabled, textarea:disabled {
+  cursor: not-allowed;
+  color: graytext;
+}
+

1. Current:

2. After:

Marius BALTEANU wrote:

We should make the disabled fields more obvious using the below patch:

Committed the fix in r18548. Thank you.