Patch #31147

Add custom styles for all fields

Added by Marius BALTEANU 8 months ago. Updated 2 months ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Go MAEDA% Done:

0%

Category:UI
Target version:4.1.0

Description

Currently, most of the fields (input, textarea, select) don't have any style and the browser renders those fields using its own style (which is different for each browser/OS). The only fields which have a custom style are the fields from login and the custom "Jump to a project" select.

Because of this, it's hard to match some custom styles with the native styles. A good example is the Edit/Preview tabs which have a different border colour from textarea.

I propose to apply the existing custom style to all fields and I'm attaching 2 screenshots with the results and a patch for testing.

border.png (62.7 KB) Marius BALTEANU, 2019-04-04 21:24

redmine.local_issues_new.png (281 KB) Marius BALTEANU, 2019-04-04 21:41

redmine.local_issues.png (552 KB) Marius BALTEANU, 2019-04-04 21:41

variant_distance_of_caret.png (66.7 KB) Bernhard Rohloff, 2019-04-05 15:10

trackers-table@2x.png (36.6 KB) Go MAEDA, 2019-04-06 03:29

issues-table@2x.png (59.4 KB) Go MAEDA, 2019-04-06 03:29

issues-before@2x.png (57.5 KB) Go MAEDA, 2019-04-06 03:37

button-color-in-firefox@2x.png (20 KB) Go MAEDA, 2019-04-06 03:42

0001-Styles-for-fields.patch Magnifier (4.54 KB) Marius BALTEANU, 2019-04-10 01:59

overlapping_caret.png (11.4 KB) Bernhard Rohloff, 2019-04-11 11:36

form_elements_on_dark_GTK_themes.png (48.1 KB) Bernhard Rohloff, 2019-05-15 13:33

note-27@2x.png (11.3 KB) Go MAEDA, 2019-05-21 17:10

after.png (161 KB) Marius BALTEANU, 2019-09-28 19:15

current.png (167 KB) Marius BALTEANU, 2019-09-28 19:15


Related issues

Related to Redmine - Defect #28339: Some parts are unseen with dark theme. New
Related to Redmine - Patch #31204: Add hover styles to buttons Closed
Related to Redmine - Defect #31216: Multiselect elements don't expand anymore Closed
Related to Redmine - Defect #31238: The input field of the Gantt chart page is narrow Closed
Related to Redmine - Patch #31971: Change the color of the input field frame when in focus Closed
Related to Redmine - Defect #32206: Options in a drop-down overlap the down arrow when Altern... Closed
Blocked by Redmine - Defect #31358: No triangle to open dropdowns in Internet Explorer and Edge Closed
Blocked by Redmine - Defect #31371: "Stay logged in" checkbox in Sign in page is misaligned a... Closed

Associated revisions

Revision 18056
Added by Go MAEDA 8 months ago

Add custom styles for all fields (#31147).

Patch by Marius BALTEANU.

Revision 18059
Added by Go MAEDA 8 months ago

Multiselect elements don't expand (#31147, #31216).

Patch by Marius BALTEANU.

Revision 18074
Added by Go MAEDA 8 months ago

input#months on gantt is too narrow (#31147, #31238).

Patch by Mizuki ISHIKAWA.

Revision 18097
Added by Go MAEDA 7 months ago

Remove unnecessary padding (#31147).

Patch by Marius BALTEANU.

Revision 18163
Added by Go MAEDA 7 months ago

Fix that down arrow for dropdowns is broken in Edge and Internet Explorer (#31147, #31358).

Patch by Marius BALTEANU.

Revision 18169
Added by Go MAEDA 7 months ago

Fix that "Stay logged in" checkbox in Sign in page is misaligned (#31147, #31371).

Patch by Marius BALTEANU.

Revision 18177
Added by Go MAEDA 7 months ago

Set background color in order to provide a consistent style on GTK dark themes (#31147).

Patch by Bernhard Rohloff.

Revision 18186
Added by Go MAEDA 7 months ago

Fix unintended background color for fields input[type="file"]. (#31147).

Patch by Marius BALTEANU.

Revision 18548
Added by Go MAEDA 2 months ago

Make the disabled fields more obvious (#31147).

Patch by Marius BALTEANU.

Revision 18602
Added by Go MAEDA 2 months ago

Options in a drop-down overlap the down arrow when Alternate theme is used (#32206, #31147).

Patch by Go MAEDA.

History

#1 Updated by Bernhard Rohloff 8 months ago

  • Related to Defect #28339: Some parts are unseen with dark theme. added

#2 Updated by Bernhard Rohloff 8 months ago

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%;
}

#3 Updated by Go MAEDA 8 months ago

  • Target version set to Candidate for next major release

#4 Updated by Go MAEDA 8 months ago

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

#5 Updated by Bernhard Rohloff 8 months ago

IMHO the extra space between the lines helps my eyes to keep track on a specific row. It would be great to keep the extra space and style the missing tables the same way. But I think, that should be a topic of another issue, right. :)

#6 Updated by Marius BALTEANU 8 months ago

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.

#7 Updated by Marius BALTEANU 8 months ago

  • File deleted (0001-Styles-for-fields.patch)

#8 Updated by Go MAEDA 8 months ago

  • Target version changed from Candidate for next major release to 4.1.0

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

#9 Updated by Go MAEDA 8 months ago

  • Status changed from New to Closed
  • Assignee set to Go MAEDA

Committed the patch. Thank you for improving Redmine.

#10 Updated by Bernhard Rohloff 8 months ago

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.

#11 Updated by Bernhard Rohloff 8 months ago

  • Status changed from Reopened to Closed

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

#12 Updated by Marius BALTEANU 8 months ago

  • Related to Patch #31204: Add hover styles to buttons added

#13 Updated by Bernhard Rohloff 8 months ago

  • Related to Defect #31216: Multiselect elements don't expand anymore added

#14 Updated by Go MAEDA 8 months ago

  • Related to Defect #31238: The input field of the Gantt chart page is narrow added

#15 Updated by Marius BALTEANU 7 months ago

  • Status changed from Closed to Reopened

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;}

#16 Updated by Go MAEDA 7 months ago

  • Status changed from Reopened to Closed

Marius BALTEANU wrote:

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

[...]

Confirmed and committed the fix. Thank you.

#17 Updated by Go MAEDA 7 months ago

  • Status changed from Closed to Reopened

#18 Updated by Go MAEDA 7 months ago

  • Blocked by Defect #31358: No triangle to open dropdowns in Internet Explorer and Edge added

#19 Updated by Go MAEDA 7 months ago

  • Status changed from Reopened to Closed

Committed the fix for issue #31358.

#20 Updated by Go MAEDA 7 months ago

  • Status changed from Closed to Reopened

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

#21 Updated by Go MAEDA 7 months ago

  • Blocked by Defect #31371: "Stay logged in" checkbox in Sign in page is misaligned after r18056 added

#22 Updated by Bernhard Rohloff 7 months ago

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;


#23 Updated by Marius BALTEANU 7 months ago

Go Maeda, just to know, you have committed the change proposed above by Bernhard as part of the #31391.

Please see http://www.redmine.org/projects/redmine/repository/revisions/18175/diff/trunk/public/stylesheets/application.css

#24 Updated by Go MAEDA 7 months ago

Marius BALTEANU wrote:

Go Maeda, just to know, you have committed the change proposed above by Bernhard as part of the #31391.

Sorry, I didn't know the mistake. Do you think if I should revert r18175 and commit #31391 again?

#25 Updated by Marius BALTEANU 7 months ago

Go MAEDA wrote:

Marius BALTEANU wrote:

Go Maeda, just to know, you have committed the change proposed above by Bernhard as part of the #31391.

Sorry, I didn't know the mistake. Do you think if I should revert r18175 and commit #31391 again?

Not really, I think it is enough to revert only the CSS change and committed it again as part of this ticket.

#26 Updated by Go MAEDA 7 months ago

  • Status changed from Reopened to Closed

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

#27 Updated by Marius BALTEANU 7 months ago

  • Status changed from Closed to Reopened

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;

#28 Updated by Go MAEDA 7 months ago

Marius BALTEANU wrote:

One more fix for an issue introduced by r18177:

[...]

Confirmed.

#29 Updated by Go MAEDA 7 months ago

  • Status changed from Reopened to Closed

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

#30 Updated by Go MAEDA 3 months ago

  • Related to Patch #31971: Change the color of the input field frame when in focus added

#31 Updated by Marius BALTEANU 2 months ago

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:

#32 Updated by Go MAEDA 2 months ago

  • Status changed from Reopened to Closed

Marius BALTEANU wrote:

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

Committed the fix in r18548. Thank you.

#33 Updated by Go MAEDA 2 months ago

  • Related to Defect #32206: Options in a drop-down overlap the down arrow when Alternate theme is used added

Also available in: Atom PDF